How to make Twitter Bootstrap menu dropdown on hover rather than click
I created a pure on hover dropdown menu based on the latest (v2.0.2) Bootstrap framework that has support for multiple submenus and thought I'd post it for future users:
body { padding-top: 60px; padding-bottom: 40px;}
.sidebar-nav { padding: 9px 0;}
.dropdown-menu .sub-menu { left: 100%; position: absolute; top: 0; visibility: hidden; margin-top: -1px;}
.dropdown-menu li:hover .sub-menu { visibility: visible;}
.dropdown:hover .dropdown-menu { display: block;}
.nav-tabs .dropdown-menu,.nav-pills .dropdown-menu,.navbar .dropdown-menu { margin-top: 0;}
.navbar .sub-menu:before { border-bottom: 7px solid transparent; border-left: none; border-right: 7px solid rgba(0, 0, 0, 0.2); border-top: 7px solid transparent; left: -7px; top: 10px;}
.navbar .sub-menu:after { border-top: 6px solid transparent; border-left: none; border-right: 6px solid #fff; border-bottom: 6px solid transparent; left: 10px; top: 11px; left: -6px;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container-fluid"> <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a href="#" class="brand">Project name</a> <div class="nav-collapse"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li> <a href="#">2-level Dropdown <i class="icon-arrow-right"></i></a> <ul class="dropdown-menu sub-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 class="nav-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="nav-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form action="" class="navbar-search pull-left"> <input type="text" placeholder="Search" class="search-query span2"> </form> <ul class="nav pull-right"> <li><a href="#">Link</a></li> <li class="divider-vertical"></li> <li class="dropdown"> <a class="#" href="#">Menu</a> </li> </ul> </div> <!-- /.nav-collapse --> </div> </div></div>
<hr>
<ul class="nav nav-pills"> <li class="active"><a href="#">Regular link</a></li> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu" id="menu1"> <li> <a href="#">2-level Menu <i class="icon-arrow-right"></i></a> <ul class="dropdown-menu sub-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 class="nav-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </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> </ul> </li> <li class="dropdown"> <a href="#">Menu</a> </li> <li class="dropdown"> <a href="#">Menu</a> </li></ul>
How to make Twitter Bootstrap menu dropdown on hover rather than click
I created a pure on hover dropdown menu based on the latest (v2.0.2) Bootstrap framework that has support for multiple submenus and thought I'd post it for future users:
body { padding-top: 60px; padding-bottom: 40px;}
.sidebar-nav { padding: 9px 0;}
.dropdown-menu .sub-menu { left: 100%; position: absolute; top: 0; visibility: hidden; margin-top: -1px;}
.dropdown-menu li:hover .sub-menu { visibility: visible;}
.dropdown:hover .dropdown-menu { display: block;}
.nav-tabs .dropdown-menu,.nav-pills .dropdown-menu,.navbar .dropdown-menu { margin-top: 0;}
.navbar .sub-menu:before { border-bottom: 7px solid transparent; border-left: none; border-right: 7px solid rgba(0, 0, 0, 0.2); border-top: 7px solid transparent; left: -7px; top: 10px;}
.navbar .sub-menu:after { border-top: 6px solid transparent; border-left: none; border-right: 6px solid #fff; border-bottom: 6px solid transparent; left: 10px; top: 11px; left: -6px;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container-fluid"> <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a href="#" class="brand">Project name</a> <div class="nav-collapse"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li> <a href="#">2-level Dropdown <i class="icon-arrow-right"></i></a> <ul class="dropdown-menu sub-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 class="nav-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="nav-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form action="" class="navbar-search pull-left"> <input type="text" placeholder="Search" class="search-query span2"> </form> <ul class="nav pull-right"> <li><a href="#">Link</a></li> <li class="divider-vertical"></li> <li class="dropdown"> <a class="#" href="#">Menu</a> </li> </ul> </div> <!-- /.nav-collapse --> </div> </div></div>
<hr>
<ul class="nav nav-pills"> <li class="active"><a href="#">Regular link</a></li> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu" id="menu1"> <li> <a href="#">2-level Menu <i class="icon-arrow-right"></i></a> <ul class="dropdown-menu sub-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 class="nav-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </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> </ul> </li> <li class="dropdown"> <a href="#">Menu</a> </li> <li class="dropdown"> <a href="#">Menu</a> </li></ul>
How to make hover effect instead of click in bootstrap 4 dropdown menu?
You could add a mouse over event using jquery and apply the same styles and properties that the click event adds..
$( ".dropdown-menu" ).css('margin-top',0);$( ".dropdown" ) .mouseover(function() { $( this ).addClass('show').attr('aria-expanded',"true"); $( this ).find('.dropdown-menu').addClass('show'); }) .mouseout(function() { $( this ).removeClass('show').attr('aria-expanded',"false"); $( this ).find('.dropdown-menu').removeClass('show'); });
<head> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"></head>
<body>
<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active uppercase" href="#">Home</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle uppercase outline" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Pages</a> <div class="dropdown-menu"> <a class="dropdown-item uppercase aboutUs" href="#">About us</a> <a class="dropdown-item uppercase" href="#">Company</a> <a class="dropdown-item uppercase" href="#">Our process</a> <a class="dropdown-item uppercase" href="#">Services</a> <a class="dropdown-item uppercase" href="#">Contact us</a> <a class="dropdown-item uppercase FAQ" href="#">F.A.Q.</a> </div> </li> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script></body></html>
Disable hover and allow click on submenu in twitter bootstrap
Use jquery:
(function($){ $(document).ready(function(){ $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) { event.preventDefault(); event.stopPropagation(); $(this).parent().siblings().removeClass('open'); $(this).parent().toggleClass('open'); }); });})(jQuery);
.marginBottom-0 { margin-bottom: 0;}
.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>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;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" 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> </div>
<div class="collapse navbar-collapse" id="navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Active Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Dropdown Link 1</a></li> <li><a href="#">Dropdown Link 2</a></li> <li><a href="#">Dropdown Link 3</a></li> <li class="divider"></li> <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 4</a> <ul class="dropdown-menu"> <li><a href="#">Dropdown Submenu Link 4.1</a></li> <li><a href="#">Dropdown Submenu Link 4.2</a></li> <li><a href="#">Dropdown Submenu Link 4.3</a></li> <li><a href="#">Dropdown Submenu Link 4.4</a></li> </ul> </li> <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 5</a> <ul class="dropdown-menu"> <li><a href="#">Dropdown Submenu Link 5.1</a></li> <li><a href="#">Dropdown Submenu Link 5.2</a></li> <li><a href="#">Dropdown Submenu Link 5.3</a></li> <li class="divider"></li> <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4</a> <ul class="dropdown-menu"> <li><a href="#">Dropdown Submenu Link 5.4.1</a></li> <li><a href="#">Dropdown Submenu Link 5.4.2</a></li> <li class="divider"></li> <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.3</a> <ul class="dropdown-menu"> <li><a href="#">Dropdown Submenu Link 5.4.3.1</a></li> <li><a href="#">Dropdown Submenu Link 5.4.3.2</a></li> <li><a href="#">Dropdown Submenu Link 5.4.3.3</a></li> <li><a href="#">Dropdown Submenu Link 5.4.3.4</a></li> </ul> </li> <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.4</a> <ul class="dropdown-menu"> <li><a href="#">Dropdown Submenu Link 5.4.4.1</a></li> <li><a href="#">Dropdown Submenu Link 5.4.4.2</a></li> <li><a href="#">Dropdown Submenu Link 5.4.4.3</a></li> <li><a href="#">Dropdown Submenu Link 5.4.4.4</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Dropdown Link 1</a></li> <li><a href="#">Dropdown Link 2</a></li> <li><a href="#">Dropdown Link 3</a></li> <li class="divider"></li> <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 4</a> <ul class="dropdown-menu"> <li><a href="#">Dropdown Submenu Link 4.1</a></li> <li><a href="#">Dropdown Submenu Link 4.2</a></li> <li><a href="#">Dropdown Submenu Link 4.3</a></li> <li><a href="#">Dropdown Submenu Link 4.4</a></li> </ul> </li> <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 5</a> <ul class="dropdown-menu"> <li><a href="#">Dropdown Submenu Link 5.1</a></li> <li><a href="#">Dropdown Submenu Link 5.2</a></li> <li><a href="#">Dropdown Submenu Link 5.3</a></li> <li class="divider"></li> <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4</a> <ul class="dropdown-menu"> <li><a href="#">Dropdown Submenu Link 5.4.1</a></li> <li><a href="#">Dropdown Submenu Link 5.4.2</a></li> <li class="divider"></li> <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.3</a> <ul class="dropdown-menu"> <li><a href="#">Dropdown Submenu Link 5.4.3.1</a></li> <li><a href="#">Dropdown Submenu Link 5.4.3.2</a></li> <li><a href="#">Dropdown Submenu Link 5.4.3.3</a></li> <li><a href="#">Dropdown Submenu Link 5.4.3.4</a></li> </ul> </li> <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.4</a> <ul class="dropdown-menu"> <li><a href="#">Dropdown Submenu Link 5.4.4.1</a></li> <li><a href="#">Dropdown Submenu Link 5.4.4.2</a></li> <li><a href="#">Dropdown Submenu Link 5.4.4.3</a></li> <li><a href="#">Dropdown Submenu Link 5.4.4.4</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> <!-- /.navbar-collapse --></nav>
Related Topics
Vuetify: Fit V-Image Within the Screen Size
How to Easily Horizontally Center a ≪Div≫ Using Css
How to Force a Div Block to Extend to the Bottom of a Page Even If It Has No Content
Click Through Div to Underlying Elements
Custom CSS Scrollbar For Firefox
Border-Radius in Percentage (%) and Pixels (Px) or Em
Css Selector For "Foo That Contains Bar"
How to Style Child Components from Parent Component'S CSS File
Fullcalendar: Change the Color for Specific Days
How to Avoid Extra Blank Page At End While Printing
How to Place Two Divs Next to Each Other
How to Style the Html5 Form Validation Error Messages With Css
Using Percentage Values With Background-Position on a Linear-Gradient
What's So Bad About In-Line Css