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.

Themes /

Discuss SilverStripe Themes.

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

CSS Navigation


Reply


3 Posts   1093 Views

Avatar
Valorinbattle

Community Member, 95 Posts

27 June 2011 at 9:23am

I'm not sure if this is possible. Right now, I'm using the Navigation.ss that says this:
<ul>
   <% control Menu(1) %>   
      <li><a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode"><span>$MenuTitle.XML</span></a></li>
   <% end_control %>
   
</ul>

But in doing this, all my top nav buttons are displaying the exact same except for .current, .active
I'm wanting to use .css to specify a different background image for each top nav button, but still have silverstripe generate the navigation. I know I could hardcode each individual nav button and just do away with the control Menu(1) but I'd really like to find a way a to specify individual backgrounds for each button while still using control Menu(1). Is this possible?

Many thanks!

~ James

Avatar
Willr

Forum Moderator, 5513 Posts

27 June 2011 at 10:36pm

Many options to do with this, normally what I do is use $URLSegment is add a class to each item - <li class="{$URLSegment}-nav"> which will then give out home-nav, about-us-nav, etc etc. The downside of that is that fact users can't change the url segment of page without breaking things, then again I've found it quite rare that they change top level menus. I always put a default case of li { display: none; } if I use that method so that if they change a url, the worst that happens is the menu item disappears. You could make it more robust by removing the ability to change the urlsegment on just those pages.

Avatar
Valorinbattle

Community Member, 95 Posts

28 June 2011 at 3:55am

Willr, thanks for the response. I was hoping to find something just like what you suggested. So I actually replaced the Navigation.ss with the following Menu1.ss to provide css-based dropdown menus. So what would I need to change in this code to use the $URLSegment code you suggest. This seems to be exactly the solution I'm looking for. Thanks for your help!
~ James

<!-- [if IE6]><div id="IE6"><![endif]-->
<ul id="menu1">

<% control Menu(1) %>
<% if Children %>
<li class="top $LinkingMode"><a href="$Link" class="top_link" title="Go to $Title"><span>$MenuTitle</span><!--[if gte IE 7]><!--></a><!--<![endif]-->

         <!--[if lte IE 6]><table><tr><td><![endif]-->

         <ul class="sub1">
<% control Children %>
<% if Children %>
<li class="top $LinkingMode"><a href="$Link" class="top_link" title="Go to $Title"><span>$MenuTitle</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub1">
<% control Children %>
<li><a href="$Link" title="Go to $Title" class="fly $LinkingMode">$MenuTitle</a></li>
<% end_control %>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<% else %>

<li><a href="$Link" title="Go to $Title" class="fly $LinkingMode">$MenuTitle</a></li>
<% end_if %>
<% end_control %>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<% else %>
<li class="top $LinkingMode"><a href="$Link" class="top_link" title="Go to $Title"><span>$MenuTitle</span></a></li>
<% end_if %>
<% end_control %>
</ul>

<!-- [if IE6]></div><![endif]-->