Develop Reference

Close Dropdown Submenu After Click in Bootstrap

I have created a website with bootstrap 3 framwork. now problem is, dropdown submenu not closed after clicking the sub-menu item. my templates uses hover function to show up sub-menu items.
I want to close the dropdown when the user clicks sub menu item.
For an example, services menu contains submenu list. when the users clicks anyone of item, entire sub-menu should be closed. how to do? any suggestions?
sitelink

jQuery( ".dropdown-menu li a" ).click(function() {
jQuery("ul.dropdown-menu").css("display", "none");
});

Use display block in the css code
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>

You can use extra class to select the menu items which have dropdown element. For this example, a class "trigger" is used for defining which have child elements.
$(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();
});
});
.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,.left-caret:after
{ content:"";
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
display: inline-block;
height: 0;
vertical-align: middle;
width: 0;
margin-left:5px;
}
.right-caret:after
{ border-left: 5px solid #ffaf46;
}
.left-caret:after
{ border-right: 5px solid #ffaf46;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>
</div>

try this jquery
$( ".dropdown" ).click(function() {
$(".dropdown").removeClass("open");
$("#menulink + .dropdown-menu").css("display", "none");
});
remove the open class of dropdown when a link is clicked

jQuery Reverse Drop Toggle & CSS Fix

≫ Live Demo On JSFiddle ≪
Occurring Problems / Questions
1). Toggling Show/Hide
Upon clicking on the same drop toggle, or another, I need to reverse the process of any already clicked drop toggles and then show the clicked drop toggle. The current version simply uses the following jQuery code:
$(".HonorBarsList a").click(function(){
$(this).parent().parent().parent().css({ marginBottom : "296px" });
$(this).parent().css({ borderBottom : "none" });
$(this).parent().find("ul").show();
});
I understand that I could loop through the entire scope, applying the initial CSS to all, however this seems like a rather lengthy way to do this.
Q). What is my best solution to use here?
2). Last List Set > UL > Top Left Border
This list is generated via a PHP PDO query, therefore the amount of list items will be unknown. On my provided demo, the last set has only three LI's meaning at the top left corner, there appears to be missing border.
Q). Should I fake this by having the link drop toggle's bottom border white and the UL simply have all borders, or is there another trick I can use, remembering that the last set could have 1-4 LI's within.

It is ok to reset the CSS to all the relevant elements. It might be better to do it with an active class though to make the jQuery code a bit cleaner.
Below is an example of just setting the CSS back to it's defaults before applying the relevent CSS to the clicked element.
$(document).ready(function(){
"use strict";
$(".myList a").click(function(){
// store relevent elements
var parentUl = $(this).parent().parent().parent();
var $this = $(this);
if($this.hasClass("active-li")) {
// if clicked element is already active then toggle class
parentUl.toggleClass("active-ul");
$this.toggleClass("active-li");
} else {
// otherwise remove active class from active elements
$(".active-ul").removeClass("active-ul");
$(".active-li").removeClass("active-li");
// then toggle the active class on the clicked parent element
parentUl.toggleClass("active-ul");
$this.toggleClass("active-li");
}
});
});
.myList {
display: block;
float: left;
width: 600px;
height: auto;
margin:0;
padding:0;
border-top:1px solid black;
}
.myList > li,
.myList > li > ul {
display: block;
float: left;
height: 50px;
width: 600px;
margin: 0;
padding: 0;
}
.myList > li > ul > li {
display: block;
float: left;
height: 51px;
width: 150px;
border-left: 1px solid black;
box-sizing: border-box;
overflow: hidden;
}
.myList > li > ul > li:last-of-type { border-right: 1px solid black; }
.myList > li > ul > li a {
display: block;
height: 50px;
width: 100%;
border-bottom: 1px solid black;
position:relative;
z-index:2;
}
.myList > li > ul > li > a > div {
display: block;
float: left;
}
.myList > li > ul > li > ul {
display: none;
position: absolute;
height: 150px;
width: 600px;
margin-top: -1px;
margin-left: -1px;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
box-sizing: border-box;
z-index:1;
}
.myList > li > ul > li:nth-of-type(2) > ul { margin-left: -151px; }
.myList > li > ul > li:nth-of-type(3) > ul { margin-left: -301px; }
.myList > li > ul > li:nth-of-type(4) > ul { margin-left: -451px; }
.myList .active-ul {
margin-bottom:150px;
}
.myList .active-li {
border-bottom:1px solid white;
}
.myList .active-li + ul {
display:block;
}
<ul class="myList">
<li>
<ul>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
<li>
<a href="javascript:;">
Link Area
</a>
<ul>
<p>Additional Informatioin Area...</p>
</ul>
</li>
</ul>
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Maybe it's better to use the .toggle from jQuery
you can handle initial state and new state onclick event
$(".myList a").click(function(){
$(this).parent().parent().parent().toggle(function () {
$(this).parent().parent().parent().css({borderBottomLeftRadius: "150px"});
}, function () {
$(this).parent().parent().parent().css({borderBottomLeftRadius: "0px"});
});
)};

menu acordeon : div stuck in my list because of the overflow

