Newbie - Easy Drop Down Menus

**jamelser** · 09/01/2010, 20:35

Hi all,

Man, I feel like a dunce. I have been searching, implementing and troubleshooting and I just can't seem to figure out how to implement Drop Down menus from my main navigation for the life of me.

Details:

I am using Version 2.9. I have my main Navigation in my Header and sub (vertical) navigation in my left column in my pages. I have a simple site that has 7 main pages and each page section has several sub pages. I would like to have, when I hover over my Main Navigation, a drop down list so that users can go directly to a page.

I tried jquery, mootools, the like-Suckerfish tutorial. I get close but each is wrought with issues.

Is there a simple way to do this? And is it possible where if I add a page the drop down gets updated automatically?

Thanks for any help in advance.

Cheers,
James

**Ben** · 09/02/2010, 01:10

James - have a look at this excellent blog post about implementing jQuery Superfish menus in Contao.

**vinchenzison** · 09/02/2010, 10:13

Hi James,

If you only doing a simple 2 level menu, ie, Main Nav > Subnav then the following code may help. It's probably not perfect as I'm more a blagger than a pro!
You'll have to edit some values to suit your needs. Current ones are for a site I'm working on at the moment.
Give you navigation an Class of mainnav

Code:

.mainnav
{
	left:130px;
	position:relative;
	overflow:visible;
	top:67px;
}
.mainnav ul
{
	height:20px;
	position:relative;
}
.mainnav li
{
	float:left;
}
.mainnav li a
{
	position:relative;
	display:block;
	margin-right:5px;
	text-decoration:none;
	font-size:13px;
	color:#666666;
	line-height:20px;
}
.mainnav li ul
{
	height:auto;
	position:absolute;
	display:none;
	padding-top:15px;
	background-color:#333333;
	z-index:200;
}
.mainnav li:hover ul
{
	display:block;
}
.mainnav li li
{
	float:none;
	display:block;
}
.mainnav li ul a
{
	display:block;
	margin-right:0;
	margin-bottom:5px;
}

As I said, this will only work on a nav with 1 level of subnav, not a subnav within a subnav. You'll have to add your own css for that to work.

Also to note, I had to apply a z-index to the header .inside to make it sit over content in IE7

Code:

#header .inside
{
	z-index:1000;
}

Hope that helps you.

Cheers
James

**jamelser** · 09/02/2010, 23:53

Hi Ben and James,

Thanks for the replies. Much appreciated.

Ben, I looked at that tutorial extensively and went through the process but got stuck with where to input the <scripts> tag in the fe_page template as the template changed with 2.9 compared to the tutorial. I am not familiar with php to know where to put it in the new fe_page template. Can you advise. Thanks.

James, your code is working so far but with one issue. If you (or anybody) can help. I have my main nav bar floating to the right and I would like the dropdown to align to the right as well. Currently it aligns to each menu's left border.

My temp url for reference. glenrosa.no-ip.info

Thanks and cheers.

**Ben** · 09/03/2010, 00:36

Jamelser,

I don't ever make changes to fe_page to implement Superfish. I just add the code in my page layout under additional head tags. Have a look at the code on this site that I'm working on. It might help you get Superfish working.

**thyon** · 09/03/2010, 11:14

Just look at the MooTools code by leo on the www.contao.org site, using a drop-down menu

**ramjet** · 09/03/2010, 13:14

Heres a CSS Only Dropdown good for 2 levels. I've Garishly coloured and commented it to help with identifying what is what.
I don't think it'll work in IE 6.
The idea is that if your site was 960px wide, and you wanted 7 Level_1 items to stretch exactly across the page you would alter the width of ul.level_1 li to 960 divided by 7 = 137px

Code:

      /* TO APPEAR IN FRONT OF CONTENT IE7 */
#header .inside
{
	z-index:1000;
}
      /* SIZE OF ENTIRE MENU AREA - BLACK */
.mod_navigation
{
	width:960px;
	height:60px;
	background-color:#000000;
}
      /* MUST INCLUDE TO COUNTER DEFAULT CONTAO .block overflow hidden */
.mod_navigation.block
{
	overflow: visible !important;
}
      ul.level_1
{
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:16px;
}
      /* EACH LEVEL 1 MENU LISTITEM - SET WIDTH HERE - 960/5 -BRIGHT RED */
ul.level_1 li
{
	width:192px;
	height:30px;
	background-color:#ff0000;
}
      ul.level_1 li a
{
}
      /* EACH LEVEL 1 MENU LISTITEM  HOVER - BRIGHT YELLOW */
ul.level_1 li.hover,
ul.level_1 li:hover
{
	background-color:#fcdf00;
}
      /* EACH LEVEL 1 MENU LISTITEM  LINKTEXT (also Verical Align)
link,active,visited - WHITE */
ul.level_1 a:link,
ul.level_1 a:active,
ul.level_1 a:visited
{
	top:5px;
	position:relative;
	text-decoration:none;
	color:#ffffff;
}
      ul.level_1 ul li a:link,
ul.level_1 ul li a:active,
ul.level_1 ul li a:visited
{
	top:0;
	position:relative;
}
      /* EACH LEVEL 1 MENU LISTITEM  LINKTEXT hover- ORANGE */
ul.level_1 a:hover
{
	color:#f78502;
}
      /* LEVEL 1 ACTIVE TEXT - PINK */
