I have a navigation menu that I created using Bootstrap 3. The menu has two dropdowns. Here is how I want it to behave:
Click menu 1 > dropdown menu appears
Click menu 2 > menu 1 closes > menu 2 dropdown appears
Here is what is actually happening:
Click menu 1 > dropdown menu appears
Click menu 1 again to close it
Click menu 2 to open it
What I have tried:
There is a similar question here: Avoid having to double-click to toggle Bootstrap dropdown. The solutions seemed specific to using angular with bootstrap, but I tried them anyway. Here is what happened:
One solution mentions getting rid of bootstrap.min.js. That solution is for Bootstrap 4.
A second solution includes stopping default behavior of the dropdown this way:
$('.dropdown-toggle').click(function(e) {
e.preventDefault();
e.stopPropagation();
return false;
});
But if I add that, the dropdowns don't work at all. When I click them, nothing happens.
The last solution I tried included removing data-toggle="dropdown". That resulted in the dropdowns not showing up at all as well.
Question:
Does anyone have a solution for how to remove the double click functionality so that I don't have to double click to close one menu before I can open another? I am just using Bootstrap (not angular and bootstrap), and I am using Bootstrap 3.
My code:
Don't know if this is helpful, but here is my navigation bar code:
<nav>
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Option 1<span class="caret"></span></a>
<ul class="dropdown-menu" style="position:relative;width:100%;" id="option1menu">
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" >Option 2<span class="caret"></span></a>
<ul class="dropdown-menu" style="position:relative;width:100%;" id="option2menu">
<li>Link</li>
<li>Link</li>
</ul>
</li>
</ul>
</nav>
Related
So what I'm trying to accomplish is I'm building a website using Wordpress. I have a menu and one of the items is "Products" under products I have 4 items, electronics, cars, house supplies, and other. For this example I'm focusing on electronics. So under electronics i have another submenu. So this is the 3rd level, which looks like the code below.
<li class="dropdown menu-products"><a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="http://mywebsite/products/">Products <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu menu-electronics">Electronics
<ul class="dropdown-menu">
<li class="menu-tv">Tvs</li>
<li class="menu-phones">Phone</li>
<li class="menu-games">Games</li>
<li class="menu-other">Other</li>
</ul>
</li>
Now when I click on any of the links on the 3rd level it will take you to the parent page and open up an accordion for that id. So I set that up and it works. However the problem I'm having is since all of these items example (tv, phones, games, others) are technically on the same page. When I click on one of the links, and i go back to the menu, all the links in the 3rd level are active. So if I were to click on a different item, the url changes but the page doesn't refresh nor does the new target accordion open. Here is what I have so far for this area. I'm assuming I have to add something to this script to check every time a link is clicked?
<script type="text/javascript">
(function( $ ) {
$(document).ready(function() {
var anchor = window.location.hash.replace("#", "");
$(".collapse").collapse('hide');
$("#" + anchor).collapse('show');
});
})( jQuery );
</script>
Tried to set up a JSfiddle to show this but failed at it.
http://codepen.io/ruchiccio/pen/ONvoaE
I have a navbar with a dropdown menu. This dropdown menu has a few children, one of which is also a dropdown list (i.e. Brands). When I click this dropdown list and then close it up again with the toggle caret, the 1px border around my entire navbar-collapse div disappears. I can't see what causes that to happen.
I also get weird border changes when I click the Brands dropdown, toggle it closed, and then try clicking a regular link in the dropdown menu (i.e. About).
Here is what the code looks like:
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a>About</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Brands<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a>Brand 1</a></li>
...
I figured out a solution. I gave navbar-collapse absolute positioning, with right:0 to keep it at the right side of the screen. Apparently, floating doesn't agree with the collapse.
I am using UI Router for navigating the menu. When I am clicking on second menu it's getting the active class but still the first menu is highlighted. I am providing my code below.
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a ui-sref="product">Home</a></li>
<li ng-class="{'active': $state.includes('product.eVouchers')}" class="dropdown"><a ui-sref="product.eVouchers.dashboard" class="dropdown-toggle" data-toggle="dropdown">E-Vouchers <b class="caret"></b></a>
<ul class="dropdown-menu">
<li ui-sref-active="active"><a ui-sref="product.eVouchers.dashboard">Dashboard</a></li>
<li ui-sref-active="active"><a ui-sref="product.eVouchers.code">Generate Voucher Code</a></li>
<li ui-sref-active="active"><a ui-sref="product.eVouchers.list">E-Voucher List</a></li>
</ul>
</li>
</ul>
When I am navigating to the second menu (i.e-E-Vouchers), at the same time the first menu is getting highlight with second menu. But when I am in the first menu only the first menu is getting the active class. Here I need when user will navigate to the any menu that menu only will get the active class.
I am using ui-router #version v0.2.15.
It's because of
<li ng-class="{active:$state.includes('product')}">
you add the class yourself for the parent menu so why don't you use the ui-sref-active like for other menus?
ui-sref-active="active"
ui-sref-active can live on the same element as ui-sref or on a parent element. The first ui-sref-active found at the same level or above the ui-sref will be used.
ui-sref-active will activate when the ui-sref's target state or any child state is active. If you need to activate only when the ui-sref target state is active and not any of it's children, then you will use ui-sref-active-eq
I have a navigation set up where I have a parent element and 3 children, the parent has content as do the three children. In bootstrap 3 however I can't access the parent because of the data-toggle for the children. I have it set to hover instead of click already for computer use which changes to the click for mobile use. Without breaking the mobile click on touch devices is there a way to make the parent element navigate to it's page? I've searched around but everything is either in PHP or the questions go un-answered.
This is the code I have for the navigation:
<ul class="nav">
<li>Home </li>
<li><a class="cms menulink" data-toggle="dropdown" href="/about">About</a>
<ul class="dropdown-menu">
<li>Who we are </li>
<li>Identity Mission </li>
<li>Origins </li>
</ul>
</li>
</ul>
I'm looking to either do this with just html/css or javascript/jquery.
Thanks
I am using the dropdown menu component of twitter/bootstrap
And i have a timer countdown 10 minutes
I want to make dropdown menu show up (at top), and won't vanish even if user click the other place.
Only after user hovered that dropdown list, user can let it vanish by click other lace.
<li class="dropdown">
User Name
<ul class="dropdown-menu">
<li class="first" id = "mymenu">
setting
</li>
<li class="last">
sign_out
</li>
</ul>
</li>
How can i do that?
I had though about use event handler to prevent vanish even, but how can i do that?
Thanks for help!!