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

Avatar
hive.net.au

Community Member, 40 Posts

7 August 2009 at 11:22am

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

Avatar
DrWebGuy

Community Member, 16 Posts

7 August 2009 at 12:44pm

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

Community Member, 40 Posts

7 August 2009 at 12:55pm

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

Community Member, 16 Posts

7 August 2009 at 1:24pm

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

Community Member, 40 Posts

7 August 2009 at 1:28pm

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

http://conag.com.au

Avatar
DrWebGuy

Community Member, 16 Posts

7 August 2009 at 5:19pm

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

Community Member, 323 Posts

8 August 2009 at 3:02am

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

Community Member, 57 Posts

12 November 2009 at 1:22am

Edited: 12/11/2009 1:43am

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