PDA

View Full Version : Need help with an animated jQuery Nav menu- "On" State



evanmiller2007
12-18-2009, 03:43 PM
Hey Guys,
New to this forum, and pretty new to jQuery. I'm trying to use this jQuery script on my website:
http://www.sohtanaka.com/web-design/animate-navigation-with-css-jquery/

I've had no problem implementing it, it works just fine. The problem I'm having is that I want the current page the user is on to remain highlighted. So that the "Home" page stays on when the user is on the home page, the "About Us" page stays on when the user is on the about us page etc. With CSS rollovers I would usually just make a link class and apply it to the current page's button, but it doesn't work with this script.

Could someone help me out? I'm sure it is something very simple but I'm pretty lost when it comes to jQuery aside from just implementing scripts, so I definitely need a little help.

Thanks in advance!
evan

ps: there is a demo of the script in action on that site, and the jquery code is right in the source if you want to take a look:
http://www.sohtanaka.com/web-design/examples/fancy-navigation/

vwphillips
12-19-2009, 08:25 AM
<!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>Fancy Navigation with CSS &amp; jQuery - Tutorial by Soh Tanaka</title>

<style type="text/css">
html { background: #1d1d1d; }
body {
margin: 0; padding: 0;
font: 10px normal Verdana, Arial, Helvetica, sans-serif;
background: #1d1d1d;
}
h1 {
font: 4.7em normal Georgia, 'Times New Roman', Times, serif;
color: #fff;
margin: 0;
text-align: center;
padding: 5px 0;
}
h1 small{
font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
letter-spacing: 1.4em;
display: block;
color: #ccc;
}
.container {
width: 520px;
height: 330px;
position: absolute;
top: 50%; left: 50%;
margin: -165px 0 0 -210px;
overflow: hidden;
}
img {border: none;}
ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 520px;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: block;
}

ul#topnav.v2 span{
background: url(http://www.sohtanaka.com/web-design/examples/fancy-navigation/a_bg.gif) repeat-x left top;
}
ul#topnav.v2 a{
color: #555;
background: url(http://www.sohtanaka.com/web-design/examples/fancy-navigation/a_bg.gif) repeat-x left bottom;
}
.default span {
margin-Top:-40px;
}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">


