Jump to content

Horizontal Submenu


dmei4
 Share

Recommended Posts

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.navspec.jpg

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Edited by packrat
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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.

Edited by dmei4
Link to comment
Share on other sites

<!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.

Link to comment
Share on other sites

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>

Edited by dsonesuk
Link to comment
Share on other sites

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

Edited by dmei4
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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;}

Link to comment
Share on other sites

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;}

Edited by dsonesuk
Link to comment
Share on other sites

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?

Edited by dsonesuk
Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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!

Edited by dsonesuk
Link to comment
Share on other sites

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?

Edited by dmei4
Link to comment
Share on other sites

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.navspec.jpg
Link to comment
Share on other sites

  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...