In this we have used the slidetoggle effects for sliding the menus in onlcik event.
For live demo
Click here
Code
<html>
<head>
<script type="text/javascript" src="jquery.min.js">
</script>
<style type='text/css'>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background: #3A362F;
}
ul, li {
margin: 0;
padding: 0;
list-style: none;
} .menu_body li {
background: #fff;
} .menu_body li a {
color: #333;
text-decoration: none;
padding: 10px;
display: block;
} .menu_body {
display: none;
width: 184px;
border:1px solid #eee;
} .body {
width: 186px;
background: url('strip2.png') repeat-x;
height: 32px;
text-align:center;
} .menu_head {
color: #333;
text-decoration: none;
font-weight:bolder;
} .menu_body li.alt {
background: url('strip1.png') repeat-x;
} .menu_body li.alt a {
color:#fff;
font-size:14px;
}
#wrapper
{
margin:10px auto;
width:960px;
}
</style>
<script type="text/javascript">
$(document).ready(function()
{
$("ul.menu_body li:odd").addClass("alt");
$('a.menu_head').click(function(){
$('ul.menu_body').slideToggle("slow");
});
$('ul.menu_body li a').mouseover(function(){
$(this).animate({
fontSize: "13px",
paddingLeft: "20px"
}, 150);
});
$('ul.menu_body li a').mouseout(function(){
$(this).animate({
fontSize: "11px",
paddingLeft: "10px"
}, 150);
});
});
</script>
</head>
<body>
<div id='wrapper'>
<div class='body'>
<a href="#" class="menu_head">Click here</a>
</div>
<ul class="menu_body">
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<li>
<a href="#">Wordpress</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">Freebies</a>
</li>
<li>
<a href="#">Gallery</a>
</li>
<li>
<a href="#">Contact Us</a>
</li>
</ul>
</div>
</body>
</html>
No comments :
Post a Comment