I'd like to have my Bootstrap menu automatically drop down on hover, rather than having to click the menu title. I'd also like to lose the little arrows next to the menu titles.
To get the menu to automatically drop on hover then this can achieved using basic CSS. You need to work out the selector to the hidden menu option and then set it to display as block when the appropriate li tag is hovered over. Taking the example from the twitter bootstrap page, the selector would be as follows:
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
However, if you are using Bootstrap's responsive features, you will not want this functionality on a collapsed navbar (on smaller screens). To avoid this, wrap the code above in a media query:
#media (min-width: 979px) {
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
}
To hide the arrow (caret) this is done in different ways depending on whether you are using Twitter Bootstrap version 2 and lower or version 3:
Bootstrap 3
To remove the caret in version 3 you just need to remove the HTML <b class="caret"></b> from the .dropdown-toggle anchor element:
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown
<b class="caret"></b> <-- remove this line
</a>
Bootstrap 2 & lower
To remove the caret in version 2 you need a little more insight into CSS and I suggest looking at how the :after pseudo element works in more detail. To get you started on your way to understanding, to target and remove the arrows in the twitter bootstrap example, you would use the following CSS selector and code:
a.menu:after, .dropdown-toggle:after {
content: none;
}
It will work in your favour if you look further into how these work and not just use the answers that I have given you.
Thanks to #CocaAkat for pointing out that we were missing the ">" child combinator to prevent sub menus being shown on the parent hover
I created a pure on hover dropdown menu based on the latest (v2.0.2) Bootstrap framework that has support for multiple submenus and thought I'd post it for future users:
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.nav-tabs .dropdown-menu,
.nav-pills .dropdown-menu,
.navbar .dropdown-menu {
margin-top: 0;
}
.navbar .sub-menu:before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu:after {
border-top: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: 10px;
top: 11px;
left: -6px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
Project name
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
2-level Dropdown <i class="icon-arrow-right"></i>
<ul class="dropdown-menu sub-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form action="" class="navbar-search pull-left">
<input type="text" placeholder="Search" class="search-query span2">
</form>
<ul class="nav pull-right">
<li>Link</li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a class="#" href="#">Menu</a>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
</div>
</div>
<hr>
<ul class="nav nav-pills">
<li class="active">Regular link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu" id="menu1">
<li>
2-level Menu <i class="icon-arrow-right"></i>
<ul class="dropdown-menu sub-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="dropdown">
Menu
</li>
<li class="dropdown">
Menu
</li>
</ul>
Demo
In addition to the answer from "My Head Hurts" (which was great):
ul.nav li.dropdown:hover ul.dropdown-menu{
display: block;
}
There are 2 lingering issues:
Clicking on the dropdown link will open the dropdown-menu. And it will stay open unless the user clicks somewhere else, or hovers back over it, creating an awkward UI.
There is a 1px margin between the dropdown link, and dropdown-menu. This causes the dropdown-menu to become hidden if you move slowly between the dropdown and dropdown-menu.
The solution to (1) is removing the "class" and "data-toggle" elements from the nav link
<a href="#">
Dropdown
<b class="caret"></b>
</a>
This also gives you the ability to create a link to your parent page - which wasn't possible with the default implementation. You can just replace the "#" with whatever page you want to send the user.
The solution to (2) is removing the margin-top on the .dropdown-menu selector
.navbar .dropdown-menu {
margin-top: 0px;
}
I've used a bit of jQuery:
// Add hover effect to menus
jQuery('ul.nav li.dropdown').hover(function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});
Simply customize your CSS style in three lines of code
.dropdown:hover .dropdown-menu {
display: block;
}
There are a lot of really good solutions here. But I thought that I would go ahead and put mine in here as another alternative. It's just a simple jQuery snippet that does it the way bootstrap would if it supported hover for dropdowns instead of just click. I've only tested this with version 3 so I don't know if it would work with version 2. Save it as a snippet in your editor and have it at the stroke of a key.
<script>
$(function() {
$(".dropdown").hover(
function(){ $(this).addClass('open') },
function(){ $(this).removeClass('open') }
);
});
</script>
Basically, It's just saying when you hover on the dropdown class, it will add the open class to it. Then it just works. When you stop hovering on either the parent li with the dropdown class or the child ul/li's, it removes the open class. Obviously, this is only one of many solutions, and you can add to it to make it work on only specific instances of .dropdown. Or add a transition to either parent or child.
If you have an element with a dropdown class like this (for example):
<ul class="list-unstyled list-inline">
<li class="dropdown">
<a data-toggle="dropdown" href="#"><i class="fa fa-bars"></i> Dropdown 1</a>
<ul class="dropdown-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" href="#"><i class="fa fa-user"></i> Dropdown 2</a>
<ul class="dropdown-menu">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
<li>Item D</li>
<li>Item E</li>
</ul>
</li>
</ul>
Then you can have the dropdown menu to be automatically drop down on hover over, rather than having to click its title, by using this snippet of jQuery code:
<script>
$('.dropdown').hover(
function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
},
function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
}
);
$('.dropdown-menu').hover(
function() {
$(this).stop(true, true);
},
function() {
$(this).stop(true, true).delay(200).fadeOut();
}
);
</script>
Here is a demo
This answer relied on #Michael answer, I have made some changes and added some additions to get the dropdown menu work properly
[Update] The plugin is on GitHub and I am working on some improvements (like use only with data-attributes (no JS necessary). I've leaving the code in below, but it's not the same as what's on GitHub.
I liked the purely CSS version, but it's nice to have a delay before it closes, as it's usually a better user experience (i.e. not punished for a mouse slip that goes 1 px outside the dropdown, etc), and as mentioned in the comments, there's that 1px of margin you have to deal with or sometimes the nav closes unexpectedly when you're moving to the dropdown from the original button, etc.
I created a quick little plugin that I've used on a couple sites and it's worked nicely. Each nav item is independently handled, so they have their own delay timers, etc.
JS
// outside the scope of the jQuery plugin to
// keep track of all dropdowns
var $allDropdowns = $();
// if instantlyCloseOthers is true, then it will instantly
// shut other nav items when a new one is hovered over
$.fn.dropdownHover = function(options) {
// the element we really care about
// is the dropdown-toggle's parent
$allDropdowns = $allDropdowns.add(this.parent());
return this.each(function() {
var $this = $(this).parent(),
defaults = {
delay: 500,
instantlyCloseOthers: true
},
data = {
delay: $(this).data('delay'),
instantlyCloseOthers: $(this).data('close-others')
},
options = $.extend(true, {}, defaults, options, data),
timeout;
$this.hover(function() {
if(options.instantlyCloseOthers === true)
$allDropdowns.removeClass('open');
window.clearTimeout(timeout);
$(this).addClass('open');
}, function() {
timeout = window.setTimeout(function() {
$this.removeClass('open');
}, options.delay);
});
});
};
The delay parameter is pretty self explanatory, and the instantlyCloseOthers will instantly close all other dropdowns that are open when you hover over a new one.
Not pure CSS, but hopefully will help someone else at this late hour (i.e. this is an old thread).
If you want, you can see the different processes I went through (in a discussion on the #concrete5 IRC) to get it to work via the different steps in this gist: https://gist.github.com/3876924
The plugin pattern approach is much cleaner to support individual timers, etc.
See the blog post for more.
This worked for me:
.dropdown:hover .dropdown-menu {
display: block;
}
This is built into Bootstrap 3.
Just add this to your CSS:
.dropdown:hover .dropdown-menu {
display: block;
}
Even better with jQuery:
jQuery('ul.nav li.dropdown').hover(function() {
jQuery(this).find('.dropdown-menu').stop(true, true).show();
jQuery(this).addClass('open');
}, function() {
jQuery(this).find('.dropdown-menu').stop(true, true).hide();
jQuery(this).removeClass('open');
});
Just want to add, that if you have multiple dropdowns (as I do) you should write:
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
And it'll work properly.
You can use the default $().dropdown('toggle') method to toggle the dropdown menu on hover:
$(".nav .dropdown").hover(function() {
$(this).find(".dropdown-toggle").dropdown("toggle");
});
The best way of doing it is to just trigger Bootstrap's click event with a hover. This way, it should still remain touch device friendly.
$('.dropdown').hover(function(){
$('.dropdown-toggle', this).trigger('click');
});
In my opinion the best way is like this:
;(function($, window, undefined) {
// Outside the scope of the jQuery plugin to
// keep track of all dropdowns
var $allDropdowns = $();
// If instantlyCloseOthers is true, then it will instantly
// shut other nav items when a new one is hovered over
$.fn.dropdownHover = function(options) {
// The element we really care about
// is the dropdown-toggle's parent
$allDropdowns = $allDropdowns.add(this.parent());
return this.each(function() {
var $this = $(this),
$parent = $this.parent(),
defaults = {
delay: 500,
instantlyCloseOthers: true
},
data = {
delay: $(this).data('delay'),
instantlyCloseOthers: $(this).data('close-others')
},
settings = $.extend(true, {}, defaults, options, data),
timeout;
$parent.hover(function(event) {
// So a neighbor can't open the dropdown
if(!$parent.hasClass('open') && !$this.is(event.target)) {
return true;
}
if(settings.instantlyCloseOthers === true)
$allDropdowns.removeClass('open');
window.clearTimeout(timeout);
$parent.addClass('open');
}, function() {
timeout = window.setTimeout(function() {
$parent.removeClass('open');
}, settings.delay);
});
// This helps with button groups!
$this.hover(function() {
if(settings.instantlyCloseOthers === true)
$allDropdowns.removeClass('open');
window.clearTimeout(timeout);
$parent.addClass('open');
});
// Handle submenus
$parent.find('.dropdown-submenu').each(function(){
var $this = $(this);
var subTimeout;
$this.hover(function() {
window.clearTimeout(subTimeout);
$this.children('.dropdown-menu').show();
// Always close submenu siblings instantly
$this.siblings().children('.dropdown-menu').hide();
}, function() {
var $submenu = $this.children('.dropdown-menu');
subTimeout = window.setTimeout(function() {
$submenu.hide();
}, settings.delay);
});
});
});
};
$(document).ready(function() {
// apply dropdownHover to all elements with the data-hover="dropdown" attribute
$('[data-hover="dropdown"]').dropdownHover();
});
})(jQuery, this);
Sample markup:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="false">
Account <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">My Account</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Change Email</a></li>
<li><a tabindex="-1" href="#">Change Password</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Logout</a></li>
</ul>
</li>
I've managed it as follows:
$('ul.nav li.dropdown').hover(function(){
$(this).children('ul.dropdown-menu').slideDown();
}, function(){
$(this).children('ul.dropdown-menu').slideUp();
});
I hope this helps someone...
This is probably a stupid idea, but to just remove the arrow pointing down, you can delete the
<b class="caret"></b>
This does nothing for the up pointing one, though...
I have published a proper plugin for the Bootstrap 3 dropdown hover functionality, in which you can even define what happens when clicking on the dropdown-toggle element (the click can be disabled):
https://github.com/istvan-ujjmeszaros/bootstrap-dropdown-hover
Why I made it when there are many solutions already?
I had issues with all the previously existing solutions. The simple CSS ones are not using the .open class on the .dropdown, so there will be no feedback on the drop-down toggle element when the drop-down is visible.
The js ones are interfering with clicking on .dropdown-toggle, so the dropdown shows up on hover, then hides it when clicking on an opened drop-down, and moving out the mouse will trigger the drop-down to show up again. Some of the js solutions are breaking iOS compatibility, some plugins are not working on modern desktop browsers which are supporting the touch events.
That's why I made the Bootstrap Dropdown Hover plugin which prevents all these issues by using only the standard Bootstrap javascript API, without any hack. Even the Aria attributes are working fine with this plugin.
This also can do that.
$('.dropdown').on('mouseover',function(){
$(this).find('.dropdown-menu').show();
});
$('.dropdown').on('mouseleave',function(){
$(this).find('.dropdown-menu').hide();
});
If the dropdown has a gap between the hovered element the drop down will immediately close as seen in this GIF
To prevent this behaviour you can add a timeout to the events of 100 ms
let dropdownTimer;
$('.dropdown').on('mouseover', () => {
clearTimeout(dropdownTimer)
$(this).find('.dropdown-menu').show();
});
$('.dropdown').on('mouseleave', () =>{
dropdownTimer = setTimeout(() => {
$(this).find('.dropdown-menu').hide();
}, 100)
});
Also added margin-top:0 to reset the bootstrap css margin for .dropdown-menu so the menu list dosen't dissapear when the user hovers slowly from drop down menu to the menu list.
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
.nav .dropdown-menu {
margin-top: 0;
}
This works for Bootstrap V4
JS:
<script>
$(function() {
$('.dropdown-hover').hover(
function() { $(this).addClass('show'); $(this).find('[data-toggle="dropdown"]').attr('aria-expanded', true); $(this).find('.dropdown-menu').addClass('show'); },
function() { $(this).removeClass('show'); $(this).find('[data-toggle="dropdown"]').attr('aria-expanded',false); $(this).find('.dropdown-menu').removeClass('show'); }
);
});
</script>
Vanilla Bootstrap 4 Dropdown HTML except for the addition of the dropdown-hover class:
<div class="dropdown dropdown-hover">
<button class="btn btn-text dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ABOUT
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
If you don't want to selectively enable the hover feature by using the .dropdown-hover class then simply change the jquery selector from .dropdown-hover to .dropdown.
Use this code to open the submenu on mousehover (desktop only):
$('ul.nav li.dropdown').hover(function () {
if ($(window).width() > 767) {
$(this).find('.dropdown-menu').show();
}
}, function () {
if ($(window).width() > 767) {
$(this).find('.dropdown-menu').hide().css('display','');
}
});
And if you want the first level menu to be clickable, even on mobile add this:
$('.dropdown-toggle').click(function() {
if ($(this).next('.dropdown-menu').is(':visible')) {
window.location = $(this).attr('href');
}
});
The submenu (dropdown-menu) will be opened with mousehover on desktop, and with click/touch on mobile and tablet.
Once the submenu was open, a second click will let you open the link.
Thanks to the if ($(window).width() > 767), the submenu will take the full screen width on mobile.
$('.dropdown').hover(function(e){$(this).addClass('open')})
The very simple solution for version 2, only CSS.
Keeps the same friendly functionality for mobile and tablet.
#media (min-width: 980px) {
.dropdown:hover .dropdown-menu {
display: block;
}
}
This will hide the up ones
.navbar .dropdown-menu:before {
display:none;
}
.navbar .dropdown-menu:after {
display:none;
}
This should hide the drop downs and their carets if they are smaller than a tablet.
#media (max-width: 768px) {
.navbar ul.dropdown-menu, .navbar li.dropdown b.caret {
display: none;
}
}
The jQuery solution is good, but it will need to either deal with on click events (for mobile or tablet) as hover won't work properly... Could maybe do some window re-size detection?
Andres Ilich's answer seems to work well, but it should be wrapped in a media query:
#media (min-width: 980px) {
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
margin-top: 0;
}
.navbar .sub-menu:before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu:after {
border-top: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: 10px;
top: 11px;
left: -6px;
}
}
So you have this code:
<a class="dropdown-toggle" data-toggle="dropdown">Show menu</a>
<ul class="dropdown-menu" role="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
Normally it works on a click event, and you want it work on a hover event. This is very simple, just use this JavaScript/jQuery code:
$(document).ready(function () {
$('.dropdown-toggle').mouseover(function() {
$('.dropdown-menu').show();
})
$('.dropdown-toggle').mouseout(function() {
t = setTimeout(function() {
$('.dropdown-menu').hide();
}, 100);
$('.dropdown-menu').on('mouseenter', function() {
$('.dropdown-menu').show();
clearTimeout(t);
}).on('mouseleave', function() {
$('.dropdown-menu').hide();
})
})
})
This works very well and here is the explanation: we have a button, and a menu. When we hover the button we display the menu, and when we mouseout of the button we hide the menu after 100 ms. If you wonder why I use that, is because you need time to drag the cursor from the button over the menu. When you are on the menu, the time is reset and you can stay there as many time as you want. When you exit the menu, we will hide the menu instantly without any timeout.
I've used this code in many projects, if you encounter any problem using it, feel free to ask me questions.
For the caret... I haven't seen any one specifying simple CSS that totally blocks the caret.
Here you go:
.caret {
display: none !important;
}
Here is the JSFiddle -> https://jsfiddle.net/PRkonsult/mn31qf0p/1/
The JavaScript bit at the bottom is what does the actual magic.
HTML
<!--http://getbootstrap.com/components/#navbar-->
<div class="body-wrap">
<div class="container">
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-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>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</div>
CSS
/* Bootstrap dropdown hover menu */
body {
font-family: 'PT Sans', sans-serif;
font-size: 13px;
font-weight: 400;
color: #4f5d6e;
position: relative;
background: rgb(26, 49, 95);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(26, 49, 95, 1)), color-stop(10%, rgba(26, 49, 95, 1)), color-stop(24%, rgba(29, 108, 141, 1)), color-stop(37%, rgba(41, 136, 151, 1)), color-stop(77%, rgba(39, 45, 100, 1)), color-stop(90%, rgba(26, 49, 95, 1)), color-stop(100%, rgba(26, 49, 95, 1)));
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1a315f', endColorstr='#1a315f', GradientType=0);
}
.body-wrap {
min-height: 700px;
}
.body-wrap {
position: relative;
z-index: 0;
}
.body-wrap: before,
.body-wrap: after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: -1;
height: 260px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(26, 49, 95, 1)), color-stop(100%, rgba(26, 49, 95, 0)));
background: linear-gradient(to bottom, rgba(26, 49, 95, 1) 0%, rgba(26, 49, 95, 0) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1a315f', endColorstr='#001a315f', GradientType=0);
}
.body-wrap:after {
top: auto;
bottom: 0;
background: linear-gradient(to bottom, rgba(26, 49, 95, 0) 0%, rgba(26, 49, 95, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#001a315f', endColorstr='#1a315f', GradientType=0);
}
nav {
margin-top: 60px;
box-shadow: 5px 4px 5px #000;
}
Then the important bit of JavaScript code:
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
Related
I wanna make a menu very small, so i have the initial letter for each name and i add "focus" but what i want its to appear the full word.
ex:
css:
.menu:focus {
}
php:
<nav>
<li class="menu"><a href="home.php>h</a></li><br>
<li class="menu"><a href="galery.php>g</a></li>
</nav>
and so you simply see the menu like:
h
g
and if you click in h for ex. you would see:
home
g
how can i do it?
and then if click again go to the link page.
is it possible?
edit
php:
<nav>
<li>
<span class="m">
H
</span>
<span class="f">
<a class="menu" href="home.php">
Home
</a>
</span>
</li>
</span>
css:
nav li .f {
display: none;
}
nav li:hover .f {
display: inline;
background-color: #202020;
}
until here ok, you pass by and it shows the full word with the link, but the objective its not just pass by, its to click on it i just change hover to focus and it stops working.
also the hover ".m" display none its not working. it should switch isnt it possible ?
css:
nav li:focus .f {
display: inline;
background-color: #202020;
}
nav li: hover .m {
display: none;
}
Thanks
i have created fiddle for u do you want something like this .
<nav>
<li class="menu">
<a href="home.php">
<span class="test">h</span><span class="test2">ome</span>
</a>
</li>
<li class="menu">
<a href="home.php">
<span class="test">g</span><span class="test2">alery</span>
</a>
</li>
nav li a .test2{display:none}
nav li a:focus .test2, nav li a:hover .test2{display:inline}
OR if you want javascript solution here is code for u
html
<nav class="nav">
<li class="menu">
<a href="javascript:;" data-url="home.php">
<span class="test">h</span><span class="test2">ome</span>
</a>
</li>
<li class="menu">
<a href="javascript:;" data-url="gallary.php">
<span class="test">g</span><span class="test2">alery</span>
</a>
</li>
CSS
nav li.menu a .test2{display:none;}
nav li.menu a .test2.open{display:inline;}
Jquery
$(".nav>li>a").click(function(e) {
var trig = false;
var links = $(this).data("url");
$(this).children(".test2").addClass("open");
if(trig == false){
$(this).click(function(e) {
window.location.href = links;
});
}
});
http://jsfiddle.net/ismailfarooq/p667L2y0/
I am using bootstrap 3 and I am trying to display a horizontal flyout menu when the user hovers over the link:
<div class="dropdown">
<a class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="md-extension"></span>
</a>
<ul class="dropdown-menu abcdef" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</div>
<style>
.abcdef li {
float: left;
}
#dropdownMenu1:hover + ul.dropdown-menu, ul.dropdown-menu:hover, ul.dropdown-menu li:hover {
display: block;
}
</style>
When I hover over the link, the flyout menu does display horizontally. However, when I attempt to hover over one of the list items, the menu disappears. I want the menu to remain open so the user can click on one of the items.
I "display: block" for the dropdown over hovering various elements, but still the menu does not remain open.
Here is the CSS only solution. How it works: first you attach hover to the .dropdown div instead of the link itself and then using pseudo class create an invisible space between the link and the dropdown menu.
.dropdown:after {
content: "";
position: absolute;
bottom: -10px;
height: 10px;
width: 100%;
left: 0;
display: block;
}
.dropdown:hover > ul.dropdown-menu {
display: block;
}
Example
Like #sherif said. Javascript is your friend here. Example: http://jsfiddle.net/scn9p2gu/2/
Html:
<div class="dropdown">
<a class="dropdown-toggle " id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="md-extension">hello</span>
</a>
<ul class="dropdown-menu abcdef" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</div>
CSS:
.abcdef li {
float: left;
}
.theclass {
display: block;
}
JS:
$("#dropdownMenu1").hover(
function() {
$("ul.dropdown-menu").addClass("theclass");
$("#dropdownMenu1").addClass("theclass");
setTimeout(function(){
$("ul.dropdown-menu").removeClass("theclass");
$("#dropdownMenu1").removeClass("theclass");
}, 3000);
}
);
you can achieve this using js if you want ... DEMO
$(function () {
$(".dropdown").hover(function () {
$('.dropdown-menu', this).stop(true, true).fadeIn("fast");
$(this).toggleClass('open');
}, function () {
$('.dropdown-menu', this).stop(true, true).fadeOut("fast");
$(this).toggleClass('open');
});
});
I using joomla 3.3.3 and boostrap 3.2.0
I have edited joomla menu module source to incorporate bootstrap classes to create drop down menus.
Browser renders drop down list as:
<ul class="nav navbar-nav">
::before
<li class="dropdown hovernav">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">Sample Sites</a>
<ul class="dropdown-menu nav-child unstyled small" role="menu" aria-labelledby="dLabel">
<li class="dropdown hovernav">
<a data-toggle="dropdown" href="/joomla_3_3_3/index.php/sample-sites-2/getting-started">Getting Started</a>
</li>
</ul>
</li>
::after
</ul>
The dropdown itself works fine (including with a third party hover js and css added). For some reason if I use href="#" for the parent of the drop down (so it doesn't link to a page) the li holding the parent drop down gets hidden as shown below:
<ul class="nav navbar-nav">
::before
<li class="dropdown hovernav" style="display: none;"> <===**** DISPLAY NONE GETS ADDED
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">Sample Sites</a>
<ul class="dropdown-menu nav-child unstyled small" role="menu" aria-labelledby="dLabel">
<li class="dropdown hovernav">
<a data-toggle="dropdown" href="/joomla_3_3_3/index.php/sample-sites-2/getting-started">Getting Started</a>
</li>
</ul>
</li>
::after
</ul>
Bootstrap css for the nav li is:
.nav > li {
position: relative;
display: block;
}
.nav > li > a {
position: relative;
display: block;
padding: 10px 15px;
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: #eee;
}
.nav > li.disabled > a {
color: #777;
}
.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
color: #777;
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
}
The display: block on the first nav > li rule seems to get disabled for some reason. Any help would be appreciated.
First up you shouldn't edit the menu module, you should instead create an alternative module layout for it which can then be selected from the (un-hacked) menu module.
What you are seeing is a conflict with Mootools, use of which is not supported in combination with Bootstrap. jQuery and Mootools (specifically mootools-more.js) are conflicting and as Bootstrap is dependant on jQuery you should not be loading Mootools as well.
p.s. There is a joomla.stackexchange.com now :)
I added font-awesome icons to my navbar and styled it with css. All works well except on the link with the dropdown list - once clicked - it shows two icons instead of only one (see screenshot). One is properly placed and the other one appears below the word 'link' and above the dropdown menu.
Here is the html code:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<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>
</ul>
and here the css code:
ul li a:before {
font-family: "FontAwesome";
content: "\f067";
position: absolute;
top: 0;
left: 0;
display: block;
text-align: center;
color: #FFF;
width: 100%;
height: 100%;
margin-top: -26px;
}
I would greatly appreciate it if someone could tell me how to get rid of the icon (=white cross) under the word dropdown.
Thanks in advance for your help.
I think that you are seeing extra + icons because your css selector is incorrect. In actual fact you are probably getting 5 extra + icons (1 for each <a> in the dropdown menu).
To solve this you need to target only the <a>'s under the navbars <ul> not the dropdowns <ul>
try this selector: ul > li > a:before
EDIT
I have forked and corrected your bootply below:
http://www.bootply.com/OSTDVMekNE
The issue was on line 52 of your css (in bootply)
.cross a:before, .cross:hover > a:before {
should have been
.cross > a:before, .cross:hover > a:before {
The thing is that your CSS is applying to way more that you want it to. Your imbedded UL is also triggering your CSS rules. You probably have even more white crosses appearing but you can't see them because your background is white.You should apply a class to the links that you want to have your white cross and then apply the css rules only to that class.
I've been asked to have inline sub-menu items for a site I'm making using Bootstrap.
The default with Bootstrap for drop-down is a nice 'downdown-toggle' class where items are stacked and only width of items with some padding.
How can I adapt that class for the sub-menu background to be 100% screen width, then sub-menu items in container and items (li's) to be inline not stacked? See mock-up image of what I want to achieve.
Note that unlike the current sub-menu, this would need to push all content below down rather than hover over it.
EDIT after mk14 gave really good code below. This is what I get (see image below). I just need items to be in a container (i've shown in yellow) and to push the content of the page down and back up as menu shows and hides. To reiterate, I want the grey background to be 100% width of screen as I said, but items in the container.
Okay, I'm expanding on the first answer based on the comments you made under it and adding more specificity and the media query.
http://jsbin.com/rusup/1/edit
DEMO: http://jsbin.com/rusup/1/
CSS (add your breakpoint when the larger viewport menu kicks in )
#media (min-width:768px) {
body { padding-top: 60px } /* height of the menu collapsed */
.nav-bg {
height: 0px;
width: 100%;
position: absolute;
top: 50px;
background: #e7e7e7;
transition: all .5s ease-in-out;
}
.menu-open .nav-bg { height: 50px } /* change to your height of the child menu */
.menu-open #page {
padding-top:60px;
transition: all .2s ease-in-out;
}
.navbar-nav.nav > li { position: static }
.navbar-nav.nav .dropdown-menu {
left: 0 !important;
right: 0 !important;
box-shadow: none;
border: none;
margin: 0 auto;
max-width: 1170px;
background: transparent;
padding: 0;
}
.navbar-nav.nav .dropdown-menu > li { float: left }
.navbar-nav.nav .dropdown-menu > li > a {
width: auto !important;
background: transparent;
line-height: 49px;
padding-top: 0;
padding-bottom: 0;
margin: 0;
}
}
jQuery:
$('.navbar').append('<span class="nav-bg"></span>');
$('.dropdown-toggle').click(function() {
if (!$(this).parent().hasClass('open')) {
$('html').addClass('menu-open');
} else {
$('html').removeClass('menu-open');
}
});
$(document).on('click touchstart', function (a) {
if ($(a.target).parents().index($('.navbar-nav')) == -1) {
$('html').removeClass('menu-open');
}
});
HTML
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<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>Link</li>
</ul>
<li class="dropdown">
Dropdown 2 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Dropdown 2 Child 1</li>
<li>Dropdown 2 Child 2</li>
<li>Dropdown 2 Child 3</li>
<li>Dropdown 2 Child 4</li>
</ul>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container" id="page">
Me finks this is a page.
</div>
This post covers this topic as a general solution.
Here is an adaptation for bootstrap:
.nav > li{
position: static !important;
}
.dropdown-menu {
left: 0 !important;
right: 0 !important;
}
.dropdown-menu > li{
float: left !important;
}
.dropdown-menu > li > a{
width:auto !important;
}