Jquery Navigation Menu: July 2015

Thursday 30 July 2015

Hide and show Menu jquery

Only Create index.html

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>Plugin on click Expand</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script type="text/javascript">
$(function () {
    $('.newclass1').on('click', function () {
 $ ('.newclass1'). removeClass("newclass1").addClass("newclassadd");
        
    });
});
$(document).click(function(e){
var divval=e.target;
var classnameval=divval.className;
if(classnameval=="newclassadd")
{
$ ('.newclassadd'). removeClass("newclassadd").addClass("newclass1");
}
});
</script>
<script type="text/javascript">
$(function () {
    $('.newclass2').on('click', function () {
 $ ('.newclass2'). removeClass("newclass2").addClass("newclassadd1");
       
    });
});
$(document).click(function(e){
var divval=e.target;
var classnameval=divval.className;
if(classnameval=="newclassadd1")
{
$ ('.newclassadd1'). removeClass("newclassadd1").addClass("newclass2");
}
});
</script>
<style>
.newclass1 {
 float:left;
 padding:10px;
 /*background:#333;*/
margin:10px;
 overflow:auto;
 width:12%;
 border: 4px solid #ccc;
}
.newclass1 h2 {
 text-align:center;
}
.newclassadd {
 float:left;
 padding:10px;
 /*background:#333;*/
margin:10px;
 overflow:auto;
 width:70%;
 border: 4px solid #ccc;
}
.newclassadd h2 {
 text-align:center;
}
.containermeadd {
 width: 67% !important;
 float:left;
}
.rightway {
 float:right;
 padding:10px;
}
.rightway ul li {
}
.rightway li {
 list-style-type:none;
}
.newclass2 {
 float:left;
 padding:10px;
 /*background:#333;*/
margin:10px;
 overflow:auto;
 width:12%;
 border: 4px solid #ccc;
}
.newclass2 h2 {
 text-align:center;
}
.newclassadd1 {
 float:left;
 padding:10px;
 /*background:#333;*/
margin:10px;
 overflow:auto;
 width:70%;
 border: 4px solid #ccc;
}
.newclassadd1 img {
 height:56px;
 width:100%;
 float:left;
}
.newclassadd1 h2 {
 text-align:center;
}
.hightimg {
 text-align:center;
 height:50px;
 width:50px;
}
.hightimg img {
 height:56px;
 width:100%;
 margin:auto;
}
.ram {
 text-align:center!important;
 font-size:12px!important;
 margin:0px!important;
}
.panel-default > .panel-heading {
 background-color: #f5f5f5;
 border-color: #ddd;
 color: #333;
}
.panel-heading img {
 width:50px;
 height:50px;
}
 @media screen and (min-device-width: 320px) and (max-device-width: 756px) {
 .newclass1 {
 border: 4px solid #ccc;
 float: left;
 margin: 10px auto!important;
 overflow: auto;
 padding: 10px;
 width: 100%!important;
}
.newclassadd {
 border: 4px solid #ccc;
 float: left;
 margin: 10px auto!important;
 overflow: auto;
 padding: 10px;
 width: 100%!important;
}
.newclass2 {
 border: 4px solid #ccc;
 float: left;
 margin: 10px auto!important;
 overflow: auto;
 padding: 10px;
 width: 100%!important;
}
.newclassadd1 {
 border: 4px solid #ccc;
 float: left;
 margin: 10px auto!important;
 overflow: auto;
 padding: 10px;
 width: 100%!important;
}
}
</style>
</head>
<body>
<div class="newclass1">
  <h2>Hide & Show</h2>
  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingTwo">
        <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> <span class="hightimg"> <img src="img/image.png" alt="" height="50" width="50"></span> <br>
          Menu1 </a> </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
        <div class="panel-body">
          <div class="containermeadd">
            <ul class="nav nav-tabs">
              <li class="active"><a href="#tab_a" data-toggle="tab"><img src="img/image.png" alt="poster-print" height="70" width="70"></a></li>
              <li><a href="#tab_b" data-toggle="tab"><img src="img/image.png" alt="" height="70" width="70"></a></li>
              <li><a href="#tab_c" data-toggle="tab"><img src="img/image.png" alt="" height="70" width="70"></a></li>
            </ul>
            <div class="tab-content">
              <div class="tab-pane fade in active" id="tab_a">
                <h4>Pane A</h4>
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                  ac turpis egestas.</p>
              </div>
              <div class="tab-pane fade" id="tab_b">
                <h4>Pane B</h4>
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
              </div>
              <div class="tab-pane fade" id="tab_c">
                <h4>Pane C</h4>
                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames
                  ac turpis egestas.</p>
              </div>
            </div>
            
          </div>
          
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="headingThree">
        <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> <img src="img/image.png" alt="poster-print" height="50" width="50"></span> <br>
          Menu2 </a> </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
        <div class="panel-body"> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>

Thursday 16 July 2015

Responsive side menu

Only Create index.html

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>side drop down menu</title>

body, html {
 height: 100%;
 margin: 0;
 padding: 0;
}

a {
 color: rgba(255, 255, 255, 0.6);
 text-decoration: none;
}

a:hover, li:hover > a {
  color: #FFF;
 }

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

li {
 margin: 0;
 padding: 0;
}

#menu {
 border-left: 1px solid #FFF;
 border-right: 1px solid #FFF;
 background: rgba(0, 0, 0, 0.5);
 float: left;
 font-size: 1.5em;
 min-height: 100%;
 margin-left: 1em;
}

#menu li {
 position: relative;
 z-index: 1;
}

#menu li a {
 display: block;
 padding: 0.5em 1em;
 white-space: nowrap;
}

#menu li ul {
  position: absolute;
  overflow: hidden;
  display: none;
  left: 100%;
  top: 0.5em;
  float: none;
  background-image: -moz-radial-gradient(0 50%, ellipse  farthest-side, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.5) 33%, rgba(0,0,0,0) 100%);
  background-image: -webkit-radial-gradient(0 50%, ellipse  farthest-side, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.5) 33%, rgba(0,0,0,0) 100%);
  background-image: radial-gradient(0 50%, ellipse  farthest-side, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.5) 33%, rgba(0,0,0,0) 100%);
 }
 
 #menu li:hover ul {
  display: block;
 }
 
 #menu li ul a {
  position: relative;
  font-size: 0.8em;
 }
 
 #menu li ul a:hover:before {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  background: rgba(0,0,0,0.75);
  border: 1px solid #FFF;
  position: absolute;
  top: 0.5em;
  left: -0.75em;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
 }
</style>
</head>

<body>
<ul id="menu">
 <li>
  <a href="#">HOME</a>
  <ul>
   <li>
    <a href="#">Link 1</a>
   </li>
   <li>
    <a href="#">Link 2</a>
   </li>
   <li>
    <a href="#">Link 3</a>
   </li>
  </ul>
 <li>
 <li>
  <a href="#">ABOUT</a>
  <ul>
   <li>
    <a href="#">Link 1</a>
   </li>
   <li>
    <a href="#">Link 2</a>
   </li>
   <li>
    <a href="#">Link 3</a>
   </li>
   <li>
    <a href="#">Link 4</a>
   </li>
  </ul>
 <li>
 <li>
  <a href="#">Product</a>
  <ul>
   <li>
    <a href="#">Link 1</a>
   </li>
   <li>
    <a href="#">Link 2</a>
   </li>
   <li>
    <a href="#">Link 3</a>
   </li>
   <li>
    <a href="#">Link 4</a>
   </li>
   <li>
    <a href="#">Link 5</a>
   </li>
  </ul>
 <li>
 <li>
  <a href="#">Services</a>
  <ul>
   <li>
    <a href="#">Link 1</a>
   </li>
   <li>
    <a href="#">Link 2</a>
   </li>
   <li>
    <a href="#">Link 3</a>
   </li>
   <li>
    <a href="#">Link 4</a>
   </li>
   <li>
    <a href="#">Link 5</a>
   </li>
   <li>
    <a href="#">Link 6</a>
   </li>
  </ul>
 <li>
</ul>
</body>
</html>

Css Mega Drop down Menu

Create index.html

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<title>Mega Drop Down Menu</title>

