Skip to content

Instantly share code, notes, and snippets.

@SimonPadbury

SimonPadbury/hovernav.css

Last active April 4, 2019 00:29
Show Gist options
  • Star 26 You must be signed in to star a gist
  • Fork 10 You must be signed in to fork a gist
  • Save SimonPadbury/6774640 to your computer and use it in GitHub Desktop.
Save SimonPadbury/6774640 to your computer and use it in GitHub Desktop.
Download ZIP
This is a simple supplement for Bootstrap 3 to transform the navbar so that the dropdown menu appears on hover instead of on click. No need to modify the Bootstrap 3 js or css at all – simply add this js and css below to your js and css files that are <head> linked *after* the Bootstrap 3 js and css files. Styles for both .navbar-default and .na…
Raw
hovernav.css
/*
Navbar "hovernav" dropdown menu - this works only for screen sizes larger than phones.
The Bootstrap CSS is unchanged.
*/
@media (min-width: 768px) {
.navbar-nav .open ul {
display: none;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #555;
background: none;
}
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
color: #969696;
background: none;
}
.navbar-nav .hovernav:hover > .dropdown-menu {
display: block;
}
}
Raw
hovernav.js
$(document).ready(function() {
// "Hovernav" navbar dropdown on hover
// Uses jQuery Media Query - see http://www.sitepoint.com/javascript-media-queries/
var mq = window.matchMedia('(min-width: 768px)');
if (mq.matches) {
$('ul.navbar-nav > li').addClass('hovernav');
} else {
$('ul.navbar-nav > li').removeClass('hovernav');
};
// The addClass/removeClass also needs to be triggered on page resize <=> 768px
function WidthChange(mq) {
if (mq.matches) {
$('ul.navbar-nav > li').addClass('hovernav');
} else {
$(‘.hovernav a’).unbind(‘click’);
$('ul.navbar-nav > li').removeClass('hovernav');
}
}
if (matchMedia) {
var mq = window.matchMedia('(min-width: 768px)');
mq.addListener(WidthChange);
WidthChange(mq);
}
// Restore "clickable parent links" in navbar
$('.hovernav a').click(function () {
window.location = this.href;
});
});
@mokanfar
Copy link

mokanfar commented Apr 3, 2015

Thanks a lot 😃

@demartini
Copy link

Perfect! Thanks so much!

@saadhre
Copy link

saadhre commented May 20, 2015

Thank you!

@prasadhbaapaat
Copy link

Thanks a ton :)

@simonrepp
Copy link

Hi Simon - thank you for this great gist, works very well!

I have two small reports:

  • The recently added line 29 in hovernav.js uses backticks instead of single quotes, which should work in ES2015 but is inconsistent with the rest, and I guess it just happened by accident anyway.
  • As Chrome interprets middle-click as click event as well, opening a new tab with middle click on a top-level menu item also reloads the page in the current tab. That's more of an observation though, I think it's fine for you to leave it like it is. (I'll have to fix it internally for my project though, and if I can come up with a good generic solution I'll let you know :))

Update:
Regarding the 2nd report I went the short road and rewrote the click binding as follows ...

$('.hovernav a').mousedown(function(event) {
  if(event.which === 1) {
    window.location = this.href;
  }
});

(But I don't think this is a good generic solution, just mentioning it for the record. :))

@EugenAz
Copy link

EugenAz commented Jan 14, 2016

Is it an easter egg on 29th line of js? :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment