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.
Related
I am using following HTML to create a three level inline list. First Level shows by default on page load. When I click on first level menu i.e. 'Courses' it expands and shows second level menus. But when I click on second level menus i.e. 'Computer Courses' or 'Civil Courses', they do not expand to show third level menus.
Thanks in advance for any help.
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-
haspopup="true" aria-expanded="false">Courses <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-
haspopup="true" aria-expanded="false" >Computer Courses<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a href="#"><i class=" glyphicon glyphicon-menu-
right"></i>IT Advance</a>
</li>
<li class="dropdown-submenu"><a href="#"><i class=" glyphicon glyphicon-menu-
right"></i>Web Designing</a>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-
haspopup="true" aria-expanded="false">Civil Courses<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a href="#"><i class=" glyphicon glyphicon-menu-
right"></i>Civil Survey</a>
</li>
<li class="dropdown-submenu"><a href="#"><i class=" glyphicon glyphicon-menu-
right"></i>Quantity Survey</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I'm not sure how twitter-bootstrap works exactly, but I can imagine having multiple <a> tags with href="#"s messes this up. Moreover, your html is not valid (you can have <ul> as a child of another <ul>) and perhaps wrapping a <ul> within an <a> is also not good practise.
Use javascript onclick functions for the expand behaviour, or dive a little deeper into twitter-bootstrap, in case they do support something like this.
P.S. Consult https://validator.w3.org/nu/#textarea to see what html is valid.
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'm working on a project with bootstrap. I just included a sub menu in the pills navbar but it doesn't work. When I click on messages nothing happens
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active">Home</li>
<li role="presentation">Home</li>
<li class="dropdown" role="presentation">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">About</a>
<ul class="dropdown-menu">
<li>Inbox</li>
<li>Drafts</li>
<li>Sent Items</li>
<li>Trash</li>
</ul>
</li>
<li role="presentation">Users</li>
<li role="presentation">Messages</li>
<li role="presentation">Contact</li>
</ul>
Any help with the script above. Thanks
See how data-toggle="dropdown" is in the anchor tag for About? It appears that you have the dropdown menu under About, not Messages.
Also, be sure to include the Bootstrap JavaScript. There should be a tag like <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> in the <head> section of your HTML. This is what enables the dropdown 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>
I am trying to build my first website using the bootstrap template and I cannot get the dropdown button in the nav bar to show anything or open. It will display everything the way I want it, but the "open" function of it isn't working properly for some reason.
Here is what I have in the HTML part:
<li div class="dropdown">
<a data-toggle="dropdown" href="#" class="dropdown-toggle" data-
toggle="dropdown">General Education <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Composition</li>
<li>American Institutions</li>
<li>Humanities</li>
<li>Physical Sciences</li>
<li>Quantitative Literacy</li>
<li>Fine Arts</li>
<li>Interdisciplinary</li>
<li>Social Sciences</li>
<li>Fine Arts</li>
</ul>
</li>
(I haven't updated all of the target links yet, for now most of them just show as a #)
and for the CSS I have:
.dropdown-toggle:active,
.open .dropdown-toggle {
outline: 0;
}
Please help!
Error in your code <li class="dropdown"> try this code
Your page does not include necessary js files so insert tis line in section
Script
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
HTML
<li class="dropdown">
<a data-toggle="dropdown" href="#" class="dropdown-toggle" data-
toggle="dropdown">General Education <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Composition</li>
<li>American Institutions</li>
<li>Humanities</li>
<li>Physical Sciences</li>
<li>Quantitative Literacy</li>
<li>Fine Arts</li>
<li>Interdisciplinary</li>
<li>Social Sciences</li>
<li>Fine Arts</li>
</ul>
</li>
Example Markup
<!-- start: User Dropdown -->
<li class="dropdown">
<a id= "uname" style="color:#fff;text-shadow:none" class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-user"></i>
Admin
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li></i> Change Password</li>
<li><i class="icon-off"></i> Logout</li>
</ul>
</li>
<!-- end: User Dropdown -->