I am new in bootstrap,the dropdown won't hide, i want dropdown when
i hover on the link, but its show always, advance thanks to
everyone. here is the code
<nav>
<ul class="nav navbar-nav main-navigation">
<li>HOME</li>
<li>PORTFOLIO</li>
<li>BLOG</li>
<li>PAGES</li>
<li>FEATURES</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">MEGA MENU</a>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</nav>
You can also use Jquery:
https://jsfiddle.net/2w4n7pho/
<script>
$(function(){
$("li.dropdown").hover(function(){
$(this).toggleClass("open");
});
});
</script>
By default, the Bootstrap (3.0+) dropdown menu only appears/disappears on click. This behavior would need to be overruled through CSS or JS. If you want to simply have the dropdown appear on hover while preserving the click to drop down functionality on mobile, something like this should suffice:
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
Demonstration: http://www.bootply.com/tpCO1Nb4E8
Related
In this case, menu dropdown 1 appear when dropdown 1 clicked and if you click dropdown 2, menu dropdown 2 will appear.
How to make dropdown hover after dropdown clicked ?
So, if I click dropdown 1, menu dropdown 1 will appear, when I hover to dropdown 2, menu dropdown 2 will appear without I click again. How to make it ?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li class="dropdown">
Dropdown 1<span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
Dropdown 2<span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</nav>
I guess you'd have to make your own dropdown yourself. Bootstrap, I don't think was built the way you expect.
Could you please help me to do menu:
I found a link like that
`http://jsfiddle.net/KyleMit/6cu8f43m/`
but it doesn't get full width navbar with a container menu items
In that code also mentioned that details for full-width sub-menu items.
choose the full-width in all the li items. like below:
<li class="dropdown full-width">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
Fill Width <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
</a></li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
just change the class of outermost div to navbar instead of container.
Or better just use <nav> </nav> instead of outermost <div class="container"> </div>
Try This
JFiddle Demo Here
snippet Example Below
.full-width.dropdown {
position: static;
}
.full-width.dropdown > .dropdown-menu {
left: 0;
right: 0;
position: absolute;
}
.full-width.dropdown > .dropdown-menu > li > a {
white-space: normal;
}
.fill-width.dropdown {
position: static;
}
.fill-width.dropdown > .dropdown-menu {
left: auto;
position: absolute;
}
.fill-width.dropdown > .dropdown-menu > li > a {
white-space: normal;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="navbar navbar-inverse">
<!-- Header -->
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
Bootstrap 3 Skeleton
</a>
</div>
<!-- Navbar Links -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown full-width">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
Normal <span class="caret"></span>
</a>
<ul class="dropdown-menu " role="menu">
<li>Action</li>
<li>Another action</li>
<li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
</a></li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown full-width">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
Full Width <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
</a></li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown full-width">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
Fill Width <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
</a></li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
About this SO Question:
<a href='http://stackoverflow.com/q/26147186/1366033'>
How To Restrict Width of Bootstrap 3 Dropdown Menu
</a><br/>
Fork This Skeleton Here:
<a href='http://jsfiddle.net/KyleMit/kcpma/'>
Bootstrap 3 Skeleton
</a><br/>
</div>
Hi I am trying to reproduce the following piece of code which produces a simply dropdown menu in bootstrap:
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
However, I want to be able to include the li tags with angularJS's ng-include...
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<ng-include src="'partials/thisView.html'"></ng-include>
</ul>
</li>
and then in thisView I would have:
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
However the problem is that when I do this, the li tag's parent tag is not the ng-include tag and not the ul tag which causes the formatting to look poorly (none of the bootstrap classes/CSS are applied).
So the DOM looks like this:
<ul class="dropdown-menu role="menu">
<ng-include src="'partials/thisView.html'" class="ng-scope"> <li class="ng-scope">Action</li>
<li class="ng-scope">Another action</li>
<li class="ng-scope">Something else here</li>
<li class="divider ng-scope"></li>
<li class="ng-scope">Separated link</li>
<li class="divider ng-scope"></li>
<li class="ng-scope">One more separated link</li>
</ng-include>
</ul>
Is there a way around this?
You can utilize attribute restriction instead of element restriction (as ng-include supports ECA) and specify ng-include as attribute.
i.e
<ul class="dropdown-menu" role="menu" ng-include="'partials/thisView.html'">
</ul>
I want to keep Bootstrap 3 dropdown menu visible when click anywhere in the dropdown menu. But it will be hidden when click on anywhere outside of the dropdown menu.
<li class="dropdown">
Location <b class="caret"></b>
<ul class="dropdown-menu">
<li>Bangladesh</li>
<li>USA</li>
<li>Canada</li>
<li>Japan</li>
<li>China</li>
</ul>
</li>
Try this
HTML
<div class="dropdown" id="open">
<!-- Dropdown Button -->
<button id="dLabel" role="button" href="#"
data-toggle="dropdown" data-target="#"
class="btn btn-primary">
Dropdown <span class="caret"></span>
</button>
<!-- Dropdown Menu -->
<ul class="dropdown-menu" role="menu"
aria-labelledby="dLabel">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
DEMO
You can do this by returning false when anything inside the ul is clicked:
$(function(){
$("#open").find("ul").on("click", function(){
return false;
});
});
JSFiddle
Sorry again but here is my last code and everthing works great except that when i make the jquery the li from 4 to the end moves after the "ul" that i want but i want that li from 4 to the end to move BETWEEN the ul that i want. here is my code:
<nav id="primary_nav">
<ul class="nav" id="nav">
<li id="nav_app_forums" class="left active">Forums</li>
<li id="nav_app_members" class="left ">Members</li>
<li id="nav_app_calendar" class="left ">Calendar</li>
<li id="nav_app_ipchat" class="left ">Chat</li>
<li id="nav_app_ccs" class="left ">Pages</li>
<li id="nav_app_blog" class="left ">Blogs</li>
<li id="nav_app_gallery" class="left ">Gallery</li>
<li id="nav_app_downloads" class="left ">Downloads</li>
</ul>
<ul class="nav">
<li id="nav_other_apps" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="more_apps">More <i class="fa fa-caret-down"></i></a>
<ul id="more" class="dropdown-menu" role="menu">
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <i class="fa fa-caret-down"></i></a>
<ul class="dropdown-menu" role="menu">
<li>Extra Link</li>
<li>Extra Link</li>
<li>Extra Link</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</nav>
if( $('#nav li').length > 5 )
{
$('#nav li:gt(3)').insertAfter('<ul id="more" class="dropdown-menu" role="menu">');
}
i need form you the best code that i have to replace the jquery part or "insert after"
so it the li form 4 to the end would go between the desired ul thanks
Use .appendTo() instead of .insertAfter().
Append puts it inside of the open/closing tags, insert puts it outside the tags.
$('#nav li:gt(3)').appendTo('#more');
JS Fiddle
Try this jsfiddle using .wrapInner
$('#nav li:gt(3)').wrapInner('<ul id="more" class="dropdown-menu" role="menu">');