Toggle navbar with Slide Down Animation
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<div class="container-fluid">
<!-- Second navbar for categories -->
<nav class="navbar navbar-default">
<div class="container">
<!-- 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="#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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li>
<a class="btn btn-default btn-outline btn-circle collapsed" data-toggle="collapse" href="#nav-collapse1" aria-expanded="false" aria-controls="nav-collapse1">Categories</a>
</li>
</ul>
<ul class="collapse nav navbar-nav nav-collapse" id="nav-collapse1">
<li><a href="#">Web design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Print</a></li>
<li><a href="#">Motion</a></li>
<li><a href="#">Mobile apps</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav><!-- /.navbar -->
<!-- Second navbar for sign in -->
<nav class="navbar navbar-default">
<div class="container">
<!-- 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="#navbar-collapse-2">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-2">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li>
<a class="btn btn-default btn-outline btn-circle collapsed" data-toggle="collapse" href="#nav-collapse2" aria-expanded="false" aria-controls="nav-collapse2">Sign in</a>
</li>
</ul>
<div class="collapse nav navbar-nav nav-collapse slide-down" id="nav-collapse2">
<form class="navbar-form navbar-right form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="Email">Email</label>
<input type="email" class="form-control" id="Email" placeholder="Email" autofocus required />
</div>
<div class="form-group">
<label class="sr-only" for="Password">Password</label>
<input type="password" class="form-control" id="Password" placeholder="Password" required />
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav><!-- /.navbar -->
<!-- Second navbar for search -->
<nav class="navbar navbar-inverse">
<div class="container">
<!-- 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="#navbar-collapse-3">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-3">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li>
<a class="btn btn-default btn-outline btn-circle collapsed" data-toggle="collapse" href="#nav-collapse3" aria-expanded="false" aria-controls="nav-collapse3">Search</a>
</li>
</ul>
<div class="collapse nav navbar-nav nav-collapse slide-down" id="nav-collapse3">
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" />
</div>
<button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</form>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav><!-- /.navbar -->
<!-- Second navbar for profile settings -->
<nav class="navbar navbar-inverse">
<div class="container">
<!-- 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="#navbar-collapse-4">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-4">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li>
<a class="btn btn-default btn-outline btn-circle collapsed" data-toggle="collapse" href="#nav-collapse4" aria-expanded="false" aria-controls="nav-collapse4">Profile <i class=""></i> </a>
</li>
</ul>
<ul class="collapse nav navbar-nav nav-collapse slide-down" role="search" id="nav-collapse4">
<li><a href="#">Support</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><img class="img-circle" src="https://pbs.twimg.com/profile_images/588909533428322304/Gxuyp46N.jpg" alt="maridlcrmn" width="20" /> Maridlcrmn <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">My profile</a></li>
<li><a href="#">Favorited</a></li>
<li><a href="#">Settings</a></li>
<li class="divider"></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav><!-- /.navbar -->
</div><!-- /.container-fluid -->
<div class="[ container ]">
<div class="[ row ]">
<div class="[ col-xs-12 col-md-offset-1 col-md-10 text-center ]">
<p>I created this because I loved the design done by <a href="http://bootsnipp.com/maridlcrmn" target="_blank">maridlcrmn</a> on her <a href="http://bootsnipp.com/snippets/ZkpRl" target="_blank">Toggle navbar</a> but wanted a fancier slide down naviation when you click on the toggle button. However my code does come with a limitation, you will not be able to use dropdowns within your navigation if using this method because <code>overflow</code> is set to <strong>hidden</strong>. You can see this in action by trying to use the very last navigation on this snippet.</p>
</div>
</div>
</div>
/*
Code snippet by maridlcrmn for Bootsnipp.com
Follow me on Twitter @maridlcrmn
*/
.navbar-brand { position: relative; z-index: 2; }
.navbar-nav.navbar-right .btn { position: relative; z-index: 2; padding: 4px 20px; margin: 10px auto; transition: transform 0.3s; }
.navbar .navbar-collapse { position: relative; overflow: hidden !important; }
.navbar .navbar-collapse .navbar-right > li:last-child { padding-left: 22px; }
.navbar .nav-collapse { position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; margin: 0; padding-right: 120px; padding-left: 80px; width: 100%; }
.navbar.navbar-default .nav-collapse { background-color: #f8f8f8; }
.navbar.navbar-inverse .nav-collapse { background-color: #222; }
.navbar .nav-collapse .navbar-form { border-width: 0; box-shadow: none; }
.nav-collapse>li { float: right; }
.btn.btn-circle { border-radius: 50px; }
.btn.btn-outline { background-color: transparent; }
.navbar-nav.navbar-right .btn:not(.collapsed) {
background-color: rgb(111, 84, 153);
border-color: rgb(111, 84, 153);
color: rgb(255, 255, 255);
}
.navbar.navbar-default .nav-collapse,
.navbar.navbar-inverse .nav-collapse {
height: auto !important;
transition: transform 0.3s;
transform: translate(0px,-50px);
}
.navbar.navbar-default .nav-collapse.in,
.navbar.navbar-inverse .nav-collapse.in {
transform: translate(0px,0px);
}
@media screen and (max-width: 767px) {
.navbar .navbar-collapse .navbar-right > li:last-child { padding-left: 15px; padding-right: 15px; }
.navbar .nav-collapse { margin: 7.5px auto; padding: 0; }
.navbar .nav-collapse .navbar-form { margin: 0; }
.nav-collapse>li { float: none; }
.navbar.navbar-default .nav-collapse,
.navbar.navbar-inverse .nav-collapse {
transform: translate(-100%,0px);
}
.navbar.navbar-default .nav-collapse.in,
.navbar.navbar-inverse .nav-collapse.in {
transform: translate(0px,0px);
}
.navbar.navbar-default .nav-collapse.slide-down,
.navbar.navbar-inverse .nav-collapse.slide-down {
transform: translate(0px,-100%);
}
.navbar.navbar-default .nav-collapse.in.slide-down,
.navbar.navbar-inverse .nav-collapse.in.slide-down {
transform: translate(0px,0px);
}
}
Very nice work!!! How can i make it work on the left side instead of the right? thanks a lot,How can I make it to the left inside of the right?? Its amazing thanks alot,how to download??,pls tell how to fix the dotted border which comes after tapping any element…sorry i am new,Add following style element:focus{outline: none},Sorry, can’t see any difference to the original. No effect, no animation. (latest Safari/webkit),Very nice,A very good snippet indeed but the “Categories button” in the first example seems to get hidden in the submenu once I convert the nav bar into “navbar-fixed-top”…,Hey!,Thanks for a nice snippet!,I’ve added register button to sign-in bar. But have issues with alignment now.,- Forms are stretching incorrectly in full browser windowhttp://oi61.tinypic.com/ieg…- Forms and buttons overlapping in mobile browser windowhttp://oi60.tinypic.com/27w…- Buttons differs in size in mobile browser window (even with same text on them)- Buttons allowed to be clicked simultaneously :),I’m was pretty much sure that most of the issues caused by 767px value, but increasing it didn’t help to expand full menu.,Thanks,Can you tell me how to remove the over flow thing please because i really want the scroll thing. Sorry i’m new to this ! Thanks :),What scrolling thing? The overflow is only there to prevent the animation for looking weird on navbars that are not at the top of the window/browser.,i have completely removed the overflow but it’s still not working :-(,before:,.navbar .navbar-collapse { position: relative; overflow: hidden !important; },after:,.navbar .navbar-collapse { position: relative; },still doesn’t work :/,btw awsome work man i really love them and want to use them,Fixed it now, thanks!,I forgot to add these:, <script src=”http://code.jquery.com/jque…”></script>, <script src=”http://maxcdn.bootstrapcdn….”></script>,I am adding two toggle buttons instead of one (Login & Search). How can i toggle between two buttons. (Like if i click on login and then click on search, the login button should get toggled itself.*I am bit new to coding, so need you help.and i would like to say that it’s a great navbar by you.,something like this: http://bootsnipp.com/snippe…,Absolutely!! But is it possible if i can toggle-off one button when i click on other.,perfect,I did something similar to this,welll the dropdown will not work after this,I know. I posted an explanation as to why within the snippet,Why is there a need for overflow hidden on .navbar-collapse? This appears to work fine for me with it removed due to the navbar being at the top of the page so the toggled nav is hidden anyway without the need for overflow hidden.,Yes, if your navbar is at the top of the page the overflow could be removed. but if it isn’t. the effect will look weird if the overflow isn’t there.,Amazing,Beautiful effect, I love it. Thank you my friend. :),The author is mouse0270
Loading...
