Ok, I am really desperate at this point. I've created a submenu for the original Bootstrap dropdown menu:
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Dropdown
</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Open submenu >
<ul class="dropdown-menu">
<li>
Submenu link
</li>
</ul>
</li> <!-- / .dropdown-submenu -->
</ul>
</li> <!-- / .dropdown -->
</ul> <!-- / .navbar-nav -->
http://codepen.io/Deka87/pen/ORyRLd
It works as expected until I try to add another submenu dynamically. Please try to click "Add another menu" in the example Codepen. This will add a menu, however, you won't be able to toggle it. Instead it will simply close the current parent menu and that's gonna be it.
Any ideas would be highly appreciated!
Since the item is generated dynamically, you need to select it by a static parent for it to respond to the click event
$(".navbar").on("click", ".dropdown-submenu > a", function(){
....
....
});
Related
Is there a way to incorporate navigate the moment you click on a dropdown? Id like the page to navigate to section 4 upon clicking section for on the navigation bar and then if the user decides to navigate further from the list, they can by clicking on an item from the list. Thanks!
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Section 4-1</li>
<li>Section 4-2</li>
</ul>
</li>
Bootstrap documentation provides exactly what you're looking for, please have a look :
Bootstrap scrollspy on navbar
I added a dropdown list to the navbar on another site and added the class .open to the list. My intention is as follows: upon load the webpage navbar list contains an img element and opens displaying a promotional offer. So far so good, the page loads and the list drops displaying the ad, and if clicked it then closes.
Ok what I am aiming for is adding a function via jquery or JavaScript or css which will automatically CLOSE the dropdown list after about 5 seconds. I have read that the .open class in bootstraps.min.css is not cleared by default and therefore will remain open unless it is 'clicked' to close it.
<div class="navbar-responsive">
<ul class="nav navbar-nav">
<li class="active">
<li class="open dropdown-menu">
<a href="#" Id="test" class="dropdown-toggle" data- toggle="dropdown"><strong class="caret">
<ul class="dropdown-menu">
<li>
Click to close.
</li>
<li>
<img src="image folder/my_ad_image.png"
</li>
</ul>
</li>
</li>
</ul>
</div><!---end nav collapse--->
</div><!---end container--->
</div>>!---end main navbar--->
This above is what I have written. It rests atop an already existing navbar.
Thanks for reading.
If anyone has any suggestion or could point me in the right direction with respect to tying a jquery timeout function to my .open class or id that would be great. So far I have been unable to tie a jquery function or css to my dropdown list
Thanks.
You can use setTimeout() to implement timers in javascript.
The setTimeout() method calls a function or evaluates an expression
after a specified number of milliseconds.
Adapting your code it can be implemented like this:
CSS:
...
<li id="myid" class="open dropdown-menu">
<strong class="caret"></strong>
<ul class="dropdown-menu">
<li>
Click to close.
</li>
<li> ... </li>
</ul>
</li>
...
jScript (assuming you're using jQuery):
$(function() {
setTimeout(function() {
$("#myid").removeClass("open")
}, 5000);
});
I'm trying to get a slight delay on the third level of a dropdown using the bootstrap dropdown menu. Sorry I dont have a fiddle to show but the menu is this structure with products on the top menu dropping down to the list windows, doors, conservatories etc then items windows and doors have a submenu to the right at the third level..
products
|
WINDOWS
--> Casement
--> Tilt and Turn
--> Vertical
DOORS
--> Composite
--> French
--> Sliding
--> Bi-fold
--> Slide & Swing
CONSERVATORIES
ORANGERIES
TILED ROOF CONSERVATORIES
PORCHES
ROOFLINE
I have seen some useful javascripts
<script>
jQuery('ul.nav ul.dropdown-menu').hover(function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
jQuery(this).find('dropdown-menu').stop(true, true).delay(200).fadeOut();
});
</script>
which is almost working but it shows both 3rd level menus when the parent is hovered ie when windows is hovererd the windows submenu shows then the doors submenu shows with the delay. Could anybody advise how to adapt the above code?
<li class="dropdown">Products<span class="caret"></span>
<ul class="dropdown-menu">
<li class="visible-xs">All Products</li>
<li>
<a id="caret-one" class="trigger right-caret">Windows</a>
<ul class="dropdown-menu sub-menu">
<li>Casement</li>
<li>Tilt & Turn</li>
<li>Vertical Slider</li>
</ul>
</li>
<li>
<a id="caret-two" class="trigger right-caret">Doors</a>
<ul class="dropdown-menu sub-menu">
<li>Composite</li>
<li>French</li>
<li>Sliding</li>
<li>Bi-fold</li>
<li>Slide & Swing</li>
</ul>
</li>
<li>Conservatories</li>
<li>Orangeries</li>
<li>Tiled Roof Conservatories</li>
<li>Porches</li>
<li>Roofline</li>
</ul>
</li>
Please see the below code i have for my main menu on my website.
I want to add a data-toggle to the link tag for the dropdown but when the li doesnt contain ul I dont want the data-toggle added to the a tag. Would jquery be able to do this?
I am using bootstrap for this but in my menu I have menu links with no dropdown and the link url i add doesnt work as its expecting a dropdown to appear, if there a way around this?
<ul class="nav navbar-nav">
<li class="dropdown yamm-fw">
Menu 1
<ul class="dropdown-menu">
<li>Menu Item</li>
</ul>
</li>
<li class="dropdown yamm-fw">
Menu 2
</li>
<li class="dropdown yamm-fw">
Menu 3
</li>
<li class="dropdown yamm-fw">
Menu 4
</li>
<li class="dropdown yamm-fw">
Menu 5
</li>
</ul>
Try this:
$('.dropdown').each(function() {
if ($(this).find('UL').length === 0) {
$(this).find('A').data('toggle', true);
}
});
This is better, any li inside the ul.nav that has a child ul will have data-toggle added.
$("ul.nav li ul").parent().attr("data-toggle","")
You could also use the :has selector
$(function() {
$(".dropdown:has(ul) a").attr("data-toggle", /*value here*/);
});
Both answers are correct, this is just another option using the :has selector. It's also a one-liner :)
$("ul.nav > li:has(ul) a").attr("data-toggle","");
I have a multilevel dropdown made with bootstrap, now when I navigate few levels deep and accidentally pointer comes out of current dropdown list, all lists are closed until 1st level. How can I keep all opened dropdowns open and close only when it is clicked outside dropdown? i.e. do the same when mouse is clicked on outer space, not when just moved there.
Here is my demo: http://jsfiddle.net/n8XJb/
<ul class="nav nav-pills">
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu" id="menu1">
<li class="dropdown-submenu">
Level 1
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Level 2
<ul class="dropdown-menu">
<li>Level 3</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
When you navigate to Level 3, and then mouse pointer comes out of current list, it goes back to Level 1 instantly.
I have solved it by some custom event handling (http://jsfiddle.net/n8XJb/2/):
jQuery('.dropdown-menu li a').mouseover(function(e) {
e.stopPropagation();
jQuery(this).parent().parent().find('li').each(function() {
jQuery(this).removeClass('open');
});
jQuery(this).parent().addClass('open');
});
jQuery('.dropdown-toggle').click(function(e) {
jQuery(this).parent().find('li').each(function() {
jQuery(this).removeClass('open');
});
});
Bootstrap uses class open for open dropdowns, so we can set/unset it manually whenever needed.