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.

Template Questions /

spacing horzontal top menu - so no space at right


Reply


5 Posts   470 Views

Avatar
Futureweb

Community Member, 233 Posts

27 September 2011 at 11:17am

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

Avatar
Sticks

Community Member, 31 Posts

27 September 2011 at 12:38pm

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: [url]http://doc.silverstripe.org/sapphire/en/reference/built-in-page-controls[/url]

Avatar
Futureweb

Community Member, 233 Posts

27 September 2011 at 12:47pm

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

Avatar
Willr

Forum Moderator, 5513 Posts

27 September 2011 at 7:28pm

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>

Avatar
Sticks

Community Member, 31 Posts

27 September 2011 at 7:37pm

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.