$(document).ready(function() {


$("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag

$("#topnav li").each(function() { //For each list item...
var linkText = $(this).find("a").html(); //Find the text inside of the a tag
$(this).find("span").show().html(linkText); //Add the text in the span tag
});

$("#topnav li").hover(function() { //On hover...
$(this).find("span").stop().animate({
marginTop: "-40" //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find("span").stop().animate({
marginTop: "0" //Move the span back to its original state (0px)
}, 250);
});


});
</script>
</head>

<body>

<div class="container">
<h1>Fancy Navigation with<br />CSS &amp; jQuery <small>Tutorial by Soh Tanaka</small></h1>

<ul id="topnav" class="v2">
<li class="default" ><a href="http://www.sohtanaka.com/">Home</a></li>
<li><a href="http://www.sohtanaka.com/web-design/web-design-services.php">Services</a></li>
<li><a href="http://www.sohtanaka.com/web-design/designbombscom/">Portfolio</a></li>

<li><a href="http://www.sohtanaka.com/web-design-blog/">Blog</a></li>
<li><a href="http://www.sohtanaka.com/about/">About</a></li>
<li><a href="http://www.sohtanaka.com/contact/">Contact</a></li>
</ul>

<ul id="topnav">
<li><a href="http://www.sohtanaka.com/">Home</a></li>
<li><a href="http://www.sohtanaka.com/web-design/web-design-services.php">Services</a></li>

<li><a href="http://www.sohtanaka.com/web-design/designbombscom/">Portfolio</a></li>
<li><a href="http://www.sohtanaka.com/web-design-blog/">Blog</a></li>
<li><a href="http://www.sohtanaka.com/about/">About</a></li>
<li><a href="http://www.sohtanaka.com/contact/">Contact</a></li>
</ul>


<div style="clear: both; display: block; color: #888; text-align:center; padding-top: 20px;"><a href="http://www.sohtanaka.com/web-design/animate-navigation-with-css-jquery/" style="color: #fff;">Fancy Navigation with CSS &amp; jQuery</a> by Soh Tanaka.<br />Check out his <a href="http://www.sohtanaka.com/web-design-blog/" style="color: #fff;">Web Design Blog</a> for more tutorials!</div>

</div>

</body>
</html>

jscheuer1
12-19-2009, 10:29 AM
You missed something there Vic. If I hover over the 'default' and then hover out, it reverts to the 'unselected' state. Two ways to deal with that. You can either give the style the !important keyword:


.default span {
margin-Top: -40px!important;
}

Or, and this is perhaps better, though doing both won't hurt, you can have the script skip the default li:


$(document).ready(function() {


$("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag

$("#topnav li").each(function() { //For each list item...
var linkText = $(this).find("a").html(); //Find the text inside of the a tag
$(this).find("span").show().html(linkText); //Add the text in the span tag
});

$("#topnav li:not(.default)").hover(function() { //On hover...
$(this).find("span").stop().animate({
marginTop: "-40" //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find("span").stop().animate({
marginTop: "0" //Move the span back to its original state (0px)
}, 250);
});


});

jscheuer1
12-19-2009, 02:04 PM
Here's a more efficient version. It reuses the jQuery element objects it creates instead of making them over and over again as does the original. I also took the mishmash of em's and pixel units and converted them to the proper percentages and em's, cleaned up the rest of the style, and got rid of the invalid double use of the id 'topnav'. It no longer needs a default class. The selection of the current page is made by finding the anchor tag which has no href attribute set. I'm assuming you don't really want your page to navigate to itself, right?


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Fancy Navigation with CSS &amp; jQuery - Tutorial by Soh Tanaka</title>

<style type="text/css">
body {
margin: 0;
padding: 0;
font: 62.5% normal verdana, arial, helvetica, sans-serif;
background: #1d1d1d;
}
h1 {
font: 470% normal georgia, 'times new roman', times, serif;
color: #fff;
margin: 0;
text-align: center;
padding: 5px 0;
}
h1 small {
font: 20% normal verdana, arial, helvetica, sans-serif;;
text-transform:uppercase;
letter-spacing: 1.4em;
display: block;
color: #ccc;
}
.container {
width: 52em;
height: 33.5em;
position: absolute;
top: 50%; left: 50%;
margin: -16.5em 0 0 -24.5em;
}
ul.topnav {
margin: 0.91em 0 1.82em;
padding: 0;
list-style: none;
font-size: 110%;
clear: both;
float: left;
width: 47.27em;
}
ul.topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height: 3.64em;
}
ul.topnav a, ul.topnav span {
padding: 0.91em 1.82em;
float: left;
text-decoration: none;
color: #fff;
text-transform: uppercase;
clear: both;
height: 1.82em;
line-height: 1.82em;
background: #1d1d1d;
}
ul.topnav a {
color: #7bc441;
}
ul.topnav.v2 span{
background: url(http://www.sohtanaka.com/web-design/examples/fancy-navigation/a_bg.gif) repeat-x left top;
}
ul.topnav.v2 a{
color: #555;
background: url(http://www.sohtanaka.com/web-design/examples/fancy-navigation/a_bg.gif) repeat-x left bottom;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($) {

$('.topnav li').find('a[href]').parent().each(function(span, li){
li = $(li); span = $('<span>' + li.find('a').html() + '<\/span>');
li.hover(function(){
span.stop().animate({marginTop: '-40'}, 250);
}, function(){
span.stop().animate({marginTop: '0'}, 250);
}).prepend(span);
});

});
</script>
</head>

<body>

<div class="container">
<h1>Fancy Navigation with&nbsp;<br>CSS &amp; jQuery <small>Tutorial by Soh Tanaka&nbsp;</small></h1>

<ul class="topnav v2">
<li><a>Home</a></li>
<li><a href="http://www.sohtanaka.com/web-design/web-design-services.php">Services</a></li>
<li><a href="http://www.sohtanaka.com/web-design/designbombscom/">Portfolio</a></li>
<li><a href="http://www.sohtanaka.com/web-design-blog/">Blog</a></li>
<li><a href="http://www.sohtanaka.com/about/">About</a></li>
<li><a href="http://www.sohtanaka.com/contact/">Contact</a></li>
</ul>

<ul class="topnav">
<li><a>Home</a></li>
<li><a href="http://www.sohtanaka.com/web-design/web-design-services.php">Services</a></li>
<li><a href="http://www.sohtanaka.com/web-design/designbombscom/">Portfolio</a></li>
<li><a href="http://www.sohtanaka.com/web-design-blog/">Blog</a></li>
<li><a href="http://www.sohtanaka.com/about/">About</a></li>
<li><a href="http://www.sohtanaka.com/contact/">Contact</a></li>
</ul>


<div style="clear: both; display: block; color: #888; text-align:center; padding-top: 2em;"><a href="http://www.sohtanaka.com/web-design/animate-navigation-with-css-jquery/" style="color: #fff;">Fancy Navigation with CSS &amp; jQuery</a> by Soh Tanaka.<br>Check out his <a href="http://www.sohtanaka.com/web-design-blog/" style="color: #fff;">Web Design Blog</a> for more tutorials!</div>
</div>

</body>
</html>

evanmiller2007
12-23-2009, 09:16 PM
wow, thanks so much guys! this looks like it will really help out. i appreciate it big time!