Łukasz Trocha
Reputation: 23
How to disable dropdown on hover when navbar's collapsed?
I tried tu use this solution to disable dropdown on hover only when navbar is collapsed Disable dropdown on hover for bootstrap when navbar is collapsed But it doesn't work correctly :(
When I'm using page on mobile or tablets dropdown on hover is annoying. I want to make dropdown only by click when navbar is collapsed.
/*
* Project: Twitter Bootstrap Hover Dropdown
* Author: Cameron Spear
* Contributors: Mattia Larentis
*
* Dependencies?: Twitter Bootstrap's Dropdown plugin
*
* A simple plugin to enable twitter bootstrap dropdowns to active on hover and provide a nice user experience.
*
* No license, do what you want. I'd love credit or a shoutout, though.
*
* http://cameronspear.com/blog/twitter-bootstrap-dropdown-on-hover-plugin/
*/
;
(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(),
defaults = {
delay: 500,
instantlyCloseOthers: true
},
data = {
delay: $(this).data('delay'),
instantlyCloseOthers: $(this).data('close-others')
},
settings = $.extend(true, {}, defaults, options, data),
timeout;
$this.hover(function() {
if (settings.instantlyCloseOthers === true)
$allDropdowns.removeClass('open');
window.clearTimeout(timeout);
$(this).find('.dropdown-menu').filter(':first').slideDown();
$(this).addClass('open');
}, function() {
timeout = window.setTimeout(function() {
$this.find('.dropdown-menu').slideUp();
$this.removeClass('open');
}, settings.delay);
});
});
};
// apply dropdownHover to all elements with the data-hover="dropdown" attribute
$(document).ready(function() {
$('[data-hover="dropdown"]').dropdownHover();
});
})(jQuery, this);// Custom styles
html {
position: relative;
min-height: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Open Sans', sans-serif;
}
// a {
// text-decoration: none !important;
// }
.overflow {
overflow: hidden;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
clear: both;
}
.navigation {
-webkit-box-shadow: inset 0px -2px 0px 0px #d3cdc4;
-moz-box-shadow: inset 0px -2px 0px 0px #d3cdc4;
box-shadow: inset 0px -2px 0px 0px #d3cdc4;
}
.navbar {
margin-bottom: 0;
position: relative;
a {
text-shadow: none !important;
color: @gray !important;
cursor: default !important;
font-weight: 400;
font-size: 15px;
}
.nav {
text-shadow: none !important;
margin-top: 34px;
.info {
a {
padding: 0 0 0 5px;
}
span {
padding: 0 !important;
top: 12px;
font-size: 16px;
color: @projectLightBlue;
}
}
.active {
a {
background: none !important;
border-bottom: 2px solid@projectLightBlue;
color: @projectLightBlue !important;
text-shadow: none;
.box-shadow(none);
&: hover {
.box-shadow(none);
}
}
}
.non-active {
a {
background: none !important;
border-bottom: 2px solid transparent;
text-shadow: none;
.box-shadow(none);
}
}
}
.navbar-info {
position: absolute;
right: 0;
margin-top: 5px;
color: @grayLight;
a {
color: @grayLight !important;
font-size: 14px;
}
span {
font-size: 12px;
color: @grayLight;
}
.glyphicon-phone-alt {
top: 0px;
}
}
.dropdown {
border-bottom: none !important;
// .caret {
// border-top-color: @gray !important;
// }
span {
font-size: 8px;
top: -2px;
}
.dropdown-menu {
margin: 0;
padding: 0;
border: 1px solid #eee;
-webkit-box-shadow: 0px -2px 0px 0px@projectLightBlue;
-moz-box-shadow: 0px -2px 0px 0px@projectLightBlue;
box-shadow: 0px -2px 0px 0px@projectLightBlue;
background: @white;
.border-radius(0);
font-size: 13px !important;
&: before, &: after {
content: none !important;
}
li {
margin-left: 0px;
}
a {
padding: 5px 15px;
color: @gray !important;
font-weight: 400;
border-bottom: none !important;
.transition(all 0.3s);
&: hover {
background: lighten(@gray, 10%) !important;
color: @white !important;
}
}
.active-dropdown {
a {
padding: 5px 15px;
background: lighten(@gray, 10%) !important;
color: @white !important;
font-weight: 400;
border-bottom: none !important;
.transition(all 0.3s);
}
}
}
}
.open {
.dropdown-toggle {
background: none !important;
border-bottom: 2px solid@projectLightBlue;
}
}
.brand {
padding: 25px 0;
margin: 0;
border-bottom: none;
&: hover {
background: none !important;
}
}
.navbar-inner {
padding: 0;
background: none;
border: none;
.border-radius(0);
.box-shadow(none);
}
.btn-navbar {
background: @projectLightBlue;
margin: 40px 0 0 0;
border: none;
.border-radius(0);
&: hover {
background: @gray !important;
}
}
}
.slider-underline {
border-bottom: 2px solid #d3cdc4;
// height: 2px;
// width: 100%;
// background: #d3cdc4;
// position: absolute;
}
.reason {
overflow: hidden;
margin-bottom: 10px;
padding: 15px 15px 10px;
}
@media (max-width: @navbarCollapseWidth) {
body {
width: 100%;
padding: 0;
margin: 0;
}
.navbar {
.brand {
padding-left: 10px !important;
}
.navbar-info {
padding-right: 10px !important;
}
.btn-navbar {
margin-right: 10px !important;
}
.nav {
margin-top: 0;
a {
.border-radius(0) !important;
font-weight: 400 !important;
border-bottom: 1px solid@grayLighter !important;
margin-bottom: 0px !important;
}
.active {
a {
border-bottom: none !important;
background: @projectLightBlue !important;
color: @white !important;
text-shadow: none;
.box-shadow(none);
&: hover {
.box-shadow(none);
}
}
}
.active,
.non-active {
.dropdown-menu {
a {
background: none !important;
color: @grayLight !important;
padding-left: 25px;
&: hover {
color: @gray !important;
}
}
.active-dropdown {
background: @grayLight !important;
a {
color: @white !important;
}
}
}
}
.dropdown-menu {
.box-shadow (none);
border: none !important;
a {
border-bottom: 1px solid@grayLighter !important;
}
}
.last {
a {
border-bottom: none !important;
}
}
.info {
display: none;
}
}
}
}
@media (min-width: 768px) and (max-width: 979px) {
.navbar {
.brand {
padding-left: 0px !important;
}
.navbar-info {
padding-right: 0px !important;
}
.btn-navbar {
margin-right: 0px !important;
}
}
}<div class="wide navigation">
<div class="container">
<div class="row">
<div class="span12">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand pull-left" href="#">LOGO</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li class="dropdown active">
<a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0">
HOME
<span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true">
</a>
<ul class="dropdown-menu">
<li class="active-dropdown"><a href="#">Option 1</a>
</li>
<li><a href="#">Option 2</a>
</li>
<li class="last"><a href="#">Option 3</a>
</li>
</ul>
</li>
<li class="dropdown non-active">
<a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0">
YOUR SERVICES
<span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true">
</a>
<ul class="dropdown-menu">
<li><a href="#">Option 1</a>
</li>
<li><a href="#">Option 2</a>
</li>
<li class="last"><a href="#">Option 3</a>
</li>
</ul>
</li>
<li class="dropdown non-active">
<a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0">
PRICE-LIST
<span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true">
</a>
<ul class="dropdown-menu">
<li><a href="#">Option 1</a>
</li>
<li><a href="#">Option 2</a>
</li>
<li class="last"><a href="#">Option 3</a>
</li>
</ul>
</li>
<li class="dropdown non-active">
<a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0">
GALLERY
<span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true">
</a>
<ul class="dropdown-menu">
<li><a href="#">Option 1</a>
</li>
<li><a href="#">Option 2</a>
</li>
<li class="last"><a href="#">Option 3</a>
</li>
</ul>
</li>
<li class="dropdown non-active last">
<a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0">
CONTACT
<span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true">
</a>
<ul class="dropdown-menu">
<li><a href="#">Option 1</a>
</li>
<li><a href="#">Option 2</a>
</li>
<li class="last"><a href="#">Option 3</a>
</li>
</ul>
</li>
<li class="info visible-lg-*">
<a href="#" data-toggle="modal" data-target="#nuca"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span></a>
</li>
<!-- Modal -->
<div id="nuca" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Nuca Template</h3>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, reiciendis laborum tenetur, animi architecto ullam facere amet cum quia, quo aut blanditiis quod ut minima aliquid excepturi, quam perspiciatis omnis. Consequuntur
eos, odit molestiae similique reiciendis at cumque eius libero, distinctio repellendus quia perferendis, quod facilis quae ad ab ducimus officia. Minus perspiciatis quia velit, ab doloremque quasi iusto accusantium praesentium
tenetur, obcaecati aperiam accusamus labore aut commodi nisi sunt! Earum consectetur quibusdam culpa, assumenda praesentium cum, modi eligendi magnam laborum voluptatibus nemo animi a ducimus voluptatem. Earum culpa excepturi expedita
tempore in accusamus doloribus impedit fugiat. Laboriosam, placeat, eveniet.</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Zamknij</button>
</div>
</div>
</ul>
</div>
<!-- nav-collapse -->
</div>
<!-- /container -->
</div>
<!-- /navbar-inner -->
</div>
<!-- /navbar -->
</div>
<!-- /span12 -->
</div>
<!-- /row -->
</div>
<!-- /container -->
</div>
<!-- /wide -->Upvotes: 0
Views: 1353
Answers (1)
Jake Taylor
Reputation: 4336
You have a js plugin for dropdown on hover included. Bootstraps menus dropdown on click by default. Remove the javascript and your problem will resolve itself
Upvotes: 1
Related Questions
- Hide a dropdown's subitems when collapsed in Twitter Bootstrap
- Bootstrap dropdown menu when collapsed
- Twitter Bootstrap: How to achieve an always-collapsed navbar dropdown menu?
- How to prevent navbar hiding/collapsing on clicking a particular menu-item which has a dropdown class?
- Bootstrap - how to remove hover effect from collapsed navbar only?
- Disable bootstrap dropdown
- Disabling hover effect after navbar collapses
- Disable dropdown on hover for bootstrap when navbar is collapsed
- Bootstrap dropdown menu show on hover
- Twitter Bootstrap - dropdowns inside navbar but outside nav-collapse