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
Related
I'm displaying the drop down menu on hover in the navigation bar for desktop display, but for it to be responsive I would like to add a button to the right of the navigation menu on the mobile screen and use it to toggle the drop down menu on and off.
Screenshot of what I'm looking for, a toggle button for dropdown menu for mobile screens:
Here is my code:
.nav-link {
display: inline-block;
position: relative;
color: black;
}
html,body{
height: 100%;
width: 100%;
font-family: 'Poppins', sans-serif;
color: #222;
}
.navbar{
padding: .8rem;
}
.navbar {
padding-right: 15px;
padding-left: 15px;
}
.navbar .container {
width: auto;
}
.cart {
position: absolute;
right: 5%;
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline:none;
}
.navbar-nav li:first-child{
display: none;
}
#media (max-width: 768px) {
.navbar {
border-radius: 4px;
padding-right: 0;
padding-left: 0;
}
.navbar-brand{
align-items: center;
padding-right: 10%;
}
.navbar-nav li:not(:first-child){
border-bottom: 1px solid #000;
}
.navbar-nav li:first-child{
display: block;
}
#myNavbarToggler13 {
position: fixed;
top: 0;
left: 0;
z-index: 999999;
width: 75%;
height: 100%;
background-color: #f9f9f9;
overflow: auto;
bottom: 0;
max-height: inherit;
}
.nav-item{
transition: 0.3s;
padding: 5px 35px 0px;
/*margin: 5px 0 0 50px;*/
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top" role="navigation">
<button class="navbar-toggler" type="button" data-toggle="slide-collapse" data-target="#myNavbarToggler13"
aria-controls="myNavbarToggler13" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-nav navbar-brand mx-auto" href="#"><img id="logo">Brand
<button class="cart" type="button" data-toggle="slide-collapse" data-target="#cartToggler"
aria-controls="cartToggler" aria-expanded="false" aria-label="cartToggle navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-bag-fill" viewBox="0 0 16 16">
<path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5z"/>
</svg>
</button>
</a>
<div class="collapse navbar-collapse" id="myNavbarToggler13">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" id="crossButton" href="#">X</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="index.html" id="navbarDropdown">item 1</a>
<div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">subitem 1</a>
<a class="dropdown-item" href="#">subitem 2</a>
<a class="dropdown-item" href="#">subitem 3</a>
<a class="dropdown-item" href="#">subitem 4</a>
<a class="dropdown-item" href="#">subitem 5</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="index.html" id="navbarDropdown">item 2</a>
<div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">subitem 1</a>
<a class="dropdown-item" href="#">subitem 2</a>
<a class="dropdown-item" href="#">subitem 3</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="index.html" id="navbarDropdown">item 3</a>
<div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">subitem 1</a>
<a class="dropdown-item" href="#">subitem 2</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="cartToggler">
</div>
</nav>
<script>
$(".navbar-toggler ").on('click', function() {
$navMenuCont = $($(this).data('target'));
$navMenuCont.animate({
'width': 'toggle'
}, 350);
$(".menu-overlay").fadeIn(500);
});
$(".menu-overlay").click(function(event) {
$(".navbar-toggler").trigger("click");
$(".menu-overlay").fadeOut(500);
});
$("#crossButton").click(function(event) {
$(".navbar-toggler").trigger("click");
$(".menu-overlay").fadeOut(500);
});
</script>
You can use jQuery's parent, siblings and children selector and toggle the display for the elements like you wish.
Note: In order to make it work you have to remove href for the dropdown toggle element, else it will take you to another page
Example below
$(".navbar-toggler ").on('click', function() {
$navMenuCont = $($(this).data('target'));
$navMenuCont.animate({
'width': 'toggle'
}, 350);
$(".menu-overlay").fadeIn(500);
});
$(".menu-overlay").click(function(event) {
$(".navbar-toggler").trigger("click");
$(".menu-overlay").fadeOut(500);
});
$("#crossButton").click(function(event) {
$(".navbar-toggler").trigger("click");
$(".menu-overlay").fadeOut(500);
});
$('.nav-item .nav-link').click(function(){
$(this).siblings('.dropdown-menu').slideToggle();
$(this).parent().siblings('li').children('.dropdown-menu').hide();
});
.nav-link {
display: inline-block;
position: relative;
color: black;
}
html,body{
height: 100%;
width: 100%;
font-family: 'Poppins', sans-serif;
color: #222;
}
.navbar{
padding: .8rem;
}
.navbar {
padding-right: 15px;
padding-left: 15px;
}
.navbar .container {
width: auto;
}
.cart {
position: absolute;
right: 5%;
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline:none;
}
.navbar-nav li:first-child{
display: none;
}
.navbar {
border-radius: 4px;
padding-right: 0;
padding-left: 0;
}
.navbar-brand{
align-items: center;
padding-right: 10%;
}
.navbar-nav li:not(:first-child){
border-bottom: 1px solid #000;
}
.navbar-nav li:first-child{
display: block;
}
#myNavbarToggler13 {
position: fixed;
top: 0;
left: 0;
z-index: 999999;
width: 75%;
height: 100%;
background-color: #f9f9f9;
overflow: auto;
bottom: 0;
max-height: inherit;
}
.nav-item{
transition: 0.3s;
padding: 5px 35px 0px;
/*margin: 5px 0 0 50px;*/
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top" role="navigation">
<button class="navbar-toggler" type="button" data-toggle="slide-collapse" data-target="#myNavbarToggler13"
aria-controls="myNavbarToggler13" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-nav navbar-brand mx-auto" href="#"><img id="logo">Brand
<button class="cart" type="button" data-toggle="slide-collapse" data-target="#cartToggler"
aria-controls="cartToggler" aria-expanded="false" aria-label="cartToggle navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-bag-fill" viewBox="0 0 16 16">
<path d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5z"/>
</svg>
</button>
</a>
<div class="collapse navbar-collapse" id="myNavbarToggler13">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" id="crossButton" href="#">X</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown">item 1</a>
<div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
<a class="dropdown-item" >subitem 1</a>
<a class="dropdown-item" href="">subitem 2</a>
<a class="dropdown-item" href="">subitem 3</a>
<a class="dropdown-item" href="">subitem 4</a>
<a class="dropdown-item" href="">subitem 5</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown">item 2</a>
<div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">subitem 1</a>
<a class="dropdown-item" href="#">subitem 2</a>
<a class="dropdown-item" href="#">subitem 3</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown">item 3</a>
<div class="dropdown-menu mt-0" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">subitem 1</a>
<a class="dropdown-item" href="#">subitem 2</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="cartToggler">
</div>
</nav>
jQuery reference for siblings: https://api.jquery.com/siblings/
jQuery reference for parent : https://api.jquery.com/parents/
jQuery reference for children: https://api.jquery.com/children/
I want to implement a dropdown menu where hovering over a particular option from the menu opens another set of options, something like this (hovering over Option 3 opens up menu containing Option 4 and 5) -
I have been trying similar thing using carbon classes (taken reference from - https://the-carbon-components.netlify.app/?nav=dropdown and https://codepen.io/team/carbon/pen/wEGEoz) but I am not able to achieve it.
This is what my code looks like -
HTML -
<ul data-dropdown data-value class="bx--dropdown" tabindex="0">
<li class="bx--dropdown-text">Choose an option</li>
<li>
<ul class="bx--dropdown-list">
<li data-option data-value="Option 1" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">Option 1</a></li>
<li data-option data-value="Option 2" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">Option 2</a></li>
<li data-option data-value="Option 3" class="bx--dropdown-item" id="openMenu"><a class="bx--dropdown-link" href="javascript:void(0)">Option 3</a>
<ul class="bx--dropdown-list" id="customMenu" style="display:none;margin-left:75px;">
<li data-option data-value="Option 4" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">Option 4</a></li>
<li data-option data-value="Option 5" class="bx--dropdown-item"><a class="bx--dropdown-link" href="javascript:void(0)">Option 5</a></li>
</ul>
</li>
</ul>
</li>
</ul>
CSS -
.bx--dropdown {
outline: 2px solid transparent;
outline-offset: -2px;
position: relative;
list-style: none;
display: block;
background-color: white;
border: none;
border-bottom: 1px solid #8C8c8c;
width: 100%;
height: 2.5rem;
cursor: pointer;
color: #171717;
outline: 2px solid transparent;
transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
.bx--dropdown-text {
display: block;
padding-left: 1rem;
padding-right: 2.625rem;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.875rem;
font-weight: 400;
line-height: 1.125rem;
letter-spacing: 0.16px;
}
.bx--dropdown-list {
background-color: white;
display: flex;
flex-direction: column;
outline: 2px solid transparent;
outline-offset: -2px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
font-size: 0.875rem;
font-weight: 400;
line-height: 1.125rem;
letter-spacing: 0.16px;
width: 100%;
list-style: none;
position: absolute;
z-index: 1000;
max-height: 0;
transition: max-height 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
overflow-x: auto;
overflow-y: auto;
}
.bx--dropdown-item {
transition: visibility 70ms cubic-bezier(0.2, 0, 0.38, 0.9), opacity
70ms cubic-bezier(0.2, 0, 0.38, 0.9), background-color 70ms
cubic-bezier(0.2, 0, 0.38, 0.9);
opacity: 0;
visibility: inherit;
position: relative;
}
.bx--dropdown-link {
display: block;
outline: 2px solid transparent;
outline-offset: -2px;
height: 2.5rem;
color: #393939;
text-decoration: none;
font-weight: normal;
line-height: 1rem;
padding: 0.6875rem 0;
margin: 0 1rem;
border: 1px solid transparent;
border-top-color: #e0e0e0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.bx--dropdown--open .bx--dropdown-list {
max-height: 15rem;
transition: max-height 110ms cubic-bezier(0, 0, 0.38, 0.9);
}
.bx--dropdown--open .bx--dropdown-item {
opacity: 1;
}
Here .bx--dropdown--open class gets added to ul containing class bx--dropdwon after clicking on 'Choose an option' box, like -
<ul data-dropdown="" data-value="" class="bx--dropdown bx--dropdown--open" tabindex="0">
JS -
$("#openMenu").on("mouseover",function() {showNew();});
$("#openMenu").on("mouseout",function() {showOld();});
function showNew(evt) {
$("#customMenu").attr("style", "display:block;margin-left:75px;");
}
function showOld() {
$("#customMenu").attr("style", "display:none");
}
The problem is that on hovering over Option 3 a scrollbar appears within the dropdown menu and the options Option 4 and Option 5 show within the initial dropdown only -
I want it to appear out of that box in the same way as it is in the first example that I have given. I am unable to understand how to make it work even after spending a lot of time with it. Any help is appreciated.
I don't think you can make it with the sole use of carbon.
I combined carbon and bootstrap to achieve a top-nav with multi level dropdown sub-items.
https://the-carbon-components.netlify.app/component/ui-shell--default.html
https://bootstrap-menu.com/demos/multilevel.html
.dropdown-menu li {
position: relative;
}
.nav-item .submenu {
display: none;
position: absolute;
left: 100%;
top: -7px;
padding-top: 7px;
}
.dropdown-menu>li:hover>.submenu {
display: block;
}
.dropdown-item {
background-color: #262626;
}
<link href="https://unpkg.com/carbon-components/css/carbon-components.min.css" rel="stylesheet" />
<script src="https://unpkg.com/carbon-components/scripts/carbon-components.min.js"></script>
<header class="bx--header">
<nav class="bx--header__nav" aria-label="Platform Name" data-header-nav>
<ul class="bx--header__menu-bar" aria-label="Platform Name">
<li class="bx--header__submenu" data-header-submenu>
<a class="bx--header__menu-item bx--header__menu-title" aria-haspopup="true" aria-expanded="false" tabindex="0"><strong> Main </strong>
<svg class="bx--header__menu-arrow" width="12" height="7" aria-hidden="true">
<path d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z" />
</svg>
</a>
<ul class="bx--header__menu navbar-nav" aria-label="Sub1">
<li class="nav-item dropdown">
<ul class="dropdown-menu">
<li>
<a class="bx--header__menu-item bx--header__menu-title dropdown-item" aria-haspopup="true" aria-expanded="false" tabindex="0" href="#">
<strong> Dropdown 1 </strong> >
</a>
<ul class="submenu">
<li role="none">
<a class="bx--header__menu-item dropdown-item" href="/sub1" tabindex="-1">
<span class="bx--text-truncate--end"><strong> Sub-item 1 </strong>
</span>
</a>
</li>
<li role="none">
<a class="bx--header__menu-item dropdown-item" href="/sub2" tabindex="-1">
<span class="bx--text-truncate--end"><strong> Sub-item 2 </strong>
</span>
</a>
</li>
<li role="none">
<a class="bx--header__menu-item dropdown-item" href="/sub3" tabindex="-1">
<span class="bx--text-truncate--end"><strong> Sub-item 3 </strong>
</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<ul class="dropdown-menu">
<li>
<a class="bx--header__menu-item bx--header__menu-title dropdown-item" aria-haspopup="true" aria-expanded="false" tabindex="0" href="#">
<strong> Dropdown 2 </strong> >
</a>
<ul class="submenu">
<li role="none">
<a class="bx--header__menu-item dropdown-item" href="/sub4" tabindex="-1">
<span class="bx--text-truncate--end"><strong> Sub-item 4 </strong>
</span>
</a>
</li>
<li role="none">
<a class="bx--header__menu-item dropdown-item" href="/sub5" tabindex="-1">
<span class="bx--text-truncate--end"><strong> Sub-item 5 </strong>
</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li role="none">
<a class="bx--header__menu-item" href="/drop3" tabindex="-1">
<span class="bx--text-truncate--end"><strong> Dropdown 3 </strong>
</span>
</a>
</li>
<li role="none">
<a class="bx--header__menu-item" href="/drop4" tabindex="-1">
<span class="bx--text-truncate--end"><strong> Dropdown 4 </strong>
</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>
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'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>
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()