How to create css menu that goes vertically

**swmagic** · Aug 24, 2011 16:20

Hi guys:

Can anyone point me to some sample code that can emulate the menu mechanism (currently jsquery driven).

Or suggestions as to other ways?

Sherman Oaks Real Estate, Studio City Homes, Encino Investment Property - Scott Nell

Thanks to all

**ralph.m** · Aug 24, 2011 17:01

It's not quite clear what that link is for. Is that your site? Or do you want a menu as on that site? It's a horizontal menu, not vertical.

**swmagic** · Aug 25, 2011 08:29

Sorry yes, unclear. The link is for the site that for which I wish to convert to CSS. It IS a horizontal menu that pops its level 2 vertically. If I replace the javascript with a CSS menu, I'd like to mimic that behavior.

I don't think that's possible in CSS, but I wanted to ask it here.

**Paul O'B** · Aug 25, 2011 09:10

If you are using the suckerfish type menu then you would just subsitute "top" and use bottom:0.

In this example the menu is moved up 37px.

Code:

ul#nav li:hover ul,
ul#nav li.over ul {/* style hover nav*/
	border:1px solid #555;
	background:#252526;
	color:#fff;
	font-weight:bold;
	z-index:99;
	bottom:37px;/* on top of current item*/
	padding:5px 0px;
}

**swmagic** · Aug 25, 2011 18:10

Cooooooool!

I loved the example, and it helped me tremendously after playing with it to my tastes. This will work great.

Now, a small gotcha. Can I put this OVER a Flash content using SWFObject.

I know it should involve z-index, but at which level (CSS) would that work?

Thanks again, this is great.

Paul

**Paul O'B** · Aug 26, 2011 01:40

Hi,

You can layer flash in the normal way with z-index and position:relative (absolute if needed) but you need to set the wmode parameters of the flash object to transparent or opaque to allow this to happen.

There's a very old sticky in the flash forum that explains it.

**swmagic** · Aug 27, 2011 09:26

Well that kinda sortof worked but the menu still doesn't show over the flash. I think I followed the directions carefully enough. IE and Firefox distinctly show them differently;

SWFObject - step 2

Anybody with ideas?

**swmagic** · Aug 27, 2011 10:15

Dang, wasn't watching my link:

SWFObject - step 2

Here it is.

**Paul O'B** · Aug 28, 2011 03:18

You don't seem to have followed all that I said

Only positioned elements can have a z-index and you missed out the wmode parameter from the inner object.

Code:

object{position:relative;z-index:1}
u#navl, ul#nav ul {
	z-index:999;
	position:relative;
}

Code:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="739" height="307">
			<param name="movie" value="http://scottnell.com.previewdns.com/files/scottnell.swf" z-index: 1; />
			<param name="wmode" value="transparent" />
			<!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="http://scottnell.com.previewdns.com/files/scottnell.swf" width="739" height="307">
<param name="wmode" value="transparent" />

        <!--<![endif]-->
			<p>Alternative content</p>
			<!--[if !IE]>-->
        </object>
        <!--<![endif]-->
		</object>

**swmagic** · Aug 29, 2011 09:26

Well I finally got this to work, and learned a lot about CSS in the process.

2 final questions:

1. In the example stated earlier, Untitled Document
Can there be a 2nd level dropdown without embedding it in the same menu?
Look at Buyers/Sellers here to see what's happening
Sherman Oaks Real Estate, Studio City Homes, Encino Investment Property - Scott Nell

Will I need to move to Suckerfish to do this?

2. How do I remove the underlines?

Thanks for ALL of your help

**Paul O'B** · Aug 29, 2011 13:02

Hi,

You need to keep control of your page as you have introduces a lot of errors this early on. Run the page through the validator and clear up any issues such as unclosed tags, duplicate tags (such as two body tags) and broken tags. You can't wrap a table in a p element as p elements can only hold inline content.

Your extra menu is invalid as it needs to be within a nested list like this:

Code:

<ul id="nav" >
	<li><a href="#">THE TEAM</a>
		<ul>
			<li class="current"> <a href="team-profiles-c14041.html">Team Profiles</a> </li>
			<li> <a href="scott-nell-profile--c14051.html">Scott Nell Profile</a> </li>
			<li> <a href="john-aaroe-group-c14043.html">John Aaroe Group</a> </li>
			<li> <a href="team-philosophy--c14042.html">Team Philosophy</a> </li>
			<li> <a href="testimonials-c14052.html">Testimonials</a> </li>
			<li> <a href="press-features-c14059.html">Press/Features</a> </li>
		</ul>
	</li>
	<li><a href="#">ENTERTAINMENT</a>
		<ul>
			<li><a href="confidentiality-agreement--c14044.html">Confidentiality</a></li>
			<li><a href="clientele_list.html">Text</a></li>
		</ul>
	</li>
	<li><a href="#">ALL OUR KIDS <br />
		FOUNDATION</a>
		<ul>
			<li><a href="vision--c14048.html">Vision</a></li>
			<li><a href="events-c14049.html">Events</a></li>
			<li><a href="programs-c14045.html">Programs</a></li>
			<li><a href="donate-c14050.html">Donate</a></li>
		</ul>
	</li>
	<li><a href="#">BUYERS/SELLERS</a>
		<ul>
			<li><a href="first_time_mortgage_buyers.html">First Time Mortgage Buyers</a>
				<ul>
					<li><a href="#">Test Text</a></li>
					<li><a href="#">Test Text 2</a></li>
				</ul>
			</li>
			<li><a href="#">Text</a></li>
		</ul>
	</li>
	<li><a href="#">RESOURCES</a>
		<ul>
			<li><a href="#">Lorem ipsum text</a></li>
			<li><a href="#">Text</a></li>
			<li><a href="#">Link Link </a></li>
			<li><a href="#">Lorem ipsum text goes here</a></li>
			<li><a href="#">Text</a></li>
			<li><a href="#">Link Link </a></li>
			<li><a href="#">Lorem ipsum text</a></li>
		</ul>
	</li>
</ul>

To add another flyout you basically have to do more of the same and style the nested list as required and move it into the correct position. It's easier to have a fixed width if you want more than one flyout.

Something very roughly like this:

Code:

ul#nav, ul#nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	margin-left:auto; /* ENTIRE ROW POSITIONING */
	margin-right:auto;
	z-index:100;
}
ul#nav {
	width:760px;
	font-size:100%;
	position: relative;
	text-align: center;
	margin-top:-56px;/* for testing SET THIS FOR EVENTUAL HEIGHT*/
}
ul#nav ul {
 	font-size:100%;
  font-weight:bold;
	text-align:left;
}
ul#nav li {
	position: relative;
	float: left;
	margin-left:40px; 
	display:inline;
}
ul#nav li a {
	display:block;
	font-weight:bold;
	height:36px;
	line-height:18px;
	padding:2px 10px;/* create space*/
}
* html ul#nav li a {
	float:left
}
* html ul#nav li li a {
	float:none
}
ul#nav li li a {
	height:auto;/* reset height on nested lists*/
	line-height:normal;/* reset line-height on nested lists*/
}
ul#nav li a, ul#nav li a:visited {
	color:#051586;
	text-decoration:none;
	text-align:left;
}
#nav li ul {   /* SUBMENU VERTICAL POSITIONING RELATIVE TO MAIN ROW*/
	left:-10px;
	position: absolute;
	margin-left:-999em;/* hide the menu*/
	border:1px solid #555;
	width:220px;
}
ul#nav li li {
	margin:0;
	float:none;
}
ul#nav li:hover ul, ul#nav li.over ul {/* style hover nav*/
	border:1px solid #555;
	font-weight:bold;
	z-index:99;
	bottom:40px;/* on top of current item*/
}
#nav li:hover ul, #nav li.over ul {
	margin:0;/* show the menu*/
}
#nav li:hover ul ul, #nav li.over ul ul {
	margin-left:-999em;/* hide nested menu*/
}
#nav li:hover li:hover ul, #nav li.over li.over ul {
	margin-left:0;
	padding:0;
	left:220px;
	bottom:-20px;/* show nested menu*/
}
#nav li ul li {
	margin:0
}
ul#nav li:hover, ul#nav li.over {
	z-index:99
}
ul#nav li li a{
	border:1px solid #555;
	margin-top:-1px;
	background:#051586;
	position:relative;
	z-index:1000;
	text-decoration:none;
	padding:1px 10px;
	color:#FDB813;
	font-weight:normal;
	text-decoration:none;
}
ul#nav li li a:visited{color:#FDB813;}

