dmei4 Posted May 11, 2011 Share Posted May 11, 2011 I'm planning to build a horizontal subnav. When you mouse over the nav you see the sub categories and those are selectable. However, when you click on the page and you go there. I want the next page to have the subnav visible, but also allow the user to select other things in the nav while going over the visible subnav.http://www.sohtanaka.com/web-design/horizo...ith-css-jquery/I see the example and it only does half of what I want it to do. Link to comment Share on other sites More sharing options...
dmei4 Posted May 11, 2011 Author Share Posted 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. Link to comment Share on other sites More sharing options...
packrat Posted May 11, 2011 Share Posted May 11, 2011 this can be accomplished using CSS, you might want to try this question out over on the CSS forum.I can provide you an example, but I would have to type it up and that would be a bit more time consuming that I can get into right nowhere's a tutorial that might help:http://css.maxdesign.com.au/index.htmof course you can do this with script as well, but I'd tend to this this first in CSS then use JS to over-ride the CSS behaviors to add 'stickyness', timeouts...I'm confused as to what requirement the example you posted fails to accomplish, looks like it covers everything Link to comment Share on other sites More sharing options...
dmei4 Posted May 11, 2011 Author Share Posted May 11, 2011 thanks for the tip Link to comment Share on other sites More sharing options...
dmei4 Posted May 12, 2011 Author Share Posted May 12, 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 12, 2011 Share Posted May 12, 2011 EDIT: sorry wrong topic, ut still appliesfor 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 More sharing options...
dmei4 Posted May 12, 2011 Author Share Posted May 12, 2011 For your other page example two didn't have a static subnav, was that what you intentionally wanted?Also is there a way to keep the nav highlighted while in the subnav? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.