Jump to:

22997 Posts in 11844 Topics by 2828 members

General Questions

SilverStripe Forums » General Questions » Drop Down Menus with Silverstripe

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

Page: 1 2 3 4 5
Go to End
Author Topic: 14206 Views
  • hive.net.au
    Avatar
    Community Member
    40 Posts

    Re: Drop Down Menus with Silverstripe Link to this post

    As much as I know you would not want to hear this mine works fine? Could you paste up your source code?

  • DrWebGuy
    Avatar
    Community Member
    16 Posts

    Re: Drop Down Menus with Silverstripe Link to this post

    I will post it in two sections - the css and then the silverstripe code. Honestly I have made almost no changes from the files that you posted. Check out www.bmcsports.com if you will and see if it gives you the same symptoms.

    Thank you so much for your help.

    Here is the css code:

    #pad {height:135px;}
    /* ================================================================
    This copyright notice must be untouched at all times.

    The original version of this stylesheet and the associated (x)html
    is available at http://www.cssmenus.co.uk
    Copyright (c) 2009- Stu Nicholls. All rights reserved.
    This stylesheet and the associated (x)html may be modified in any
    way to fit your requirements.
    =================================================================== */
    #menu1 {padding:0; margin-top:0px; list-style:none; height:30px; position:relative; z-index:500; font-family:arial, verdana, sans-serif; }
    #menu1 li {float:left; margin-right:1px;}
    #menu1 li a {display:block; float:left; height:30px; line-height:30px; color:#000; text-decoration:none; font-weight:bold; padding:0 30px 0 25px; opacity:.90; filter: alpha(opacity:90); }

    #menu1 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

    /* Default link styling */

    /* Style the list OR link hover. Depends on which browser is used */

    #menu1 li a:hover {z-index:200; position:relative;color:#fff; }
    #menu1 li:hover {position:relative; z-index:200;}

    #menu1 li:hover > a {color:#fff; background:#f8b101;}
    #menu1 li:hover > a.sub {color:#fff; background-color:#f8b101;}

    #menu1 li.current a {color:#fff; background:#3e3e3e;}

    #menu1 li a.sub {background: #E3E3E3;}
    #menu1 li.current a.sub {color:#fff; background:#3e3e3e /* url(../images/down-arrow.gif) no-repeat right center */ ;}

    #menu1 :hover ul {left:0; top:30px; width:120px; background:#444;}

    /* keep the 'next' level invisible by placing it off screen. */
    #menu1 ul,
    #menu1 :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

    #menu1 :hover ul :hover ul
    {left:120px; top:-1px; background:#f8b101; white-space:nowrap; width:100px; z-index:200; height:auto;}

    #menu1 :hover ul li {margin:0; border-top:1px solid #666;}
    #menu1 :hover ul li a {width:180px; padding:0; text-indent:10px; background:#333; color:#ccc; height:30px; line-height:30px;}
    #menu1 :hover ul li a.fly {background:#333 /* url(../images/right-arrow.gif) no-repeat right center */ ;}

    #menu1 :hover ul :hover {background-color:#f8b101; color:#fff;}
    #menu1 :hover ul :hover a.fly {background-color:#f8b101; color:#fff;}

    #menu1 :hover ul li.currentsub a {background:#595959; color:#fff;}
    #menu1 :hover ul li.currentsub a.fly {background:#595959 /* url(../images/right-arrow.gif) no-repeat right center */ ; color:#fff;}

    #menu1 :hover ul :hover ul li a {width:180px; padding:0; text-indent:10px; background:#3e3e3e; color:#ccc;}
    #menu1 :hover ul :hover ul :hover {background-color:#f8b101; color:#fff;}

    #menu1 :hover ul :hover ul li.currentfly a,
    #menu1 :hover ul :hover ul li.currentfly a:hover {background:#595959; color:#fff;}

    And here is the Silverstripe code:

    <!-- [if IE6]><div id="IE6"><![endif]-->
    <ul id="menu1">
       <% control Menu(1) %>
          <% if Children %>
             <li class="$LinkingMode"><a href="$Link" class="sub" title="View more info about $Title"><span>$MenuTitle</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
                <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul class="fly $LinkingMode">
                   <% control Children %>
                      <% if Children %>
    <li class="$LinkingMode"><a href="$Link" class="fly" title="View more info about $Title"><span>$MenuTitle</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
                <ul>
                   <% control Children %>
    <li><a href="$Link" title="View more about $Title" class="$LinkingMode">$MenuTitle</a></li>
    <% end_control %>
    </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
             </li>
    <% else %>   

    <li><a href="$Link" title="View more about $Title" class="fly $LinkingMode">$MenuTitle</a></li>
    <% end_if %>
                   <% end_control %>
                </ul>
             <!--[if lte IE 6]></td></tr></table></a><![endif]-->
             </li>
          <% else %>   
             <li class="$LinkingMode"><a href="$Link" class="top_link" title="View more info about $Title"><span>$MenuTitle</span></a></li>
          <% end_if %>
       <% end_control %>
    </ul>
    <!-- [if IE6]></div><![endif]-->

  • hive.net.au
    Avatar
    Community Member
    40 Posts

    Re: Drop Down Menus with Silverstripe Link to this post

    Try this it may have something to do with the fly class

    <!-- [if IE6]><div id="IE6"><![endif]-->
    <ul id="menu1">
    <% control Menu(1) %>
    <% if Children %>
    <li class="$LinkingMode"><a href="$Link" class="sub" title="View more info about $Title"><span>$MenuTitle</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class="fly $LinkingMode">
    <% control Children %>
    <% if Children %>
    <li class="$LinkingMode"><a href="$Link" class="fly" title="View more info about $Title"><span>$MenuTitle</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
    <% control Children %>
    <li><a href="$Link" title="View more about $Title" class="$LinkingMode">$MenuTitle</a></li>
    <% end_control %>
    </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <% else %>

    <li><a href="$Link" title="View more about $Title" class="$LinkingMode">$MenuTitle</a></li>
    <% end_if %>
    <% end_control %>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <% else %>
    <li class="$LinkingMode"><a href="$Link" class="top_link" title="View more info about $Title"><span>$MenuTitle</span></a></li>
    <% end_if %>
    <% end_control %>
    </ul>
    <!-- [if IE6]></div><![endif]-->

  • DrWebGuy
    Avatar
    Community Member
    16 Posts

    Re: Drop Down Menus with Silverstripe Link to this post

    It's still not working. What is the url to the site where you have this implemented? I would like to check it in my browser.

  • hive.net.au
    Avatar
    Community Member
    40 Posts

    Re: Drop Down Menus with Silverstripe Link to this post

    not a bad idea... why did i think of that. sorry

    http://conag.com.au

  • DrWebGuy
    Avatar
    Community Member
    16 Posts

    Re: Drop Down Menus with Silverstripe Link to this post

    Well FINALLY, after about 4 hours of debugging, I isolated the culprit! It evidently is a problem with the "overflow: auto;" feature. I modified the contentContainer section as follows:

    #ContentContainer {
       clear:left;
       background: #fff;

       padding-top:20px;
       padding-bottom:20px;
       width:900px; /* ADDED THIS LINE */
       display:inline-block; /* ADDED THIS LINE */
    /*   overflow: auto; */ /* COMMENTED THIS LINE OUT */
    }

    Works like a charm now.

    Thanks for all your help!!

  • Juanitou
    Avatar
    Community Member
    322 Posts

    Re: Drop Down Menus with Silverstripe Link to this post

    Hi!

    Thanks DrWebGuy! This floats disappearing in Firefox were driving me crazy…

    Could you please develop why it is «evident» that the problem was the overflow:auto? I think that this propriety had to be added there for layout stability, it was certainly not arbitrary, but I stupidly did not comment that line.

    Best regards,
    Juan

  • ulysses
    Avatar
    Community Member
    57 Posts

    Re: Drop Down Menus with Silverstripe Link to this post

    Hi DrWebGuy,

    I like the site you have put together http://www.bmcsports.com/ using SilverStripe CMS.

    Can you please help me implement the drop down for my site, http://www.sunnynook.school.nz/ which uses OLIVESUNSET theme.

    I am looking at adding the drop down menu.

    Menu.css is in the \themes\olivesunset\css folder
    Menu.ss is in the \themes\olivesunset\templates\includes folder
    Page.ss is in the \themes\olivesunset\templates folder which has the content

          <div id="Navigation">
             <% include Navigation %>
             <% include Menu %>
           </div>

    Have added the code <% include Menu %>

    The normal Horizontal NAV menu is displayed but the drop down does not appear. What am I missing?

    See: http://www.sunnynook.school.nz/

    Can you help please?

    Thanks

    Mauricio

    14206 Views
Page: 1 2 3 4 5
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.