Bootstrap Navbar Dropdown on Hover if not mobile - javascript

I am trying to make bootstrap dropdown list from navbar to appear on hover but stop the hover effect on collapsed (mobile). This is what I have in mind, but when I add the if statement the whole effect doesnt work:
HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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 vaos" href="../index.html">VAOS</a>
</div>
<div id="navbar" class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active"><a class="trans" href="../index.html">Home</a></li>
<li class="dropdown">
What is VAOS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>VAOS & Other Options</li>
<li>Am I a Candidate</li>
<li>Find a Surgeon</li>
<li><div class="ArrowUp1"></div></li>
</ul>
</li>
<li>Testimonials</li>
<li class="dropdown">
Resources <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Clinical Support</li>
<li>Procedural Videos</li>
<li>Other Links & Resources</li>
<li><div class="ArrowUp2"></div></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
CSS:
#media (min-width: 768px) {
.navbar-nav .open ul {
display: none;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #555;
background: none;
}
.navbar-default .navbar-nav > li:hover {
background: #e7e7e7;
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
color: #969696;
background: none;
}
.navbar-nav > li:hover {
background: transparent !important;
}
.navbar-nav .hovernav:hover > .dropdown-menu {
display: block;
}
}
JavaScript:
'use strict';
$('ul.nav li.dropdown').hover(function() {
if(window.width > 767) {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
}
});


You can do it without any scripting language.
Just try this.
#media screen and (min-width: 768px) {
.dropdown:hover>.dropdown-menu {
display: block;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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 vaos" href="../index.html">VAOS</a>
</div>
<div id="navbar" class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active"><a class="trans" href="../index.html">Home</a>
</li>
<li class="dropdown"> What is VAOS <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>VAOS & Other Options
</li>
<li>Am I a Candidate
</li>
<li>Find a Surgeon
</li>
<li>
<div class="ArrowUp1"></div>
</li>
</ul>
</li>
<li>Testimonials
</li>
<li class="dropdown"> Resources <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Clinical Support
</li>
<li>Procedural Videos
</li>
<li>Other Links & Resources
</li>
<li>
<div class="ArrowUp2"></div>
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
It is smooth and handy. +1 if it helps.


Use the css hover for the item with class dropdown and set the dropdown-menu class to diplay block
#media screen and (min-width: 768px) {
li.dropdown:hover .dropdown-menu{
display:block;
}
}

Related

Bootstrap 3 - Hover menu on desktop but open on click when minimized (mobile nav)

Using Bootstrap 3.
I'm trying to keep my site's navigation working using hover on the desktop but when using mobile navigation I want the navigation to open on click. I can't seem to get my options to work with what I've got. I don't have a great grasp on CSS so I may be screwing this up with something small... or large...
Right now the site works fine on the desktop version with the navigation open on click then hover opens the remaining sub links. The problem is when I reduce the page width to the mobile version the navigation does not work as I want. What I am getting is the navigation opening up on hover but I want each link to open on click only.
I've created a bootply as an example: http://www.bootply.com/tjL1FPgPT4
HTML:
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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">SiteName</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="menu-item dropdown">
LinkHere<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-header">Names</li>
<li class="menu-item dropdown dropdown-submenu">
Level1
<ul class="dropdown-menu">
<li class="menu-item ">
</li><li class="menu-item dropdown dropdown-submenu">
Level2.1
<ul class="dropdown-menu">
<li>
Level3-Link1
Level3-Link2
</li>
</ul>
</li>
<li class="menu-item ">
</li><li class="menu-item dropdown dropdown-submenu">
Level2.2
<ul class="dropdown-menu">
<li>
Level3.1
Level3.2
</li>
</ul>
</li>
</ul>
</li><li class="menu-item dropdown dropdown-submenu">
OtherLink
<ul class="dropdown-menu">
<li class="menu-item ">
Link1
Link2
</li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Email</li>
<li class="menu-item ">
Yahoo
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Phone</li>
<li class="menu-item ">
CallNow
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="menu-item dropdown">
Drop Down<b class="caret"></b>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Level 1
<ul class="dropdown-menu">
<li class="menu-item ">
Link 1
</li>
<li class="menu-item dropdown dropdown-submenu">
Level 2
<ul class="dropdown-menu">
<li>
Link 3
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="menu-item dropdown">
Drop Down<b class="caret"></b>
<ul class="dropdown-menu">
<li class="menu-item dropdown dropdown-submenu">
Level 1
<ul class="dropdown-menu">
<li class="menu-item ">
Link 1
</li>
<li class="menu-item dropdown dropdown-submenu">
Level 2
<ul class="dropdown-menu">
<li>
Link 3
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!--/.nav-collapse -->
and CSS:
/*custom for submenu here*/
.dropdown-submenu {
position:relative;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display:block;
}
.dropdown-submenu>a:after {
display:block;
content:" ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
border-left-color:#cccccc;
margin-top:5px;
margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
border-left-color:#ffffff;
}
.dropdown-submenu.pull-left {
float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left:-100%;
margin-left:10px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
}
#media only screen and (max-width:767px){
.dropdown-submenu{
display: block;
position: static;
background-color:transparent;
border:0 none;
box-shadow:none;
margin-top:0;
width:100%;
}
.navbar-nav .dropdown-menu > li > a,
.navbar-nav .dropdown-menu .dropdown-header {
padding:5px 15px 5px 25px;
}
.navbar-nav .dropdown-menu > li > a{
line-height:20px;
}
.navbar-default .navbar-nav .dropdown-menu > li > a{
color:#777;
}
.navbar-nav .dropdown-menu .dropdown-submenu > a{
display:block;
margin-top: 0;
}
}

