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   4481 Views

Avatar
crazyScripter

Community Member, 8 Posts

11 April 2007 at 11:32pm

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

Forum Moderator, 628 Posts

12 April 2007 at 6:13pm

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

Community Member, 8 Posts

14 April 2007 at 5:13am

:)
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

Core Development Team, 201 Posts

14 April 2007 at 7:43pm

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

Forum Moderator, 801 Posts

14 April 2007 at 8:15pm

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

Community Member, 8 Posts

14 April 2007 at 8:49pm

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

Google Summer of Code Hacker, 76 Posts

15 April 2007 at 7:02pm

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

Community Member, 33 Posts

16 April 2007 at 10:09am

Edited: 16/04/2007 10:57am

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