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

DropDown Menus


Reply

7 Posts   2296 Views

Avatar
Russ

21 August 2012 at 10:35pm Community Member, 4 Posts

Hi
I am trying to create Drop Down menu items. Trying to implement the features as per http://cssmenus.co.uk I have read all the article and created files in the layout section but at the most can only get it to display a entire site menu in the header section. Can anyone please help with this
Much Appreciated. I am using the cloudy theme

Avatar
Webdoc

23 August 2012 at 2:10am Community Member, 332 Posts

themes/yourtheme/templates/Includes/Navigation.ss

<ul>
   <% control Menu(1) %>
   <% if Children %>
   <li class="$LinkingMode"><a href="$Link" title="$Title.XML"><b>$MenuTitle.XML</b></a>
         <ul class="sub-menu">
         <% control Children %>
         <li><a href="$Link" title="$Title.XML" class="$LinkingMode"><span>$MenuTitle.XML</span></a></li>
         <% end_control %>
         </ul>
   </li>
   <% else %>
   <li class="$LinkingMode"><a href="$Link" title="$Title.XML"><b>$MenuTitle.XML</b></a></li>
   <% end_if %>
   <% end_control %>
</ul>


Layout.css
   

#menu ul {
      float: right;
      margin-right: 10px;
   }
      #menu ul li {
          list-style: none;
         margin: 0 3px;
         float: left;
         line-height:34px;
         display: block;
         background:transparent;
      }
         #menu ul li a {
            float: left;
            text-decoration: none;
            display: block;
            font-size: 14px;
            padding: 8px 5px 8px 5px;
            color: #FFF;
            font-weight:700;
            text-transform:uppercase;
         }
         #menu li ul.sub-menu {
   display:none;
}
#menu li:hover ul {
   display: block;
   list-style: none;
   position: absolute;
   margin:50px 0 0 -4px;
   padding: 0;
   width:180px;
   background:#000;
   -webkit-border-radius:5px;
    -moz-border-radius:5px;
       border-radius:5px;
            behavior: url(themes/blackcandy/css/border-radius.htc);
   }
#menu li:hover ul.submenu li {
          list-style: none;
         margin: 0 3px;
         float: left;
         line-height:34px;
         display: block;
   }
#menu {
background-color: #ec1828;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
    box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
      -webkit-border-radius:5px;
    -moz-border-radius:5px;
       border-radius:5px;
            behavior: url(themes/blackcandy/css/border-radius.htc);
float: right;
margin: 40px auto 0;
padding: 4px 30px;
position: relative;
z-index: 1;
   width:650px;
}

Avatar
Russ

23 August 2012 at 6:14pm Community Member, 4 Posts

I have modified the code but have got the menus display like a site map. I have attached layout and navigation files.

I have missed something fundamental that is critical to making this work.

Thanks for your help with this. If you need any other files please let me know

Attached Files
Avatar
Webdoc

24 August 2012 at 4:52am Community Member, 332 Posts

change #menu to #navbar in layout

Avatar
Russ

27 August 2012 at 6:55pm Community Member, 4 Posts

I have changed all the #menu listings to #navbar but still get the same result. The cloudy theme that I downloaded from the silverstrip website had the layout.css file empty except for a reference at the top to say file was there because cms required it but there was no content. I am thinking it may not reference in the standard way.

Avatar
Russ

28 August 2012 at 3:25pm Community Member, 4 Posts

got it going. Tested this on another theme worked straight away. Using the cloudy theme has mobile app built in so required modification. The standard layout file was blank. Went through the code and got it going, thanks

Avatar
liapakis

8 October 2012 at 5:47pm Community Member, 1 Post

I would be very thankful to you as I too search for the same few days back :-)