Horizontal Submenu

dmei4 · May 11, 2011

This is what I'm trying to do. When the page is idle and on the main page. The subnav is hidden. When I mouseover they appear. If I click on one of the nav page. Say Nav2. I would like Nav2 submenu to be visible and also nav2 to be highlighted as well. While still having the freedom of mousing over other navs and having their subnavs appear. Here is an image of what I'm going for.

dsonesuk · May 11, 2011

you would have to identify that you want the link for the current page active, and the submenus to show, by using a cookie, or maybe value passed through get querystringpage2.php?show_sm=yes (php required to read sent get value)but how would you return to no fixed submenu showing, click parent link? again! you would have to check if already on current page to hide submenu to prevent page reloading.

packrat · May 11, 2011

perhapps something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">#Nav{width:600px;border:1px solid #ccc;position:relative;}#Nav ul{list-style:none;padding:0;margin:0;position:relative;width:100%;border:1px dotted #ccc;}#Nav ul ul{position:absolute;visibility:hidden;top:100%;left:0;margin-top:-2pt;padding-top:2pt;}#Nav li{display:inline-block;padding:2pt 1em;border:1px solid #090;}#Nav ul li:hover>ul{visibility:visible !important;}#Nav li.current{background:#090;color:#fff !important;}#Nav li.current > a{color:#fff;}#Nav li.current>ul{visibility:visible;}#Nav:hover li.current>ul{visibility:hidden;}	</style><script>var onLoad=function(){	var Nav=document.getElementById('Nav');	for(var x=0, hash=location.hash.substring(1),ar=Nav.getElementsByTagName('a'); x<ar.length; x++){		if(hash==ar[x].getAttribute('href').split('#').pop()){			var el=ar[x];			do{				if(el.tagName=='LI'){					el.className+='current';				}				el=el.parentNode;			}while(el!=Nav);			break;		}	}}if(window.addEventListener)window.addEventListener('load', onLoad, false);else if(window.attachEvent)window.attachEvent('onload', onLoad);</script></head><body><div id="Nav"><ul>	<li><a href="#node1">#node1</a>		<ul>			<li><a href="#node1.A">#node1.A</a>				<ul>					<li><a href="#node1.A.1">#node1.A.1</a></li>					<li><a href="#node1.B.2">#node1.B.2</a></li>					<li><a href="#node1.C.3">#node1.C.3</a></li>					<li><a href="#node1.D.4">#node1.D.4</a></li>				</ul>			</li>			<li><a href="#node1.B">#node1.B</a></li>			<li><a href="#node1.C">#node1.C</a></li>			<li><a href="#node1.D">#node1.D</a></li>		</ul>		</li>	<li><a href="#node2">#node2</a>		<ul>			<li><a href="#node2.A">#node2.A</a>				<ul>					<li><a href="#node2.A.1">#node2.A.1</a></li>					<li><a href="#node2.B.2">#node2.B.2</a></li>					<li><a href="#node2.C.3">#node2.B.3</a></li>					<li><a href="#node2.D.4">#node2.B.4</a></li>				</ul>			</li>			<li><a href="#node2.B">#node2.B</a></li>			<li><a href="#node2.C">#node2.C</a></li>			<li><a href="#node2.D">#node2.D</a></li>		</ul>		</li>	<li><a href="#node3">#node3</a>		<ul>			<li><a href="#node3.A">#node3.A</a>				<ul>					<li><a href="#node3.A.1">#node3.A.1</a></li>					<li><a href="#node3.B.2">#node3.B.2</a></li>					<li><a href="#node3.C.3">#node3.B.3</a></li>					<li><a href="#node3.D.4">#node3.B.4</a></li>				</ul>			</li>			<li><a href="#node3.B">#node3.B</a></li>			<li><a href="#node3.C">#node3.C</a></li>			<li><a href="#node3.D">#node3.D</a></li>		</ul>	</li>	<li><a href="#node4">#node4</a>		<ul>			<li><a href="#node4.A">#node4.A</a>				<ul>					<li><a href="#node4.A.1">#node4.A.1</a></li>					<li><a href="#node4.B.2">#node4.B.2</a></li>					<li><a href="#node4.C.3">#node4.B.3</a></li>					<li><a href="#node4D.4">#node4.B.4</a></li>				</ul>			</li>			<li><a href="#node4.B">#node4.B</a></li>			<li><a href="#node4.C">#node4.C</a></li>			<li><a href="#node4.D">#node4.D</a></li>		</ul>	</li></ul></div></body></html>

of course instead of using the hash you can use whatever you need to; I'm just throwing out a functional example of how you might go about it.You could also allocate the 'current' style serverside when you render the menu

dmei4 · May 11, 2011

Isn't there a simpler CSS workaround?I was thinking the submenu will be showing if you are on the nav page. Only time they're not visible is in the index page.

packrat · May 11, 2011

not sure what you mean by 'nav page'; in that example 'Nav' is synonymous with menu, doesn't really represent a specific page... all the 'node's represent pagesif instead of hashes the anchors had paths it might be more apparent, if yo ucould imagine replacing the '#node' references with links... your index / home page doesn't appear in the menu and so doesn't allocate any node as 'current'might also be a challenge to get the page to refresh currectly since the hash changes don't cause a page refresh...I'll see if I can make a change to illustrate

packrat · May 11, 2011

