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?
Code:
<!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 & 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 <br>CSS & jQuery <small>Tutorial by Soh Tanaka </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 & 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>
Need help with an animated jQuery Nav menu- "On" State
Reply With Quote
Bookmarks