Menu Style like jQuery

Sudhir Choudhary
11y
3.2k
0
0

Blog

Newfolder.zip

In this blog you will learn about vertical menu bar using pure css no toggle method of jQuery.

All Browser Support

google, chrome,Mozilla, opera, Internet Explorer

<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<style>
*{ margin:0px; padding:0px;}
#main{ height:800px; width:1024px; background:#5482A7; margin:0px auto;}
#menubar{ width:300px; background:#006464; Border:3px solid #FFFFFF; border-radious:3px;}
#nav {
  border:3px solid #3e4547;
  box-shadow:2px 2px 8px #000000;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
}
#nav, #nav ul
{
  list-style:none;
  padding:0;
  width:200px;
}
#nav ul
{
  position:relative;
  z-index:-1;
}
#nav li
{
  position:relative;
  z-index:100;
}
#nav ul li
{
  margin-top:-23px;
     -moz-transition:  0.4s linear 0.4s;
-ms-transition: 0.4s linear 0.4s;
  -o-transition: 0.4s linear 0.4s;
  -webkit-transition: 0.4s linear 0.4s;
  transition: 0.4s linear 0.4s;
}
#nav li a
{
  background-color:#d4d5d8;
  color:#000;
  text-transform:capitalize;
  display:block;
  font-size:16px;
  line-height:28px;
  outline:0;
  padding-left:15px;
  text-decoration:none;
}
#nav li a.sub
{
  background:#d4d5d8 url(icon.png) left no-repeat;
}
#nav li a:hover
{
  background-color:#bcbdc1;
}
#nav a.sub:focus
{
  background:#bcbdc1 url(icon342.png)left no-repeat;
  outline:0;
}
#nav ul li a
{
  background-color:#eee;
  border-bottom:1px solid #ccc;
  color:#000;
  font-size:13px;
  line-height:22px;
}
#nav ul li a:hover
{
  background-color:#ddd;
  color:#3300FF;
}
#nav a:focus ~ ul li
{
  margin-top:0;
  -moz-transition:  0.4s linear;
  -ms-transition: 0.4s linear;
  -o-transition: 0.4s linears;
  -webkit-transition: 0.4s linears;
  transition: 0.4s linear;
}
</style>
</head>
<body>
<div id="main">
<div id="menubar">
<ul id="nav">
<li><a href="#">home</a></li>
<li><a href="#" class="sub" tabindex="1">about us</a>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">home</a></li>
<li><a href="#">home</a></li>
</ul>
</li>
<li><a href="#">service</a></li>
  <li><a href="#" class="sub" tabindex="1">compeny</a>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">home</a></li>
<li><a href="#">home</a></li>
</ul>
</li>
<li><a href="#">Job Discription</a></li>
</ul>
</div>
</div>
</body>
</html>