I'm beginner in bootstrap, i want to create submenu like this image that's fire with click event.
And another point:
submenu only closed with click event (in another menu or white space in website)
Try this:
DEMO
CSS:
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;
}
HTML:
<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>
Project name
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
2-level Dropdown <i class="icon-arrow-right"></i>
<ul class="dropdown-menu sub-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</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>Link</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">Regular link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu" id="menu1">
<li>
2-level Menu <i class="icon-arrow-right"></i>
<ul class="dropdown-menu sub-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="dropdown">
Menu
</li>
<li class="dropdown">
Menu
</li>
</ul>
Related
I'm trying to make the sub-menu to show from the top instead of starting from where it is suppose to as shown in the picture. How can I go about this?
I don't know if this would require Javascript. Please feel free to edit the CSS or add Javascript if needed.
JSFiddle Demo: https://jsfiddle.net/h91kg3s5/
HTML
<div id="main-nav" class="justify-content-end">
<ul id="menu-main-menu" class="navbar-nav">
<li class="menu-item current-menu-item current_page_item menu-item-home active nav-item">Main Menu 1
</li>
<li class="menu-item menu-item-has-children dropdown nav-item">Main Menu 2
<ul class="dropdown-menu" role="menu">
<li class="menu-item menu-item-has-children dropdown nav-item">Menu 1
<ul class="dropdown-menu" role="menu">
<li class="menu-item nav-item">Sub Menu 1</li>
<li class="menu-item nav-item">Sub Menu 2</li>
<li class="menu-item nav-item">Sub Menu 3</li>
<li class="menu-item nav-item">Sub Menu 4</li>
<li class="menu-item nav-item">Sub Menu 5</li>
<li class="menu-item nav-item">Sub Menu 6</li>
</ul>
</li>
<li class="menu-item menu-item-has-children dropdown nav-item">Menu 2
<ul class="dropdown-menu" role="menu">
<li class="menu-item nav-item">Sub Menu 11</li>
<li class="menu-item nav-item">Sub Menu 12</li>
<li class="menu-item nav-item">Sub Menu 13</li>
<li class="menu-item nav-item">Sub Menu 14</li>
<li class="menu-item nav-item">Sub Menu 15</li>
<li class="menu-item nav-item">Sub Menu 16</li>
<li class="menu-item nav-item">Sub Menu 17</li>
</ul>
</li>
<li class="menu-item nav-item">Menu 3
</li>
</ul>
</li>
<li class="menu-item nav-item">Main Menu 3</li>
<li class="menu-item nav-item">Main Menu 4</li>
</ul>
</div>
CSS:
.navbar-nav {
-ms-flex-direction: row;
flex-direction: row;
}
.navbar-nav .dropdown-menu {
position: absolute;
}
.navbar-nav > li {
margin: 0 15px;
}
.dropdown-menu .dropdown-toggle::after {
border-bottom: 0.3em solid transparent;
border-left: 0.3em solid;
border-top: 0.3em solid transparent;
}
.dropdown-menu.show {
border: 1px solid #999;
background-color: #ffffff;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children {
position: relative;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.11);
background-color: #ffffff;
border: 1px solid #999;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children:hover>.dropdown-menu {
display: block;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children>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: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children:hover>a:after {
border-left-color: #fff;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children.pull-left {
float: none;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children.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;
}
Just remove or unset this line:
.dropdown.menu-item-has-children .dropdown.menu-item-has-children {
position: unset;
}
JSFiddle
If you remove relative property from parent -> .dropdown.menu-item-has-children .dropdown.menu-item-has-children it stick to a parent with relative property, so your ul -> dropdown-menu show already has it!
Here the jsfiddle. Questions:
I have search box in my dropdown menu and I also have multiple sub-menu. But the search box only filter on the first dropdown, the sub-menu can't work. So, how to make the search box can filter the sub-menu and show their parent like this picture?
How to make my dropdown menu have scroll bar? I have add overflow: auto in CSS, but my dropdown submenu become invisible like this picture.
How to make the dropdown submenu always on top? Same the top like its parents.
Thank you very much. I'm using bootstrap 3.3.5.
HTML file
<nav class="navbar navbar-default navbar-fixed-top">
<!-- 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" aria-expanded="false">
<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="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>First<span class="sr-only">(current)</span>
</li>
<li>Second
</li>
<li class="dropdown"> Dropdown<span class="caret"></span>
<ul id="main-menu" class="dropdown-menu">
<li class=" row search-box">
<div class="col-sm-10">
<input class="form-control search" id="search-criteria" type="text" placeholder="Search" />
</div>
</li>
<li><a class="menu" href="#">Contact Us</a>
</li>
<li><a class="menu" href="#">Portfolio</a>
</li>
<li class="dropdown-submenu"> First Level
<ul class="dropdown-menu">
<li><a class="menu" href="#">Second Level</a>
</li>
<li class="dropdown-submenu"> Second Dropdown
<ul class="dropdown-menu">
<li class="dropdown-submenu"> Third Dropdown
<ul class="dropdown-menu">
<li><a class="menu" href="#">Action</a>
</li>
<li><a class="menu" href="#">Another action</a>
</li>
<li><a class="menu" href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a class="menu" href="#">Separated link</a>
</li>
<li class="divider"></li>
<li><a class="menu" href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu"> Another Dropdown
<ul class="dropdown-menu">
<li><a class="menu" href="#">Home</a>
</li>
<li><a class="menu" href="#">Home</a>
</li>
<li><a class="menu" href="#">Home</a>
</li>
<li><a class="menu" href="#">Home</a>
</li>
<li><a class="menu" href="#">Home</a>
</li>
<li><a class="menu" href="#">Home</a>
</li>
<li class="dropdown-submenu"> Level 2
<ul class="dropdown-menu">
<li class="dropdown-submenu"> Level 3
<ul class="dropdown-menu">
<li><a class="menu" href="#">One</a>
</li>
<li><a class="menu" href="#">Two</a>
</li>
<li><a class="menu" href="#">Three</a>
</li>
<li><a class="menu" href="#">Four</a>
</li>
<li><a class="menu" href="#">Five</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a class="menu" href="#">Home</a>
</li>
<li><a class="menu" href="#">Home</a>
</li>
<li><a class="menu" href="#">Home</a>
</li>
<li><a class="menu" href="#">Home</a>
</li>
<li><a class="menu" href="#">Home</a>
</li>
<li><a class="menu" href="#">Home</a>
</li>
</ul>
</li>
<li class="dropdown-submenu"> List
<ul class="dropdown-menu">
<li><a class="menu" href="#">Action</a>
</li>
<li class="dropdown-submenu"> Menu
<ul class="dropdown-menu">
<li class="dropdown-submenu"> Stationary
<ul class="dropdown-menu">
<li><a class="menu" href="#">Book</a>
</li>
<li><a class="menu" href="#">Pen</a>
</li>
<li><a class="menu" href="#">Pencil</a>
</li>
<li class="divider"></li>
<li><a class="menu" href="#">Ruler</a>
</li>
<li><a class="menu" href="#">Paper</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li><a class="menu" href="#">Address</a>
</li>
<li role="separator" class="divider"></li>
<li><a class="menu" href="#">Another Project Collaboration</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
CSS file
body {
padding-top: 50px;
}
.search-box {
margin: 5px 0px;
}
.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;
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: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.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;
}
JS file
$("#search-criteria").on("keyup", function () {
var g = $(this).val().toLowerCase();
$(".menu").each(function () {
var s = $(this).text().toLowerCase();
$(this).closest('.menu')[s.indexOf(g) !== -1 ? 'show' : 'hide']();
});
});
you can try this one :
body {
padding-top: 50px;
}
.search-box {
margin: 5px 0px;
}
.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;
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: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.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;
}
#wrapper .dropdown-submenu{
width: 200px;
height: 100%;
position: relative;
overflow-x: auto;
overflow-y: hidden;
}
#container{
width: 300px;
transform: translate(50px, 0);
}
DEMO FIDDLE
I'm using the Yamm mega menu for Bootstrap 3 and need a multi dropdown to work as a grid.
The first dropdown section is within the first 4 column grid, then the second half of the dropdown should go into the second 4 column grid and lastly the third one goes into the final 4 column grid.
http://geedmo.github.io/yamm3/#navbar-collapse-grid
Something similar to this http://www.bentleymotors.com/en.html but without all the moving animation. Bare in mind to activate parts of the dropdown, you need to click on the arrows to the right. Something I didn't find obvious at first.
This is what I have so far, I must warn you that it currently isn't within a grid, because when I tried, it just broke the whole dropdown. I'm guessing that I shouldn't do the CSS only version of a multi dropdown and instead use some javascript and somehow separate it into their own divs. Please not that there could also be more than one multi dropwdown within the nav, but they should always be 3 levels deep max.
HTML
<nav class="navbar yamm navbar-default">
<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>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="grid">
<div class="row">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown yamm-fw">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li>Some action</li>
<li>Some other action</li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Hover me for more options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level</a></li>
<li class="dropdown-submenu">
Even More..
<ul class="dropdown-menu">
<li>3rd level</li>
<li>3rd level</li>
</ul>
</li>
<li>Second level</li>
<li>Second level</li>
</ul>
</li>
</ul>
</li>
</div>
</li>
</ul>
</div><!--/.nav-collapse -->
</nav>
CSS
img { width: 100%; }
.carousel {
height: 700px;
overflow: hidden;
}
.navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>a:hover {
color: #fff;
}
.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
margin-top: -100px;
}
h2, h2 a, h2 a:hover {
color: #0a7a3f;
margin-top: 20%;
}
h2 a:hover {
text-decoration: none;
}
.navbar{
margin-bottom: 0;
}
.navbar-nav {
margin: 0 auto;
display: table;
table-layout: fixed;
float:none;
}
.navbar-default {
background: #0a7a3f;
border: none;
}
.grid { padding: 10px; }
#media (min-width: 768px) {
.navbar {
border-radius: 0;
}
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{
background-color: #fff;
color: #000;
}
.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;
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: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
EDIT: JSFiddle - http://jsfiddle.net/kr1j2gbu/
I have found your question because I was also interested in similar functionality, but such that would be more responsive (for mobile devices to do it on click).
Here below is the solution, in case someone else needs it, too:
For Bootstrap 3.1.1
Run it with JSfiddle: http://jsfiddle.net/chirayu45/Khh4C/1/
Look for this similar question, too.
HTML:
<div class="dropdown" style="position:relative">
Click Here <span class="caret"></span>
<ul class="dropdown-menu">
<li>
<a class="trigger right-caret">Level 1</a>
<ul class="dropdown-menu sub-menu">
<li>Level 2</li>
<li>
<a class="trigger right-caret">Level 2</a>
<ul class="dropdown-menu sub-menu">
<li>Level 3</li>
<li>Level 3</li>
<li>
<a class="trigger right-caret">Level 3</a>
<ul class="dropdown-menu sub-menu">
<li>Level 4</li>
<li>Level 4</li>
<li>Level 4</li>
</ul>
</li>
</ul>
</li>
<li>Level 2</li>
</ul>
</li>
<li>Level 1</li>
<li>Level 1</li>
</ul>
CSS:
.dropdown-menu>li
{ position:relative;
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
cursor:pointer;
}
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
display:none;
margin-top: -1px;
border-top-left-radius:0;
border-bottom-left-radius:0;
border-left-color:#fff;
box-shadow:none;
}
.right-caret:after
{ content:"";
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
border-left: 4px solid orange;
display: inline-block;
height: 0;
opacity: 0.8;
vertical-align: middle;
width: 0;
margin-left:5px;
}
.left-caret:after
{ content:"";
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
border-right: 4px solid orange;
display: inline-block;
height: 0;
opacity: 0.8;
vertical-align: middle;
width: 0;
margin-left:5px;
}
JS:
$(function(){
$(".dropdown-menu > li > a.trigger").on("click",function(e){
var current=$(this).next();
var grandparent=$(this).parent().parent();
if($(this).hasClass('left-caret')||$(this).hasClass('right-caret'))
$(this).toggleClass('right-caret left-caret');
grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
grandparent.find(".sub-menu:visible").not(current).hide();
current.toggle();
e.stopPropagation();
});
$(".dropdown-menu > li > a:not(.trigger)").on("click",function(){
var root=$(this).closest('.dropdown');
root.find('.left-caret').toggleClass('right-caret left-caret');
root.find('.sub-menu:visible').hide();
});
});
I am trying to create navbar which is not responsive and have some dropdowns
I am able to make it non responsive via below css.But if i click the drop downs in navbar in mobile it messes up.Here is the bootply http://www.bootply.com/k9wnO3WaO4 , Try the mobile view and click todo to recreate this problem.
<style>
.navbar-collapse.collapse {
display: block!important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.navbar-right {
float: right!important;
}
</style>
sample dropdown
<li class="dropdown"><a href="#" data-tad="l1" class="nottodo dropdown-toggle" data-toggle="dropdown">Todo <span class="label label-info">0</span>
</a>
<ul class="dropdown-menu">
<li><span class="label label-warning">4:00 AM</span>Favourites Snippet</li>
<li><span class="label label-warning">4:30 AM</span>Email marketing</li>
<li><a href="#"><span class="label label-warning">5:00 AM</span>Subscriber focused email
design</a></li>
<li class="divider"></li>
<li>View All</li>
</ul>
</li>
There is one media query responsible for the behavior that I think you don't like.
It is in css the following media query:
#media (max-width: 767px) {
.navbar-nav .open .dropdown-menu {
background-color: transparent;
border: 0 none;
box-shadow: none;
float: none;
margin-top: 0;
position: static;
width: auto;
}
...
}
Just override the style like in the following css:
.navbar-nav .open .dropdown-menu {
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
}
You can find your updated Bootply here.
In the demo below I had to add !important to the background color. Not sure why because at Bootply that isn't required.
.navbar-collapse.collapse {
display: block!important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.navbar-right {
float: right!important;
}
.navbar-nav .open .dropdown-menu {
background-color: #fff !important;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
position: static;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown"><span class="fa fa-bell"></span> <span class="label label-success">0</span>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Chat <span class="fa fa-comment"></span>
</a>
</li>
<li class="dropdown"><a href="#" data-tad="l1" class="nottodo dropdown-toggle" data-toggle="dropdown">Todo <span class="label label-info">0</span>
</a>
<ul class="dropdown-menu">
<li><span class="label label-warning">4:00 AM</span>Favourites Snippet</li>
<li><span class="label label-warning">4:30 AM</span>Email marketing</li>
<li><a href="#"><span class="label label-warning">5:00 AM</span>Subscriber focused email
design</a></li>
<li class="divider"></li>
<li>View All</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><span class="fa fa-user"></span> <b class="caret"></b>
<ul class="dropdown-menu">
<li><span class="glyphicon glyphicon-user"></span>Profile</li>
<li><span class="glyphicon glyphicon-cog"></span>Settings</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-off"></span>Logout</li>
</ul>
</li>
</ul>
</div>
</nav>
I want to display the text selected in the drop down. I want when the user selects the dropdown li element that elements value must get printed. How can i solve this issue Please help. Thanks....
This is the code:
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;
}
.dropdown-menu{
max-height: 300px;
overflow: auto;
top: 15px;
position: absolute;
left: 0px
margin-top:50px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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>
Project name
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<ul class="dropdown-menu sub-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</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>Link</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">Regular link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu" id="menu1">
<li>
2-level Menu <i class="icon-arrow-right"></i>
<ul class="dropdown-menu sub-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="dropdown">
Menu
</li>
<li class="dropdown">
Menu
</li>
</ul>
You can simply do:
$('.dropdown-menu li a').click(function(){
alert($(this).text());
});
DEMO
The idea is to find the common pattern among the dropdowns, which is the class .dropdown-menu and then bind the click() event on the target li and a. To get the inside content, use text()