Jump to:

1382 Posts in 491 Topics by 521 members

Themes

SilverStripe Forums » Themes » CSS Navigation

Discuss SilverStripe Themes.

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

Page: 1
Go to End
Author Topic: 1031 Views
  • Valorinbattle
    Avatar
    Community Member
    95 Posts

    CSS Navigation Link to this post

    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

  • Willr
    Avatar
    Forum Moderator
    5497 Posts

    Re: CSS Navigation Link to this post

    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.

  • Valorinbattle
    Avatar
    Community Member
    95 Posts

    Re: CSS Navigation Link to this post

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

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