</head>
<body>
<ul id="menu">
  <li><a href="#" class="drop">Home</a>
    
    <div class="dropdown_2columns">
      
      <div class="col_2">
        <h2>HTML5</h2>
      </div>
      <div class="col_2">
        <p><a href="#">Html5</a></p>
        <p><a href="#">Css3</a></p>
      </div>
      <div class="col_2">
        <h2>Web design</h2>
      </div>
      <div class="col_1"> <img src="tree.png" width="125" height="85" alt="" /> </div>
      <div class="col_1">
        <p><a href="#">Photoshop</a></p>
        <p><a href="#">Corel draw</a></p>
      </div>
    </div>
    
  </li>
  
  <li><a href="#" class="drop">About</a>
    
    <div class="dropdown_5columns">
      
      <div class="col_5">
        <h2>We are doing Web designing and development.</h2>
      </div>
      <div class="col_1">
        <p class="black_box">We have developed many websites like e-commerace,
          shopping cart,CRM projects,and designed many company logo</p>
      </div>
      <div class="col_1">
        <p>
        <p><a href="#">Project1</a></p>
        <p><a href="#">Project2</a></p>
        <p><a href="#">Project3</a></p>
        <p><a href="#">Project4</a></p>
        </p>
      </div>
      <div class="col_1">
        <p class="italic">
        <p><a href="#">Project1</a></p>
        <p><a href="#">Project2</a></p>
        <p><a href="#">Project3</a></p>
        <p><a href="#">Project4</a></p>
        </p>
      </div>
      <div class="col_1">
        <p>
        <p><a href="#">Project1</a></p>
        <p><a href="#">Project2</a></p>
        <p><a href="#">Project3</a></p>
        <p><a href="#">Project4</a></p>
        </p>
      </div>
      <div class="col_1">
        <p class="strong">
        <p><a href="#">Project1</a></p>
        <p><a href="#">Project2</a></p>
        <p><a href="#">Project3</a></p>
        <p><a href="#">Project4</a></p>
        </p>
      </div>
      <div class="col_5">
        <h2>Our Portfolio</h2>
      </div>
      <div class="col_3"> <img src="tree.png" width="70" height="70" class="img_left imgshadow" alt="" />
        <p>This is e-commerace project,in this project, multivendor facility, multiple access of accounts and they can show multiple products at a time, there and many security facilities in this project<a href="#">Read more...</a></p>
        <img src="tree.png" width="70" height="70" class="img_left imgshadow" alt="" />
        <p>This is e-commerace project,in this project, multivendor facility, multiple access of accounts and they can show multiple products at a time, there and many security facilities in this project<a href="#">Read more...</a></p>
      </div>
      <div class="col_2">
        <p class="black_box">This is e-commerace project,in this project, multivendor facility, multiple access of accounts and they can show multiple products at a time, there and many security facilities in this project This is e-commerace project,in this project, multivendor facility, multiple access of accounts and they can show multiple products at a time, there and many security facilities in this project<a href="#">Read more...</a></p>
        </p>
      </div>
    </div>
    
  </li>
  
  <li><a href="#" class="drop">Clients</a>
    
    <div class="dropdown_4columns">
      
      <div class="col_4">
        <h2>Our clients</h2>
      </div>
      <div class="col_1">
        <h3>Clients</h3>
        <ul>
          <li><a href="#">Client1</a></li>
          <li><a href="#">Client2</a></li>
          <li><a href="#">Client3</a></li>
          <li><a href="#">Client4</a></li>
          <li><a href="#">Client5</a></li>
        </ul>
      </div>
      <div class="col_1">
        <h3>Clients</h3>
        <ul>
          <li><a href="#">Client1</a></li>
          <li><a href="#">Client2</a></li>
          <li><a href="#">Client3</a></li>
          <li><a href="#">Client4</a></li>
          <li><a href="#">Client5</a></li>
        </ul>
      </div>
      <div class="col_1">
        <h3>Clients</h3>
        <ul>
          <li><a href="#">Client1</a></li>
          <li><a href="#">Client2</a></li>
          <li><a href="#">Client3</a></li>
          <li><a href="#">Client4</a></li>
          <li><a href="#">Client5</a></li>
        </ul>
      </div>
      <div class="col_1">
        <h3>Clients</h3>
        <ul>
          <li><a href="#">Client1</a></li>
          <li><a href="#">Client2</a></li>
          <li><a href="#">Client3</a></li>
          <li><a href="#">Client4</a></li>
          <li><a href="#">Client5</a></li>
        </ul>
      </div>
    </div>
    
  </li>
  
  <li class="menu_right"><a href="#" class="drop">Products</a>
    <div class="dropdown_1column align_right">
      <div class="col_1">
        <ul class="simple">
          <li><a href="#">Product1</a></li>
          <li><a href="#">Product2</a></li>
          <li><a href="#">Product3</a></li>
          <li><a href="#">Product4</a></li>
          <li><a href="#">Product5</a></li>
          <li><a href="#">Product1</a></li>
          <li><a href="#">Product2</a></li>
          <li><a href="#">Product3</a></li>
          <li><a href="#">Product4</a></li>
          <li><a href="#">Product5</a></li>
        </ul>
      </div>
    </div>
  </li>
  <li class="menu_right"><a href="#" class="drop">Contacts</a>
    
    <div class="dropdown_3columns align_right">
      
      <div class="col_3">
        <h2>Link with us</h2>
      </div>
      <div class="col_1">
        <ul class="greybox">
          <li><a href="#">Fb</a></li>
          <li><a href="#">Lin</a></li>
          <li><a href="#">Tw</a></li>
          <li><a href="#">Flicker</a></li>
          <li><a href="#">Yahoo!</a></li>
        </ul>
      </div>
      <div class="col_1">
        <ul class="greybox">
          <li><a href="#">G+</a></li>
          <li><a href="#">FB</a></li>
          <li><a href="#">Wordpress</a></li>
          <li><a href="#">Youtube</a></li>
          <li><a href="#">Dribble</a></li>
        </ul>
      </div>
      <div class="col_1">
        <ul class="greybox">
          <li><a href="#">Design</a></li>
          <li><a href="#">Logo</a></li>
          <li><a href="#">Flash</a></li>
          <li><a href="#">Illustration</a></li>
          <li><a href="#">More...</a></li>
        </ul>
      </div>
      <div class="col_3">
        <h2>Private Policy</h2>
      </div>
      <div class="col_3"> <img src="tree.png" width="70" height="70" class="img_left imgshadow" alt="" /> <img src="tree.png" width="70" height="70" class="img_left imgshadow" alt="" /> <img src="tree.png" width="70" height="70" class="img_left imgshadow" alt="" /> <img src="tree.png" width="70" height="70" class="img_left imgshadow" alt="" /> </div>
    </div>
    
  </li>
  
</ul>
</body>
</html>

Create style.css

@charset "utf-8";
body, ul, li {
 font-size:14px;
 font-family:Arial, Helvetica, sans-serif;
 line-height:21px;
 text-align:left;
}
/* Navigation Bar */
 
#menu {
 list-style:none;
 width:940px;
 margin:30px auto 0px auto;
 height:43px;
 padding:0px 20px 0px 20px;
 /* Rounded Corners */
     
    -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 /* Background color and gradients */
     
    background: #014464;
 background: -moz-linear-gradient(center top, #333333, #666666);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333333), to(#666666));
 /* Borders */
     
    border: 1px solid #002232;
 -moz-box-shadow:inset 0px 0px 1px #edf9ff;
 -webkit-box-shadow:inset 0px 0px 1px #edf9ff;
 box-shadow:inset 0px 0px 1px #edf9ff;
}
#menu li {
 float:left;
 text-align:center;
 position:relative;
 padding: 4px 10px 4px 10px;
 margin-right:30px;
 margin-top:7px;
 border:none;
}
#menu li:hover {
 border: 1px solid #777777;
 padding: 4px 9px 4px 9px;
 /* Background color and gradients */
     
    background: #F4F4F4;
 background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
 /* Rounded corners */
     
    -moz-border-radius: 5px 5px 0px 0px;
 -webkit-border-radius: 5px 5px 0px 0px;
 border-radius: 5px 5px 0px 0px;
}
#menu li a {
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color: #EEEEEE;
 display:block;
 outline:0;
 text-decoration:none;
 text-shadow: 1px 1px 1px #000;
}
#menu li:hover a {
 color:#161616;
 text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
 padding-right:21px;
 background:url("img/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
 background:url("img/drop.png") no-repeat right 7px;
}
/* Drop Down */
 
.dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns {
 margin:4px auto;
 float:left;
 position:absolute;
 left:-999em; /* Hides the drop down */
 text-align:left;
 padding:10px 5px 10px 5px;
 border:1px solid #777777;
 border-top:none;
 /* Gradient background */
    background:#F4F4F4;
 background: -moz-linear-gradient(top, #669900, #669933);
 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#669900), to(#669933));
 /* Rounded Corners */
    -moz-border-radius: 0px 5px 5px 5px;
 -webkit-border-radius: 0px 5px 5px 5px;
 border-radius: 0px 5px 5px 5px;
}
.dropdown_1column {
 width: 140px;
}
.dropdown_2columns {
 width: 280px;
}
.dropdown_3columns {
 width: 420px;
}
.dropdown_4columns {
 width: 560px;
}
.dropdown_5columns {
 width: 700px;
}
#menu li:hover .dropdown_1column, #menu li:hover .dropdown_2columns, #menu li:hover .dropdown_3columns, #menu li:hover .dropdown_4columns, #menu li:hover .dropdown_5columns {
 left:-1px;
 top:auto;
}
/* Columns */
 
.col_1, .col_2, .col_3, .col_4, .col_5 {
 display:inline;
 float: left;
 position: relative;
 margin-left: 5px;
 margin-right: 5px;
}
.col_1 {
 width:130px;
}
.col_2 {
 width:270px;
}
.col_3 {
 width:410px;
}
.col_4 {
 width:550px;
}
.col_5 {
 width:690px;
}
/* Right alignment */
 
#menu .menu_right {
 float:right;
 margin-right:0px;
}
#menu li .align_right {
 /* Rounded Corners */
    -moz-border-radius: 5px 0px 5px 5px;
 -webkit-border-radius: 5px 0px 5px 5px;
 border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
 left:auto;
 right:-1px;
 top:auto;
}
/* Drop Down Content Stylings */
 
#menu p, #menu h2, #menu h3, #menu ul li {
 font-family:Arial, Helvetica, sans-serif;
 line-height:21px;
 font-size:12px;
 text-align:left;
 text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
 font-size:21px;
 font-weight:400;
 letter-spacing:-1px;
 margin:7px 0 14px 0;
 padding-bottom:14px;
 border-bottom:1px solid #666666;
}
#menu h3 {
 font-size:14px;
 margin:7px 0 14px 0;
 padding-bottom:7px;
 border-bottom:1px solid #888888;
}
#menu p {
 line-height:18px;
 margin:0 0 10px 0;
}
#menu li:hover div a {
 font-size:12px;
 color:#3333FF;
}
#menu li:hover div a:hover {
 color:#003333;
}
.strong {
 font-weight:bold;
}
.italic {
 font-style:italic;
}
.imgshadow {
 background:#FFFFFF;
 padding:4px;
 border:1px solid #777777;
 margin-top:5px;
 -moz-box-shadow:0px 0px 5px #666666;
 -webkit-box-shadow:0px 0px 5px #666666;
 box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
 width:auto;
 float:left;
 margin:5px 15px 5px 5px;
}
#menu li .black_box {
 background-color:#333333;
 color: #eeeeee;
 text-shadow: 1px 1px 1px #000;
 padding:4px 6px 4px 6px;
 /* Rounded Corners */
    -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 /* Shadow */
    -webkit-box-shadow:inset 0 0 3px #000000;
 -moz-box-shadow:inset 0 0 3px #000000;
 box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
 list-style:none;
 padding:0;
 margin:0 0 12px 0;
}
#menu li ul li {
 font-size:12px;
 line-height:24px;
 position:relative;
 text-shadow: 1px 1px 1px #ffffff;
 padding:0;
 margin:0;
 float:none;
 text-align:left;
 width:130px;
}
#menu li ul li:hover {
 background:none;
 border:none;
 padding:0;
 margin:0;
}
#menu li .greybox li {
 background:#F4F4F4;
 border:1px solid #bbbbbb;
 margin:0px 0px 4px 0px;
 padding:4px 6px 4px 6px;
 width:116px;
 /* Rounded Corners */
    -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}
#menu li .greybox li:hover {
 background:#ffffff;
 border:1px solid #aaaaaa;
 padding:4px 6px 4px 6px;
 margin:0px 0px 4px 0px;
}

Vertical Drop Down Responsive Menu

Only Create index.html

<!doctype>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<title>Vertical Drop Down Responsive Menu</title>
<script type="text/javascript">
   ( function( $ ) {
$( document ).ready(function() {
$('#cssmenu li.has-sub>a').on('click', function(){
  $(this).removeAttr('href');
  var element = $(this).parent('li');
  if (element.hasClass('open')) {
   element.removeClass('open');
   element.find('li').removeClass('open');
   element.find('ul').slideUp();
  }
  else {
   element.addClass('open');
   element.children('ul').slideDown();
   element.siblings('li').children('ul').slideUp();
   element.siblings('li').removeClass('open');
   element.siblings('li').find('li').removeClass('open');
   element.siblings('li').find('ul').slideUp();
  }
 });

$('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');

(function getColor() {
  var r, g, b;
  var textColor = $('#cssmenu').css('color');
  textColor = textColor.slice(4);
  r = textColor.slice(0, textColor.indexOf(','));
  textColor = textColor.slice(textColor.indexOf(' ') + 1);
  g = textColor.slice(0, textColor.indexOf(','));
  textColor = textColor.slice(textColor.indexOf(' ') + 1);
  b = textColor.slice(0, textColor.indexOf(')'));
  var l = rgbToHsl(r, g, b);
  if (l > 0.7) {
   $('#cssmenu>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');
   $('#cssmenu>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');
  }
  else
  {
   $('#cssmenu>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');
   $('#cssmenu>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');
  }
 })();

function rgbToHsl(r, g, b) {
     r /= 255, g /= 255, b /= 255;
     var max = Math.max(r, g, b), min = Math.min(r, g, b);
     var h, s, l = (max + min) / 2;

if(max == min){
         h = s = 0;
     }
     else {
         var d = max - min;
         s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
         switch(max){
             case r: h = (g - b) / d + (g < b ? 6 : 0); break;
             case g: h = (b - r) / d + 2; break;
             case b: h = (r - g) / d + 4; break;
         }
         h /= 6;
     }
     return l;
 }
});
} )( jQuery );

</script>
<style>
.main-wrapper {
 margin:auto;
 padding:20px;
 background:#ddd;
 overflow:auto;
}
.main-wrapper h2 {
 background: #0099ff;
 color: #000000;
 padding: 20px;
 text-align: center;
 text-shadow: 2px 1px 1px #ccc;
}
#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a {
 margin: 0 auto;
 padding: 0;
 border: 0;
 list-style: none;
 line-height: 1;
 display: block;
 position: relative;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
