Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Archive

Our old forums are still available as a read-only archive.

Moderators: martimiz, Sean, biapar, Willr, Ingo, simon_w

Menu improvement


Go to End
Reply

10 Posts   4424 Views

Avatar
crazyScripter

11 April 2007 at 11:32pm Community Member, 8 Posts

Hello to all!
I need your help!
I use menu with such html:
<td class="MenuTd" id="$LinkName">
<td class="MenuDividerTd">&nbsp;</td>
<td class="MenuTd" id="$LinkName">
<td class="MenuDividerTd">&nbsp;</td>

I use following code in template

<td class="MenuTd" id="$LinkName">
<% if LinkOrSection = link %>
   <td class="MenuDividerTd">&nbsp;</td>
<% end_if %>

The aim is when some item selected then divider on the left and on the right should not appear. I'm not showing right divider, but how to get rid of left divider?

Sample code highly appreciated.

Avatar
Sigurd

12 April 2007 at 6:13pm Forum Moderator, 628 Posts

We do a similar thing for the very website you are on.

The www.SilverStripe.com menu code is:

<ul id="Menu1">
<% control Menu1 %>
<li class="$LinkingMode $FirstLast">
<a href="$Link" title="Go to the &quot;{$Title.XML}&quot; page">$MenuTitle.XML</a>
</li><% end_control %>
</ul>

You will see by doing a view-source of this page, that $FirstLast allows us to have "first" and "last" classes which can either add or remove CSS, for the borders or other graphical elements that separate menu items.

I would suggest that you change your menu system to not use table-based layouts, by the way :)

Avatar
crazyScripter

14 April 2007 at 5:13am Community Member, 8 Posts

:)
I think you didn't got my idea right. I do not need different styles on the first and last menu item, but I need specific styles for item before selected and after selected... Any idea?
BTW, menu on tables is not very awful when you use fixed layout and graphical buttons :)

Avatar
Tim

14 April 2007 at 7:43pm Core Development Team, 201 Posts

Can you give an example of the the sort of menu you mean? Just want to be sure I know exactly what your after before i give you some code :-)

Avatar
Ingo

14 April 2007 at 8:15pm Forum Moderator, 801 Posts

hm, seems to be a quite specific case that we don't cover generically in the underlying class (sapphire/core/model/DataObjectSet.php).
as your "divider" just seems to be a presentational element, i would suggest using CSS, in combination with the pagecontrols already in silverstripe (http://doc.silverstripe.com/doku.php?id=built-in-page-controls).

you can e.g. use <% if LinkOrCurrent = current %> to find out the current page, and apply different classes (or different markup) to this node.

Avatar
crazyScripter

14 April 2007 at 8:49pm Community Member, 8 Posts

I'll try to type what menu I have (menu is in graphic)...

When no item selected:

News | Firm Profile | Contact Us | News

"|" - is a divider

When some item selected it will look like:

News Firm Profile Contact Us | News

"Firm profile" is selected item - it has no divider on the left and on the right - it only have different look.

Any ideas? I know that this style is not common, but I don't know what to do execpt using javascript for deleting unnecessary dividers...

Avatar
laktek

15 April 2007 at 7:02pm Google Summer of Code Hacker, 76 Posts

What I suggest you is get rid of the "divider" cell and have a another class for menu cell to add left and right borders depending on the state of $LinkOrSection.

So the resulting code would look like this :
<td class="MenuTd $LinkOrCurrent" id="$LinkName"></td>

so in your CSS you can define two classes like this;

.link {
border-left : 1px solid #000;
border-right : 1px solid #000;
}

.current {
border : none;
}

Anyway I also recommend you to use Semantically correct code, if you do so you could have all your presentational items maintained inside CSS and avoid extra markup, which would make your code complex.

Avatar
pouderStream

16 April 2007 at 10:09am (Last edited: 16 April 2007 10:57am), Community Member, 33 Posts

Hmm.. where did u guys found $LinkName? Is this built in or something?

Any ideas how to achive 3(+3 on click or in section) case css menu. I'm using tree different classes for menu (because I use color pictures) and don't know how to differ menu links?

So: Link01 Link02 Link03

Every link is styled differently with custom background picture. So any ideas how could I iterate that?

EDIT 01:
I found solution...since I have same css classes names in different .css files, all I had to do is

<% control Page(company) %>
<li class="podjetje"><a href="$Link" class="apodjetje">$MenuTitle</a></li>
<% end_control %>

So I have 3 .css files. In all three I have .podjetje and .apodjetje declared with different values, so when file changes(different page type or .ss template if u like) my visual apperance changes ;)
I could investigate it further with current or section if I'd like, but I don't need that right now(css does everything).

Go to Top