I want to create a side menu and my code look like this :
function opensubmenus() {
$('#submenus').css("display", "block");
}
#menus {
overflow-y: scroll;
width: 150px;
background-color: blue;
}
#submenus {
background-color: green;
display: none;
}
submenus ul {
float: right;
position: relative;
}
nav {
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div id='menus'>
<ul>
<li>
<span onclick='opensubmenus()'>Menu 1</span>
<ul id='submenus'>
<li>SubMenu 1
</li>
<li>
SubMenu 2
</li>
<li>
SubMenu 3
</li>
</ul>
</li>
<li>
Menu 2
</li>
<li>
Menu 3
</li>
</ul>
</div>
</nav>
But I when I show my submenu, he do not apear outside the box...
I want a menu like this :
I need absolutely need the "overflow-y" because I have a lot of menu and I need to have a scrolling option. Did you know how to have this result?

You have <ul id="submenus"> within <div id="menus">, if you don't want the sub menus inside of the menu, make another <div>, and put it in that:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div id='menus'>
<ul>
<li>
<span onclick='opensubmenus()'>Menu 1</span>
</li>
<li>
Menu 2
</li>
<li>
Menu 3
</li>
</ul>
</div>
<div>
<ul id='submenus'>
<li>SubMenu 1
</li>
<li>
SubMenu 2
</li>
<li>
SubMenu 3
</li>
</ul>
</div>
</nav>
Then to get them side-by-side, apply float:left; to #menus:
#menus {
overflow-y: scroll;
width: 150px;
background-color: blue;
float: left;
}
#submenus {
background-color: green;
display: none;
}
submenus, ul {
float: right;
position: relative;
}
nav {
overflow: hidden;
}

