Skip to content

Instantly share code, notes, and snippets.

@muex

muex/hovernav.css

Forked from SimonPadbury/hovernav.css
Created May 6, 2016 20:42
Show Gist options
  • Save muex/f14920792c6609540b13e31f3ef26215 to your computer and use it in GitHub Desktop.
Save muex/f14920792c6609540b13e31f3ef26215 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) {
/* Use this if you wish to hide the caret
.navbar-nav .caret {
display: none;
}
*/
.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-default .navbar-nav > li:hover {
background: #e7e7e7
}
.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-inverse .navbar-nav > li:hover {
background: #080808
}
.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
*/
if (matchMedia) {
var mq = window.matchMedia('(min-width: 768px)');
mq.addListener(WidthChange);
WidthChange(mq);
}
function WidthChange(mq) {
if (mq.matches) {
$('ul.navbar-nav > li').addClass('hovernav');
// Restore "clickable parent links" in navbar
$('.hovernav a').click(function () {
window.location = this.href;
});
} else {
$(‘.hovernav a’).unbind(‘click’)
$('ul.navbar-nav > li').removeClass('hovernav');
}
};
// Restore "clickable parent links" in navbar
$('.hovernav a').click(function () {
window.location = this.href;
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment