Jump to:

5537 Posts in 1737 Topics by 1223 members

Customising the CMS

SilverStripe Forums » Customising the CMS » Drop Down Menu

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

Page: 1
Go to End
Author Topic: 2386 Views
  • rach999
    Avatar
    Community Member
    4 Posts

    Drop Down Menu Link to this post

    Hi Again,

    I have now changed my code creating a vertical menu which expands to the side. It all works fine apart from the top level of navigation which doesnt seem to pick up the style?

    This is the .ss code:

    <% if Menu(1) %>
    <ul class="menu">
    <% control Menu(1) %>
    <li><a href="$Link" title="$MenuTitle" class="$LinkingMode">$MenuTitle</a>

    <% if LinkOrSection = section %>
    <ul>
    <% control Children %>
    <li class="$LinkingMode <% if FirstLast %>$FirstLast<% end_if %>">
    <a href="$Link" title="$MenuTitle" class="$LinkingMode">$MenuTitle</a>

                       <% if LinkOrSection = section %>
    <ul>
    <% control Children %>
    <li class="$LinkingMode <% if FirstLast %> $FirstLast<% end_if %>">
    <a href="$Link" title="$MenuTitle" class="$LinkingMode">$MenuTitle</a>
                                  
                                   <% if LinkOrSection = section %>
    <ul>
    <% control Children %>
    <li class="$LinkingMode <% if FirstLast %> $FirstLast<% end_if %>">
    <a href="$Link" title="$MenuTitle" class="$LinkingMode">$MenuTitle</a>
    </li>
    <% end_control %>
    </ul>

    <% end_if %>
    </li>
    <% end_control %>
    </ul>

    <% end_if %>
    </li>
    <% end_control %>
    </ul>
    <% end_if %>

    </li>
    <% end_control %>
    </ul>
    <% end_if %>

    Because the top level of the nav has link which drop to a sub level I need the .ss to pick up on that but I am unsure of how to change the .ss? At the moment the first level links are without a class at all then the second level picks up fine?

    Any help would be great!

    Thanks

    Rachael

  • theAlien
    Avatar
    Community Member
    131 Posts

    Re: Drop Down Menu Link to this post

    Hi Rachael,

    Welcome to SilverStripe.
    I guess you're referring to this post.

    As you're talking about styles, I do think this is all about CSS.
    And as you modified some of the .ss, I'm pretty sure you also modified the .css.
    If not: you should.

    With as little information as I have, I'd say: make things easy for yourself and add some classes to you're firstlevel.

    PS1 If you reply to an old post, you'll bump it; that way it is easier for you're helpers to find out what you're trying to do.
    PS2 In SilverStripe 'CMS' means the backend (and mainly the code behind the backend). You're working on template-level, which has to do with how the frontend appears to your visitors. I'm pretty sure I made those mistakes in the beginning. But hey we're here to learn

  • rach999
    Avatar
    Community Member
    4 Posts

    Re: Drop Down Menu Link to this post

    Hello,

    I have changed my navigation to a flyout menu now. Which is showing the first two levels of the navigation. Unfortunately I can not get it to show more than that? I have tried changing all my children controls without any luck.

    This is my full sidebar nav:

    <div id="NavWhite">
    <div id="NavHold" class="menu">

    <ul>
    <% control Menu(1) %>
    <li><a class="$LinkingMode" href="$Link" title="Go to the &quot;{$Title}&quot; page">$MenuTitle</a>
    <% if Children %>
    <ul>
    <% control Children %>
    <li class="$LinkingMode"><a href="$Link" title="Go to the $Title page">$MenuTitle</a></li>
    <% end_control %>
    </ul>
          <% end_if %>
          </li>
    <% end_control %>
    </ul>
       
    <div id="SearchHold">$SearchForm</div>
    </div>
    </div>

    Does anyone know what i need to add to this to show my third and fourth level of sub categories? A link to a tutorial would be great even. I would appreciate someone explaining what the above is doing so i can understand this more and then work it out for myself. I got this far.

    Here is my .css

    I can't see any problems in here that would effect my other sub levels but let me know if you do! (ignore images i have used they are all the same at the moment.)

    #menu {font-family: arial, sans-serif; width:190px; margin:0; font-size:14px;}
    .menu ul li a, .menu ul li a:visited {
       display:block; text-decoration:none; color:#fff; width:190px; height:20px; text-align:left; border-top:1px solid #fff; border-bottom:1px solid #fff;
       background-image: url(../images/navigation1.png); line-height:19px; font-size:14px; padding:10px 0px 10px 10px;}
    .menu ul {padding:0; margin:0;list-style-type: none; }
    .menu ul li {float:left; margin-right:1px; position:relative;}
    .menu ul li ul {display: none;}

    /* specific to non IE browsers */
    .menu ul li:hover a {color:#fff; background-image: url(../images/navigation1_hover.png);}
    .menu ul li:hover ul {display:block; position:absolute; top:-84px; left:200px; width:190px;}
    .menu ul li:hover ul li a.hide {background-image: url(../images/navigation1_hover.png); color:#000;}
    .menu ul li:hover ul li:hover a.hide {width:190px;}
    .menu ul li:hover ul li ul {display: none;}
    .menu ul li:hover ul li a {display:block; background-image: url(../images/navigation1.png); color:#fff; width:190px;} /* second level bg*/
    .menu ul li:hover ul li a:hover {background-image: url(../images/navigation1_hover.png); color:#fff;}
    .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:200px; top:0; color:#fff;}
    .menu ul li:hover ul li:hover ul li a {display:block; width:190px; background-image: url(../images/navigation1_curr.png); color:#fff;}
    .menu ul li:hover ul li:hover ul li a:hover {background-image: url(../images/navigation1_hover.png); color:#fff;}

    If I could understand the workings a bit better with some help im sure i can work it out.

    Thanks

    Rachael

  • patjnr
    Avatar
    Community Member
    101 Posts

    Re: Drop Down Menu Link to this post

    Hi

    Avoid controling children in this case. instead of that use.

    you have two choices.
    1. Menu. ....global scope
    2. Level ....local scope

    <% control Menu(x) %>
    or

    <% control Level(x) %>

    where x is the level you want to control.

    ta

  • Silver
    Avatar
    Community Member
    12 Posts

    Re: Drop Down Menu 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....

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