Let’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  !!!!:)

DEMO :)