Create a jquery sliding menu

thegeby.blogspot.com - Create a jquery sliding menu

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function () {
 $('.menu_class').click(function () {
$('ul.the_menu').slideToggle('medium');
 });
});
</script>
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background-color: #333333;
}

#button {
height: 32px;
width: 184px;
margin: auto;
cursor:hand;
}

ul, li {
margin:0;
padding:0;
list-style:none;
}

.menu_class {
background-image: url(button.png);
background-repeat: no-repeat;
height: 32px;
width: 184px;
border:1px solid #1c1c1c;
}
.menu_class h2{
color:#FFFFFF;
margin:5px 10px 10px 30px;
}

.the_menu {
display:none;
width:300px;
border: 1px solid #1c1c1c;

}

.the_menu li {
background-color: #302f2f;
}

.the_menu li a {
color:#FFFFFF;
text-decoration:none;
padding:10px;
display:block;
text-shadow: #222d2f -1px -1px 0;
border-top: 1px solid #1c1c1c;
border-bottom: 1px solid #1c1c1c;
}

.the_menu li a:hover {
padding:10px;
font-weight:bold;
color: #0F6AA6;
}

</style>
<div><div><h2>--- Select ---</h2></div>
<ul>
<li><a href="#">www.google.com</a></li>
<li><a href="#">www.yahoo.com.ph</a></li>
<li><a href="#">www.r-ednalan.blogspot.com</a></li>
<li><a href="#">www.bing.com</a></li>
<li><a href="#">www.facebook.com</a></li>
</ul>
</div>

Download

http://dl.dropbox.com/u/7106563/r-ednalan/slidemenu.zip

other source : http://viva.co.id, http://youtube.com, http://tutorial101.blogspot.com

Posted by Unknown