#cssmenu {
 width: 200px;
 font-family: Helvetica, Arial, sans-serif;
 color: #ffffff;
}
#cssmenu ul ul {
 display: none;
}
.align-right {
 float: right;
}
#cssmenu > ul > li > a {
 padding: 15px 20px;
 border-left: 1px solid #1682ba;
 border-right: 1px solid #1682ba;
 border-top: 1px solid #1682ba;
 cursor: pointer;
 z-index: 2;
 font-size: 14px;
 font-weight: bold;
 text-decoration: none;
 color: #ffffff;
 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
 background: #36aae7;
 background: -webkit-linear-gradient(#36aae7, #1fa0e4);
 background: -moz-linear-gradient(#36aae7, #1fa0e4);
 background: -o-linear-gradient(#36aae7, #1fa0e4);
 background: -ms-linear-gradient(#36aae7, #1fa0e4);
 background: linear-gradient(#36aae7, #1fa0e4);
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
#cssmenu > ul > li > a:hover, #cssmenu > ul > li.active > a, #cssmenu > ul > li.open > a {
 color: #eeeeee;
 background: #1fa0e4;
 background: -webkit-linear-gradient(#1fa0e4, #1992d1);
 background: -moz-linear-gradient(#1fa0e4, #1992d1);
 background: -o-linear-gradient(#1fa0e4, #1992d1);
 background: -ms-linear-gradient(#1fa0e4, #1992d1);
 background: linear-gradient(#1fa0e4, #1992d1);
}
#cssmenu > ul > li.open > a {
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);
 border-bottom: 1px solid #1682ba;
}
#cssmenu > ul > li:last-child > a, #cssmenu > ul > li.last > a {
 border-bottom: 1px solid #1682ba;
}
.holder {
 width: 0;
 height: 0;
 position: absolute;
 top: 0;
 right: 0;
}
.holder::after, .holder::before {
 display: block;
 position: absolute;
 content: "";
 width: 6px;
 height: 6px;
 right: 20px;
 z-index: 10;
 -webkit-transform: rotate(-135deg);
 -moz-transform: rotate(-135deg);
 -ms-transform: rotate(-135deg);
 -o-transform: rotate(-135deg);
 transform: rotate(-135deg);
}
.holder::after {
 top: 17px;
 border-top: 2px solid #ffffff;
 border-left: 2px solid #ffffff;
}
#cssmenu > ul > li > a:hover > span::after, #cssmenu > ul > li.active > a > span::after, #cssmenu > ul > li.open > a > span::after {
 border-color: #eeeeee;
}
.holder::before {
 top: 18px;
 border-top: 2px solid;
 border-left: 2px solid;
 border-top-color: inherit;
 border-left-color: inherit;
}
#cssmenu ul ul li a {
 cursor: pointer;
 border-bottom: 1px solid #32373e;
 border-left: 1px solid #32373e;
 border-right: 1px solid #32373e;
 padding: 10px 20px;
 z-index: 1;
 text-decoration: none;
 font-size: 13px;
 color: #eeeeee;
 background: #49505a;
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#cssmenu ul ul li:hover > a, #cssmenu ul ul li.open > a, #cssmenu ul ul li.active > a {
 background: #424852;
 color: #ffffff;
}
#cssmenu ul ul li:first-child > a {
 box-shadow: none;
}
#cssmenu ul ul ul li:first-child > a {
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#cssmenu ul ul ul li a {
 padding-left: 30px;
}
#cssmenu > ul > li > ul > li:last-child > a, #cssmenu > ul > li > ul > li.last > a {
 border-bottom: 0;
}
#cssmenu > ul > li > ul > li.open:last-child > a, #cssmenu > ul > li > ul > li.last.open > a {
 border-bottom: 1px solid #32373e;
}
#cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
 border-bottom: 0;
}
#cssmenu ul ul li.has-sub > a::after {
 display: block;
 position: absolute;
 content: "";
 width: 5px;
 height: 5px;
 right: 20px;
 z-index: 10;
 top: 11.5px;
 border-top: 2px solid #eeeeee;
 border-left: 2px solid #eeeeee;
 -webkit-transform: rotate(-135deg);
 -moz-transform: rotate(-135deg);
 -ms-transform: rotate(-135deg);
 -o-transform: rotate(-135deg);
 transform: rotate(-135deg);
}
#cssmenu ul ul li.active > a::after, #cssmenu ul ul li.open > a::after, #cssmenu ul ul li > a:hover::after {
 border-color: #ffffff;
}
</style>
</head>
<body>
<div class="main-wrapper">
<h2>Vertical Drop Down Responsive Menu</h2>
<div id='cssmenu'>
  <ul>
    <li><a href='#'><span>Home</span></a></li>
    <li class='active has-sub'><a href='#'><span>Products</span></a>
      <ul>
        <li class='has-sub'><a href='#'><span>Product 1</span></a>
          <ul>
            <li><a href='#'><span>Sub Product</span></a></li>
            <li class='last'><a href='#'><span>Sub Product</span></a></li>
          </ul>
        </li>
        <li class='has-sub'><a href='#'><span>Product 2</span></a>
          <ul>
            <li><a href='#'><span>Sub Product</span></a></li>
            <li class='last'><a href='#'><span>Sub Product</span></a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href='#'><span>About</span></a></li>
    <li class='last'><a href='#'><span>Contact</span></a></li>
  </ul>
</div>
</body>
</div>

<html>

Toggle Responsive Show and Hide Navbar

Only Create index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Toggle Responsive Show and Hide Navbar</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  var trigger = $('.hamburger'),
      overlay = $('.overlay'),
     isClosed = false;

trigger.click(function () {
      hamburger_cross();      
    });

function hamburger_cross() {

if (isClosed == true) {          
        overlay.hide();
        trigger.removeClass('is-open');
        trigger.addClass('is-closed');
        isClosed = false;
      } else {   
        overlay.show();
        trigger.removeClass('is-closed');
        trigger.addClass('is-open');
        isClosed = true;
      }
  }
  
  $('[data-toggle="offcanvas"]').click(function () {
        $('#wrapper').toggleClass('toggled');
  });  
});
</script>
<style>
body {
 position: relative;
 overflow-x: hidden;
 background:#CCCCCC;
}
body, html {
 height: 100%;
}
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
 background-color: transparent;
}
/*-------------------------------*/
/*           Wrappers            */
/*-------------------------------*/

#wrapper {
 padding-left: 0;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 transition: all 0.5s ease;
}
#wrapper.toggled {
 padding-left: 220px;
}
#sidebar-wrapper {
 z-index: 1000;
 left: 220px;
 width: 0;
 height: 100%;
 margin-left: -220px;
 overflow-y: auto;
 overflow-x: hidden;
 background: #1a1a1a;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 transition: all 0.5s ease;
}
 #sidebar-wrapper::-webkit-scrollbar {
 display: none;
}
#wrapper.toggled #sidebar-wrapper {
 width: 220px;
}
#page-content-wrapper {
 width: 100%;
 padding-top: 70px;
}
#wrapper.toggled #page-content-wrapper {
 position: absolute;
 margin-right: -220px;
}
/*-------------------------------*/
/*     Sidebar nav styles        */
/*-------------------------------*/

.sidebar-nav {
 position: absolute;
 top: 0;
 width: 220px;
 margin: 0;
 padding: 0;
 list-style: none;
}
.sidebar-nav li {
 position: relative;
 line-height: 20px;
 display: inline-block;
 width: 100%;
}
.sidebar-nav li:before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
 height: 100%;
 width: 3px;
 background-color: #1c1c1c;
 -webkit-transition: width .2s ease-in;
 -moz-transition:  width .2s ease-in;
 -ms-transition:  width .2s ease-in;
 transition: width .2s ease-in;
}
.sidebar-nav li:first-child a {
 color: #fff;
 background-color: #1a1a1a;
}
.sidebar-nav li:nth-child(2):before {
 background-color: #ec1b5a;
}
.sidebar-nav li:nth-child(3):before {
 background-color: #79aefe;
}
.sidebar-nav li:nth-child(4):before {
 background-color: #314190;
}
.sidebar-nav li:nth-child(5):before {
 background-color: #279636;
}
.sidebar-nav li:nth-child(6):before {
 background-color: #7d5d81;
}
.sidebar-nav li:nth-child(7):before {
 background-color: #ead24c;
}
.sidebar-nav li:nth-child(8):before {
 background-color: #2d2366;
}
.sidebar-nav li:nth-child(9):before {
 background-color: #35acdf;
}
.sidebar-nav li:hover:before, .sidebar-nav li.open:hover:before {
 width: 100%;
 -webkit-transition: width .2s ease-in;
 -moz-transition:  width .2s ease-in;
 -ms-transition:  width .2s ease-in;
 transition: width .2s ease-in;
}
.sidebar-nav li a {
 display: block;
 color: #ddd;
 text-decoration: none;
 padding: 10px 15px 10px 30px;
}
.sidebar-nav li a:hover, .sidebar-nav li a:active, .sidebar-nav li a:focus, .sidebar-nav li.open a:hover, .sidebar-nav li.open a:active, .sidebar-nav li.open a:focus {
 color: #fff;
 text-decoration: none;
 background-color: transparent;
}
.sidebar-nav > .sidebar-brand {
 height: 65px;
 font-size: 20px;
 line-height: 44px;
}
.sidebar-nav .dropdown-menu {
 position: relative;
 width: 100%;
 padding: 0;
 margin: 0;
 border-radius: 0;
 border: none;
 background-color: #222;
 box-shadow: none;
}
/*-------------------------------*/
/*       Hamburger-Cross         */
/*-------------------------------*/