here's a revised version of the exmaple using a query string rather than a hash

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">#Nav{width:600px;border:1px solid #ccc;position:relative;}#Nav ul{list-style:none;padding:0;margin:0;position:relative;width:100%;border:1px dotted #ccc;}#Nav ul ul{position:absolute;visibility:hidden;top:100%;left:0;margin-top:-2pt;padding-top:2pt;}#Nav li{display:inline-block;padding:2pt 1em;border:1px solid #090;}#Nav ul li:hover>ul{visibility:visible !important;}#Nav li.current{background:#090;color:#fff !important;}#Nav li.current > a{color:#fff;}#Nav li.current>ul{visibility:visible;}#Nav:hover li.current>ul{visibility:hidden;}	</style><script>var onLoad=function(){	var Nav=document.getElementById('Nav');	for(var x=0, loc=location.search.substring(1),ar=Nav.getElementsByTagName('a'); x<ar.length; x++){		if(loc==ar[x].getAttribute('href').split('?').pop()){			var el=ar[x];			do{				if(el.tagName=='LI'){					el.className+='current';				}				el=el.parentNode;			}while(el!=Nav);			break;		}	}}if(window.addEventListener)window.addEventListener('load', onLoad, false);else if(window.attachEvent)window.attachEvent('onload', onLoad);</script></head><body><div id="Nav"><ul>	<li><a href="?node=1">#node1</a>		<ul>			<li><a href="?node=1.A">#node1.A</a>				<ul>					<li><a href="?node=1.A.1">#node1.A.1</a></li>					<li><a href="?node=1.B.2">#node1.B.2</a></li>					<li><a href="?node=1.C.3">#node1.C.3</a></li>					<li><a href="?node=1.D.4">#node1.D.4</a></li>				</ul>			</li>			<li><a href="?node=1.B">#node1.B</a></li>			<li><a href="?node=1.C">#node1.C</a></li>			<li><a href="?node=1.D">#node1.D</a></li>		</ul>		</li>	<li><a href="?node=2">#node2</a>		<ul>			<li><a href="?node=2.A">#node2.A</a>				<ul>					<li><a href="?node=2.A.1">#node2.A.1</a></li>					<li><a href="?node=2.B.2">#node2.B.2</a></li>					<li><a href="?node=2.C.3">#node2.B.3</a></li>					<li><a href="?node=2.D.4">#node2.B.4</a></li>				</ul>			</li>			<li><a href="?node=2.B">#node2.B</a></li>			<li><a href="?node=2.C">#node2.C</a></li>			<li><a href="?node=2.D">#node2.D</a></li>		</ul>		</li>	<li><a href="?node=3">#node3</a>		<ul>			<li><a href="?node=3.A">#node3.A</a>				<ul>					<li><a href="?node=3.A.1">#node3.A.1</a></li>					<li><a href="?node=3.B.2">#node3.B.2</a></li>					<li><a href="?node=3.C.3">#node3.B.3</a></li>					<li><a href="?node=3.D.4">#node3.B.4</a></li>				</ul>			</li>			<li><a href="?node=3.B">#node3.B</a></li>			<li><a href="?node=3.C">#node3.C</a></li>			<li><a href="?node=3.D">#node3.D</a></li>		</ul>	</li>	<li><a href="?node=4">#node4</a>		<ul>			<li><a href="?node=4.A">#node4.A</a>				<ul>					<li><a href="?node=4.A.1">#node4.A.1</a></li>					<li><a href="?node=4.B.2">#node4.B.2</a></li>					<li><a href="?node=4.C.3">#node4.B.3</a></li>					<li><a href="?node=4D.4">#node4.B.4</a></li>				</ul>			</li>			<li><a href="?node=4.B">#node4.B</a></li>			<li><a href="?node=4.C">#node4.C</a></li>			<li><a href="?node=4.D">#node4.D</a></li>		</ul>	</li></ul></div></body></html>

dmei4 · May 11, 2011

I meant the images I have listed as nav1 nav2 etc. leads to a page.So when I select to goto nav1. I want the subnav of nav1 to be static and if I'm on nav2, nav2's subnav will be static, but the subnav will still be interchangeable if I mouseover the other navs.http://www.sohtanaka.com/web-design/horizo...ith-css-jquery/I'm currently modifying code.

