jQuery and CSS menu this is really simply one :)
March 4th, 2009 by adminLet’s begin 
what we gonna do :
a simple vertical menu for the small site
what we need :
jQuery library and little CSS file
css :
<style type=”text/css”>
<!–
body{
font-size:12px;
background-color: #FFF;
font-family: Verdana, Geneva, sans-serif;
}
ul, li{
margin:0;
padding:0;
list-style:none;
}
.menu_1 {
display:none;
width:199px;
border-right:1px solid #cdcdcd;
border-bottom:1px solid #cdcdcd;
border-left:1px solid #cdcdcd;
}
.menu_1 li{
background-color: #CCC;
}
.menu_1 li.alt{
background-color: #FFF;
}
.menu_1 li a{
color:#333;
text-decoration:none;
padding:5px;
display:block;
}
.menu_1 li a:hover{
padding:10px 5px;
font-weight:bold;
}
–>
</style>
now we gonna add jQuery :
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js” type=”text/javascript”></script>
small javascript :
<script type=”text/javascript”>
$(document).ready(function () {
$(”ul.menu_1 li:even”).addClass(”alt”);
$(’img.menu_main’).click(function () {
$(’ul.menu_1′).slideToggle(’medium’);
});
$(’ul.menu_1 li a’).mouseover(function () {
$(this).animate({ fontSize: “14px”, paddingLeft: “15px” }, 50 );
});
$(’ul.menu_1 li a’).mouseout(function () {
$(this).animate({ fontSize: “12px”, paddingLeft: “10px” }, 50 );
});
});
</script>
and our html code :
<body>
<img src=”http://blog.branding-studio.com/examples/m.png” width=”201″ height=”27″ class=”menu_main” />
<ul class=”menu_1″>
<li><a href=”#”>Item1</a></li>
<li><a href=”#”>Item2</a></li>
<li><a href=”#”>Item3</a></li>
<li><a href=”#”>Item4</a></li>
</ul>
</body>
thats all !!!!:)
but i think this is very simple for you 
