Neuro17
10/5/2013 - 12:59 PM

bootstrap3 navbar

bootstrap3 navbar

$(document).ready(function(){
  $('ul.nav li.dropdown').hover(function() {
    $(this).find('.dropdown-menu').stop(true, true).slideToggle('fast');
  }, function() {
    $(this).find('.dropdown-menu').stop(true, true).slideToggle('fast');
  });  
});
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="navbar">

  <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <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="/bonboard/home"></a>
  </div>

  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
        <li id="home" ><a href="/bonboard/home">Home</a></li>
        <li id="about" class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"></i><spring:message code="welcome.chisiamo" text="default text" /><b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="/bonboard/about/about_us">About us</a></li>
                <li><a href="/bonboard/about/advisory">Advisory board</a></li>
                <li><a href="/bonboard/about/partners">Partners</a></li>
                <li><a href="/bonboard/about/staff">Staff</a></li>
            </ul>
        </li>
        <li id="servizi" class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"></i><spring:message code="welcome.servizi" text="default text" /><b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="/bonboard/servizi/i_nostri_servizi_per_voi"><spring:message code="welcome.serviziPerVoi" text="default text" /></a></li>
                <li><a href="/bonboard/servizi/offerta_modulare"><spring:message code="welcome.offertaModulare" text="default text" /></a></li>
                <li><a href="/bonboard/servizi/personalizzazione_dei_servizi"><spring:message code="welcome.personalizzazioneServizi" text="default text" /></a></li>
            </ul>
        </li>
        <li id="offerte" class=""><a href="#"><spring:message code="welcome.offerte" text="default text" /></a></li>
        <li id="press" class=""><a href="#">Press Area</a></li>
        <li id="blog" class=""><a href="/bonboard/blog">Blog</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"></i><spring:message code="welcome.lingua" text="default text" /><b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a id="it" class="pointer">Italiano</a></li>
                <li><a id="en" class="pointer">English</a></li>
            </ul>
        </li>
    </ul>
    <form class="navbar-form navbar-right">
      <div class="form-group">
          <input id="user" type="text" class="form-control" placeholder="Username">
      </div>
      <div class="form-group">
          <input id="pass" type="password" class="form-control" placeholder="Password">
      </div>
      <button id="logButt" type="button" class="btn btn-default">Sign in</button>
      <a href="/bonboard/register"><spring:message code="welcome.registrati" text="default text" /></a>
    </form>
  </div>
</div>
.navbar-default {
    background-color: #00AA8F !important;
    border: none !important;
}

.navbar-default .navbar-brand {
    color: #00AA8F !important ;
}

form a{
	color: white;
}

form a:hover{
	color: #006266;
	text-decoration: none;
}

.navbar-default .navbar-nav > li > a:hover {
    
}

.navbar-default .navbar-nav > li > a {
	color: white !important;
	text-shadow:none !important;
	-webkit-transition:background .2s ease;
	-moz-transition:background .2s ease;
	-o-transition:background .2s ease;
	transition:background .2s ease;
}

.navbar-default .navbar-nav > li > a:hover {
    color: white !important;
    background: #006266 !important;
    -webkit-transition:background .2s ease;
	-moz-transition:background .2s ease;
	-o-transition:background .2s ease;
	transition:background .2s ease;
}

.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
    color: white !important;
    background-color: #00AA8F !important;
    background: #006266 !important;
}

.dropdown-toggle {
	background: #00AA8F !important;
}

.dropdown-menu{
	background:#00AA8F !important;
	border-radius:0px !important;
	box-shadow:none !important;
	padding:0px 0px;
	margin:0px;
	border: none !important;
}

.dropdown-menu a{
	background:#00AA8F !important;
	padding:9px 10px;
	color:#fff !important;
	text-shadow:none !important;
	-webkit-transition:background .2s ease;
	-moz-transition:background .2s ease;
	-o-transition:background .2s ease;
	transition:background .2s ease;
}

.dropdown-menu a:hover,.dropdown-menu a:focus{
	filter:none !important;
	background:#006266 !important;
	-webkit-transition:background .2s ease;
	-moz-transition:background .2s ease;
	-o-transition:background .2s ease;
	transition:background .2s ease;
}

.dropdown-menu::after, .dropdown-menu::before{
	border:none !important;
}