Jump to:

17452 Posts in 4473 Topics by 1971 members

Archive

SilverStripe Forums » Archive » Menu improvement

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

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

Page: 1 2
Go to End
Author Topic: 4308 Views
  • crazyScripter
    Avatar
    Community Member
    8 Posts

    Menu improvement Link to this post

    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.

  • Sigurd
    Avatar
    Forum Moderator
    628 Posts

    Re: Menu improvement Link to this post

    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

  • crazyScripter
    Avatar
    Community Member
    8 Posts

    Re: Menu improvement Link to this post


    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

  • Tim
    Avatar
    Core Development Team
    201 Posts

    Re: Menu improvement Link to this post

    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

  • Ingo
    Avatar
    Forum Moderator
    801 Posts

    Re: Menu improvement Link to this post

    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.

  • crazyScripter
    Avatar
    Community Member
    8 Posts

    Re: Menu improvement Link to this post

    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...

  • laktek
    Avatar
    Google Summer of Code Hacker
    76 Posts

    Re: Menu improvement Link to this post

    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.

  • pouderStream
    Avatar
    Community Member
    33 Posts

    Re: Menu improvement Link to this post

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

    4308 Views
Page: 1 2
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.