/* this sets all hovered lists */
#nav li:hover li:hover a, #nav li.over li.over a, #nav li:hover li:hover li:hover a, #nav li.over li.over li.over a, #nav li:hover li a:hover, #nav li.over li a:hover, #nav li:hover li:hover li:hover a:hover, #nav li.over li li a:hover, #nav li:hover li:hover li:hover li:hover a:hover, #nav li.over li.over li.over li.over a:hover {
	color:#fff;
}
/* set dropdown to default */
#nav li:hover li a, #nav li.over li a, #nav li:hover li:hover li a, #nav li.over li.over li a, #nav li:hover li:hover li:hover li a, #nav li.over li.over li.over li a {
	color:#FDB813;
}

object {
	position:relative;
	z-index:1
}

**swmagic** · Aug 30, 2011 12:18

On subsequent pages, the menu should drop down, not up (since subsequent pages won't have flash. Is this an easy fix in the navmenu or is everything upside down and I'd have to start over?

Thanks.

**Paul O'B** · Aug 30, 2011 12:34

Originally Posted by swmagic

On subsequent pages, the menu should drop down, not up (since subsequent pages won't have flash. Is this an easy fix in the navmenu or is everything upside down and I'd have to start over?

Thanks.

Well it's probably easy for me but may not be so easy for you

What you'd need to do is add an extra class to the body tag on the pages where you want the menu displayed differently. If all pages have a normal dropdown then just add the special class when there is a drop up.

e.g.

Code:

<body class="dropup">

Then you would modify the existing rules where either top or bottom has been used.

e.g.

Code:

ul#nav li:hover ul, ul#nav li.over ul {/* style hover nav*/
	border:1px solid #555;
	font-weight:bold;
	z-index:99;
	top:40px;/* below current item/
}
.dropup ul#nav li:hover ul,.dropup ul#nav li.over ul {
 top:auto;/* over-ride top position*/
 bottom:40px;/* on top of current item*/
}

#nav li:hover li:hover ul, #nav li.over li.over ul {
	margin-left:0;
	padding:0;
	left:220px;
	top:0;/* show nested menu*/
}
.dropup #nav li:hover li:hover ul,.dropup #nav li.over li.over ul {
 top:auto;/* over-ride top position*/
 bottom:-20px;/* show nested menu*/
}

The above is just an idea of how to go about this and may (or may not) need extra tweaks as it is untested but shows the general idea.

**swmagic** · Aug 30, 2011 12:47

Damn! You're good!!!

**swmagic** · Aug 30, 2011 13:51

Last cleanup "things" that I have been struggling with and you obviously code in your sleep:

1. How do I vertically center the main Nav row? (gawd knows I've tried everything)
2. How do I increase the height of each sub menu?
3. How do I change the 3nd level menu hover to look like the 2nd level hover (the background is the same for all and hover isn't different?

THANK YOU, THANK YOU , THANK YOU.

You are a gentleman and brilliant!

**Paul O'B** · Aug 31, 2011 03:35

Originally Posted by swmagic

1. How do I vertically center the main Nav row? (gawd knows I've tried everything)

I'm not sure what you want vertically centred exactly? In what way should it be vertically centred and to what reference is it vertically centre?

2. How do I increase the height of each sub menu?

The easiest way is just to increase the top padding:

Code:

ul#nav li li a{padding:5px 10px}

3. How do I change the 3nd level menu hover to look like the 2nd level hover (the background is the same for all and hover isn't different?

Just add the background colour into this rule here.

Code:

ul#nav li li a{padding:5px 10px}
/* set dropdown to default */
#nav li:hover li a, #nav li.over li a, #nav li:hover li:hover li a, #nav li.over li.over li a, #nav li:hover li:hover li:hover li a, #nav li.over li.over li.over li a {
	color:#FDB813;
	background:#051586
}

**swmagic** · Aug 31, 2011 08:22

1. I tried this ul#nav li li a{padding:5px} but it separates the distance between the menu items--I wanted to only "spread" the items and give them more space on the top and the bottom...I think the padding is working on the outside and I need it around the text

2. If you look at the menu you'll notice that each item THE TEAM, ENTERTAINMENT, etc. is all top-aligned; can it be middle-aligned?

3. Perfect.

**Paul O'B** · Aug 31, 2011 08:51

Originally Posted by swmagic

1. I tried this ul#nav li li a{padding:5px} but it separates the distance between the menu items--I wanted to only "spread" the items and give them more space on the top and the bottom...I think the padding is working on the outside and I need it around the text

I'm not sure I follow as the padding is the space on top and below the text and will work exactly like I assume you wanted. Margin is the space outside the element but you can't use margins on a drop down as that will give you gaps between the items and the menu will drop out.

padding:5px 10px; works for me with no problems and I can't really think what other effect you would want

2. If you look at the menu you'll notice that each item THE TEAM, ENTERTAINMENT, etc. is all top-aligned; can it be middle-aligned?

This is a bit awkward and perhaps the easiest solution is to add a class to that one item that has two lines.

e.g.

Code:

<li class="double"><a href="#">ALL OUR KIDS <br>
	FOUNDATION</a>
	<ul>

Then amend these rules as follows:

Code:

ul#nav li a{
	display: block;
	font-weight: bolder;
	height: 36px;
	padding:0 12px;
	line-height:36px
}
ul#nav li.double a {
	line-height:16px;
	padding:4px 12px
}

ul#nav li.double li a,ul#nav li li a {
	line-height:16px;
	padding:4px 5px;
}

**swmagic** · Sep 1, 2011 11:10

Yes that did work but with another side effect. The submenus are now too far from the tabs vertically so a visitor will have to be quick so as to not lose the hover.

Sherman Oaks Real Estate, Studio City Homes, Encino Investment Property - Scott Nell

**swmagic** · Sep 1, 2011 11:11

and how do I put the entire tabset into a low-grey background...the best I've been able to hit is the background-color applied to each individually?

Thanks !

**Paul O'B** · Sep 1, 2011 12:52

Just adjust the top position on hover to something closer. You have top:40px so make it top:35px and tweak until it works.

Code:

ul#nav li:hover ul, ul#nav li.over ul {
  border: 1px solid #555555;
  font-weight: bold;
  top: 35px;
  z-index: 99;
}

To change the background of the first level you could try something like this.

Code:

ul#nav {
    background:#ccc;
    font-size: 100%;
    height: 40px;
    margin-top: -56px;
    position: relative;
    text-align: center;
    width: 760px;
}

You'll need a height or it won't show.

**swmagic** · Sep 1, 2011 20:56

Well I never thought about a height...why would that be required? Was it zero?

I can't use that grey bar on the index page as it muddies up the transparency beneath it.

So taking your lead about class, I created a new one

ul#nav.homeonly {
width:760px;
font-size:100%;
position: relative;
text-align: center;
margin-top:-56px;/* for testing SET THIS FOR EVENTUAL HEIGHT*/
}

ul#nav ul {
font-size:100%;
font-weight:bold;
text-align:left;
}

and applied it thus:
<ul id="nav" class="homeonly">
<li><a href="#">THE TEAM</a>
<ul>

But, it simply thumbed it's nose at me.

**Paul O'B** · Sep 3, 2011 11:53

Originally Posted by swmagic

Well I never thought about a height...why would that be required? Was it zero?

Yes because the lists were floated and therefore removed from the flow so the parent has zero height unless you cocntain it.

I can't use that grey bar on the index page as it muddies up the transparency beneath it.

So taking your lead about class, I created a new one

ul#nav.homeonly {
width:760px;
font-size:100%;
position: relative;
text-align: center;
margin-top:-56px;/* for testing SET THIS FOR EVENTUAL HEIGHT*/
}

ul#nav ul {
font-size:100%;
font-weight:bold;
text-align:left;
}

and applied it thus:
<ul id="nav" class="homeonly">
<li><a href="#">THE TEAM</a>
<ul>

But, it simply thumbed it's nose at me.

I can't see that you have negated the background colour anywhere.

Remember that styles applied to #nav will still be applied. You would need to reset the background colour to transparent with your new class. (Note IE6 doesn't like classes separated by the dot notation method and gets them wrong or worse still half right.)

**swmagic** · Sep 4, 2011 16:51

Well ok,...it did look fine in IE 8. Is there a better form you would recommend rather than the ul#nav.homeonly?

**swmagic** · Sep 4, 2011 17:38

Now, I'd like to center the menu so that the level1 submenu's raise directly into the swf panes (rather than left/right) as they are now.

I'm pretty sure that to do that I have to set the width to exactly the width of the swf (738px)

ul#nav {
width:738px;

and that I need to eliminate the margin-left:40px in the ul#nav li { which is likely not helping me.

So with that removed I now have a left-justified menu.

Now, how do I get 6 equal divisions of 123px (738/6) and center the text AND the 1st level submenu so that the 1st level submenus arise into the panes?

In other words, do I simply center the tabs and the submenus over them? and how?

User Tag List

Thread: How to create css menu that goes vertically

Thread Tools

Display

How to create css menu that goes vertically

Bookmarks

Bookmarks

Posting Permissions