I am creating a navigation bar for my website. One of the items has a sub-sub-menu and for some reasons, it is always expanded and it hides the rest of the sub-menu as it drops down and I can't manage to make it drop to the right side.
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Nos Projets <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-header">Soutien à nos familles parrainées</li>
<li class="sub-item-menu">Bouse d'étude universitaire</li>
<li class="sub-item-menu">Amélioration de l'habitat</li>
<li class="divider"></li>
<li class="dropdown-header">Autres projets</li>
<li class="sub-item-menu dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Construction d'écoles <b class="caret"></b></a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li class="sub-item-menu">Meo-Vac 2015-2016</li>
<li class="sub-item-menu">Meo-Vac 2013-2014</li>
</ul>
</li>
<li class="sub-item-menu">Phuc Tue</li>
<li class="sub-item-menu">Blue Dragon</li>
<li class="sub-item-menu">School on the Boat</li>
<li class="divider"></li>
<li>Archives</li>
</ul>
</li>
I have used the dropdown-menu-right but that doesn't seem to do anything.
Any advice on how to make it drop on the right?
In currently, the .dropdown-menu has some style rules that make it stay at left include:
left: 0;
float: left;
You need to override those rules to have dropdown to right. Example:
left: auto;
right: 0;
float: right;
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.
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 can't get the background colour of my dropdown to change when it's open.
My CSS code is
.dropdown.open {
background-color: black;
}
My HTML is
<ul class="nav navbar-nav navbar-right">
<li>WEB DEVELOPMENT</li>
<li>PROGRAMMING</li>
<li>DESIGN</li>
<li><a href="#game-hidden" ></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false"
onClick="TypeGameDesign()">
GAME DEVELOPMENT
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Unity3D</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Coming...</li>
<li>UE4</li>
<li>VR</li>
</ul>
</li>
</ul>
The background color belongs to the a. So, use this:
.dropdown.open > a {
background-color: #000 !important;
}
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
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>