Jump to:

3435 Posts in 1026 Topics by 866 members

Template Questions

SilverStripe Forums » Template Questions » spacing horzontal top menu - so no space at right

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

Page: 1
Go to End
Author Topic: 451 Views
  • Futureweb
    Avatar
    Community Member
    232 Posts

    spacing horzontal top menu - so no space at right Link to this post

    My site, like many others, has a menu bar with 6 or 7 main menu links horizontally at the top

    I'm using ul > li > a html strucuture, and i've set a width, and margin right for each link.

    However, the link on the far right shouldn't have a margin-right, becuase i want it flush against the right side of the page.

    So, two questions:
    is it possible to add an extra css tag to the 'last' link to the displayed in menu level 1. -(I could reference an ID of the link, but if the menu is changed by the client this ID moves too)

    2ndly: what if the client adds another top level menu - does anyone know any nifty tricks to adjust the widths of all the menus so that they still fit neatly filling the one line...

    many thanks

  • Sticks
    Avatar
    Community Member
    29 Posts

    Re: spacing horzontal top menu - so no space at right Link to this post

    Hi Jonshutt,

    You could use a CSS selector like the one below, which should work but may have problems in some browsers.

    ul#mainNav li:last-child{margin-right: 0;}

    Or :first-child, depending on how you've aligned the list items.

    There is a SilverStripe way to do it using the <% if Last %> statement in your template and assigning a separate class or id to that item.

    <ul id="mainNav">
    <% control Menu(1) %>
    <% if Last %>
    <li id="lastNavLink">...</li>
    <% else %>
    <li class="navLink">...</li>
    <% end_if>
    <% end_control %>
    </ul>

    And then the CSS could look like this:

    ul#mainNav li.navLink {margin-right: 10px;}
    ul#mainNav li#lastNavLink {margin-right: 0;}

    I found that <% if Last %> statement in this super handy Page Controls page: http://doc.silverstripe.org/sapphire/en/reference/built-in-page-controls

  • Futureweb
    Avatar
    Community Member
    232 Posts

    Re: spacing horzontal top menu - so no space at right Link to this post

    Great!

    I was trying to avoild the css last-child thing, but the SS class works great

    i've simply used it like this:

    <li <% if Last %>class="lastNavLink"<% end_if %> >

  • Willr
    Avatar
    Forum Moderator
    5490 Posts

    Re: spacing horzontal top menu - so no space at right Link to this post

    You can also use $FirstLast which will return 'first', 'last' or ''. It's also described on the page controls page linked to above.

    <li class="$FirstLast">..</li>

  • Sticks
    Avatar
    Community Member
    29 Posts

    Re: spacing horzontal top menu - so no space at right Link to this post

    Cheers Willr, I skimmed over that $FirstLast mention on the doc and didn't quite catch what it did. That looks perfect, I'll definitely give it a go on my next project.

    451 Views
Page: 1
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.