index.html:
----------
<html>
<head>
<title>Jquery Animated menu bar</title>
<link rel="stylesheet" href="style.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body >
<div id="wrapper">
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About US</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
script.js:
--------
$(document).ready(function() {
$("#navigation li").append("<span></span>");
//hover over
$("#navigation li").hover(function() {
$(this).find("span").animate({
height: "100%",width:"100%",left:"0px",top:"0px"
}, 250);
} , function() { //callback function
$(this).find("span").stop().animate({
height: "0px",width:"0px",left:"50%",top:"40px"
}, 250);
});
});
style.css:
---------
ul#navigation {
position:relative;
left:20%;
top:200px;
margin: 0;
padding: 0;
list-style: none;
float: left;
font-size: 1.1em;
}
ul#navigation li{
position:relative;
margin: 0px;
padding: 0;
overflow: hidden;
float: left;
height:80px;
width:133px;
border:1px solid #b3b3b3;
text-align:center;
background-color:white;
}
ul#navigation a {
padding:30px 0px 30px 0;
float: left;
text-decoration: none;
color: #000000;
font-weight:bold;
text-transform: uppercase;
clear: both;
width: 100%;
height: 20px;
line-height: 20px;
position:relative;
z-index:2;
}
ul#navigation a:hover {
color:white;
}
ul#navigation li span
{
position:absolute;
background-color:orangered;
height:0px;
width:0px;
left: 50%;
top: 40px;
overflow: hidden;
z-index:1;
}
and also need jquery.js
----------
<html>
<head>
<title>Jquery Animated menu bar</title>
<link rel="stylesheet" href="style.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body >
<div id="wrapper">
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About US</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
script.js:
--------
$(document).ready(function() {
$("#navigation li").append("<span></span>");
//hover over
$("#navigation li").hover(function() {
$(this).find("span").animate({
height: "100%",width:"100%",left:"0px",top:"0px"
}, 250);
} , function() { //callback function
$(this).find("span").stop().animate({
height: "0px",width:"0px",left:"50%",top:"40px"
}, 250);
});
});
style.css:
---------
ul#navigation {
position:relative;
left:20%;
top:200px;
margin: 0;
padding: 0;
list-style: none;
float: left;
font-size: 1.1em;
}
ul#navigation li{
position:relative;
margin: 0px;
padding: 0;
overflow: hidden;
float: left;
height:80px;
width:133px;
border:1px solid #b3b3b3;
text-align:center;
background-color:white;
}
ul#navigation a {
padding:30px 0px 30px 0;
float: left;
text-decoration: none;
color: #000000;
font-weight:bold;
text-transform: uppercase;
clear: both;
width: 100%;
height: 20px;
line-height: 20px;
position:relative;
z-index:2;
}
ul#navigation a:hover {
color:white;
}
ul#navigation li span
{
position:absolute;
background-color:orangered;
height:0px;
width:0px;
left: 50%;
top: 40px;
overflow: hidden;
z-index:1;
}
and also need jquery.js
No comments:
Post a Comment