"Cool Navbar ever"
Bootstrap 3.3.0 Snippet by birkanalp

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <link href="Content/bootstrap.min.css" rel="stylesheet" /> <link href="Pages/MyStyle.css" rel="stylesheet" /> </head> <body> <header class="col-md-12 container text-center well"> <span style="font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-size:30px;">Birkan Alp YAMAN</span><br /><br /> <span style="font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-size:20px;">Software Developer</span> </header> <div class="col-md-2"> <nav class="navbar navbar-inverse sidebar" role="navigation"> <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Ana Sayfa<span style="font-size:16px;" class="pull-right hidden-xs glyphicon glyphicon-home"></span></a></li> </ul> </div> </nav><br /><br /><br /> <nav class="navbar navbar-inverse sidebar" role="navigation"> <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">Hakkımda<span style="font-size:16px;" class="pull-right hidden-xs glyphicon glyphicon-user"></span></a></li> </ul> </div> </nav><br /><br /><br /> <nav class="navbar navbar-inverse sidebar" role="navigation"> <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">İletişim<span style="font-size:16px;" class="pull-right hidden-xs glyphicon glyphicon-envelope"></span></a></li> </ul> </div> </nav><br /><br /><br /> <nav class="navbar navbar-inverse sidebar"> <div class="container-fluid" id="bs-sidebar-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" id="dropDownList" data-toggle="dropdown"> <!--onclick="document.getElementById('dropDownList').style.height = '200px';"-->Projelerim<span class="caret" style="margin-left:10px;"></span><span style="font-size:16px;" class="pull-right hidden-xs glyphicon glyphicon-cog"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div> </nav> </div> </body> </html>
nav.sidebar .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; } nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{ padding: 0 0px 0 0px; } navbar-inverse .navbar-nav .open .dropdown-menu>li>a { color: #777; } nav.sidebar{ width: 200px; height: 100%; margin-left:-168px; float: left; z-index: 8000; margin-bottom: 0px; } nav.sidebar li { width: 100%; } nav.sidebar:hover{ margin-left: -20px; } div > nav > div > ul{ width:198px; } nav.sidebar, .main{ -webkit-transition: margin 300ms ease-out; -moz-transition: margin 300ms ease-out; -o-transition: margin 300ms ease-out; transition: margin 300ms ease-out; } header:hover > span::before { margin-right: 3px; content: '<'; } header:hover > span::after { margin-left: 3px; content: '>'; }

Related: See More

Vue Material Kit PRO
Cool Navigation Bar
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Bootstrap 4 Navbar with Icon Top

Questions / Comments:

helal olsun

Ка Яа () - 8 years ago - Reply 0