This code will generate a stylish menu bar with CSS and Jquery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>JQuery Sliding Menu Demo</title>
<script type="text/javascript">
$(function(){
// hide
all links except for the first
$('ul.child:not(:first)').hide();
$("a.slide:first").css("background-color","#FF9900");
// for
image
//
$("a.slide:first").css("background-image","url('path')");
$('ul.parent
a.slide').click(function(){
$('ul.parent
a.slide').css("background-color","#3399FF");
$('ul.parent
a.slide').hover(function(){
$(this).css("background-color","#66CC66");
});
$('ul.parent
a.slide').mouseout(function(){
$(this).css("background-color","#3399FF");
});
$(this).mouseout(function(){
$(this).css("background-color","#FF9900");
});
$(this).css("background-color","#FF9900");
//
slide all up
$('ul.child').slideUp('slow');
//
show the links of current heading
$(this).next().find('a').show();
//
slide down current heading
$(this).next().slideDown('fast');
//
prevent default action
return
false;
});
});
</script>
<style type="text/css">
a
{
outline:none;
}
ul
{
list-style:none;
}
ul.parent
{
margin:0px;
}
ul.parent a
{
display:block;
width:200px;
border-bottom:1px
solid #336699;
background:#3399FF;
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
padding:7px;
}
ul.parent a:hover
{
color:#000000;
background:#66CC66
}
ul.child a
{
background:#333333;
color:#FFFFFF;
border-bottom:1px
solid #f6f6f6;
font-weight:normal;
margin-left:-40px;
padding:7px;
width:200px;
display:block;
line-height:10px;
}
ul.child a:hover
{
color:#3333333;
background:#CCCCCC
}
</style>
</head>
<body>
<h1
align="center">JQuery Sliding Menu Demo</h1>
<ul
class="parent">
<li>
<a href="#"
class="slide">Title One</a>
<ul
class="child">
<li><a href="#">Link
One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</li>
</ul>
<ul
class="parent">
<li>
<a href="#"
class="slide">Title Two</a>
<ul
class="child">
<li><a href="#">Link
One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</li>
</ul>
<ul
class="parent">
<li>
<a href="#"
class="slide">Title Three</a>
<ul
class="child">
<li><a href="#">Link
One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</li>
</ul>
<ul
class="parent">
<li>
<a href="#"
class="slide">Title Four</a>
<ul
class="child">
<li><a href="#">Link
One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</li>
</ul>
<ul
class="parent">
<li>
<a href="#"
class="slide">Title Five</a>
<ul
class="child">
<li><a href="#">Link
One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</li>
</ul>
<br /><br /><br />
<br
/><br />
<!--<hr
width="750" />-->
<p
align="center">
</body>
</html>
wow brilliant nice work i really appreciate this. keep it up.
ReplyDeletehttp://www.deepdesigncompany.com/