.hamburger {
 position: fixed;
 top: 20px;
 z-index: 999;
 display: block;
 width: 32px;
 height: 32px;
 margin-left: 15px;
 background: transparent;
 border: none;
}
.hamburger:hover, .hamburger:focus, .hamburger:active {
 outline: none;
}
.hamburger.is-closed:before {
 content: '';
 display: block;
 width: 100px;
 font-size: 14px;
 color: #fff;
 line-height: 32px;
 text-align: center;
 opacity: 0;
 -webkit-transform: translate3d(0, 0, 0);
 -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover:before {
 opacity: 1;
 display: block;
 -webkit-transform: translate3d(-100px, 0, 0);
 -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-top, .hamburger.is-closed .hamb-middle, .hamburger.is-closed .hamb-bottom, .hamburger.is-open .hamb-top, .hamburger.is-open .hamb-middle, .hamburger.is-open .hamb-bottom {
 position: absolute;
 left: 0;
 height: 4px;
 width: 100%;
}
.hamburger.is-closed .hamb-top, .hamburger.is-closed .hamb-middle, .hamburger.is-closed .hamb-bottom {
 background-color: #1a1a1a;
}
.hamburger.is-closed .hamb-top {
 top: 5px;
 -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-middle {
 top: 50%;
 margin-top: -2px;
}
.hamburger.is-closed .hamb-bottom {
 bottom: 5px;
 -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover .hamb-top {
 top: 0;
 -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover .hamb-bottom {
 bottom: 0;
 -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open .hamb-top, .hamburger.is-open .hamb-middle, .hamburger.is-open .hamb-bottom {
 background-color: #1a1a1a;
}
.hamburger.is-open .hamb-top, .hamburger.is-open .hamb-bottom {
 top: 50%;
 margin-top: -2px;
}
.hamburger.is-open .hamb-top {
 -webkit-transform: rotate(45deg);
 -webkit-transition: -webkit-transform .2s cubic-bezier(.73, 1, .28, .08);
}
.hamburger.is-open .hamb-middle {
 display: none;
}
.hamburger.is-open .hamb-bottom {
 -webkit-transform: rotate(-45deg);
 -webkit-transition: -webkit-transform .2s cubic-bezier(.73, 1, .28, .08);
}
.hamburger.is-open:before {
 content: '';
 display: block;
 width: 100px;
 font-size: 14px;
 color: #fff;
 line-height: 32px;
 text-align: center;
 opacity: 0;
 -webkit-transform: translate3d(0, 0, 0);
 -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open:hover:before {
 opacity: 1;
 display: block;
 -webkit-transform: translate3d(-100px, 0, 0);
 -webkit-transition: all .35s ease-in-out;
}
/*-------------------------------*/
/*            Overlay            */
/*-------------------------------*/

.overlay {
 position: fixed;
 display: none;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: rgba(250, 250, 250, .8);
 z-index: 1;
}
</style>
</head>
<body>
<div id="wrapper">
  <div class="overlay"></div>
  
  <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
    <ul class="nav sidebar-nav">
      <li class="sidebar-brand"> <a href="#"> Menu </a> </li>
      <li> <a href="#">Home</a> </li>
      <li> <a href="#">About</a> </li>
      <li> <a href="#">Events</a> </li>
      <li> <a href="#">Portfolio</a> </li>
      <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Our Clients <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li class="dropdown-header">IT Services</li>
          <li><a href="#">Client1</a></li>
          <li><a href="#">Client2</a></li>
          <li><a href="#">Client3</a></li>
          <li><a href="#">Client4</a></li>
          <li><a href="#">Client5</a></li>
        </ul>
      </li>
      <li> <a href="#">Services</a> </li>
      <li> <a href="#">Contact</a> </li>
      <li> <a href="#">Blogs</a> </li>
    </ul>
  </nav>
  
  
  <div id="page-content-wrapper">
    <button type="button" class="hamburger is-closed" data-toggle="offcanvas"> <span class="hamb-top"></span> <span class="hamb-middle"></span> <span class="hamb-bottom"></span> </button>
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-lg-offset-2">
          <h2>Toggle Responsive Show and Hide Navbar</h2>
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
      </div>
    </div>
  </div>
  
</div>

</body>
</html>

Responsive Bootstrap Dropdown Menu

Only Create index.html

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Responsive Bootstrap Dropdown Menu</title>
<link rel="stylesheet" href="style.css" type="text/css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
.navbar-default {
 background-image:linear-gradient(to bottom, #a699ef 0px, #00999c 100%);
 background-repeat: repeat-x;
 border-radius: 0px;
 border-color:none;
 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 5px rgba(0, 0, 0, 0.075);
}
.navbar-default .navbar-nav > li > a {
 color: #fff;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
 color: #000!important;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
 color: #CC3300!important;
}
.navbar {
 border:none;
 margin-bottom: 20px;
 min-height: 50px;
 position: relative;
}
.equal, .equal > div[class*='col-'] {
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 flex:1 1 auto;
}
</style>
</head>
<body>
<h4 style="text-align:center;padding:10px">Responsive Bootstrap Dropdown Menu</h4>
<div class="menu">
  <div class="bs-example">
    <nav id="myNavbar" class="navbar navbar-default" role="navigation">
      
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
          <a class="navbar-brand" href="#">LOGO</a> </div>
        
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Profile</a></li>
            <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Inbox</a></li>
                <li><a href="#">Drafts</a></li>
                <li><a href="#">Sent Items</a></li>
                <li class="divider"></li>
                <li><a href="#">Trash</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Admin <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li class="divider"></li>
                <li><a href="#">Settings</a></li>
              </ul>
            </li>
          </ul>
        </div>
        
      </div>
    </nav>
  </div>
</div>

</body>
</html>

Bootstrap Toggle Responsive Navigation

Only Create index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Toggle Responsive Navigation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<style>
.row {
 margin-left:0px;
 margin-right:0px;
}
#wrapper {
 padding-left: 70px;
 transition: all .4s ease 0s;
 height: 100%
}
#sidebar-wrapper {
 margin-left: -150px;
 left: 70px;
 width: 150px;
 background: #222;
 position: fixed;
 /*height: 100%;*/
    z-index: 10000;
 transition: all .4s ease 0s;
}
.sidebar-nav {
 display: block;
 float: left;
 width: 150px;
 list-style: none;
 margin: 0;
 padding: 0;
}
#page-content-wrapper {
 padding-left: 0;
 margin-left: 0;
 width: 100%;
 height: auto;
}
#wrapper.active {
 padding-left: 150px;
}
#wrapper.active #sidebar-wrapper {
 left: 150px;
}
#page-content-wrapper {
 width: 100%;
}
#sidebar_menu li a, .sidebar-nav li a {
 color: #999;
 display: block;
 float: left;
 text-decoration: none;
 width: 150px;
 background: #252525;
 border-top: 1px solid #373737;
 border-bottom: 1px solid #1A1A1A;
 -webkit-transition: background .5s;
 -moz-transition: background .5s;
 -o-transition: background .5s;
 -ms-transition: background .5s;
 transition: background .5s;
}
.sidebar_name {
 padding-top: 25px;
 color: #fff;
 opacity: .7;
}
.sidebar-nav li {
 line-height: 40px;
 text-indent: 20px;
}
.sidebar-nav li a {
 color: #999999;
 display: block;
 text-decoration: none;
}
.sidebar-nav li a:hover {
 color: #fff;
 background: rgba(255, 255, 255, 0.2);
 text-decoration: none;
}
.sidebar-nav li a:active, .sidebar-nav li a:focus {
 text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
 height: 65px;
 line-height: 60px;
 font-size: 18px;
}
.sidebar-nav > .sidebar-brand a {
 color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
 color: #fff;
 background: none;
}
#main_icon {
 float:right;
 padding-right: 65px;
 padding-top:20px;
}
.sub_icon {
 float:right;
 padding-right: 65px;
 padding-top:10px;
}
.content-header {
 height: 65px;
 line-height: 65px;
}
.content-header h1 {
 margin: 0;
 margin-left: 20px;
 line-height: 65px;
 display: inline-block;
}
 @media (max-width:767px) {
 #wrapper {
 padding-left: 70px;
 transition: all .4s ease 0s;
}
#sidebar-wrapper {
 left: 70px;
}
#wrapper.active {
 padding-left: 150px;
}
#wrapper.active #sidebar-wrapper {
 left: 150px;
 width: 150px;
 transition: all .4s ease 0s;
}
}
 body {
 padding-top: 50px;
}
/*
 * Style tweaks
 * --------------------------------------------------
 */
