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 -->
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 am struggling to get my dropdown menu to function properly. I pulled the template for the dropdown straight from the Twitter Bootstrap guide(v3) and tweaked it for my purposes. The app is built in Sinatra, and the code for the dropdown resides in my layout view. The menu works properly from any views the are on the same level as layout, but when clicking on the dropdown from any view located in a subdirectory, clicking it just appends a # to the end of the URL and the menu does not drop down.
<li class="dropdown">
<a data-target="#" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Campaigns <span class="caret"></span></a>
<ul class="dropdown-menu">
<% current_user.campaigns.each do |campaign| %>
<li><%= campaign.name %></li>
<% end %>
<li role="separator" class="divider"></li>
<li>New Campaign</li>
</ul>
</li>
Any help is greatly appreciated!
Use jQuery for multi level dropdown, if that's what you are looking for.
Substitute your dropdown data into this.
$(document).ready(function() {
$('.dropdown-submenu a.test').on("click", function(e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">MENU
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">List 1</a></li>
<li><a tabindex="-1" href="#">List 2</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li class="dropdown-submenu">
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
I want user to be able to select everything within Morphological Transformation (Erosion, Dilation, Opening, Closing), but not 'Morphological Transformation' itself. Thank you for every answer!
HTML Code:
<div class="container">
<div class="row">
<hr>
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
Select Pre-Processing Method <span class="caret"></span>
</a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li>Normalisation</li>
<li>Canny Edge Detection</li>
<li>Smoothing</li>
<li></li>
<li class="divider"></li>
...
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Morphological Transformation</a>
<ul class="dropdown-menu">
<li><a>Erosion</a></li>
<li><a>Dilation</a></li>
<li><a>Opening</a></li>
<li><a>Closing</a></li>
</ul>
</li>
...
</ul>
</li>
</ul>
</div>
</div>
You can disable anchor events and keep hover effects by using this:
.disabled-link:hover{
background: red;
}
.disabled-link:active{
pointer-events: none;
}
Test
It is usable for all modern browsers:
click!
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.