dmei4 · May 11, 2011

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Horizontal Subnav w/ CSS & jQuery</title><style type="text/css">body {	font: Georgia, "Times New Roman", Times, serif;	margin: 0;	padding: 0;}h1 {	font: 4.7em normal Georgia, 'Times New Roman', Times, serif;	color: #333;	margin: 0;	padding: 5px 0;}h1 small{	font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;	text-transform:uppercase;	letter-spacing: 1.5em;	display: block;	color: #fff;}.container {width: 1024px; margin: 0 auto;}ul#topnav {	margin: 0; padding: 0;	float: left;	width: 100%;	color:#000;	list-style: none;	position: relative;	font-size: 16px;	text-transform:uppercase}ul#topnav li {	float: left;	margin: 0; padding: 0;}ul#topnav li a {	padding: 10px 15px;	display: block;	color: #000;	text-decoration: none;}ul#topnav li a:hover { background: #CC141B; color:#FFF; }ul#topnav li span {	float: left;	padding: 15px 0;	position: absolute;	left: 0; top:35px;	display: none;	width: 100%;		}ul#topnav li span {text-align:center; font-size:12px; font-family:Arial, Helvetica, sans-serif; text-transform:none;}ul#topnav li:hover span { display: block; }ul#topnav li span a { display: inline; color:#999; padding:0 15px 5px}ul#topnav li span a:hover {color:#000; background:none;}ul#topnav li a.on { background: #CC141B; color:#FFF;}ul#topnav li span a.on {	float:left;	background:#CC141B;	color:#fff;	text-decoration:none;	margin-top:-1px;	padding-bottom:1px;}ul#topnav li span.on {	display:inline;}ul#topnav li span a.on { background:none;color:#000;display: inline; padding:0 15px 5px}</style><script type="text/javascript" src="Horizontal%20Subnav%20w_%20CSS%20&%20jQuery_files/jquery.js"></script><script type="text/javascript">$(document).ready(function() {	$("ul#topnav li").hover(function() { //Hover over event on list item	$(this).css({ 'background' : '#CC141B'}); //Add background color + image on hovered list item	$(this).find("span").show(); //Show the subnav} , function() { //on hover out...	$(this).css({ 'background' : 'none'}); //Ditch the background	$(this).find("span").hide(); //Hide the subnav});/*$("a.nav").hover(function() { //Hover over event on list item	$(this).css({ 'color' : '#FFF'}); //Add background color + image on hovered list item	$(this).find("span").show(); //Show the subnav} , function() { //on hover out...	$(this).find("span").hide(); //Hide the subnav});*/	});</script></head><body><div class="container">		<ul id="topnav">		<li><a href="#" class="on">nav1</a>			<span class="on">				<a href="#" class="">subnav</a>				<a href="#">subnav</a>				<a href="#">subnav</a>				<a href="#">subnav</a>				<a href="#">subnav</a>			</span>		</li>		<li>			<a href="#">nav2</a>			<span>				<a href="#">subnav</a>				<a href="#">subnav</a>				<a href="#">subnav</a>				<a href="#">subnav</a>			</span>		</li>		<li style="background: none repeat scroll 0% 0% transparent;">			<a href="#">nav3</a>			<span style=";">				<a href="#">subnav</a>				<a href="#">subnav</a>				<a href="#">subnav</a>				<a href="#">subnav</a>				<a href="#">subnav</a>				<a href="#">subnav</a>				<a href="#">subnav</a>				<a href="#">subnav</a>			</span>		</li>		<li style="background: none repeat scroll 0% 0% transparent;">			<a href="#">nav4</a>			<span style="display: none;">				<a href="#">subnav</a>				<a href="#">subnav</a>				<a href="#">subnav</a>				<a href="#">subnav</a>				<a href="#">subnav</a>			</span>		</li>		<li><a href="#">nav5</a>			<span style="display: none;">				<a href="#">subnav</a>				<a href="#">subnav</a>				<a href="#">subnav</a>				<a href="#">subnav</a>				<a href="#">subnav</a>				<a href="#">subnav</a>			</span>		</li>		 <li style="background: none repeat scroll 0% 0% transparent;">			<a href="#">nav6</a>		</li>		<li style="background: none repeat scroll 0% 0% transparent;">			<a href="#">nav6</a>			<span style="display: none;">				<a href="#">subnav</a>			</span>		</li>	</ul>	</div></body></html>

Somethings I'm trying to work out is how to have the text stay white when I move the mouse towards the subnav. Also having the subnav with the class on to show up again once I hover on other nav links because it disappear after it loads. I'm also trying to but class on a link in the subnav for it to indicate which subnav page they are on, but the moment I apply the class the position is thrown off.

dsonesuk · May 12, 2011

This all depends if you are happy to add class or id reference to current page link manually in every page, or let javascript do it for you.below you will find two page home and other page, with 2 methods totally css option, and javascript option.home page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">body{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:62.5%;}.outer{width:960px; margin:10px auto 0; height:250px;border:1px solid #ccc; padding:12px;}#Nav{width:600px;}#Nav ul{list-style:none;padding:0;margin:0;position:relative; height:25px;border:1px solid #ccc;}#Nav li{float:left; height:25px;}#Nav li a{float:left; display:block;height:25px; padding: 0 20px; line-height:25px; font-size:11px; text-decoration:none; text-transform:uppercase;  background-color:#fff; color:#000;}#Nav li li{height:25px;float:left; border-top:1px solid transparent;}#Nav li li a{height:25px; margin:0;   color:#c6c6c6;}#Nav ul ul{position:absolute;top:25px;left:-9999em; width:100%;  border:none;}#Nav ul li:hover>ul{left:-1px; color:#000;}#Nav ul li#active ul {left:-1px;}#Nav li#active a{ background-color:#3300CC; color:#fff;}#Nav li#active li a{ background:none;  color:#c6c6c6;}#Nav li a:hover, #Nav li#active li a:hover{ background-color:#3300CC; color:#fff;}/*XXXXXXXXXXXXXXXXXXXXXXXXX option 2 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/#Nav2{width:600px;}#Nav2 ul{list-style:none;padding:0;margin:0;position:relative; height:25px;border:1px solid #ccc;}#Nav2 li{float:left; height:25px;}#Nav2 li a{float:left; display:block;height:25px; padding: 0 20px; line-height:25px; font-size:11px; text-decoration:none; text-transform:uppercase;  background-color:#fff; color:#000;}#Nav2 li li{height:25px;float:left; border-top:1px solid transparent;}#Nav2 li li a{height:25px; margin:0;   color:#c6c6c6;}#Nav2 ul ul{position:absolute;top:25px;left:-9999em; width:100%;  border:none;}#Nav2 ul li:hover>ul{left:-1px; color:#000;}#Nav2 ul li#active2 ul {left:-1px;}#Nav2 li#active2 a{ background-color:#3300CC; color:#fff;}#Nav2 li#active2 li a{ background:none; color:#c6c6c6;}#Nav2 li a:hover, #Nav2 li#active2 li a:hover{ background-color:#3300CC; color:#fff;}	</style><script type="text/javascript">/*<![CDATA[*//*---->*/window.onload=function(){a=document.getElementById("Nav2")b=a.getElementsByTagName("a");for(i=0;i<b.length;i++){if(b[i].href == document.location && b[i].id != "home2"){b[i].parentNode.id="active2";}}}/*--*//*]]>*/</script></head><body><div class="outer"><div id="Nav"><ul>	<li><a id="home" href="/">Home</a></li>	<li><a href="otherpage.htm">Nav 2</a>		<ul>			<li><a href="#">Nav 2a</a></li>			<li><a href="#">Nav 2b</a></li>			<li><a href="#">Nav 2c</a></li>			<li><a href="#">Nav 2d</a></li>		</ul>		</li>	<li><a href="#">Nav 3</a>		<ul>			<li><a href="#">Nav 3a</a></li>			<li><a href="#">Nav 3b</a></li>			<li><a href="#">Nav 3c</a></li>			<li><a href="#">Nav 3d</a></li>		</ul>	</li>	<li><a href="#">Nav 4</a>		<ul>			<li><a href="#">Nav 4a</a></li>			<li><a href="#">Nav 4b</a></li>			<li><a href="#">Nav 4c</a></li>			<li><a href="#">Nav 4d</a></li>		</ul>	</li></ul></div></div><div class="outer"><div id="Nav2"><ul>	<li><a id="home2" href="/>Home</a></li>	<li><a href="otherpage.htm">Nav 2</a>		<ul>			<li><a href="2a.htm">Nav 2a</a></li>			<li><a href="2b.htm">Nav 2b</a></li>			<li><a href="2c.htm">Nav 2c</a></li>			<li><a href="2d.htm">Nav 2d</a></li>		</ul>		</li>	<li><a href="3.htm">Nav 3</a>		<ul>			<li><a href="3a.htm">Nav 3a</a></li>			<li><a href="3b.htm">Nav 3b</a></li>			<li><a href="3c.htm">Nav 3c</a></li>			<li><a href="3d.htm">Nav 3d</a></li>		</ul>	</li>	<li><a href=4.htm">Nav 4</a>		<ul>			<li><a href="4a.htm">Nav 4a</a></li>			<li><a href="4b.htm">Nav 4b</a></li>			<li><a href="4c.htm">Nav 4c</a></li>			<li><a href="4d.htm">Nav 4d</a></li>		</ul>	</li></ul></div></div>

otherpage

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">body{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:62.5%;}.outer{width:960px; margin:10px auto 0; height:250px;border:1px solid #ccc; padding:12px;}#Nav{width:600px;}#Nav ul{list-style:none;padding:0;margin:0;position:relative; height:25px;border:1px solid #ccc;}#Nav li{float:left; height:25px;}#Nav li a{float:left; display:block;height:25px; padding: 0 20px; line-height:25px; font-size:11px; text-decoration:none; text-transform:uppercase;  background-color:#fff; color:#000;}#Nav li li{height:25px;float:left; border-top:1px solid transparent;}#Nav li li a{height:25px; margin:0;   color:#c6c6c6;}#Nav ul ul{position:absolute;top:25px;left:-9999em; width:100%;  border:none;}#Nav ul li:hover>ul{left:-1px; color:#000;}#Nav ul li#active ul {left:-1px;}#Nav li#active a{ background-color:#3300CC; color:#fff;}#Nav li#active li a{ background:none;  color:#c6c6c6;}#Nav li a:hover, #Nav li#active li a:hover{ background-color:#3300CC; color:#fff;}/*XXXXXXXXXXXXXXXXXXXXXXXXX option 2 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/#Nav2{width:600px;}#Nav2 ul{list-style:none;padding:0;margin:0;position:relative; height:25px;border:1px solid #ccc;}#Nav2 li{float:left; height:25px;}#Nav2 li a{float:left; display:block;height:25px; padding: 0 20px; line-height:25px; font-size:11px; text-decoration:none; text-transform:uppercase;  background-color:#fff; color:#000;}#Nav2 li li{height:25px;float:left; border-top:1px solid transparent;}#Nav2 li li a{height:25px; margin:0;   color:#c6c6c6;}#Nav2 ul ul{position:absolute;top:25px;left:-9999em; width:100%;  border:none;}#Nav2 ul li:hover>ul{left:-1px; color:#000;}#Nav2 ul li#active2 ul {left:-1px;}#Nav2 li#active2 a{ background-color:#3300CC; color:#fff;}#Nav2 li#active2 li a{ background:none; color:#c6c6c6;}#Nav2 li a:hover, #Nav2 li#active2 li a:hover{ background-color:#3300CC; color:#fff;}	</style><script type="text/javascript">/*<![CDATA[*//*---->*/window.onload=function(){a=document.getElementById("Nav2")b=a.getElementsByTagName("a");for(i=0;i<b.length;i++){if(b[i].href == document.location && b[i].id != "home2"){b[i].parentNode.id="active2";}}}/*--*//*]]>*/</script></head><body><div class="outer"><div id="Nav"><ul>	<li><a href="/">Home</a></li>	<li id="active"><a href="otherpage.htm">Nav 2</a>		<ul>			<li><a href="#">Nav 2a</a></li>			<li><a href="#">Nav 2b</a></li>			<li><a href="#">Nav 2c</a></li>			<li><a href="#">Nav 2d</a></li>		</ul>		</li>	<li><a href="#">Nav 3</a>		<ul>			<li><a href="#">Nav 3a</a></li>			<li><a href="#">Nav 3b</a></li>			<li><a href="#">Nav 3c</a></li>			<li><a href="#">Nav 3d</a></li>		</ul>	</li>	<li><a href="#">Nav 4</a>		<ul>			<li><a href="#">Nav 4a</a></li>			<li><a href="#">Nav 4b</a></li>			<li><a href="#">Nav 4c</a></li>			<li><a href="#">Nav 4d</a></li>		</ul>	</li></ul></div></div><div class="outer"><div id="Nav2"><ul>	<li><a id="home2" href="/">Home</a></li>	<li><a href="otherpage.htm">Nav 2</a>		<ul>			<li><a href="2a.htm">Nav 2a</a></li>			<li><a href="2b.htm">Nav 2b</a></li>			<li><a href="2c.htm">Nav 2c</a></li>			<li><a href="2d.htm">Nav 2d</a></li>		</ul>		</li>	<li><a href="3.htm">Nav 3</a>		<ul>			<li><a href="3a.htm">Nav 3a</a></li>			<li><a href="3b.htm">Nav 3b</a></li>			<li><a href="3c.htm">Nav 3c</a></li>			<li><a href="3d.htm">Nav 3d</a></li>		</ul>	</li>	<li><a href=4.htm">Nav 4</a>		<ul>			<li><a href="4a.htm">Nav 4a</a></li>			<li><a href="4b.htm">Nav 4b</a></li>			<li><a href="4c.htm">Nav 4c</a></li>			<li><a href="4d.htm">Nav 4d</a></li>		</ul>	</li></ul></div></div></body></html>

dmei4 · May 12, 2011

cool. thanks. I don't see anything different between anything different really in option 2 for otherpage and homepage.also another problem that is minor is there a way to keep the nav still highlighted and the text color change on hover while the mouse is in the submenu? I notice your code doesn't do that.also, it overlaps the previous layers subnav if I change it to say nav3 is active, nav2's subnav will be behind nav3's subnav

packrat · May 12, 2011

the key to preserving your anchor hover style when mousing over the sub nav is to move the :hover selector up to the parent LI element; instead of

li a:hover

do

li:hover > a

note IE 6 will not support li:hover or the '>' (child) selector, but I have no sympathy for IE6 users.for IE6 you'll need to step in with a conditional comment and use script.my typical way of handling this is to add a style rule that duplicates the hover pseudo:

li.hover, li:hover{}

then if I need to use script to make up for a lack of css support its still fairly intuitive.

dmei4 · May 12, 2011

I'm a bit confused. Can you show me in the actual class

dsonesuk · May 12, 2011

for the overlap problem, just use z-index, and yes the styling for option 1 and 2 are exactly the same, but i can only use one unique id per page, so i had to use Nav and Nav2 two avoid conflict#Nav ul ul{position:absolute;top:25px;left:-9999em; width:100%; border:none;z-index:20;}#Nav ul li#active ul {left:-1px; z-index:5;}same declaration for Nav2

body{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:62.5%;}.outer{width:960px; margin:10px auto 0; height:250px;border:1px solid #ccc; padding:12px;}#Nav{width:600px;}#Nav ul{list-style:none;padding:0;margin:0;position:relative; height:25px;border:0px solid #ccc;}#Nav li{float:left; height:25px;}#Nav li a{float:left; display:block;height:25px; padding: 0 20px; line-height:25px; font-size:11px; text-decoration:none; text-transform:uppercase;  background-color:#fff; color:#000;}#Nav li li{height:25px;float:left; border-top:1px solid transparent;}#Nav li li a{height:25px; margin:0;   color:#c6c6c6;}#Nav ul ul{position:absolute;top:25px;left:-9999em; width:100%;  border:none;z-index:20;}#Nav ul li:hover>ul{left:-1px; color:#000;}#Nav ul li#active ul {left:-1px; z-index:5;}#Nav li#active a{ background-color:#3300CC; color:#fff;}#Nav li#active li a{ background:#FFF;  color:#c6c6c6;}#Nav li a:hover, #Nav li#active li a:hover{ background-color:#3300CC; color:#fff;}/*XXXXXXXXXXXXXXXXXXXXXXXXX option 2 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/#Nav2{width:600px;}#Nav2 ul{list-style:none;padding:0;margin:0;position:relative; height:25px;border:0px solid #ccc;}#Nav2 li{float:left; height:25px;}#Nav2 li a{float:left; display:block;height:25px; padding: 0 20px; line-height:25px; font-size:11px; text-decoration:none; text-transform:uppercase;  background-color:#fff; color:#000;}#Nav2 li li{height:25px;float:left; border-top:1px solid transparent;}#Nav2 li li a{height:25px; margin:0;   color:#c6c6c6;}#Nav2 ul ul{position:absolute;top:25px;left:-9999em; width:100%;  border:none;z-index:20;}#Nav2 ul li:hover>ul{left:-1px; color:#000;}#Nav ul li#active ul {left:-1px; z-index:5;}#Nav2 li#active2 a{ background-color:#3300CC; color:#fff;}#Nav2 li#active2 li a{ background:none; color:#c6c6c6;}#Nav2 li a:hover, #Nav2 li#active2 li a:hover{ background-color:#3300CC; color:#fff;}

dsonesuk · May 12, 2011

to keep the nav still highlighted use#Nav li:hover a{ background-color:#3300CC; color:#fff;}#Nav li:hover li a{ background:#FFF; color:#c6c6c6;}#Nav li li a:hover{ background-color:#3300CC; color:#fff;}

body{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:62.5%;}.outer{width:960px; margin:10px auto 0; height:250px;border:1px solid #ccc; padding:12px;}#Nav{width:600px;}#Nav ul{list-style:none;padding:0;margin:0;position:relative; height:25px;border:0px solid #ccc;}#Nav li{float:left; height:25px;}#Nav li a{float:left; display:block;height:25px; padding: 0 20px; line-height:25px; font-size:11px; text-decoration:none; text-transform:uppercase;  background-color:#fff; color:#000;}#Nav li li{height:25px;float:left; border-top:1px solid transparent;}#Nav li li a{height:25px; margin:0;   color:#c6c6c6;}#Nav ul ul{position:absolute;top:25px;left:-9999em; width:100%;  border:none;z-index:20;}#Nav ul li:hover>ul{left:-1px; color:#000;}#Nav ul li#active ul {left:-1px; z-index:5;}#Nav li:hover a{ background-color:#3300CC; color:#fff;}#Nav li:hover li a{ background:#FFF;  color:#c6c6c6;}#Nav li li a:hover{ background-color:#3300CC; color:#fff;}#Nav li#active a{ background-color:#3300CC; color:#fff;}#Nav li#active li a{ background:#FFF;  color:#c6c6c6;}#Nav li#active li a:hover{ background-color:#3300CC; color:#fff;}

dmei4 · May 12, 2011

cool, thanks. one more question, if one of the nav doesn't have a subnav and I still want it to show on other page. what do I need to do on the css.

dsonesuk · May 12, 2011

sorry I don't understand? if you want to add menu without subnav just add it, as far as i know no adjustment to css is required. it will just highlight like the other top menu items.Edit: Which option are you going for option1 manually enter active id of the current page, OR the javascript option which automatically adds id to current page link?

dmei4 · May 12, 2011

Right now I'm going with manual. One of nav does not have a subnav, so when I scroll over it, it just shows the active subnav

dmei4 · May 12, 2011

I'm having some serious styling issues with yours. It works great and all, but I'm trying to have it flushed out the top, but I don't know what's stopping it.This is using your CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Horizontal Subnav w/ CSS & jQuery</title><style type="text/css">body {	font: Georgia, "Times New Roman", Times, serif;	margin: 0;	padding: 0;}h1 {	font: 4.7em normal Georgia, 'Times New Roman', Times, serif;	color: #333;	margin: 0;	padding: 5px 0;}h1 small{	font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;	text-transform:uppercase;	letter-spacing: 1.5em;	display: block;	color: #fff;}.container {width: 1024px; margin: 0 auto;}#Nav ul{width:100%;list-style:none;padding:0;margin:0;position:relative;}#Nav ul ul{position:absolute;top:25px;left:-9999em; width:100%;  border:none;z-index:20;}#Nav ul li:hover>ul{left:-1px; color:#000;}#Nav ul ul li{float:left;}#Nav li a{float:left; display: block;text-decoration:none; text-transform:uppercase;  background-color:none; color:#000; font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; padding: 10px 15px;}#Nav li li{}#Nav li li a{margin:0; color:#999;}#Nav li:hover a{ background-color:#CC141B; color:#fff;}#Nav li:hover li a{ background: none; color:#999;}#Nav li li a:hover{ color:#000;}#Nav ul li, #active ul {left:-1px; z-index:5;}#Nav li, #active a{ background-color:#CC141B; color:#fff;}#Nav li, #active li a{ background:none;  color:#999;}#Nav ul li ul li{text-align:center;}#Nav ul li ul li a{font-family:Arial, Helvetica, sans-serif; text-transform:none;font-size:12px; padding:10px 15px}#Nav ul li ul li a:hover, #Nav li#active li a:hover{background:none; color:#000;}#Nav li a:hover{ background-color:#CC141B; color:#fff;}</style></head><body><div class="container">		<ul id="Nav">		<ul>			<li><a href="#">Nav 1</a>				<ul>					<li><a href="#">Sub Nav</a></li>					<li><a href="#">Sub Nav</a></li>					<li><a href="#">Sub Nav</a></li>					<li><a href="#">Sub Nav</a></li>					<li><a href="#">Sub Nav</a></li>				  </ul>			</li>		</ul>		<ul>			<li><a href="#">Nav 2</a>				<ul>					<li><a href="#">Sub Nav</a></li>					<li><a href="#">Sub Nav</a></li>					<li><a href="#">Sub Nav</a></li>					<li><a href="#">Sub Nav</a></li>				</ul>			</li>		</ul>		<ul>			<li><a href="#">Nav 3</a>				<ul>					<li><a href="#">Sub Nav</a></li>					<li><a href="#">Sub Nav</a></li>					<li><a href="#">Sub Nav</a></li>					<li><a href="#">Sub Nav</a></li>					<li><a href="#">Sub Nav</a></li>					<li><a href="#">Sub Nav</a></li>					<li><a href="#">Sub Nav</a></li>				</ul>			</li>		</ul>		<ul>			<li><a href="#">Nav 4</a>				<ul>					li><a href="#">Sub Nav</a></li>					<li><a href="#">Sub Nav</a></li>					<li><a href="#">Sub Nav</a></li>					<li><a href="#">Sub Nav</a></li>					<li><a href="#">Sub Nav</a></li>				</ul>			</li>		</ul>		<ul>			<li><a href="#">Nav 5</a>				<ul>					<li><a href="#">Sub Nav</a></li>					<li><a href="#">Sub Nav</a></li>					<li><a href="#">Sub Nav</a></li>					<li><a href="#">Sub Nav</a></li>					<li><a href="#">Sub Nav</a></li>					<li><a href="#">Sub Nav</a></li>				</ul>			</li>		</ul>		 <ul>			<li><a href="#">Nav 6</a>							</li>		</ul>		<ul>			<li><a href="#">Nav 7</a>				<ul>					<li><a href="#">Sub Nav</a></li>				</ul>			</li>		</ul>	</ul>	</div></body></html>

This is how I want it to look intially

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Horizontal Subnav w/ CSS & jQuery</title><style type="text/css">body {	font: Georgia, "Times New Roman", Times, serif;	margin: 0;	padding: 0;}h1 {	font: 4.7em normal Georgia, 'Times New Roman', Times, serif;	color: #333;	margin: 0;	padding: 5px 0;}h1 small{	font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;	text-transform:uppercase;	letter-spacing: 1.5em;	display: block;	color: #fff;}.container {width: 1024px; margin: 0 auto;}#Nav ul{width:100%;list-style:none;padding:0;margin:0;position:relative;}#Nav ul ul{position:absolute;top:25px;left:-9999em; width:100%;  border:none;z-index:20;}#Nav ul li:hover>ul{left:-1px; color:#000;}#Nav ul ul li{float:left;}#Nav li a{float:left; display: block;text-decoration:none; text-transform:uppercase;  background-color:none; color:#000; font-family:Georgia, "Times New Roman", Times, serif; font-size:16px; padding: 10px 15px;}#Nav li li{}#Nav li li a{margin:0; color:#999;}#Nav li:hover a{ background-color:#CC141B; color:#fff;}#Nav li:hover li a{ background: none; color:#999;}#Nav li li a:hover{ color:#000;}#Nav ul li, #active ul {left:-1px; z-index:5;}#Nav li, #active a{ background-color:#CC141B; color:#fff;}#Nav li, #active li a{ background:none;  color:#999;}#Nav ul li ul li{text-align:center;}#Nav ul li ul li a{font-family:Arial, Helvetica, sans-serif; text-transform:none;font-size:12px; padding:10px 15px}#Nav ul li ul li a:hover, #Nav li#active li a:hover{background:none; color:#000;}#Nav li a:hover{ background-color:#CC141B; color:#fff;}</style></head><body><div class="container">		<ul id="Nav">		<ul>			<li><a href="Horizontal Subnav w_ CSS & jQuery_Active.html">Auctions</a>				<ul>					<li><a href="#">Auction Schedule</a></li>					<li><a href="#">Selling at Auction</a></li>					<li><a href="#">Buying at Auction</a></li>					<li><a href="#">LHLive</a></li>					<li><a href="#">Sale Results</a></li>				</ul>			</li>		</ul>		<ul>			<li><a href="#">Catalogues</a>				<ul>					<li><a href="#">Online Catalogues</a></li>					<li><a href="#">Downloadable Catalogues</a></li>					<li><a href="#">Print Catalogues</a></li>					<li><a href="#">Archive</a></li>				</ul>			</li>		</ul>		<ul>			<li><a href="#">Departments</a>				<ul>					<li><a href="#">Asian Works of Art</a></li>					<li><a href="#">Fine Furniture and Decorative Arts</a></li>					<li><a href="#">Fine Art</a></li>					<li><a href="#">Fine Books and Manuscripts</a></li>					<li><a href="#">Fine Jewelry and Timepieces</a></li>					<li><a href="#">Vintage Couture and Accessories</a></li>					<li><a href="#">Marketplace</a></li>					<li><a href="#">Specialized Auctions</a></li>				</ul>			</li>		</ul>		<ul>			<li><a href="#">Services</a>				<ul>					<li><a href="#">Trusts, Estates and Appraisals</a></li>					<li><a href="#">Private Sales</a></li>					<li><a href="#">Museum Services</a></li>					<li><a href="#">Packing and Shipping</a></li>					<li><a href="#">Resources</a></li>				</ul>			</li>		</ul>		<ul>			<li><a href="#">About</a>				<ul>					<li><a href="#">Company Overview</a></li>					<li><a href="#">Exceptional Sales Results</a></li>					<li><a href="#">Events</a></li>					<li><a href="#">Press</a></li>					<li><a href="#">Location & Directions</a></li>					<li><a href="#">Careers & Internships</a></li>				</ul>			</li>		</ul>		 <ul>			<li><a href="#">Contact</a>							</li>		</ul>		<ul>			<li><a href="#">Regional Offices</a>				<ul>					<li><a href="#">Naples</a></li>				</ul>			</li>		</ul>	</ul>	</div></body></html>

dsonesuk · May 12, 2011

Ok! just figured what you meant! here is revised css and html, with IE6 fix includedto fix this current problem, you will need to add a empty li list item, for non submenu

	<li><a href="nav3.htm">Nav 3</a>		<ul>			<li> </li>		</ul>	</li>

because IE6 does not recognise the '>' in styling for#Nav ul li:hover>ul{left:-1px; color:#000;}I had to change it to#Nav ul li:hover ul{left:-1px; color:#000;}which does the same thing anyway.the whole code related to manual input of idhome page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">body{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:62.5%;}.outer{width:960px; margin:10px auto 0; height:250px;border:1px solid #ccc; padding:12px;}#Nav{width:600px;}#Nav ul{list-style:none;padding:0;margin:0;position:relative; height:25px;border:0px solid #ccc;}#Nav li{float:left; height:25px;}#Nav li a{float:left; display:block;height:25px; padding: 0 20px; line-height:25px; font-size:11px; text-decoration:none; text-transform:uppercase;  background-color:#fff; color:#000;}#Nav li li{height:25px;float:left; border-top:1px solid transparent!important; border-top:1px solid #fff; /* border white for IE6*/}#Nav li li a{height:25px; margin:0;   color:#c6c6c6;}#Nav ul ul{position:absolute;top:25px;left:-9999em; width:100%;  border:none;z-index:20;background:#FFF;}#Nav ul li:hover ul, #Nav ul li.sfhover ul{left:-1px; color:#000;}#Nav ul li#active ul {left:-1px; z-index:5;}#Nav li:hover a, #Nav li.sfhover a{ background-color:#3300CC; color:#fff;}#Nav li:hover li a,#Nav li.sfhover li a{ background:#FFF;  color:#c6c6c6;}#Nav li li a:hover{ background-color:#3300CC; color:#fff;}#Nav li#active a{ background-color:#3300CC; color:#fff;}#Nav li#active li a{ background:#FFF;  color:#c6c6c6;}#Nav li#active li a:hover{ background-color:#3300CC; color:#fff;}</style><!--[if lt IE 7]><script type="text/javascript">var sfHover;sfHover = function() {if (document.getElementById("Nav")){var sfEls = document.getElementById("Nav").getElementsByTagName("li");for (var i=0; i<sfEls.length; i++) 	{	sfEls[i].onmouseover=function() 							{							this.className+=" sfhover";							}	sfEls[i].onmouseout=function() 							{							this.className=this.className.replace(new RegExp(" sfhover\\b"), "");							}	}}}if (window.attachEvent) window.attachEvent("onload", sfHover);</script><![endif]--></head><body><div class="outer"><div id="Nav"><ul>	<li><a href="/">Home</a> 		<ul>			<li> </li><!-- for no submenu listing -->		</ul>	</li>	<li><a href="nav2.htm">Nav 2</a>		<ul>			<li><a href="#">Nav 2a</a></li>			<li><a href="#">Nav 2b</a></li>			<li><a href="#">Nav 2c</a></li>			<li><a href="#">Nav 2d</a></li>		</ul>		</li>	<li><a href="nav3.htm">Nav 3</a>		<ul>			<li> </li> <!-- for no submenu listing -->		</ul>	</li>	<li><a href="nav4">Nav 4</a>		<ul>			<li><a href="#">Nav 4a</a></li>			<li><a href="#">Nav 4b</a></li>			<li><a href="#">Nav 4c</a></li>			<li><a href="#">Nav 4d</a></li>		</ul>	</li></ul></div></div></body></html>

any other pages you add id="active" to li with link within it for current page.so if current page is nav3.htm id is added to '<li id="active"><a href="nav3.htm">Nav 3</a>'

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css">  body{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:62.5%;}  .outer{width:960px; margin:10px auto 0; height:250px;border:1px solid #ccc; padding:12px;}  #Nav{width:600px;} #Nav ul{list-style:none;padding:0;margin:0;position:relative; height:25px;border:0px solid #ccc;}  #Nav li{float:left; height:25px;} #Nav li a{float:left; display:block;height:25px; padding: 0 20px; line-height:25px; font-size:11px; text-decoration:none; text-transform:uppercase;  background-color:#fff; color:#000;} #Nav li li{height:25px;float:left; border-top:1px solid transparent!important; border-top:1px solid #fff; /* border white for IE6*/} #Nav li li a{height:25px; margin:0;   color:#c6c6c6;} #Nav ul ul{position:absolute;top:25px;left:-9999em; width:100%;  border:none;z-index:20;background:#FFF;}  #Nav ul li:hover ul, #Nav ul li.sfhover ul{left:-1px; color:#000;}  #Nav ul li#active ul {left:-1px; z-index:5;}  #Nav li:hover a, #Nav li.sfhover a{ background-color:#3300CC; color:#fff;} #Nav li:hover li a,#Nav li.sfhover li a{ background:#FFF;  color:#c6c6c6;} #Nav li li a:hover{ background-color:#3300CC; color:#fff;}   #Nav li#active a{ background-color:#3300CC; color:#fff;} #Nav li#active li a{ background:#FFF;  color:#c6c6c6;} #Nav li#active li a:hover{ background-color:#3300CC; color:#fff;}  </style>  <!--[if lt IE 7]> <script type="text/javascript"> var sfHover; sfHover = function() {  if (document.getElementById("Nav")) {  var sfEls = document.getElementById("Nav").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) 	 {	 sfEls[i].onmouseover=function() 							 {							 this.className+=" sfhover";							 }	 sfEls[i].onmouseout=function() 							 {							 this.className=this.className.replace(new RegExp(" sfhover\\b"), "");							 }	 } } }  if (window.attachEvent) window.attachEvent("onload", sfHover);  </script> <![endif]--> </head>  <body> <div class="outer"> <div id="Nav"> <ul>	 <li><a href="/">Home</a> 		 <ul>			 <li> </li><!-- for no submenu listing -->		 </ul>	 </li> 	 <li><a href="nav2.htm">Nav 2</a>		 <ul>			 <li><a href="#">Nav 2a</a></li>			 <li><a href="#">Nav 2b</a></li>			 <li><a href="#">Nav 2c</a></li>			 <li><a href="#">Nav 2d</a></li>		 </ul>		 </li>	 <li id="active"><a href="nav3.htm">Nav 3</a>		 <ul>			 <li> </li> <!-- for no submenu listing -->		 </ul>	 </li>	 <li><a href="nav4">Nav 4</a>		 <ul>			 <li><a href="#">Nav 4a</a></li>			 <li><a href="#">Nav 4b</a></li>			 <li><a href="#">Nav 4c</a></li>			 <li><a href="#">Nav 4d</a></li>		 </ul>	 </li> </ul> </div> </div> </body> </html>

that should be it!

dmei4 · May 13, 2011

Thanks I'll test it with my CSS tomorrow on my other machine. I don't have the other files on hand.

dmei4 · May 13, 2011

Thanks it works, I've been having issues trying just have the text-align:center in the sub nav, where should I put it?Also, I have the subnav makes 2 rows and when that is active, it doesn't hide the second row. Any work around?

hellodipak · May 17, 2011

Here it is - http://dipaksblogonline.blogspot.com/2011/...wn-nav-bar.html

This is what I'm trying to do. When the page is idle and on the main page. The subnav is hidden. When I mouseover they appear. If I click on one of the nav page. Say Nav2. I would like Nav2 submenu to be visible and also nav2 to be highlighted as well. While still having the freedom of mousing over other navs and having their subnavs appear. Here is an image of what I'm going for.

laobus5m1z · May 21, 2011

??So long as there shall exist, by virtue of law and custom, decrees of damnation pronounced by society, artificially creating hells amid the civilization of earth, and adding the element of human fate to divine destiny;

dmei4 · June 6, 2011

If I want to change it to a drop down with these classes, what do I have to do?

dsonesuk · June 7, 2011

clarify

If I want to change it to a drop down with these classes, what do I have to do?

Do you mean you want replace what to have with normal dropdown menu, OR you wish to have a dropdown feature for the 1st level submenu links.

Horizontal Submenu

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived