Jump to:

23007 Posts in 11866 Topics by 2828 members

General Questions

SilverStripe Forums » General Questions » Menu help

General questions about getting started with SilverStripe that don't fit in any of the categories above.

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

Page: 1
Go to End
Author Topic: 1350 Views
  • Lee
    Avatar
    Community Member
    6 Posts

    Menu help Link to this post

    Hi, I'm having trouble displaying ym menu correctly in silverstripe. My menu is as followed;

    -- HTML --

       <ul>
             
             <li class="first"><a href="#" title="Go to the Welcome"><span>Home</span></a></li>
             <li><a href="#" title="Go to the Website design" class="link"><span>Design</span></a></li>
             <li><a href="#" title="Go to the Content management systems" class="link"><span>Content Management Systems</span></a></li>
             <li><a href="#" title="Go to the eCommerce systems" class="link"><span>eCommerce</span></a></li>
             <li><a href="#" title="Go to the Search engine services" class="link"><span>Search</span></a></li>
             <li><a href="#" title="Go to the Pro Image Manager" class="link"><span>PIM</span></a></li>
             <li><a href="#" title="Go to the News" class="link"><span>News</span></a></li>
             <li><a href="#" title="Go to the Our clients" class="link"><span>Our clients</span></a></li>
             <li class="last"><a href="/contact-us/" title="Go to the Contact us" class="link"><span>Contact us</span></a></li>

       </ul>

    -- CSS --

    #nav {
       margin-top: 10px;
       }
    #nav ul {
       padding-left: 0px;
       }
    #nav ul li {
       display:inline;
       border-right:1px solid #CCCCCC;
       }
    #nav ul li.first {
       margin-left: -10px;
       }   
    #nav ul li.last {      
       border-right:none;
       }
    #nav ul li a {
       padding: 10px 10px 10px 10px;   
       color:#999999;
       font-weight:normal;
       font-size:1em;
       }
    #nav li a:hover {   
       text-decoration:underline;
       }

    -- SS --

    <ul>
    <% control Menu(1) %>

    <li class="first">
                   
    <a class="$LinkingMode" href="$Link" title="Go to $Title">$MenuTitle</a>
    </li>

    <% end_control %>
    </ul>

    and that's the code I'm trying to use to display my menu, the problem is that i have a set class for the first list item to reduce the margin so first problem is how to set a class for the first list?

    and secondly all my links are displaying /page.html or which ever the link is straignt after the link.

    Any help would be great, thanks!

  • Willr
    Avatar
    Forum Moderator
    5464 Posts

    Re: Menu help Link to this post

    You can use the $First variable if you want to add a class to the first item. (Also a $Last if you need)

    <% if First %>class="first"<% end_if %>

  • banal
    Avatar
    Community Member
    901 Posts

    Re: Menu help Link to this post

    Yes, as Willr said, or use $FirstLast to get the appropriate class:

    <li class="$FirstLast">

    The above will have class="first" on the first item and class="last" on the last item.

  • Silver
    Avatar
    Community Member
    12 Posts

    Re: Menu help Link to this post

    Hey do you guys know of any tutorials for how to add Mega drop down menus (for navigation).....and have the content controlled through SS? Thank you...

  • Willr
    Avatar
    Forum Moderator
    5464 Posts

    Re: Menu help Link to this post

    Silver - Please do not cross post. If people can / want to answer you they can on the thread you created http://www.silverstripe.org/all-other-modules/show/277078#post277078#post277078. You shouldn't then add replies to threads unrelated to your issue.

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