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.

General Questions /

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

Menu help


Reply


5 Posts   1443 Views

Avatar
Lee

Community Member, 6 Posts

15 January 2010 at 4:52am

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!

Avatar
Willr

Forum Moderator, 5513 Posts

15 January 2010 at 12:22pm

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

Avatar
banal

Community Member, 901 Posts

15 January 2010 at 7:34pm

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.

Avatar
Silver

Community Member, 12 Posts

20 January 2010 at 7:00pm

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

Avatar
Willr

Forum Moderator, 5513 Posts

20 January 2010 at 7:12pm

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.