html, body {
 overflow-x: hidden; /* Prevent scroll on narrow devices */
 height: 100%;
}
 @media screen and (min-width: 768px) {
 .row-offcanvas {
 position: relative;
 -webkit-transition: all .25s ease-out;
 -moz-transition: all .25s ease-out;
 transition: all .25s ease-out;
}
 .row-offcanvas-right {
 right: 25%;
}
 .row-offcanvas-left {
 left: 25%;
}
 .row-offcanvas-right .sidebar-offcanvas {
 right: -25%; /* 3 columns */
 background-color: rgb(255, 255, 255);
}
 .row-offcanvas-left .sidebar-offcanvas {
 left: -25%; /* 3 columns */
 background-color: rgb(255, 255, 255);
}
 .row-offcanvas-right.active {
 right: 0; /* 3 columns */
}
 .row-offcanvas-left.active {
 left: 0; /* 3 columns */
}
 .row-offcanvas-right.active .sidebar-offcanvas {
 background-color: rgb(254, 254, 254);
}
 .row-offcanvas-left.active .sidebar-offcanvas {
 background-color: rgb(254, 254, 254);
}
 .row-offcanvas .content {
 width: 75%; /* 9 columns */
 -webkit-transition: all .25s ease-out;
 -moz-transition: all .25s ease-out;
 transition: all .25s ease-out;
}
 .row-offcanvas.active .content {
 width: 100%; /* 12 columns */
}
 .sidebar-offcanvas {
 position: absolute;
 top: 0;
 width: 25%; /* 3 columns */
}
}
@media screen and (max-width: 767px) {
 .row-offcanvas {
 position: relative;
 -webkit-transition: all .25s ease-out;
 -moz-transition: all .25s ease-out;
 transition: all .25s ease-out;
}
 .row-offcanvas-right {
 right: 0;
}
 .row-offcanvas-left {
 left: 0;
}
 .row-offcanvas-right .sidebar-offcanvas {
 right: -50%; /* 6 columns */
}
 .row-offcanvas-left .sidebar-offcanvas {
 left: -50%; /* 6 columns */
}
 .row-offcanvas-right.active {
 right: 50%; /* 6 columns */
}
 .row-offcanvas-left.active {
 left: 50%; /* 6 columns */
}
 .sidebar-offcanvas {
 position: absolute;
 top: 0;
 width: 50%; /* 6 columns */
}
}
</style>
</head>
<body>

<div class="container-fluid">
  <div class="row row-offcanvas row-offcanvas-left">
    <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
      <div class="list-group"> <a href="#" class="list-group-item active">Link</a> <a href="#" class="list-group-item">Link</a> <a href="#" class="list-group-item">Link</a> <a href="#" class="list-group-item">Link</a> </div>
    </div>
    <div class="col-xs-12 col-sm-9 content">
      <p class="pull-left">
        <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
      </p>
      <div class="container" style="padding:20px;margin:auto;width:60%">
        <p style="text-align:justify">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
$("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("active");
});
</script>
<script type="text/javascript">
$(document).ready(function () {
  $('[data-toggle=offcanvas]').click(function () {
    if ($('.sidebar-offcanvas').css('background-color') == 'rgb(255, 255, 255)') {
     $('.list-group-item').attr('tabindex', '-1');
    } else {
     $('.list-group-item').attr('tabindex', '');
    }
    $('.row-offcanvas').toggleClass('active');
    
  });
});

</script>
</body>
</html>

Responsive Navigation On Complex Websites

Only Create index.html

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Multiple Style Responsive Navigation</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
body {
 background:#333;
}
.dropdown-menu {
 background-clip: padding-box;
 background-color: #000;
 border: 1px solid rgba(0, 0, 0, 0.15);
 border-radius: 4px;
 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
 display: none;
 float: left;
 font-size: 14px;
 left: 0;
 list-style: outside none none;
 margin: 2px 0 0;
 min-width: 160px;
 padding: 5px 0;
 position: absolute;
 text-align: left;
 top: 100%;
 z-index: 1000;
}
.wrapper {
 padding:20px;
 margin:auto;
}
.block-me {
 background:#999999;
 height: 300px;
 margin: 10px;
 overflow: auto;
 padding: 20px;
 width: 582px;
 border: 2px solid;
 margin:auto;
}
 @media screen and (min-device-width: 320px) and (max-device-width: 756px) {
 .block-me {
 padding: 20px;
 width: 280px;
}
}
.block-me p {
 text-align:center;
 color:#FFFFFF;
 font-weight:bold;
 text-transform:uppercase;
}
.mecontainer {
 padding:10px;
 margin:auto;
}
.dropdown dd, .dropdown dt {
 margin:0px;
 padding:0px;
}
.dropdown ul {
 margin: -1px 0 0 0;
}
.dropdown dd {
 position:relative;
}
.dropdown a, .dropdown a:visited {
 color:#fff;
 text-decoration:none;
 outline:none;
 font-size: 12px;
}
.dropdown dt a {
 background-color:#4F6877;
 display:block;
 padding: 8px 20px 5px 10px;
 min-height: 25px;
 line-height: 24px;
 overflow: hidden;
 border:0;
 width:272px;
}
.dropdown dt a span, .multiSel span {
 cursor:pointer;
 display:inline-block;
 padding: 0 3px 2px 0;
}
.dropdown dd ul {
 background-color: #4F6877;
 border:0;
 color:#fff;
 display:none;
 left:0px;
 padding: 2px 15px 2px 5px;
 position:absolute;
 top:2px;
 width:280px;
 list-style:none;
 height: 100px;
 overflow: auto;
}
.dropdown span.value {
 display:none;
}
.dropdown dd ul li a {
 padding:5px;
 display:block;
}
.dropdown dd ul li a:hover {
 background-color:#fff;
}
.checkbox, .radio {
 display: inline;
 margin-bottom: 10px;
 margin-top: 10px;
 position: relative;
}
/*multilevel dropdown*/
 .dropdown-submenu {
 position: relative;
}
.dropdown-submenu>.dropdown-menu {
 top: 0;
 left: 100%;
 margin-top: -6px;
 margin-left: -1px;
 -webkit-border-radius: 0 6px 6px 6px;
 -moz-border-radius: 0 6px 6px;
 border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
 display: block;
}
.dropdown-submenu>a:after {
 display: block;
 content: " ";
 float: right;
 width: 0;
 height: 0;
 border-color: transparent;
 border-style: solid;
 border-width: 5px 0 5px 5px;
 border-left-color: #ccc;
 margin-top: 5px;
 margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
 border-left-color: #fff;
}
.dropdown-submenu.pull-left {
 float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
 left: -100%;
 margin-left: 10px;
 -webkit-border-radius: 6px 0 6px 6px;
 -moz-border-radius: 6px 0 6px 6px;
 border-radius: 6px 0 6px 6px;
}

