Oct

Learn How to Create Super CSS3 and jQuery Based Menus

ZeeShaN

In this post I will create a simple CSS3 and JQuery based menus. You can find another jQuery menu tutorial on this blog and it is next part in that. Here is fancy dropdown menu which is also created by jquery and css3. I hope you will like it.

No Spams or Newsletters for Subscribers.

Popular Tutorials on 99Points

JQuery Code

$(document).ready(function(){
 
		$('body').click(function()
		{
			$("ul#Menus li").find('div').hide();
		});
 
		$("ul#Menus a.button").click(function(){return false});
 
		$("ul#Menus a.button").hover(function()
		{
			$("ul#Menus li").find('div').hide();
 
			$(this).parent().find('div').fadeIn();
		});
 
	});

CSS

a{text-decoration:none;color:#000;}
img{display:block}
 
#navi{bottom:20px;z-index:80;width:100%;line-height:12px; top:0px;}
#navi div{padding:0px 0 0 1px}

h1{position:relative;left:-141px;margin-bottom:-63px;width:140px;opacity:0.99;}
h1 a{padding:41px 10px 10px 0;color:#fff; background:#000 ;font-size:11px;text-align:right;display:block}
h1 a:hover{background:#000 }

#navi ul#Menus{ margin:0px;padding-left:3px}
#navi ul{ margin:0px;}

#navi li a.default{padding:25px 5px;display:block; width:160px;}

#navi li a.button{
	 color: #999;
    background: -webkit-gradient(linear, left top, left bottom, from( #006699), to(#006699));
    background: -moz-linear-gradient(top center,  #006699,  #006699);

    -webkit-box-shadow: inset 0 0 5px white;
    -moz-box-shadow: inset 0 0 5px white;
    -webkit-box-shadow: inset 0 0 5px white;
    -moz-box-shadow: inset 0 0 5px white;
	margin-top:1px;
	margin-bottom:1px;
    border: 1px solid #ccc;
	padding:25px 5px;display:block; width:159px;
	}
 
#navi li a{
	padding:25px 0px;font-weight:bold;color:#999;display:block;  width: 167px;
	}
 
#navi li a.button:hover{background: -webkit-gradient(linear, left bottom, left top, from(#006699), to(#006699));
    background: -moz-linear-gradient(top center, #006699, #006699);
} 
 
#navi ul li{ float:left}

#Popup1 {
  left:175px;  width: 168px;
}
 
#Popup2 {
  left: 346px;  width: 168px;
}
 
#Popup3 {
  left: 517px;  width: 168px;
}
#Popup4 {
  left: 687px;  width: 168px;
}
 
.SubClass ul{ margin:0px; padding:0px;}
.SubClass {
  position: absolute;
  float: left;
  display: none;
  background:#000;
  height:192px;
}
.SubClass li a:hover { color:#FFFFFF}
.SubClass ul li a {
 
	-webkit-box-shadow: inset 0 0 5px white;
    -moz-box-shadow: inset 0 0 5px white;
    -webkit-box-shadow: inset 0 0 5px white;
    -moz-box-shadow: inset 0 0 5px white;
	margin-top:1px;
	margin-bottom:1px;
/*	border-right: solid #ededed 1px;
	border-left: solid #ededed 1px;
*/}
.SubClass ul li{
	padding:0px
}