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.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

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

Drop Down Menus with Silverstripe


Go to End


40 Posts   20021 Views

Avatar
mhdesign

Community Member, 216 Posts

19 November 2009 at 2:24pm

Edited: 19/11/2009 2:32pm

Thanks to all who posted on this topic, especially willr. I'm trying to do a simple two level dropdown on a custom template that I am building and have struck a problem. Downloaded Menu1.ss and installed, then added the include code to HomePage.ss and Page.ss. Rebuilt database and went back to site to find an error page which said, amongst other things, the following:

/**
269 	 * Used by <% include Identifier %> statements to get the full
270 	 * unparsed content of a template file.
271 	 * 
272 	 * @uses getTemplateFile()
273 	 * @param string $identifier A template name without '.ss' extension or path.
274 	 * @return string content of template
275 	 */
276 	public static function getTemplateContent($identifier) {
277 		return file_get_contents(SSViewer::getTemplateFile($identifier));
278 	}
279 	
280 	/**
281 	 * @ignore
282 	 */
283 	static private $flushed = false;

Can anybody point me in the right direction?

Avatar
ulysses

Community Member, 57 Posts

19 November 2009 at 2:43pm

I was recently helped by another SS user community.

I changed the standard Olivesunet theme to incroporate the drop down menus and they work really well on both FF & IE.

See the implementation at: http://www.sunnynook.school.nz/

Here is what you need to do.

The CSS is from cssmenus.co.uk so if you need more information on how the CSS works check that out. Remember to back up your files before changing them in case something goes bad.

Ok first open the Navigation.ss file which is in themes/themename/templates/includes/

It currently looks like the following (hopefully)

-----------------------------------------------------------------------------
<ul>
<% control Menu(1) %>
<li><a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode"><span>$MenuTitle</span></a></li>
<% end_control %>
</ul>
-----------------------------------------------------------------------------

You want to change it to be this:

-----------------------------------------------------------------------------Copy below line

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

-----------------------------------------------------------------------------Stop Copying

This should allow for 2 layers deep.

Next step is to add the CSS you can either add as a new file or i just recommend adding it to the end of the layout.css file located in theme/themename/CSS/

Add the following. At the very end of the file.

-----------------------------------------------------------------------------Copy below line

/* Drop Down Menu 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:10px; position:relative; z-index:500;}
#menu1 li {float:left; margin-right:1px;}
#menu1 li a {display:block; float:left; height:10px; line-height:30px; color:#000; text-decoration:none; font-weight:normal; padding:0 30px 0 25px;}

#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:#8d8c5b;}
#menu1 li:hover > a.sub {color:#fff; background-color:#8d8c5b;}

#menu1 li.current a {color:#fff; background:#8d8c5b;}

#menu1 li a.sub {background: url(../images/down-arrow.gif) no-repeat right center;}
#menu1 li.current a.sub {color:#fff; background:#8d8c5b 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:#8d8c5b; 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:#8d8c5b; color:#fff;}
#menu1 :hover ul :hover a.fly {background-color:#8d8c5b; 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:#8d8c5b; color:#fff;}

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

-----------------------------------------------------------------------------Stop Copying

I also had to change the following in the #Navigation section:

/*** Main Nav ***/
#Navigation {
width: 710px;
height: 3em;
margin: 0;
/* overflow: hidden; */
overflow: visible;
background: #7e7d49 url(../images/o_menu_bg.png) no-repeat center bottom;
}

Note: see that the code "overflow: hidden" has been commented out and repalce with "overflow: visible" which was needed to display the dropdown menu.

When you have uploaded the changes, you need to flush the template by adding ?flush=1 to the end of your site address, this will hopefully display your menus.

Please note that the images "down-arrow.gif" & "right-arrow.gif" though they are referenced in the CSS above are not included in my implementation as they appeared on the menu items whether there was a sub menu or not. I prefer these arrows only to appear if there is a sub menu otherwise, it should n ot. So I left the code in here but just not uplaoded the images. The images must be uploaded to the images folder of the them you are working with.

I hope this helps you. I definitely got up and running with the information I was provded.

All the best.

Mauricio

Avatar
Willr

Forum Moderator, 5523 Posts

19 November 2009 at 2:43pm

Edited: 19/11/2009 2:44pm

arthurdent - Try changing the following line to the bottom one

return file_get_contents(SSViewer::getTemplateFile($identifier)); 

return ($file = SViewer::getTemplateFile($identifier)) ? file_get_contents($file) : false;

Avatar
mhdesign

Community Member, 216 Posts

19 November 2009 at 3:20pm

Ulysses, willr, thanks to you both! Willr, I was so close to getting it working your fix was the easiest to implement. All working now!!
Ulysses, nice site for Sunnynook School (I used to drive past there every day on a daily basis years ago) - dropdowns on your site work well but I did find if difficult to move from first to second level menus due to the white space between - you might like to look at this. I'm using FireFox 3 browser for Mac OS X... can send you screenshot if you wish!

Avatar
hive.net.au

Community Member, 40 Posts

19 November 2009 at 7:13pm

Hi ulysses

I was actually going to post the email up I sent you, but you beat me to it. Glad I could be of assistance, the end result for the schools looks great.

Cheers
Adam

Avatar
ulysses

Community Member, 57 Posts

19 November 2009 at 7:23pm

Hi Adam.

I thought it would be great to share my success at getting the drop down menus working when I saw the request for assistance from another user.

I have fine tuned the drop down for Sunnynook school further and having some minor difficulties in getting some componewnts of it working on the standard Black Candy theme. See http://sstest.ulysses.co.nz/parent-teacher-association/

First of all the curved edges are above the menu instead of below.
Secondly, the whie highlight of the current selected menu appears on the sub menu instead of the top level menu item.

If you go to the link above, mouse over the About Us link, you'll see what I mean on the drop down that appears.

If you can suggest how to fix this, would be great.

Mauricio

Avatar
StarForce

Community Member, 11 Posts

19 February 2010 at 9:53am

Edited: 20/02/2010 2:18am

hello

really like it :) great work

i just have one problem

is it possible to change the style of a top link even when i´m at a subpage of it?

here is a example:
http://sstest.ulysses.co.nz/

when i´m at "products" page, "products is highlighted in the menu (white background)
but when i´m at music cd´s page (which is a subpage of products), products is not highlighted.
Do you know how to fix this, so products is also highlighted?

hope you understand what i mean^^

Thanks in advance

StarForce

Avatar
BryanCYW

Community Member, 1 Post

3 March 2010 at 9:52pm

Hi Will,

Can you please attacth the menu.css file again.

Really need you help

Thank You

Regards
Bryan

Are you talking about a dropdown menu (like navigation) or a dropdown select form? I use the CSSPlay menus alot on my projects. Like californiawomen.org. I have attached an example Menu1.ss (the html needed) and Menu.css ( the css needed for it). You can just place the Menu.ss in yourtheme/templates/Includes/* and include it in your theme with <% include Menu1 %>. The CSS you can copy and put in your own CSS file or include this file seperatly

I haven't attached all the images etc and you might need to tweak the styles for your project but should be a start for you.