.nav-sidebar {
 width: 100%;
 padding: 8px 0;
 border-right: 1px solid #ddd;
}
.nav-sidebar a {
 color: #333;
 -webkit-transition: all 0.08s linear;
 -moz-transition: all 0.08s linear;
 -o-transition: all 0.08s linear;
 transition: all 0.08s linear;
 -webkit-border-radius: 4px 0 0 4px;
 -moz-border-radius: 4px 0 0 4px;
 border-radius: 4px 0 0 4px;
}
.nav-sidebar .active a {
 cursor: default;
 background-color: #428bca;
 color: #fff;
 text-shadow: 1px 1px 1px #666;
}
.nav-sidebar .active a:hover {
 background-color: #428bca;
}
.nav-sidebar .text-overflow a, .nav-sidebar .text-overflow .media-body {
 white-space: nowrap;
 overflow: hidden;
 -o-text-overflow: ellipsis;
 text-overflow: ellipsis;
}
/* Right-aligned sidebar */
.nav-sidebar.pull-right {
 border-right: 0;
 border-left: 1px solid #ddd;
}
.nav-sidebar.pull-right a {
 -webkit-border-radius: 0 4px 4px 0;
 -moz-border-radius: 0 4px 4px 0;
 border-radius: 0 4px 4px 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
 background: #ccc none repeat scroll 0 0;
 display: block;
}
.bs-example-navbar-collapse-1 {
 width:400px;
}
.collapse navbar-collapse {
 width:400px;
}
</style>
</head>
<body>
<div class="wrapper">
  
  <div class="mecontainer">
    
    <div class="block-me">
      
      <p>Dropdown</p>
      <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
          <li role="presentation" class="divider"></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
        </ul>
      </div>
    </div>
    
    
    <div class="block-me" style="overflow-x:hidden">
      
      <p>Responsive Dropdown Menu</p>
      <nav id="myNavbar" class="navbar navbar-default" role="navigation">
        
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
            <a class="navbar-brand" href="#">Logo</a> </div>
          
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li><a href="#">Home</a></li>
              <li><a href="#">Profile</a></li>
              <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Inbox</a></li>
                  <li><a href="#">Drafts</a></li>
                  <li><a href="#">Sent Items</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Trash</a></li>
                </ul>
              </li>
            </ul>
            
            </li>
            </ul>
          </div>
          
        </div>
      </nav>
    </div>
    
    
    <div class="block-me">
      
      <p> Multi-Dropdown</p>
      <div class="dropdown"> <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html"> Dropdown <span class="caret"></span> </a>
        <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
          <li><a href="#">Some action</a></li>
          <li><a href="#">Some other action</a></li>
          <li class="divider"></li>
          <li class="dropdown-submenu"> <a tabindex="-1" href="#">Hover me for more options</a>
            <ul class="dropdown-menu">
              <li><a tabindex="-1" href="#">Second level</a></li>
              <li class="dropdown-submenu"> <a href="#">Even More..</a>
                <ul class="dropdown-menu">
                  <li><a href="#">3rd level</a></li>
                  <li><a href="#">3rd level</a></li>
                </ul>
              </li>
              <li><a href="#">Second level</a></li>
              <li><a href="#">Second level</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    
    
    <div class="block-me">
      
      <p>Sidebar Navigation</p>
      <div class="col-sm-5">
        <nav class="nav-sidebar">
          <ul class="nav">
            <li class="active"><a href="javascript:;">Home</a></li>
            <li><a href="javascript:;">About</a></li>
            <li><a href="javascript:;">Products</a></li>
            <li><a href="javascript:;">FAQ</a></li>
            <li class="nav-divider"></li>
            <li><a href="javascript:;"><i class="glyphicon glyphicon-off"></i> Sign in</a></li>
          </ul>
        </nav>
      </div>
      
    </div>
    
    <div class="block-me">
      
      <p>Multiselection dropdown using checkbox</p>
      <dl class="dropdown">
        <dt> <a href="#"> <span class="hida">Select</span>
          <p class="multiSel"></p>
          </a> </dt>
        <dd>
          <div class="mutliSelect">
            <ul>
              <li>
                <input type="checkbox" class="checkbox" value="Html" />
                Html</li>
              <li>
                <input type="checkbox" value="Css" />
                Css</li>
              <li>
                <input type="checkbox" value="Javascript" />
                Javascript</li>
              <li>
                <input type="checkbox" value="Jquery" />
                Jquery</li>
              <li>
                <input type="checkbox" value="Wordpress" />
                Wordpress</li>
              <li>
                <input type="checkbox" value="Angular-js" />
                Angular-js</li>
            </ul>
          </div>
        </dd>
      </dl>
    </div>
    
    <script type="text/javascript">
$(".dropdown dt a").on('click', function () {
          $(".dropdown dd ul").slideToggle('fast');
      });

$(".dropdown dd ul li a").on('click', function () {
          $(".dropdown dd ul").hide();
      });

function getSelectedValue(id) {
           return $("#" + id).find("dt a span.value").html();
      }

$(document).bind('click', function (e) {
          var $clicked = $(e.target);
          if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
      });

$('.mutliSelect input[type="checkbox"]').on('click', function () {
        
          var title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(),
              title = $(this).val() + ",";
        
          if ($(this).is(':checked')) {
              var html = '<span title="' + title + '">' + title + '</span>';
              $('.multiSel').append(html);
              $(".hida").hide();
          } 
          else {
              $('span[title="' + title + '"]').remove();
              var ret = $(".hida");
              $('.dropdown dt a').append(ret);
              
          }
      });
</script>
  </div>
  
</div>

</body>
</html>

Wednesday 15 July 2015

Bootstrap Responsive Inline Menu

Create index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Responsive Inline Menu</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">LOGO</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Services</a></li>
         <li><a href="#">Clients</a></li>
          <li><a href="#">Contact Us</a></li>
      </ul>
    </div>
  </div>
</nav>
</body>
</html>

Responsive Multidropdown Menu

Create index.html

<!DOCTYPE html>
<html>
<head>
<title>Responsive Multidropdown Menu</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav id="menu-wrap">
  <ul id="menu">
    <li><a href="/">Home</a></li>
    <li> <a href="">Products</a>
      <ul>
        <li> <a href="">Web-Apps</a>
          <ul>
            <li><a href="">Shoping-cart</a></li>
            <li><a href="">Online-Booking</a></li>
            <li><a href="">Online-Appointment</a></li>
            <li><a href="">Online-Hosting</a></li>
          </ul>
        </li>
        <li> <a href="">Application Software</a>
          <ul>
            <li><a href="">Image Editor</a></li>
            <li><a href="">Fonts Editor</a></li>
            <li><a href="">Video Editor</a></li>
            <li><a href="">Graphics Editor</a></li>
          </ul>
        </li>
        <li> <a href="">Mobile Apps</a>
          <ul>
            <li><a href="">Android Apps</a></li>
            <li><a href="">IOS Apps</a></li>
            <li><a href="">Blackberry</a></li>
            <li><a href="">Others</a></li>
          </ul>
        </li>
        <li> <a href="">Designing</a>
          <ul>
            <li><a href="">Logo Design</a></li>
            <li><a href="">Image Design</a></li>
            <li><a href="">Image Effects</a></li>
            <li><a href="">Graphics Effects</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li> <a href="">Our Visions</a>
      <ul>
        <li> <a href="">History</a>
          <ul>
            <li> <a href="">1999</a>
              <ul>
                <li><a href="">2000-2010</a></li>
                <li><a href="">2011-2013</a></li>
                <li><a href="">2014</a></li>
              </ul>
            </li>
            <li> <a href="">Clients</a>
              <ul>
                <li><a href="">National</a></li>
                <li><a href="">International</a></li>
                <li><a href="">Temp Client</a></li>
              </ul>
            </li>
            <li> <a href="">Success Story</a>
              <ul>
                <li><a href="">Development</a></li>
                <li><a href="">Advertisement</a></li>
                <li><a href="">Business</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li> <a href="">Projects</a>
          <ul>
            <li> <a href="">HAL</a>
              <ul>
                <li><a href="">GPS</a></li>
                <li><a href="">Mobility</a></li>
                <li><a href="">Tracking</a></li>
              </ul>
            </li>
            <li> <a href="">Plugins</a>
              <ul>
                <li><a href="">SMS Plugins</a></li>
                <li><a href="">Payment-Gateway Plugins</a></li>
                <li><a href="">Money Transfer</a></li>
              </ul>
            </li>
            <li> <a href="">Work 23</a>
              <ul>
                <li><a href="">Work 231</a></li>
                <li><a href="">Work 232</a></li>
                <li><a href="">Work 233</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li> <a href="">Work 3</a>
          <ul>
            <li> <a href="">Work 31</a>
              <ul>
                <li><a href="">Work 311</a></li>
                <li><a href="">Work 312</a></li>
                <li><a href="">Work 313</a></li>
              </ul>
            </li>
            <li> <a href="">Work 32</a>
              <ul>
                <li><a href="">Work 321</a></li>
                <li><a href="">Work 322</a></li>
                <li><a href="">Work 323</a></li>
              </ul>
            </li>
            <li> <a href="">Work 33</a>
              <ul>
                <li><a href="">Work 331</a></li>
                <li><a href="">Work 332</a></li>
                <li><a href="">Work 333</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="">Link with us</a></li>
    <li><a href="">Contacts</a></li>
  </ul>
