How to Create Menu Hover effect with Transition

Below is the demo you can see this.

• Home
• About
• Ask Any Question?
• Contact

Include these files with also bootstraps

/* Attach the Table CSS and Javascript */
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
<script src="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script src="stylesheet" href="https://portal.domainshostweb.com/stackui.blogspot/js/jquery.spasticNav.js"></script>

How to use it

You need to Use this id in you main Nav div #nav <nav id="nav"> </nav>

    
     <nav id="nav"> 
      //add your ul li menu here 
     </nav>
   

You need to Use this id in your li #selected <nav id="nav" > <ul > <li id="selected"></li> </ul> </nav>

    
     <nav id="nav"> 
        <ul>
      <li id="selected"><a href="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#AskAnyQuestion">Ask Any Question?</a></li>
      <li><a href="#contact">Contact</a></li>
       </ul>
     </nav> 
   

Create CSS file and Add this CSS into it.

     

ul, li {
    margin: 0;
    padding: 0;
}

#blob {
    background: #0b2b61;
    border-right: 1px solid #0059ec;
    border-left: 1px solid #0059ec;
    position: absolute;
    z-index: 1;
    top: 0;
    background: -moz-linear-gradient(top, #0b2b61, #1153c0);
    background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-box-shadow: 2px 3px 10px #011331;
    -webkit-box-shadow: 2px 3px 10px #011331;
}

#nav {
    position: relative;
    background: #292929;
    float: left;
 margin:50px;
}

#nav li {
    float: left;
    list-style: none;
    border-right: 1px solid #4a4a4a;
    border-left: 1px solid black;
 padding: 0px;
}

#nav li a {
    color: #e3e3e3;
    z-index: 2;
    position: relative;
    cursor: pointer;
    float: left;
    font-size: 30px;
    font-family: helvetica, arial, sans-serif;
    text-decoration: none;
    padding: 30px 45px;
    width: 100%;

}
   

Add this Script into script tagg

    
    $('#nav').spasticNav(); 
  

Click here to Download Code Download