I have a menu which works fine , when i focus out the menu closes automatically as expected .
I have a requirement to add a Drop-down to the menu so i can do my selections respectively but strange thing happening is when i try selecting something in dropdown the menu closes automatically.
Html:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
</div>
<div>
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li><ul class="dropdown"><li><select><option>cool</option><option>cooler</option><option>coolest</option></select></li></ul></li>
<li>Page 1-3</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
sample here which shows the issue
PS: Actually its a IE issue in my local its works fine in chrome tough in fiddle it doesn't work anywhere.
I don't want menu to loose focus when i am selecting something which is inside the menu .
Related
When I open up the dropdown menu, only the Home tab is clickable. The rest act like regular text...
<nav class="navbar">
<ul class="nav navbar-nav ">
<li class="aktivan">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Cakes</li>
<li>Muffins</li>
<li>Coffee</li>
</ul>
</li>
<li>About us</li>
<li>Orders</li>
</ul>
</nav>
Removing the href="#" from the dropdown-toggle should fix it
To keep URLs intact with link buttons, use the data-target attribute instead of href="#"
dropdowns via data attributes
I believe the href attribute is assigning the target # for the dropdown causing it not to work.
This is a code for a part of navbar I am trying to make. For the "our tracks" section, I have a link for it, but it doesn't open because clicking on it opens the drop-down menu. I want this menu to open only when it is hovered on, not clicked on.
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">About
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle"
href="our%20tracks.html">Our Tracks<b> class="caret"></b></a>
<ul class="dropdown-menu">
<li>Robotics</li>
<li>Automation</li>
<li>Programming</li>
<li class="divider"></li>
</ul>
</li>
</div>
Then you got to write your own custom JQuery code to overwrite the default bootstrap behavior, like so:
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
I've been trying to make a fluid drop-down menu like the on in udemy(https://i.imgur.com/nrorrMo.png) but the options inside my drop-down doesn't appear. Is there is anything i'm doing wrong?
<ul class="nav navbar-nav">
<li class="dropdown">
Heading 1
<div class="dropdown-menu multi-column" style="width: 100%;">
<div class="row">
<div class="col-md-4">
<ul class="dropdown-menu">
<li>Opt 1</li>
<li> Opt 2</li>
</ul>
</div>
</div>
</li>
</ul>
Your error comes with the use of the class="dropdown-menu" on the UL tag inside of the div.dropdown-menu. If you remove that class, you will see the content inside the dropdown.
With my HTML code I have created a dropdown menu within a tab. I need to add content to those individual "tabs" in the dropdown menu. I need help linking those together.
<div class="container">
<ul class="nav nav-tabs">
<li class="active tab_class" style="background: #009933"><a data-toggle="tab" href="#about">About</a></li>
<li class="dropdown">
<a class="dropdown-toggle" style="background: #009933" data-toggle="dropdown" href="#">Teaching
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Submenu 1-1</li>
<li>Submenu 1-2</li>
<li>Submenu 1-3</li>
</ul>
</li>
<li class = "tab_class" style="background: #009933"><a data-toggle="tab" href="#research">Research</a></li>
</ul>
</div>
This is currently what my code looks like creating the tabs. How can I correctly use classes and href to add content to each subtab within? I am thinking I may not have correctly made subtab's active, but i'm also not sure how to go about doing that. I am also using bootstrap within HTML and have that correctly imported.
Any help would be appreciated! Thanks
What is the best way to toggle display of my second level dropdown menu when hovering over "a"...not when hovering over the full "li"?
I use bootstrap and fiddle is : http://jsfiddle.net/2Smgv/3100/
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<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>
</ul>
</li>
<li>Another action</li>
<li>Something else here</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>
I did not understand your question originally, and have updated my "answer" as such:
It is not possible to complete the modification you are requesting because the hover would be broken. The display of and ability to mouse over sublist items functions because those items are within the parent list. If you change the hover to the anchor tag, once you attempt to use the links within the subnav you will be outside of the anchor tag and thus removing the hover effect.
If you look at your markup, the "2-level Dropdown" also contains the and the with class .sub-menu. Thus hovering over the sub-menu is also over the parent (2-level Dropdown).
However, the containing "2-level Dropdown" ends with that text and the moving your cursor over the sibling sub-menu means you are no longer hovering over the .
I hope this explains why it is not possible and allows you to gain an understanding of the reasons why.