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.

General Questions

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

Drop Down Menus with Silverstripe


Reply

40 Posts   14886 Views

Avatar
hive.net.au

7 August 2009 at 11:22am Community Member, 40 Posts

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

Avatar
DrWebGuy

7 August 2009 at 12:44pm Community Member, 16 Posts

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]-->

Avatar
hive.net.au

7 August 2009 at 12:55pm Community Member, 40 Posts

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]-->

Avatar
DrWebGuy

7 August 2009 at 1:24pm Community Member, 16 Posts

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.

Avatar
hive.net.au

7 August 2009 at 1:28pm Community Member, 40 Posts

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

http://conag.com.au

Avatar
DrWebGuy

7 August 2009 at 5:19pm Community Member, 16 Posts

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!!

Avatar
Juanitou

8 August 2009 at 3:02am Community Member, 323 Posts

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

Avatar
ulysses

12 November 2009 at 1:22am (Last edited: 12 November 2009 1:43am), Community Member, 57 Posts

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