Change your css to this
#media only screen and (min-width:768px){
.dropdown-submenu:hover>.dropdown-menu {
display:block;
}
}
also add this script to page.
$(document).ready(function(){
$('.dropdown-submenu a').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
Here is updated bootply. Hope this helps you.

Bootstrap not closing menu

I maked one html site using bootstrap. That sites have one menu but i think problem is my javascript i maked it that auto open when mouseover it menu but not closed automatic.
(function($){
$(document).ready(function(){
$('ul.nav [data-toggle=dropdown]').on('mouseover', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
.navbar-brand {display:none;}
.fullwidth {width:100%; background:#1e537f;}
.navbar {
position: relative;
min-height: 40px;
margin-bottom: 0;
border: 1px solid transparent;
width:100%;
text-align:center;
}
.navbar-header {}
.navbar-inverse .navbar-nav>li>a {color:#FFFFFF;}
.navbar-inverse
{background:#1e537f; text-align:center;}
.navbar-nav>li {text-align:center;}
.navbar-inverse .navbar-brand {color:#FFFFFF;}
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {background:#143957;}
.navbar-inverse .navbar-toggle {background:#143957; border:none;}
.navbar-nav>a:hover {background:#1b4b72;}
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover {background:#1b4b72;}
.navbar ul{text-align:center; padding:0 0 0 30%; }
.navbar ul li {text-align:left;}
.navbar ul li ul {padding:0;}
.navbar-nav>li>.dropdown-menu {background:#1b4b72; }
.navbar-inverse .navbar-nav>li>a:hover {background:#1b4b72;}
.dropdown-menu {border:none; }
.dropdown-menu>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #FFFFFF;
white-space: nowrap;
}
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {background:#143957;
color:#FFFFFF; }
.dropdown-menu>li>a:hover {
display: block;
background:#143957;
color:#FFFFFF;
border-radius:4px;
}
.dropdown-submenu>.dropdown-menu {background:#1b4b72;}
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:0;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#555;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
.carousel-indicators li {width:40px; height:40px;border-radius:50%; background:#FFFFFF;}
.carousel-indicators .active {width:40px; height:40px;border-radius:50%; background:#1e537f; border:none;}
.carousel-caption {margin-bottom:80px;}
.carousel-caption h2{ font-size:46px;}
.carousel-control.right, .carousel-control.left {background:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<nav class="navbar navbar-inverse navbar-static-top marginBottom-0" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="#" target="_blank">Menu</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li> Anasayfa </li>
<li class="dropdown"> Kurumsal <b class="caret"></b>
<ul class="dropdown-menu">
<li>Hakkımızda </li>
<li>Çözüm Ortaklarımız </li>
<li>Sosyal Sorumluluk </li>
<li>Basın Odası </li>
</ul></li>
<li class="dropdown">Hizmetler <b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">Araç Sigortaları
<ul class="dropdown-menu">
<li>Tam Kasko Paket Poliçesi </li>
<li>Trafik Sigortası </li>
<li>Yeşil Kart Sigortası </li>
</ul></li>
<li class="dropdown dropdown-submenu">İşyeri ve Konut Sigortaları
<ul class="dropdown-menu">
<li>İşyeri Paket Sigortaları </li>
<li>Konut Paket Sigortaları </li>
<li>Dask Sigortası </li>
</ul></li>
<li class="dropdown dropdown-submenu">Sorumluluk Sigortaları
<ul class="dropdown-menu">
<li>Üçüncü Şahıs Mali Sorumluluk </li>
<li>Asansör Sorumluluk</li>
<li>İşveren Sorumluluk</li>
<li>Mesleki Sorumluluk</li>
<li>Zorunlu Hekim Sigortası</li>
<li>Ferdi Kaza Sigortası</li>
<li>Taşınan Para Sigortası</li>
<li>Emniyeti Suistimal Sigortası</li>
<li>Ürün Mali Sorumluluk Sigortası</li>
<li>Seyahat Sigortası</li>
</ul></li>
<li class="dropdown dropdown-submenu">Nakliyat Sigortaları
<ul class="dropdown-menu">
<li>Mal Nakli Sigortaları </li>
<li>Nakliyat Sorumluluk Sigortaları</li>
<li>Deniz Araçları Sigortası </li>
</ul></li>
<li class="dropdown dropdown-submenu">Mühendislik Sigortaları
<ul class="dropdown-menu">
<li>Elektronik Cihaz Sigortası </li>
<li>Makina Kırılması Sigortası</li>
<li>İnşaat Sigortası</li>
</ul></li>
<li class="dropdown dropdown-submenu">Sağlık Sigortaları
<ul class="dropdown-menu">
<li>Sağlık Sigortası </li>
<li>Tamamlayıcı Sağlık Sigortası</li>
</ul></li>
</ul>
</li>
<li> Servisler </li>
<li> Kariyer </li>
<li> İletişim </li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
You can test my code it is on up.

You will want to create a mouseenter function for the dropdown toggle and then a mouseleave function for the dropdown and dropdown-submenu. If im understanding your problem correctly. So your code should look something like this I think.
$('ul.nav [data-toggle=dropdown').on({
mouseenter: function(event) {
if (!$(this).hasClass("open")) {
$(this).parent().toggleClass('open');
}
}
});
$('ul.nav .dropdown, .dropdown-submenu').on({
mouseleave: function(event) {
if ($(this).hasClass("open")) {
$(this).toggleClass('open');
}
}
});
Here is a link to a fiddle with it working Fiddle.
Just to let you know you may run into some problems with your menu being too long because when the mouse leaves the dropdown menu and submenus the menu will close so they will not be able to scroll down to see all of the links but if I understand your problem correctly I think this should solve your problem.
P.S I left the event in there in case you need an event to be executed but if not you can take it out.

Make Bootstrap navbar-nav slide horizontally when viewport width is greater than 768px

I've navbar with 9 elements inside, when viewport width is less than 768px everything is ok, but when viewport is larger than 768px it looks like this:
Image that show navbar http://imageshack.com/a/img537/967/vOZFCK.jpg
My goal is to make navbar-nav scrollable horizontally, and the sixth, the seventh and eighth element must appear in line with the other and and everything must be scrollable.
The effect is similar to that visible here, so I tried to implement Smooth Touch Scroll Jquery plugin, adding <div id="TouchScroller"></div> before navbar-nav div,but nothing happens.
Please help me!
Here Navbar Html code
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-inner">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-lezard">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">
<a class="page-scroll" href="#page-top">
<h1>Lezard <span class="orange">Climb</span></h1>
</a>
</div>
</div>
<div class="collapse navbar-collapse" id="navbar-lezard">
<div id="TouchScroller">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about"><span class="yellow">Chi siamo</span></a>
</li>
<li>
<a class="page-scroll" href="#dove"><span class="blu">Dove siamo</span></a>
</li>
<li>
<a class="page-scroll" href="#contatti"><span class="green">Contattaci</span></a>
</li>
<li>
<a class="page-scroll" href="#attivita"><span class="orange">Attività</span></a>
</li>
<li>
<a class="page-scroll" href="#orari"><span class="violet">Orari</span></a>
</li>
<li>
<a class="page-scroll" href="#corsi"><span class="light-blu">Corsi di arrampicata</span></a>
</li>
<li>
<a class="page-scroll" href="#abbonamenti"><span class="red">Abbonamenti</span></a>
</li>
<li>
<a class="page-scroll" href="#staff"><span class="brown">Staff Lezard</span></a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</div>
</nav>
CSS
.navbar{
border-bottom: none !important;
font-family: 'Amatic SC', cursive,helvetica,sans-serif;
background-color: #000;
padding: 0.5em;
font-size: 2em;
}
#media screen and (min-width: 480px ) {
.form-panel-width{
width: 100%;
}
}
.navbar-brand{
margin-top: -1.6em;
margin-left: -0.7em;
}
.navbar-toggle{
margin-top: 0.4em;
margin-right: 0;
background-color: #ff9900;
border-color: transparent !important;
}
.navbar-toggle:active{
background-color: #ff9900;
border-color: transparent;
}
.icon-bar {
background-color: #000 !important;
}
.navbar-nav > li{
text-align: center;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
background-color: transparent;
}
/*Fix Navbar element when height is too low */
#media screen and (max-height: 380px) and (max-width: 767px){
.navbar-nav > li{
margin-bottom: -0.4em;
}
}
#media screen and (min-width: 768px) and (min-height: 1024px){
.navbar-nav{
margin-top: 1.5em;
}
.navbar-brand{
margin-left: 0;
}
.navbar-brand h1{
font-size: 3em;
}
.navbar-nav a{
font-size: 1.3em;
}
}

how can i reduce the margin left and top in bootstrap

i need help with my code
using bootstrap to design n new in it. did the top nav, doing the side bar. but the left bar not lapping to the left completelty and the gap between the top and the side is too much. how can i reduce it
<!--BEGINING NAV=========================-->
<nav class="navbar navbar-default">
<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-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="#"><img src="../img/logo.png" alt="Logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li>General Requirment</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control inputcurve" placeholder="Search">
</div>
<button type="submit" class="btn btn-default redbut"><span class="glyphicon glyphicon-search red"></button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> 07063859559</li>
<li><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> info#myactiveschool.com</li>
<li class="dropdown">
Chike Okoli Vitalis <span class="caret"></span>
<ul class="dropdown-menu" role="menu nav1">
<li><i class="glyphicon glyphicon-picture"></i> Profile Picture</li>
<li><i class="glyphicon glyphicon-edit"></i> Account Setting</li>
<li><li><a href="#"><i class="glyphicon glyphicon-log-out"></i> Logout</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!--END NAV=========================-->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked span3">
<li class="active"><i class="glyphicon glyphicon-picture"></i>Home</li>
<li><i class="glyphicon glyphicon-edit"></i>About us</li>
</ul>
</div>
</div>
<!--START SIDE NAV===================================================================================================================================-->
here is my css
.side-nav {
position: fixed;
top: 51px;
left: 225px;
width: 225px;
margin-left: -225px;
border: none;
border-radius: 0;
overflow-y: auto;
background-color: #222;
bottom: 0;
overflow-x: hidden;
padding-bottom: 40px;
}
.side-nav>li>a {
width: 225px;
}
.side-nav li a:hover,
.side-nav li a:focus {
outline: none;
background-color: #000 !important;
}
}
.side-nav>li>ul {
padding: 0;
}
.side-nav>li>ul>li>a {
display: block;
padding: 10px 15px 10px 38px;
text-decoration: none;
color: #999;
}
.side-nav>li>ul>li>a:hover {
color: #fff;
}
.side-nav{right: 0;left: auto;}

Bootstrap Horizontal multilevel Menu

Is there any way to create a horizontal multilevel menu structure using bootstrap
I haven't seen any multilevel menus with Horizontal orientation .
If not i have to use some external css and styles to generate this kind of menu .
A sample structure of the menu structure is similar to this

<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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 navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="root">
Multi Level <b class="caret"></b>
<ul class="dropdown-menu">
<li>Level 1</li>
<li class="dropdown-submenu"> <a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Level 2</a>
</li>
<li class="dropdown-submenu"> More..
<ul class="dropdown-menu">
<li>Level 3
</li>
<li>Level 3
</li>
<li class="dropdown-submenu"> More..
<ul class="dropdown-menu">
<li>Level 4
</li>
<li>Level 4
</li>
<li class="dropdown-submenu"> More..
<ul class="dropdown-menu">
<li>Level 5
</li>
<li>Level 5
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Level 2
</li>
<li>Level 2
</li>
</ul>
</li>
<li>Level 1</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
CSS
.dropdown-submenu{
position:relative;
}
.dropdown-submenu > .dropdown-menu
{
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover > .dropdown-menu{
display:block;
}
.dropdown-submenu > a:after{
display:block;
content:" ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
border-left-color:#cccccc;
margin-top:5px;
margin-right:-10px;
}
.dropdown-submenu:hover > a:after{
border-left-color:#ffffff;
}
.dropdown-submenu .pull-left{
float:none;
}
.dropdown-submenu.pull-left > .dropdown-menu{
left:-100%;
margin-left:10px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
}
.root:hover .dropdown-menu{
display: block;
}
Some working Jsfiddle examples
Example 1
Example 2
Example 3
Example 4

Categories

Resources