You can change your CSS and use absolute position on the submenu:
function opensubmenus() {
$('#submenus').css("display", "block");
}
#menus {
position:relative;
display:inline-block;
}
.main {
overflow-y: scroll;
margin:0;
width: 150px;
background-color: blue;
}
#submenus {
position:absolute;
left:100%;
top:0;
background-color: green;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div id='menus'>
<ul class="main">
<li>
<span onclick='opensubmenus()'>Menu 1</span>
<ul id='submenus'>
<li>SubMenu 1
</li>
<li>
SubMenu 2
</li>
<li>
SubMenu 3
</li>
</ul>
</li>
<li>
Menu 2
</li>
<li>
Menu 3
</li>
</ul>
</div>
</nav>
Bonus -- Quick Multiple SubMenus
$('span').click(function(){
var col = $(this).data('color');
$('.submenus').hide();
$('span').css('background', '');
$(this).css('background', col);
$(this).next('.submenus').show().css('background', col);
})
#menus {
position:relative;
display:inline-block;
}
.main {
overflow-y: scroll;
margin:0;
width: 150px;
background-color: blue;
}
.submenus {
position:absolute;
left:100%;
top:0;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div id='menus'>
<ul class="main">
<li>
<span data-color="red">Menu 1</span>
<ul class='submenus'>
<li>SubMenu 1
</li>
<li>
SubMenu 2
</li>
<li>
SubMenu 3
</li>
</ul>
</li>
<li>
<span data-color="yellow">Menu 2</span>
<ul class='submenus'>
<li>SubMenu 21
</li>
<li>
SubMenu 22
</li>
<li>
SubMenu 23
</li>
</ul>
</li>
<li>
<span data-color="green">Menu 3</span>
<ul class='submenus'>
<li>SubMenu 31
</li>
<li>
SubMenu 32
</li>
<li>
SubMenu 33
</li>
</ul>
</li>
</ul>
</div>
</nav>

Creating a JQuery Drop Down Menu with divs

I have been trying to fix this problem for a while. Basically I am creating a drop down menu that has divs that contain the ul's so that I can have a box with a fixed width which will allow me to have images within the box.
An example of this would be BestBuy.com's navigation menu. I really like the design, but I'm having a difficult time replicating it.
My CSS works without trouble ONLY when the li's are not links. Example: It works when it is <li>Link</li> and not <li>Link</li>.
Of course inside that <li> is another list.
Anyway, I decided to use JQuery to fix the issue and I am about halfway there.
Here is my JQuery:
$(document).ready(function () {
$(".navbar ul li").hover(function() {
$(".navlink > div:first").addClass("active");
}, function() {
$(".navlink > div:first").removeClass("active");
});
$(".secondarylink").hover(function() {
$(".secondarylink > div").addClass("active");
}, function() {
$(".secondarylink > div").removeClass("active");
});
});
Here is my markup:
<div class="navbar">
<ul>
<li class="navlink"> Products
<div class="secondlevel">
<ul>
<li class="secondarylink">Testing 1
<div class="thirdlevel two-columns">
<div class="column">
<ul>
<li>Testing 1 </li>
<li>Testing 2 </li>
<li>Testing 3 </li>
<li>Testing 4 </li>
</ul>
</div>
<div class="column">
<ul>
<li>Testing 1 </li>
<li>Testing 2 </li>
<li>Testing 3 </li>
<li>Testing 4 </li>
</ul>
</div>
</div>
</li>
<li class="secondarylink">Testing 2
<div class="thirdlevel">
<ul>
<li>Testing 1</li>
<li>Testing 2</li>
<li>Testing 3</li>
<li>Testing 4</li>
</ul>
</div>
</li>
<li>Testing 3</li>
<li>Testing 4</li>
</ul>
</div>
</li>
<li class="navlink">Test Link</li>
</ul>
</div>
And my styling:
body {
font-family:sans-serif;
background: #eee;
}
.navlink {
display:block;
}
.navbar {
background:lightblue;
width: 100%;
padding:0;
}
.navbar ul {
list-style:none;
padding:0;
margin:0;
}
.navbar ul>li {
display:inline-block;
}
.navbar ul li ul>li {
display:block;
}
.secondlevel {
position:absolute;
width:350px;
height:477px;
background:#fff;
padding:0;
border: 1px solid #c3c4c4;
}
.thirdlevel {
position:absolute;
width:350px;
height:477px;
background:lightgreen;
left:350px;
border: 1px solid #c3c4c4;
top:-1px;
}
.thirdlevel.two-columns {
width:700px;
}
.thirdlevel div:first-child {
position:absolute;
left:0;
}
.thirdlevel div {
position:absolute;
right:0;
}
.column {
width:350px;
}
.thirdlevel {
display:none;
}
.secondlevel {
display:none;
}
/*
.navbar ul li:hover > div:first-child {
display:block;
}
*/
.active {
display:block;
}
.hidden {
display:none;
}
.navbar ul li a {
display:block;
}
Demo
As you can see, in my CSS I had .navbar ul li:hover > div:first-child { display:block;}. This works, but without the links... Someone told me to try making the <a> display:block; but that didn't work either.
All I need to do(I think) is be able to select div:first-child for this to work, but so far I haven't found anything that works. What am I doing wrong?
Any help is greatly appreciated. Thank you people!

I'm not entirely sure what you're after, but maybe this helps.
With CSS:
.navbar > ul > li:hover > .secondlevel {
display: block;
}
.navbar .secondarylink:hover > .thirdlevel {
display: block;
}
Demo
With jQuery:
$(".navbar ul li").hover(function () {
$(this).find('.secondlevel').show();
}, function () {
$(this).find('.secondlevel').hide();
});
$(".secondarylink").hover(function () {
$(this).find('.thirdlevel').show();
}, function () {
$(this).find('.thirdlevel').hide();
});
Demo

It's doesn't matter with the <li>item</li> or <li>item</li> as long as you have the correct script.
As I looked into your script, the action you trigger is to add 'active' class to all the second/third level.
I've updated the script and now it only add class to the second level / third level accordingly.
$(this).find().addClass();
DEMO

creates a line break before and after drop down menu in css

When I created a drop down menu using css, it generates a line break before and after drop down menu
Here is html code
<body>
<!--nav class="navi"-->
<div class="navi" id="navi">
<ul>
<li>Home</li>
<li>About us
<ul>
<li>History</li>
<li>Company Profile</li>
<li>Core Values And Mission</li>
<li>Strategy</li>
</ul>
</li>
<li>Our Brands
<ul>
<li>HAMARA GLUCOSE D</li>
<li>HAMARA HEALTH CARE PATENT PRODUCTS</li>
<li>WAHT'S NEW</li>
</ul>
</li>
<li>Nutrition Space
<ul>
<li>Product FAQ</li>
<li>Health & Wellness</li>
</ul>
</li>
<li>Media
<ul>
<li>News Paper Clippings</li>
<li>Product Photos</li>
<li>Founder which...</li>
</ul>
</li>
<li>HSS</li>
<li>Copackers & Investors</li>
<li>Career</li>
<li>Communities</li>
<li>Contact Us</li>
</ul>
</div>
<!--/nav-->
</body>
and here is css code
<style>
.navi ul li
{
float:left;
}
.navi ul li a
{
display:block;
padding: 10px;
text-decoration:none;
}
.navi ul li:hover > a
{
color:white;
}
.navi ul
{
display:inline-table;
list-style:none;
padding: 0 0px;
position:relative;
background:#C93;
}
.navi ul ul
{
display: none;
position:absolute;
}
.navi ul ul li
{
/*display:block;*/
float:none;
}
.navi ul li:hover > ul
{
display:block;
background:#FC0707;
}
</style>
So I don't want to generate a line break

*{
padding:0;
margin:0;
}
Add this to styles

try using the white-space property
assign this to the div:
.navi
{
white-space: nowrap;
}
some more examples

If you meant the first layer of a remove display:block; from below code else if it is the second layer of a i.e. menu options
Try chaning
.navi ul li a {
display:block;
padding: 10px;
text-decoration:none; }
to
.navi ul li > a {
display:block;
padding: 10px;
text-decoration:none; }
I believe that block style has been applied to ALL the a creating a break inside the menu options too

Where it generates line break? By default div display type is block which takes 100% width of its parent and obviously pushed content down which is next to it in the flow.
Do you want to add content before and after the menu?
#navi{
display: inline;
}
Also make before and after content's display property to inline ( if no width is specified ) or inline-block ( if you want to specify width ).