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   2389 Views

Avatar
Russ

Community Member, 4 Posts

21 August 2012 at 10:35pm

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

Community Member, 332 Posts

23 August 2012 at 2:10am

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

Community Member, 4 Posts

23 August 2012 at 6:14pm

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

Community Member, 332 Posts

24 August 2012 at 4:52am

change #menu to #navbar in layout

Avatar
Russ

Community Member, 4 Posts

27 August 2012 at 6:55pm

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

Community Member, 4 Posts

28 August 2012 at 3:25pm

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

Community Member, 1 Post

8 October 2012 at 5:47pm

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