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>
Related
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(){
....
....
});
This is a page I'm working on currently: http://s.codepen.io/moletek/debug/QNeaXq And basically I think the sub-menu breaks when you open and close the parent item. The background will disappear, like it's closing both elements.
I've done some custom stuff, so you can view the src, but here is my standard html:
<div class="collapse navbar-collapse" id="stcs-collapse">
<ul class="nav navbar-nav">
<li class="first active"><a href="welcome" title="welcome" >Welcome</a></li>
<li class="dropdown">About
<ul class="dropdown-menu"><li class="first"><a href="about/our-vision" title="Our Vision" >Our Vision</a></li>
<li><a href="about/our-team" title="Our Team" >Our Team</a></li>
<li><a href="about/church-plants" title="" >Plants</a></li>
<li class="last">Contact Us</li>
</ul>
</li>
</ul>
</div> <!-- A summary of the menu structure with submenu
You can reproduce this in the codepen mentioned above. Or view the GIF below So basically whenever you tap the dropdown parent, it will appear fine. But if you tap the parent again, the entire background will disappear when the child items do.
I'm quite baffled! I appreciate any help.
Thanks!
I'm creating a website for a project and i'm not allowed to use frameworks (so no bootstrap but jquery is allowed.), earlier i had a problem where the navigation bar when collapsed (screen width under 800px) has all the individual links expanded, rather than being in individual categories.
I've now fixed that but i've now got this problem where the menu's wont stay open / the arrows when clicked just take you to the subcategories heading. This makes the site unusable for mobiles essentially as no one will think to long click a tab to open each one.
I've uploaded this website to
here
The Html nav bar
<nav role="navigation" id="cssmenu">
<ul>
<li>Home</li>
<li class="has-sub">Courses
<ul>
<li>Digital Media</li>
<li>Web Development</li>
<li>Journalism</li>
<li class="last">Information & Communications</li>
</ul>
</li>
<li class="has-sub">Facilities
<ul>
<li>Societies</li>
<li>Jobs and Placements</li>
<li class="last">Library</li>
</ul>
</li>
<li class="has-sub active">Manchester & Student Life
<ul>
<li>Travel</li>
<li>Attractions</li>
<li class="last">Nightlife</li>
</ul>
</li>
<li class="has-sub">Student Help
<ul>
<li>Finance</li>
<li>Student Union</li>
<li class="last">Assistance</li>
</ul>
</li>
<li class="last">Contact</li>
</ul>
</nav>
The Jquery script
( function( $ ) {
$( document ).ready(function() {
// Cache the elements we'll need
var menu = $('#cssmenu');
var menuList = menu.find('ul:first');
var listItems = menu.find('li').not('#responsive-tab');
// Create responsive trigger
menuList.prepend('<li id="responsive-tab">Digi-Co</li>');
// Toggle menu visibility
menu.on('click', '#responsive-tab', function(){
listItems.slideToggle('fast');
listItems.addClass('collapsed');
});
});
} )( jQuery );
The css can also be found
here
Any help will be appreciated
Thank you.
i am using bootstrap sticky menu , now for dropdown when I hover over parent menu sub menu is displayed but parent menu is not highlighted as I go one level down .
here you can see washing and cleaning comes under services .
What I want is the menu services should be highlighted as washing is at the moment this is my html structure
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active">Home</li>
<li>About us</li>
<li>About us</li>
<li class="dropdown">
Services
<ul class="dropdown-menu">
<li>Cleaning </li>
<li>Washing</li>
</ul><!-- end dropdown-menu -->
</li>
</ul>
http://www.bootply.com/j4dAggAcCh
You probably missing the :focus on your menu link. This keeps your link highlighted when your in a subnav.
So what I should try in your CSS:
.dropdown-toggle:focus{
color: red;
}
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.