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.
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.
I have the following bootstrap menu, the last item in this menu is "More" which is a dropdown contains the left items from that menu, the problem is when user minimize the window the last items start hiding include "More" item.
So my question is: how to avoid the last item ("More") from being hide?
I searched the internet I could not find any solution, I found many are talking about pull left but it did not work for me.
Here is my code:
<div class="collapse navbar-collapse " id="category-navbar-collapse-1">
<ul class="nav navbar-nav ">
<li >
a
</li>
<li >
b
</li>
<li >
c
</li>
<li >
d
</li>
<li class="dropdown ">
<a class="dropdown-toggle" data-toggle="dropdown">
More
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
#Html.Action("GetMoreCategories", "Items")
</ul>
</li>
</ul>
</div>
Any suggestion please?
Feel free to ask for more information.
I'd check the styles over - could be some class name with a breakpoint for display:none on that class. Have a look in Devtools and see what it's throwing out?
As far as your code goes, it looks fine so just check over the CSS, positioning and display, etc.
<div class="collapse navbar-collapse" id="category-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
a
</li>
<li>
b
</li>
<li>
c
</li>
<li>
d
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">More
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
#Html.Action("GetMoreCategories", "Items")
</ul>
</li>
</ul>
</div>
My Bootstrap menu doesn't show the submenu dropdown. Here's the code. I'm using Bootstrap 3. The "dropdown-submenu" class I believe should be the one to show the arrow and on click show the submenu ul.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Category
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
Arts
<ul class="dropdown-menu">
<li >
Artist Profiles
</li>
</ul>
</li>
<li >
Buzz Quiz
</li>
<li >
Coast
</li>
<li class="dropdown-submenu">
Crime/Security
<ul class="dropdown-menu">
<li >
Rape Resources
</li>
<li >
Security Overview
</li>
</ul>
</li>
<li >
Environment
</li>
<li class="dropdown-submenu">
Fashion
<ul class="dropdown-menu">
<li >
About FAFA
</li>
<li >
Designers
</li>
</ul>
</li>
</ul>
</div>
Bootstrap 3.3.5 (current) documentation and Bootstrap 3.3.5 CSS file do not contain a definition for dropdown-submenu class.
It means that this class is redundant and does not affect the code at all (of course, if you haven't described it in your own CSS).
Here is the JS Fiddle Demo which works how it should work.
I have found a definition of dropdown-submenu in Bootstrap 2.3.2 but it looks like it is depricated now.
Here is the working JS Fiddle Demo with submenus with Bootstrap 2.3.2.
However, I highly recommend not to use an outdated library because of a single feature.
I'm using Bootstrap to make drop down menus. One of the options I would like to have is two links on the same horizontal row in a dropdown menu. How would I achieve this?
<div class = "navbar">
<div class = "navbar-inner">
<li class = "dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> Dropdown Button
<b class="caret"></b>
</a>
<ul class = "dropdown-menu" role="menu" >
<li>On First Row</li>
<li>On Second Row</li>
<li>On Third RowAlso On Third Row</li>
</ul>
</li>
</div>
</div>
Your solved Code is here >>>>> two links in one dropdown list item
html
<div class="navbar">
<div class="navbar-inner">
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Dropdown Button
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu">
<li>On First Row
</li>
<li>On Second Row
</li>
<li class="hz">On Third RowAlso On Third Row
</li>
</ul>
</li>
</div>
</div>
css
.open> ul>li.hz{
display: inline-flex !important;
}
There is a problem with eirenaios answer:
When the dropdown is contained within a collapsible navbar, multiple <li> will be shown on one line (until it wraps to the next line) when the navbar is collapsed. This looks very ugly and confusing.
Here is the solution, based on eirenaios answer, but works also for toggled (collapsible) navbars with dropdowns:
https://plnkr.co/edit/JnsvKGiBokrI1frxC11P?p=preview
EDIT:
Additional CSS rule:
.open > .dropdown-menu {
display: table-caption;
}
HTML (mostly the same as the original, but surrounded by .navbar-collapse and added .navbar-header with a hamburger menu button to open the collapsed menu):
<nav class="navbar navbar-default">
<div class="navbar-header" data-toggle="collapse" data-target="#navbar0">
<button type="button" class="navbar-toggle">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
</div>
<!-- toggled content -->
<div class="collapse navbar-collapse" id="navbar0">
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdown Menu A <span class="caret"></span>
<ul class="dropdown-menu">
<li class="hz">
Item A1 left
Item A1 right
</li>
<li class="hz">
Item A2 left
Item A2 right
</li>
<li>
Single item A3
</li>
<li class="hz">
Item A3 left
Item A3 right
</li>
</ul>
</li>
</ul>
</div>
</nav>
How do I increase the width on the twitter bootstrap dropdown menu. I need the list to have Alcohol Incidents and Status Reports as an option but the default width is not large enough to encompass that much text.
<li class="dropdown subnavbar-open-right">
<span>Reports/Statistics</span><b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a>USN</a>
<ul class="dropdown-menu">
<li><a>Alcohol Incidents and Status Reports</a></li>
</ul>
Looking at the code you provided I made a test page using Twitter BootStrap's default set up and added your text "Alcohol Incidents and Status Reports" into the drop down menu. What I found is the drop down menu auto expanded to include the entire width of the text.
This means that either you have left some code out necessary for this to work correctly or you overriding CSS classes causing it not to work. Here is the code:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Alcohol Incidents and Status Reports</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
If this does not help you then you may want to provide more of your code so people can help you debug. I have a link to JSFiddle but it seems that we are not allowed to post those links now. Well here its extension /tS95X/1/ if you want to look it up.