"nav re3"
Bootstrap 3.0.0 Snippet by jeevan123456

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Responsive Animated Navigation on Bootstrap</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css"> </head> <body> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> <nav class="navbar navbar-inverse navbar-fixed-top" 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="#">Animated Bootstrap Nav</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">About</a><span class="hover"></span></li> <li><a href="#">Services</a><span class="hover"></span></li> <li><a href="#">Portfolio</a><span class="hover"></span></li> <li><a href="#">Blog</a><span class="hover"></span></li> <li><a href="#">Contact</a><span class="hover"></span></li> </ul> </div> </div> </nav> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js'></script> <script src="js/index.js"></script> </body> </html>
/* Downloaded from https://www.codeseek.co/ */ body { background: #192226 !important; } .navbar-inverse { background: #222B31 !important; border-bottom: 4px solid #EE445F !important; } .navbar-brand { font: 12px Lato !important; text-transform: uppercase; color: #FFF !important; letter-spacing: 2px; margin-top: 2px; } .nav { margin-bottom: 0px; } .nav a { font: 500 11px Lato; letter-spacing: 2px; padding: 16px !important; color: #a3bfc6 !important; text-transform: uppercase; position: relative; z-index: 1000; } .nav a:hover { color: #FFF !important; } .nav li { position: relative; } .navbar-inverse .navbar-toggle { border: none; } .navbar-collapse { box-shadow: none !important; border: none !important; } .navbar-inverse .navbar-toggle:hover { background: transparent !important; } .navbar-inverse .navbar-toggle:focus { background: transparent !important; } .navbar-inverse .navbar-toggle:active { background: transparent !important; } .icon-bar { background: #a3bfc6 !important; } .hover { display: block; position: absolute; width: 0%; height: 100%; top: 0px; left: 0px; background: #EE445F !important; z-index: 0; opacity: 0; } @media (max-width: 767px) { .nav { padding-bottom: 20px; } .nav a { padding: 12px !important; } } @media (max-width: 480px) { .nav { padding-bottom: 20px; } }
/* Downloaded from https://www.codeseek.co/ */ $( "li" ).hover( function() { $(this).find("span").stop().animate({ width:"100%", opacity:"1", }, 400, function () { }) }, function() { $(this).find("span").stop().animate({ width:"0%", opacity:"0", }, 400, function () { }) } );

Related: See More

Paper Kit 2 PRO

Questions / Comments: