Jump to:

1384 Posts in 493 Topics by 522 members

Themes

SilverStripe Forums » Themes » DropDown Menus

Discuss SilverStripe Themes.

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

Page: 1
Go to End
Author Topic: 2253 Views
  • Russ
    Avatar
    Community Member
    4 Posts

    DropDown Menus Link to this post

    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

  • Webdoc
    Avatar
    Community Member
    332 Posts

    Re: DropDown Menus Link to this post

    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;
    }

  • Russ
    Avatar
    Community Member
    4 Posts

    Re: DropDown Menus Link to this post

    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
  • Webdoc
    Avatar
    Community Member
    332 Posts

    Re: DropDown Menus Link to this post

    change #menu to #navbar in layout

  • Russ
    Avatar
    Community Member
    4 Posts

    Re: DropDown Menus Link to this post

    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.

  • Russ
    Avatar
    Community Member
    4 Posts

    Re: DropDown Menus Link to this post

    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

  • liapakis
    Avatar
    Community Member
    1 Post

    Re: DropDown Menus Link to this post

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

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