ul.level_1 li.active span.active
{
	top:5px;
	position:relative;
	font-weight:normal;
	color:#f70ad0;
}
      ul.level_1 ul
{
}
      /* HEIGHT OF LEVEL 2 MENU LISTITEMS -  PINK (overwritten) WHITE Border */
ul.level_1 ul li
{
	height:24px;
	margin:0;
	padding-top:2px;
	padding-bottom:2px;
	background-color:#fa05e5;
	border:1px solid #ffffff;
	border-collapse:separate;
	font-weight:normal;
}
      /* EACH LEVEL 2 MENU LISTITEM hover -  BLACK */
ul.level_1 ul li.hover,
ul.level_1 ul li:hover
{
	background-color:#000000;
	font-weight:normal;
}
      /* LEVEL 1 ACTIVE and ACTIVE HOVER -BRIGHT GREEN */
ul.level_1 *.active,
ul.level_1 *.active:hover
{
	background-color:#5ef705;
}
      /* LEVEL 1 ACTIVE TRAIL and ACTIVE TRAIL hover - GREY */
ul.level_1 *.trail,
ul.level_1 *.trail:hover
{
	background-color:#80827e;
}
      ul.level_1
{
}
      ul.level_1 li
{
}
      ul.level_1 li.hover,
ul.level_1 li:hover
{
}
      /* FROG GREEN */
ul.level_1 ul
{
	background-color:#7aa327;
}
      /* EACH LEVEL 1 MENU LISTITEM - BROWN */
ul.level_1 ul li
{
	background-color:#664413;
}
      ul.level_1 ul li.hover
{
	margin:0;
}
      /* LEVEL 2 ACTIVE and ACTIVE HOVER - LEMON */
ul.level_1 ul *.active,
ul.level_1 ul *.active:hover
{
	background-color:#f7f5da;
}
      ul.level_1,
ul.level_1 li,
ul.level_1 ul
{
	margin:0;
	padding:0;
	list-style: none;
}
      ul.level_1
{
	position:relative;
	float:left;
	z-index: 597;
}
      ul.level_1 li
{
	float:left;
	vertical-align:middle;
	line-height:1.3em;
}
      ul.level_1 li.hover,
ul.level_1 li:hover
{
	position:relative;
	z-index: 599;
	cursor: default;
}
      ul.level_1 ul
{
	width:100%;
	left:0;
	top:30px;
	position:absolute;
	visibility: hidden;
	z-index: 598;
}
      ul.level_1 ul li
{
	float:none;
}
      ul.level_1 ul ul
{
	top:1%;
	left:99%;
}
      ul.level_1 li:hover > ul
{
	visibility: visible;
}
      /* EACH LEVEL 2 LISTITEM  LINKTEXT - YELLOW */
ul.level_2 a:link,
ul.level_2 a:active,
ul.level_2 a:visited
{
	color:#fae902;
}
      /* LEVEL 2 ACTIVE TEXT - RED */
ul.level_2 li.active span.active
{
	top:2px;
	position:relative;
	color:#ff0000;
}
      ul.level_2
{
	width:100%;
}
      ul.level_2 ul li
{
	float:left;
}
      ul.level_2 li.hover,
ul.level_2 li:hover
{
	position:static;
}
      ul.level_2 ul ul
{
	display: none !important;
}

I've attached one without comments for importing (EDIT no i haven't.... I can't attach css or txt)

**jamelser** · 09/05/2010, 10:42

Hi All,

Sorry for the delayed reply.

Thanks everyone that responded. I actually had to take pieces from several response to finally get it to work. Here's the result. www.glenrosa.org

I will have to post my .css later to show what I did. My last issue that I can't figure out, is that I would love for the drop down to have it's right hand border align with the parent menu's right hand border. Right now the left hand side is aligning.

This is my first site ever and I chose contao because of it's intuitive use, but I am finding out it has lots of room for customization. Thanks Contao. This newbie loves it.

Cheers,
james

**ramjet** · 09/05/2010, 11:11

You probably want to check this in IE7 ... no good!
The dropdown items have too much margin?? and as a reslt the menus close whilst trying to navigate.
Also the dropdowns are behind main content ...try adding

Code:

      /* TO APPEAR IN FRONT OF CONTENT IE7 */
#header .inside
{
   z-index:1000;
}

if your menu is placed in your header.
Not sure about the alignment sorry.

**jamelser** · 09/05/2010, 13:19

thanks mate. I appreciate that.

Edit: I've inserted the code now and checked with IE7. (I had to install IE8 as I use mozilla). And the drop downs work for me in IE7 mode. Please confirm.

Off topic - I never realized how different all the browsers show a website. All my rounded corners are gone in IE. :cry:

Cheers all and thanks for the help.

**vinchenzison** · 09/06/2010, 16:09

Off topic - I never realized how different all the browsers show a website. All my rounded corners are gone in IE

The joys of developing

**tmikk** · 11/19/2010, 15:01

[quote="ramjet"]Heres a CSS Only Dropdown good for 2 levels...

Thanks for providing this code. When I try this navigation with a screen reader, I cannot access the second level links (the ones available when hovered). I wonder how to make the second level links available to the screen reader user?

Thanks,
Tonu

**tmikk** · 11/19/2010, 15:08

Originally Posted by thyon

Just look at the MooTools code by leo on the http://www.contao.org site, using a drop-down menu

I am trying to implement exactly this type of navigation, but by just looking at the Contao.org site I cannot determine how it is constructed. I have following questions: