"animate mobile nav"
Bootstrap 3.0.0 Snippet by evarevirus

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 ----------> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <title>Menu Flexbox</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-hQpvDQiCJaD2H465dQfA717v7lu5qHWtDbWNPvaTJ0ID5xnPUlVXnKzq7b8YUkbN" crossorigin="anonymous"> </head> <body id="top"> <a target="_blank" style="display: block; position: fixed; bottom: 10px; right: 10px; width: 60px;" href="http://www.yoannbraie.fr/board/"><img style="width: 100%;" src="http://www.yoannbraie.fr/img/logoyb.png" alt="logo"/></a> <main> <div class="table"> <div class="table-cell"> <div class="menu"> <div class="menu-item"><i class="fa fa-home"></i><span>Accueil</span></div> <div class="menu-item"><i class="fa fa-globe"></i><span>Social</span></div> <div class="menu-item"><i class="fa fa-user"></i><span>Profil</span></div> <div class="menu-item"><i class="fa fa-envelope"></i><span>Messagerie</span></div> <div class="menu-item"><i class="fa fa-power-off"></i><span>Quitter</span></div> </div> </div> </div> </main> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> </body> </html>
body{ margin: 0; overflow: hidden; } main{ background-color: #ddeaf1; } .table{ display: table; width: 100vw; height: 100vh; } .table-cell{ display: table-cell; vertical-align: middle; text-align: center; } .menu{ background-color: white; width: 30%; margin: auto; display: flex; align-content: flex-start; flex-flow: row wrap; justify-content: space-around; border-radius: 10px; -moz-box-shadow: 0px 0px 5px 0px #c0c0c0; -webkit-box-shadow: 0px 0px 5px 0px #c0c0c0; -o-box-shadow: 0px 0px 5px 0px #c0c0c0; box-shadow: 0px 0px 5px 0px #c0c0c0; filter:progid:DXImageTransform.Microsoft.Shadow(color=#c0c0c0, Direction=NaN, Strength=5); } @media all and (max-width: 900px){ .menu{ width: 80%; } } .menu-item{ font-size: 17px; flex: 1; padding: 25px; transition: all .2s; cursor: pointer; color: #636363; background-color: white; border-radius: 10px; position: relative; } .menu-item > span{ display: block; position: absolute; text-transform: uppercase; font-size: 10px; font-weight: 200; color: white; left: 5px; right: 5px; border-radius: 5px; background-color: #226eab; padding: 5px; opacity: 0; transition: all .2s .1s; transform: translateY(70px); z-index: -1; } .menu-item:hover{ -moz-box-shadow: 0px 0px 5px 0px #c0c0c0; -webkit-box-shadow: 0px 0px 5px 0px #c0c0c0; -o-box-shadow: 0px 0px 5px 0px #c0c0c0; box-shadow: 0px 0px 5px 0px #c0c0c0; filter:progid:DXImageTransform.Microsoft.Shadow(color=#c0c0c0, Direction=NaN, Strength=5); flex: 2; color: #226eab; transform: scale(1.1); z-index: 3; } .menu-item:hover > span{ transform: translateY(35px); opacity: 1; }
function scroller(href){ $('html,body').animate({ scrollTop: ($(href).offset().top)}, 700).promise().done(function(){ console.log('yoann'); }); } $(function(){ })

Related: See More

Argon Design System
BS4 Login, Register FORM + Mobile
Mobile Nav Bar
Glyphicon Animate, Rotation and Flip

Questions / Comments: