<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ---------->
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-megadropdown-tabs">
<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="#"><img src="http://d2r8jqmejizzox.cloudfront.net/361456-853098-65x38-logofinal.png"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse style= collapse in" id="bs-megadropdown-tabs" style="
padding-left: 0px;
">
<ul class="nav navbar-nav">
<li><a href="#"><i class="fa fa-globe"></i> ALL</a></li>
<li><a href="#"><i class="fa fa-university"></i> POLITICS</a></li>
<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-space-shuttle"></i> CATEGORIES <span class="caret"></span></a>
<div id="filters" class="dropdown-menu mega-dropdown-menu">
<div class="container-fluid2">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="kids">
<ul class="nav-list list-inline">
<li><a data-filter=".89" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Running.png"><span>BRICS</span></a></li>
<li><a data-filter=".97" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Basketball.png"><span>Latin America</span></a></li>
<li><a data-filter=".96" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Football.png"><span>USA</span></a></li>
<li><a data-filter=".87" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Soccer.png"><span>Middle East</span></a></li>
<li><a data-filter=".85" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_MensTraining.png"><span>Asia</span></a></li>
<li><a data-filter=".90" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_MensTraining.png"><span>Africa</span></a></li>
</ul>
</div>
<div class="tab-pane" id="sports">
<ul class="nav-list list-inline">
<li><a data-filter=".38" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Basketball.png"><span>Technology</span></a></li>
<li><a data-filter=".41" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Football.png"><span>Music</span></a></li>
<li><a data-filter=".62" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Soccer.png"><span>Startups</span></a></li>
<li><a data-filter=".82" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_MensTraining.png"><span>Celebrities</span></a></li>
<li><a data-filter=".93" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_WomensTraining.png"><span>Entertainment</span></a></li>
<li><a data-filter=".94" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_WomensTraining.png"><span>Series</span></a></li>
</ul>
</div>
</div>
</div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#kids" role="tab" data-toggle="tab">Countries</a></li>
<li><a href="#sports" role="tab" data-toggle="tab">Top Guess</a></li>
</ul>
</div>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user"></span>
<strong>Nombre</strong>
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
<ul style="background-color:white;" class="dropdown-menu">
<li>
<div class="navbar-login">
<div class="row">
<div class="col-lg-4">
<p class="text-center">
<span class="glyphicon glyphicon-user icon-size"></span>
</p>
</div>
<div class="col-lg-8">
<p class="text-left"><strong>Nombre Apellido</strong></p>
<p class="text-left small">correoElectronico@email.com</p>
<p class="text-left">
<a href="#" class="btn btn-primary btn-block btn-sm">Actualizar Datos</a>
</p>
</div>
</div>
</div>
</li>
<li class="divider"></li>
<li>
<div class="navbar-login navbar-login-session">
<div class="row">
<div class="col-lg-12">
<p>
<a href="#" class="btn btn-danger btn-block">Cerrar Sesion</a>
</p>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">SIGN IN <span class="caret"></span></a>
<ul id="login-dp" class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-12">
Login via
<div class="social-buttons">
<a href="#" class="btn btn-fb"><i class="fa fa-facebook"></i> Facebook</a>
<a href="#" class="btn btn-tw"><i class="fa fa-twitter"></i> Twitter</a>
</div>
or
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required="">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required="">
<div class="help-block text-right"><a href="">Forget the password ?</a></div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> keep me logged-in
</label>
</div>
</form>
</div>
<div class="bottom text-center">
New here ? <a href="#"><b>Join Us</b></a>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
/*
Credits:
Code snippet by @maridlcrmn (Follow me on Twitter)
Images by Nike.com (http://www.nike.com/us/en_us/)
Logo by Sneaker-mission.com (http://www.sneaker-mission.com/)
*/
.navbar-brand {
width: 70px;
height: 50px;
background: url('http://www.sneaker-mission.com/uploads/3/1/2/7/31279819/5617441.png') no-repeat center center;
background-size: 50px;
}
.nav-tabs {
display: inline-block;
border-bottom: none;
padding-top: 15px;
font-weight: bold;
}
.nav-tabs > li > a,
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
border: none;
border-radius: 0;
}
.nav-list { border-bottom: px solid #eee; }
.nav-list > li {
padding: 20px 15px 15px;
}
.nav-list > li:last-child { border-right: 0px solid #eee; }
.nav-list > li > a:hover { text-decoration: none; }
.nav-list > li > a > span {
display: block;
font-weight: bold;
text-transform: uppercase;
}
.mega-dropdown { position: static !important; }
.mega-dropdown-menu {
padding: 20px 15px 15px;
text-align: center;
width: 100%;
}
#login-dp{
min-width: 250px;
padding: 14px 14px 0;
overflow:hidden;
background-color:rgba(255,255,255,.8);
}
#login-dp .help-block{
font-size:12px
}
#login-dp .bottom{
background-color:rgba(255,255,255,.8);
border-top:1px solid #ddd;
clear:both;
padding:14px;
}
#login-dp .social-buttons{
margin:12px 0
}
#login-dp .social-buttons a{
width: 49%;
}
#login-dp .form-group {
margin-bottom: 10px;
}
.btn-fb{
color: #fff;
background-color:#3b5998;
}
.btn-fb:hover{
color: #fff;
background-color:#496ebc
}
.btn-tw{
color: #fff;
background-color:#55acee;
}
.btn-tw:hover{
color: #fff;
background-color:#59b5fa;
}
@media(max-width:768px){
#login-dp{
background-color: inherit;
color: #fff;
}
#login-dp .bottom{
background-color: inherit;
border-top:0 none;
}
}
.navbar-login
{
width: 305px;
padding: 10px;
padding-bottom: 0px;
}
.navbar-login-session
{
padding: 10px;
padding-bottom: 0px;
padding-top: 0px;
}
.icon-size
{
font-size: 87px;
}
.navbar-brand {
width: 70px;
height: 50px;
background: url('http://www.sneaker-mission.com/uploads/3/1/2/7/31279819/5617441.png') no-repeat center center;
background-size: 50px;
padding-top: 7px;
}
.navbar-nav {
padding-left: 15px;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border-color: #00486c;
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
background-color: rgb(51,79,111);
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
color: white;
background-color: #428bca;
}
.navbar-default .navbar-nav>li>a {
color: white;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0px;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0px;
margin: 2px 0px 0px;
font-size: 14px;
list-style: none;
background-color: white;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.14902);
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
border-radius: 4px;
box-shadow: rgba(0, 0, 0, 0.172549) 0px 6px 12px;
}
.nav-list > li {
padding: 20px 15px 15px;
border-left:0px;
.nav-list {
border-bottom: 0px;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
color: white;
cursor: default;
background-color: #428bca;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
color: black;
cursor: default;
background-color: rgb(255, 255, 255);
border: solid black 1px;
}
$(document).ready(function(){
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).stop( true, true ).slideDown("fast");
$(this).toggleClass('open');
},
function() {
$('.dropdown-menu', this).stop( true, true ).slideUp("fast");
$(this).toggleClass('open');
}
);
});
