<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<!-- STYLE-->
<style>
#main-nav{
width:150px;
}
body{
height:1000px;
}
</style>
<!--SCRIPT-->
<script>
$(function() {
$( "#main-nav" ).menu();
});
<!--Fire on scroll event and collapse all menu active items -->
window.onscroll = function (event) {
$( "#main-nav" ).menu( "collapseAll", null,true );
}
</script>
<body>
<div id="sub-link-bar"> </div>
<div id="wrap">
<div class="roundfg">
<ul id="main-nav">
<li><a class="main-link" href="#">Home</a>
<ul class="sub-links">
<li><a class="main-link" href="#">Home</a></li>
</ul>
</li>
<li><a class="main-link" href="#">Tutorials</a>
<ul class="sub-links">
<li><a href="#" >Design</a> </li>
<li><a href="#">HTML & CSS</a> </li>
<li><a href="#" >Other</a> </li>
<li><a href="#">PHP</a> </li>
<li><a href="#">Ruby</a> </li>
<li><a href="#">Site Builds</a> </li>
<li><a href="#">Tools & Tips</a> </li>
<li class="cat-item cat-item-35"><a href="#">Wordpress</a> </li>
</ul>
</li>
<li><a class="main-link" href="#">Videos</a>
<ul class="sub-links">
<li><a href="#">Screencasts</a> </li>
</ul>
</li>
<li><a class="main-link" href="#">About</a>
<ul class="sub-links">
</ul>
</li>
</ul>
</div></body>
</html>
SEE ALSO
Simple Sign-in form using HTML and CSS
How to place text inside a circle using CSS
I also have created the fiddle for the same http://jsfiddle.net/3XED6/
No comments:
Post a Comment