SUPPORT THE SITE WITH A CLICK

Subscribe Rss:

SUPPORT THE SITE WITH A CLICK

Friday, May 8, 2009

Vertical navigation menus

Navigation is the most significant element in webdesign.This article presents the implementation of vertical sliding navigation menus


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>