Web Design 2
JQuery Navigation Menu
Objective – create an animated navigated menu using Jquery code.
Create a new html page in Dreamweaver; name the file
“jquery_nav1.html”
Step 1. An unordered list with an ID and dummy links.
<ul id="topnav">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
Step 2 - Add the following to your CSS.
body {background-color: #1d1d1d;}
ul#topnav {
margin: 0;
padding: 0;
list-style: none;
float: left;
font-size: 1.1em;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden; /*--Important - Masking out the hover state by
default--*/
float: left;
height:40px;
}
ul#topnav a, ul#topnav span { /*--The <a> and <span> share the
same properties since the <span> will be a duplicate of the <a>
tag--*/
padding: 10px 20px;
float: left;
text-decoration: none;
color: red;
background: url(a_bg.gif) repeat-x;
text-transform: uppercase;
clear: both;
width: 100%;
height: 20px;
line-height: 20px; /*--Vertical alignment of text--*/
}
ul#topnav a{ /*--This is basically the hover state of
navigation--*/
color: #555;
background-position: left bottom;
}
ul#topnav span{ /*--Default state of navigation--*/
background-position: left top;
}
Step 3 – link to the javascript file hosted on Google. Place this directly above
the </head> tag (not inside of the style sheet.)
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.
js"></script>
Step 4 The JQuery – Place this jquery code directly below the Step 3 code,
(make sure it is above the </head> tag).
<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>
You should now have an animated navigation menu.