Sep
28
2008
Animated Menu with JQuery PDF Print E-mail

HariesDesign.com Follow this step to make animated menu with JQuery

 Image

Demo

 

 

Step 1

Place Beetween <HEAD>...</HEAD>

<style type="text/css" media="screen">
body {
margin: 0;
padding: 0;
font: 100%/1.5 "lucida sans unicode", verdana, tahoma, sans-serif;
}

#nav {
width: 401px;
height: 48px;
margin: 0;
padding: 0;
background: url(images/animated-nav.png) repeat-x;
list-style: none;
overflow: hidden
}

#nav li {
position: absolute;
overflow: hidden;
font-size: 1em;
}

#nav li, #nav li * { height: 48px }
#nav a { display: block }
#nav em, #nav span {
display: block;
position: absolute;
top: 0; left: 0;
z-index: 1;
background: url(images/animated-nav.png) no-repeat;
cursor: pointer;
}

#nav span { display: none }

#n-home { left: 23px }
#n-home, #n-home * { width: 77px }
#n-home em { background-position: -23px 0 }
#n-home:hover em, #n-home span, #home #n-home em { background-position: -23px -49px }
#n-about, #n-about * { width: 83px }
#n-about { left: 99px }
#n-about em { background-position: -99px 0 }
#n-about:hover em, #n-about span, #about #n-about em { background-position: -99px -49px }
#n-services, #n-services * { width: 98px }
#n-services { left: 182px }
#n-services em { background-position: -182px 0 }
#n-services:hover em, #n-services span, #services #n-services em { background-position: -182px -49px }
#n-contact, #n-contact * { width: 98px }
#n-contact { left: 280px }
#n-contact em { background-position: -280px 0 }
#n-contact:hover em, #n-contact span, #contact #n-contact em { background-position: -280px -49px }

#nav .over { text-indent: -999em }
#nav .over em { background-image: none }
</style>
 

 

Step 2

Replace <BODY>...</BODY> with

<body id="home">
<ul id="nav">
<li id="n-home"><a href="#home"><em></em>Home</a></li>
    <li id="n-about"><a href="#about"><em></em>About</a></li>
<li id="n-services"><a href="#services"><em></em>Services</a></li>
<li id="n-contact"><a href="#contact"><em></em>Contact</a></li>
</ul>
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
// Get the ID of the body
var parentID = $("body").attr("id");
// Loop through the nav list items
$("#nav li").each(function() {
// compare IDs of the body and list-items
var myID = $(this).attr("id");
// only perform the change on hover if the IDs don't match (so the active link doesn't change on hover)
if (myID != "n-" + parentID) {
// for mouse actions
$(this).children("a").hover(function() {
// add a class to the list item so that additional styling can be applied to the <em> and the text
$(this).addClass('over');
// add in the span that will be faded in and out
$(this).append("<span><\/span>");
$(this).find("span").fadeIn(400);
}, function() {
$(this).removeClass('over');

$(this).find("span").fadeOut(400, function() {
$(this).remove();
});
});
// for keyboard actions
$(this).children("a").focus(function() {
$(this).addClass('over');
$(this).append("<span><\/span>");
$(this).find("span").fadeIn(400);
});
$(this).children("a").blur(function() {
$(this).removeClass('over');
$(this).find("span").fadeOut(400, function() {
$(this).remove();
});
});
}
});
});
//-->
</script>
</body>
 

 

Step 3

Use this Java Script code

 

 
< Prev   Next >

Gallery Photography

Login