I'm making a dropdown menu in bootstrap.
Now I use in the li a a element where is described to toggle the dropdown menu.
But I actually want to put what is in the a element in to the li...
Because the whole li has to be clickable.
Hope you guys have I tip for me. ;)
<ul class="list-group">
<li class="list-group-item">
<a class="dropdown-toggle" data-toggle="dropdown">
Applicatie Ontwikkeling
</a>
<ul class="dropdown-menu">
<li class="list-group-item">HTML</li>
<li class="list-group-item">CSS</li>
<li class="list-group-item">jQuery</li>
</ul>
</li>
<li class="list-group-item">Netwerk Beheer</li>
<li class="list-group-item">Server Beheer</li>
</ul>
please apply 'dropdown' class to the li where you wants to add dropdown like this.
<ul class="list-group">
<li class="list-group-item dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">
Applicatie Ontwikkeling
</a>
<ul class="dropdown-menu">
<li class="list-group-item">HTML</li>
<li class="list-group-item">CSS</li>
<li class="list-group-item">jQuery</li>
</ul>
</li>
<li class="list-group-item">Netwerk Beheer</li>
<li class="list-group-item">Server Beheer</li>
You can just make the a tag take full width and then the entire li becomes clickable.
.dropdown-toggle{
display:inline-block;
width: 100%;
cursor: pointer;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<ul class="list-group">
<li class="list-group-item">
<a class="dropdown-toggle" data-toggle="dropdown">
Applicatie Ontwikkeling
</a>
<ul class="dropdown-menu">
<li class="list-group-item">HTML</li>
<li class="list-group-item">CSS</li>
<li class="list-group-item">jQuery</li>
</ul>
</li>
<li class="list-group-item">Netwerk Beheer</li>
<li class="list-group-item">Server Beheer</li>
</ul>
Related
I have a dropdown menu inside bootstrap nav tabs. But a particular dropdown item only hovers for a limited width.
the code snippet :
<ul class="page-title__nav common-list nav nav-tabs">
<li class="dropdown">
Inventory<b class="caret"></b>
<ul class="dropdown-menu">
<li style="margin-left: 15px;"><a data-toggle="tab" onclick="loadCategories()">Categories</a></li><br>
<li><a data-toggle="tab" onclick="loadItems()">Items</a></li><br>
<li><a data-toggle="tab" onclick="loadModifierGroups()">Modifier Groups</a></li><br>
</ul>
</li>
</ul>
The view :
Have you tried to remove style="margin-left: 15px;" from you first element
ok try this
<ul class="page-title__nav common-list nav nav-tabs">
<li class="dropdown">
Inventory<b class="caret"></b>
<div class="dropdown-menu">
<a data-toggle="tab" onclick="loadCategories()">Categories</a>
<a data-toggle="tab" onclick="loadItems()">Items</a>
<a data-toggle="tab" onclick="loadModifierGroups()">Modifier Groups</a>
</div>
</li>
</ul>
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 a bootstrap template I am practising on. In the navbar there is "Blog" and "Test"
On the test button, I removed the li class="dropdown ", because I wanted to try to make a button where the hover is active like on the "blog" button. But when I hover over the test, the text only display blue, on there is not a white background.
I cannot figure out how I can make that work? I have to make a CSS class for a button on the navbar, who does not have a dropdown.
For fun sake I tried to delete all the CSS, but the hover was still working on the blog button.
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<!-- main-menu -->
<ul class="nav navbar-nav ">
<li class="dropdown ">
Blog
<ul class="dropdown-menu">
<li >Blog Home <span class="badge">v1.1</span></li>
<li >Blog Home 2 <span class="badge">NEW</span></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav ">
<li>
Test
<ul class="dropdown-menu">
<li >Blog Home <span class="badge">v1.1</span></li>
<li >Blog Home 2 <span class="badge">NEW</span></li>
<li class="dropdown ">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Large Image</a>
<ul class="dropdown-menu to-left">
<li >Right Sidebar</li>
<li >Left Sidebar</li>
<li >Without Sidebar</li>
</ul>
</li>
<li class="dropdown ">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Medium Image</a>
<ul class="dropdown-menu to-left">
<li >Right Sidebar</li>
<li >Left Sidebar</li>
<li >Without Sidebar</li>
</ul>
</li>
<li class="dropdown ">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Masonry</a>
<ul class="dropdown-menu to-left">
<li >Right Sidebar</li>
<li >Left Sidebar</li>
<li >Without Sidebar</li>
</ul>
</li>
<li >Timeline</li>
<li >Blog Post</li>
</ul>
</li>
</ul>
</div>
To style your links within navigation menus you have to add one of these lines in your CSS file according to your HTML
(1) if the main parent div is .navbar-collapse:
.navbar-collapse .navbar-nav>li a{background-color:#fff;}
(2) if the main parent is Navbar-default:
.navbar-default .navbar-nav>li a {background-color:#fff;}
(3) if the main parent is navbar-inverse:
.navbar-inverse .navbar-nav>li a{background-color:#fff;}
And something like this depending on the main parent class and the class with in ul tag
The dropdown in the navigation is not working. The html is as follows. Help will be appreciated.
<div class="row menu_bg">
<div class="container">
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>SVN</li>
<li>iOS</li>
<li>VB.Net</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Java <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Swing</li>
<li>jMeter</li>
<li>EJB</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li>PHP</li>
</ul>
</div>
Your html is fine the only thing missing is the jQuery code and the bootstrap js, add these in the same order under your last </div>.
<script src="https://code.jquery.com/jquery-1.11.1.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
You need to include the bootstrap and jquery libraries, they handle the logic for displaying the dropdown interface working example below:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
<div class="row menu_bg">
<div class="container">
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>SVN</li>
<li>iOS</li>
<li>VB.Net</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Java <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Swing</li>
<li>jMeter</li>
<li>EJB</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li>PHP</li>
</ul>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.1.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>
</html>
You had a container inside a row and content inside a container, I've corrected that. The correct hierarchy is container => row => col-??-##. If you put it in any other order, it will malfunction. This should work. I'm assuming you've added thetag for bootstrap.min.js (or whatever flavor you prefer) andjquery`. If not, please do so.
<div class="container menu_bg">
<div class="row">
<div class="col-lg-12">
<ul class="nav nav-tabs">
<li role="presentation" class="active">Home</li>
<li role="presentation">SVN</li>
<li role="presentation">iOS</li>
<li role="presentation">VB.Net</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Java<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Swing</li>
<li>jMeter</li>
<li>EJB</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li>PHP</li>
</ul>
</div>
</div>
</div>
I have this in my HTML , I am using bootstrap 3 classes to make a drop down with in another drop down.
<div class="subnav">
<ul class="nav-pills">
<li class="dropdown" style="float: right;">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" >
<span id="spnUsrName">Welcome, {{usrName}}</span>
</a>
<ul class="dropdown-menu pull-right">
<li class="disabled" >Disabled link 1</li>
<li class="disabled" >Disabled link 2</li>
<li class="divider"></li>
<li class="dropdown-submenu">Settings
<ul class="dropdown-menu">
<li>Change Password</li></ul>
</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
However, the 'ul' inside the first dropdown-meu is not showing up. The "Settings" option is displayed, but change password option is not displayed. Where have I gone wrong.