</nav>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
  if ($.browser.msie && $.browser.version.substr(0,1)<7)
  {
  $('li').has('ul').mouseover(function(){
   $(this).children('ul').css('visibility','visible');
   }).mouseout(function(){
   $(this).children('ul').css('visibility','hidden');
   })
  }

/* Mobile */
  $('#menu-wrap').prepend('<div id="menu-trigger">Menu</div>');  
  $("#menu-trigger").on("click", function(){
   $("#menu").slideToggle();
  });

// iPad
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  if (isiPad) $('#menu ul').addClass('no-transition');      
    });          
</script>
</body>
</html>

Create style.css

@charset "utf-8";
body {
 background:#333;
 font: 13px 'trebuchet MS', Arial, Helvetica;
}
h2, p {
 text-align: center;
 color: #444;
 text-shadow: 0 1px 0 #fff;
}
a {
 color: #2A679F;
}
/* You don't need the above styles, they are demo-specific ----------- */
 
 #menu, #menu ul {
 margin: 0;
 padding: 0;
 list-style: none;
}
#menu {
 width: 960px;
 margin: 60px auto;
 border: 1px solid #222;
 background-color: #111;
 background-image: -moz-linear-gradient(#444, #111);
 background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
 background-image: -webkit-linear-gradient(#444, #111);
 background-image: -o-linear-gradient(#444, #111);
 background-image: -ms-linear-gradient(#444, #111);
 background-image: linear-gradient(#444, #111);
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 border-radius: 6px;
 -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
 -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
 box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
}
#menu:before,  #menu:after {
 content: "";
 display: table;
}
#menu:after {
 clear: both;
}
#menu {
 zoom:1;
}
#menu li {
 float: left;
 border-right: 1px solid #222;
 -moz-box-shadow: 1px 0 0 #444;
 -webkit-box-shadow: 1px 0 0 #444;
 box-shadow: 1px 0 0 #444;
 position: relative;
}
#menu a {
 float: left;
 padding: 12px 30px;
 color: #999;
 text-transform: uppercase;
 font: bold 12px Arial, Helvetica;
 text-decoration: none;
 text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
 color: #fafafa;
}
*html #menu li a:hover { /* IE6 only */
 color: #fafafa;
}
#menu ul {
 margin: 20px 0 0 0;
 _margin: 0; /*IE6 only*/
 opacity: 0;
 visibility: hidden;
 position: absolute;
 top: 38px;
 left: 0;
 z-index: 1;
 background: #444;
 background: -moz-linear-gradient(#444, #111);
 background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
 background: -webkit-linear-gradient(#444, #111);
 background: -o-linear-gradient(#444, #111);
 background: -ms-linear-gradient(#444, #111);
 background: linear-gradient(#444, #111);
 -moz-box-shadow: 0 -1px rgba(255, 255, 255, .3);
 -webkit-box-shadow: 0 -1px 0 rgba(255, 255, 255, .3);
 box-shadow: 0 -1px 0 rgba(255, 255, 255, .3);
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
 -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 -ms-transition: all .2s ease-in-out;
 -o-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
}
#menu li:hover > ul {
 opacity: 1;
 visibility: visible;
 margin: 0;
}
#menu ul ul {
 top: 0;
 left: 150px;
 margin: 0 0 0 20px;
 _margin: 0; /*IE6 only*/
 -moz-box-shadow: -1px 0 0 rgba(255, 255, 255, .3);
 -webkit-box-shadow: -1px 0 0 rgba(255, 255, 255, .3);
 box-shadow: -1px 0 0 rgba(255, 255, 255, .3);
}
#menu ul li {
 float: none;
 display: block;
 border: 0;
 _line-height: 0; /*IE6 only*/
 -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
 -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
 box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child {
 -moz-box-shadow: none;
 -webkit-box-shadow: none;
 box-shadow: none;
}
#menu ul a {
 padding: 10px;
 width: 130px;
 _height: 10px; /*IE6 only*/
 display: block;
 white-space: nowrap;
 float: none;
 text-transform: none;
}
#menu ul a:hover {
 background-color: #0186ba;
 background-image: -moz-linear-gradient(#04acec, #0186ba);
 background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
 background-image: -webkit-linear-gradient(#04acec, #0186ba);
 background-image: -o-linear-gradient(#04acec, #0186ba);
 background-image: -ms-linear-gradient(#04acec, #0186ba);
 background-image: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a {
 -moz-border-radius: 3px 3px 0 0;
 -webkit-border-radius: 3px 3px 0 0;
 border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
 content: '';
 position: absolute;
 left: 40px;
 top: -6px;
 border-left: 6px solid transparent;
 border-right: 6px solid transparent;
 border-bottom: 6px solid #444;
}
#menu ul ul li:first-child a:after {
 left: -6px;
 top: 50%;
 margin-top: -6px;
 border-left: 0;
 border-bottom: 6px solid transparent;
 border-top: 6px solid transparent;
 border-right: 6px solid #3b3b3b;
}
#menu ul li:first-child a:hover:after {
 border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after {
 border-right-color: #0299d3;
 border-bottom-color: transparent;
}
#menu ul li:last-child > a {
 -moz-border-radius: 0 0 3px 3px;
 -webkit-border-radius: 0 0 3px 3px;
 border-radius: 0 0 3px 3px;
}
/* Mobile */
 #menu-trigger {
 display: none;
}
 @media screen and (max-width: 600px) {

/* nav-wrap */
  #menu-wrap {
 position: relative;
}
 #menu-wrap * {
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}

/* menu icon */
  #menu-trigger {
 display: block; /* show menu icon */
 height: 40px;
 line-height: 40px;
 cursor: pointer;
 padding: 0 0 0 35px;
 border: 1px solid #222;
 color: #fafafa;
 font-weight: bold;
 background-color: #111;
 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -moz-linear-gradient(#444, #111);
 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -webkit-linear-gradient(#444, #111);
 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -o-linear-gradient(#444, #111);
 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -ms-linear-gradient(#444, #111);
 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, linear-gradient(#444, #111);
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 border-radius: 6px;
 -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
 -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
 box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
}
  
  /* main nav */
  #menu {
 margin: 0;
padding: 10px;
 position: absolute;
 top: 40px;
 width: 100%;
 z-index: 1;
 background-color: #444;
 display: none;
 -moz-box-shadow: none;
 -webkit-box-shadow: none;
 box-shadow: none;
}
 #menu:after {
 content: '';
 position: absolute;
 left: 25px;
 top: -8px;
 border-left: 8px solid transparent;
 border-right: 8px solid transparent;
 border-bottom: 8px solid #444;
}
 #menu ul {
 position: static;
 visibility: visible;
 opacity: 1;
 margin: 0;
 background: none;
 -moz-box-shadow: none;
 -webkit-box-shadow: none;
 box-shadow: none;
}
 #menu ul ul {
 margin: 0 0 0 20px !important;
 -moz-box-shadow: none;
 -webkit-box-shadow: none;
 box-shadow: none;
}
 #menu li {
 position: static;
 display: block;
 float: none;
 border: 0;
 margin: 5px;
 -moz-box-shadow: none;
 -webkit-box-shadow: none;
 box-shadow: none;
}
 #menu ul li {
 margin-left: 20px;
 -moz-box-shadow: none;
 -webkit-box-shadow: none;
 box-shadow: none;
}
 #menu a {
 display: block;
 float: none;
 padding: 0;
 color: #999;
}
 #menu a:hover {
 color: #fafafa;
}
 #menu ul a {
 padding: 0;
 width: auto;
}
 #menu ul a:hover {
 background: none;
}
 #menu ul li:first-child a:after,  #menu ul ul li:first-child a:after {
 border: 0;
}
}
 @media screen and (min-width: 600px) {
 #menu {
 display: block !important;
}
}
/* iPad */
 .no-transition {
 -webkit-transition: none;
 -moz-transition: none;
 -ms-transition: none;
 -o-transition: none;
 transition: none;
 opacity: 1;
 visibility: visible;
 display: none;
}
#menu li:hover > .no-transition {
 display: block;
}