So this is what I have as my top nav bar. I'm using this along with jquery
<nav>
<div class="brand">BRAND</div>
<ul>
<li><a id="home" href="#home">Home</a></li>
<li><a id="about" href="#about">About</a></li>
<li><a id="buy" href="#buy">Buy</a></li>
<li><a id="contact" href="#contact">Contact</a></li>
<li><a id="login" class="active" href="#">Log In</a></li>
</ul>
</nav>
and i'm trying to use this line of code to have it when clicked on one of the options on my nav bar to scroll to that element
$("nav a").on("click", function(e) {
e.preventDefault();
var section = $(this).attr("href");
$("html, body").animate({
scrollTop: $(section).offset().top
}, 850);
});
but it isn't working?
You have to put the id to thelement you want to scroll to not the link itself
$("nav a").on("click", function(e) {
e.preventDefault();
var section = $(this).attr("href");
$("html, body").animate({
scrollTop: $(section).offset().top
}, 850);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div class="brand">BRAND</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Buy</li>
<li>Contact</li>
<li><a class="active" href="#">Log In</a></li>
</ul>
</nav>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="home">
example
</div>
You've put the ids on the wrong elements. Each of your links is set to target itself -- so the browser scrolls to the link that was just clicked, which is already visible.
Place id="…" on the element that you want to scroll to, not the link.
I am a noob with anything JS, I have a menubar for a onepage website that works to scroll the page but will not open external links, could one of you guys please help? Code Below, site can be viewed at http://protocol-labs.com/new
html
<div class="collapse navbar-collapse navbar-right" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="">Services</li>
<li class="">About</li>
<li class="">Testimonial</li>
<li class="">Contact</li>
</ul>
</div>
js that is causing the issue
(function ($) {
// Add smooth scrolling to all links in navbar
$(".navbar a,a.btn-appoint, .quick-info li a, .overlay-detail a").on('click', function(event) {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
window.location.hash = hash;
});
});
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar-default").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
})(jQuery);
You have prevent default attached to your anchor event. This prevents the link from working.
$(".navbar a,a.btn-appoint, .quick-info li a, .overlay-detail a").on('click', function(event) {
event.preventDefault(); // prevents link from working. Remove it and you should be good.
Try to add a special class to all links with anchors (the first 4 ones) and call the function just by clicking these links, keeping the standard behavoir by clicking at Contact
I modified both js as well as html codes: (I guess this code is part of Medilab+ Template)
JS / JQuery
(function ($) {
// Add smooth scrolling to all links in navbar
$(".navbar2").on('click', function(event) {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
window.location.hash = hash;
});
});
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar-default").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});})(jQuery);
HTML Code:
<div class="collapse navbar-collapse navbar-right" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="">Services</li>
<li class="">About</li>
<li class="">Contact</li>
</ul>
</div>
OK, so what I need is fairly straightforward.
I have set up a navbar with some dropdown menus in it (using class="dropdown-toggle" data-toggle="dropdown"), and it works fine.
The thing is it works "onClick", while I would prefer if it worked "onHover".
Is there any built-in way to do this?
The easiest solution would be in CSS. Add something like...
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0; /* remove the gap so it doesn't close */
}
Working Fiddle
The best way of doing it is to just trigger bootstraps click event with a hover. This way, it should still remain touch device friendly
$('.dropdown').hover(function(){
$('.dropdown-toggle', this).trigger('click');
});
You can use jQuery's hover function.
You just need to add the class open when the mouse enters and remove the class when the mouse leaves the dropdown.
Here's my code:
$(function(){
$('.dropdown').hover(function() {
$(this).addClass('open');
},
function() {
$(this).removeClass('open');
});
});
An easy way, using jQuery, is this:
$(document).ready(function(){
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
});
});
For CSS it goes crazy when you also click on it. This is the code that I'm using, it also don't change anything for mobile view.
$('.dropdown').mouseenter(function(){
if(!$('.navbar-toggle').is(':visible')) { // disable for mobile view
if(!$(this).hasClass('open')) { // Keeps it open when hover it again
$('.dropdown-toggle', this).trigger('click');
}
}
});
In Twitter Bootstrap is not implemented but you can use the this plugin
Update 1:
Sames question here
Hover over the nav items to see that they activate on hover.
http://cameronspear.com/demos/twitter-bootstrap-hover-dropdown/#
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 click event, and you want it work on 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 100ms. 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.
This will help you make your own hover class for bootstrap:
CSS:
/* Hover dropdown */
.hover_drop_down.input-group-btn ul.dropdown-menu{margin-top: 0px;}/*To avoid unwanted close*/
.hover_drop_down.btn-group ul.dropdown-menu{margin-top:2px;}/*To avoid unwanted close*/
.hover_drop_down:hover ul.dropdown-menu{
display: block;
}
Margins are set to avoid unwanted close and they are optional.
HTML:
<div class="btn-group hover_drop_down">
<button type="button" class="btn btn-default" data-toggle="dropdown"></button>
<ul class="dropdown-menu" role="menu">
...
</ul>
</div>
Don't forget to remove the button attribute data-toggle="dropdown" if you want to remove onclick open, and this also will work when input is append with dropdown.
This is what I use to make it dropdown on hover with some jQuery
$(document).ready(function () {
$('.navbar-default .navbar-nav > li.dropdown').hover(function () {
$('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
$(this).addClass('open');
}, function () {
$('ul.dropdown-menu', this).stop(true, true).slideUp('fast');
$(this).removeClass('open');
});
});
Updated with a proper plugin
I have published a proper plugin for the dropdown hover functionality, in which you can even define what happens when clicking on the dropdown-toggle element:
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 dropdown toggle element when the dropdown 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 dropdown, and moving out the mouse will trigger the dropdown to show up again. Some of the js solutions are braking 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.
Try this using hover function with fadein fadeout animations
$('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);
});
This only hovers the navbar when you are not on a mobile device, because I find that hovering the navigation does not work well on mobile divices:
$( document ).ready(function() {
$( 'ul.nav li.dropdown' ).hover(function() {
// you could also use this condition: $( window ).width() >= 768
if ($('.navbar-toggle').css('display') === 'none'
&& false === ('ontouchstart' in document)) {
$( '.dropdown-toggle', this ).trigger( 'click' );
}
}, function() {
if ($('.navbar-toggle').css('display') === 'none'
&& false === ('ontouchstart' in document)) {
$( '.dropdown-toggle', this ).trigger( 'click' );
}
});
});
I try other solutions, i'm using bootstrap 3, but dropdown menu closes too quickly to move over it
supposed that you add class="dropdown" to li, i added a timeout
var hoverTimeout;
$('.dropdown').hover(function() {
clearTimeout(hoverTimeout);
$(this).addClass('open');
}, function() {
var $self = $(this);
hoverTimeout = setTimeout(function() {
$self.removeClass('open');
}, 150);
});
Triggering a click event with a hover has a small error. If mouse-in and then a click creates vice-versa effect. It opens when mouse-out and close when mouse-in. A better solution:
$('.dropdown').hover(function() {
if (!($(this).hasClass('open'))) {
$('.dropdown-toggle', this).trigger('click');
}
}, function() {
if ($(this).hasClass('open')) {
$('.dropdown-toggle', this).trigger('click');
}
});
Bootstrap drop-down Work on hover, and remain close on click by adding property display:block; in css and removing these attributes data-toggle="dropdown" role="button" from button tag
.dropdown:hover .dropdown-menu {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle">Dropdown Example</button>
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</div>
</body>
</html>
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(150);
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(105)
});
html
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown Example <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
jquery
$(document).ready( function() {
/* $(selector).hover( inFunction, outFunction ) */
$('.dropdown').hover(
function() {
$(this).find('ul').css({
"display": "block",
"margin-top": 0
});
},
function() {
$(this).find('ul').css({
"display": "none",
"margin-top": 0
});
}
);
});
codepen
Use the mouseover() function to trigger the click. In this way the previous click event will not harm. User can use both hover and click/touch. It will be mobile friendly.
$(".dropdown-toggle").mouseover(function(){
$(this).trigger('click');
})
In Bootstrap 5.x you can add a custom class like dropdown-hover to the main dropdown element. then manage hover events by JQuery.
$( document ).ready(function() {
// Add hover action for dropdowns
let dropdown_hover = $(".dropdown-hover");
dropdown_hover.on('mouseover', function(){
let menu = $(this).find('.dropdown-menu'), toggle = $(this).find('.dropdown-toggle');
menu.addClass('show');
toggle.addClass('show').attr('aria-expanded', true);
});
dropdown_hover.on('mouseout', function(){
let menu = $(this).find('.dropdown-menu'), toggle = $(this).find('.dropdown-toggle');
menu.removeClass('show');
toggle.removeClass('show').attr('aria-expanded', false);
});
});
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container p-5">
<div class="dropdown dropdown-hover">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Action</a>
</li>
<li>
<a class="dropdown-item" href="#">Another action</a>
</li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</div>
</div>
</body>
</html>
The solution I am proposing detects if its not touch device and that the navbar-toggle (hamburger menu) is not visible and makes the parent menu item revealing submenu on hover and and follow its link on click.
Also makes tne margin-top 0 because the gap between the navbar and the menu in some browser will not let you hover to the subitems
$(function(){
function is_touch_device() {
return 'ontouchstart' in window // works on most browsers
|| navigator.maxTouchPoints; // works on IE10/11 and Surface
};
if(!is_touch_device() && $('.navbar-toggle:hidden')){
$('.dropdown-menu', this).css('margin-top',0);
$('.dropdown').hover(function(){
$('.dropdown-toggle', this).trigger('click').toggleClass("disabled");
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-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"/>
<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
<li>menuA</li>
<li>menuB</li>
<li class="dropdown">menuC
<ul id="products-menu" class="dropdown-menu clearfix" role="menu">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</li>
<li>menuD</li>
<li>menuE</li>
</ul>
$(function(){
$("#nav .dropdown").hover(
function() {
$('#products-menu.dropdown-menu', this).stop( true, true ).fadeIn("fast");
$(this).toggleClass('open');
},
function() {
$('#products-menu.dropdown-menu', this).stop( true, true ).fadeOut("fast");
$(this).toggleClass('open');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-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"/>
<ul id="nav" class="nav nav-pills clearfix right" role="tablist">
<li>menuA</li>
<li>menuB</li>
<li class="dropdown">menuC
<ul id="products-menu" class="dropdown-menu clearfix" role="menu">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</li>
<li>menuD</li>
<li>menuE</li>
</ul>
You implement this functionality by using Jquery:
$('.dropdown').on('mouseover', function(){
$(this).addClass('show');
$('.dropdown-menu').addClass('show');
$('.dropdown-toggle').attr('aria-expanded', 'true');
});
$('.dropdown').on('mouseout', function(){
$(this).removeClass('show');
$('.dropdown-menu').removeClass('show');
$('.dropdown-toggle').attr('aria-expanded', 'false');
});
Tested and Working Fine
<nav class="dnt_show_mbl navbar navbar-default navbar-fixed-top" >
<div class="container" style="width:100%;">
<div class="navbar-header" style="height:90px;">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand dnt_show_mbl" href="index.html" style="margin-left:100%;margin-top:2%;">
<img src="material/logo.png" width="160px;" alt="visoka">
</a>
<a class="navbar-brand dontdisplaylg" href="index.html" style="" alt="visoka">
<img src="material/logo.png" width="200px;">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar" style="background-color: #fff;border-color:#fff;">
<ul class="nav navbar-nav navbar-right" style="margin-top: 4px;margin-right: 180px;padding:15px;letter-spacing:1px;color:#000;">
<li>HOME</li>
<li>ABOUT US</li>
<li class="dropdown-header" style="margin-top:-3px;margin-left:-3%;" onmouseout="out_menu();" onmouseover="on_menu();">
<a style="font-family: Inter !important;" class="dropdown-toggle" href="Projects.html">PROJECTS
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Ongoing Projects</li><br>
<li>Completed Projects</li><br>
<li>Upcoming Projects</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<script>
function on_menu(){
$(".dropdown-header:first").addClass("open");
}
function out_menu(){
$(".dropdown-header:first").removeClass("open");
}
</script>
Bootstrap 5 with jquery version
Just add hoverable class to dropdown and add below code to main javascript file
// Hoverable dropdown
$('.dropdown.hoverable').on({
mouseenter: function(){
var dropdown = $(this).children('.dropdown-menu');
if(!dropdown.hasClass('show') && dropdown.css('position') !== 'static'){ // Ignore collapsed navbar
bootstrap.Dropdown.getOrCreateInstance(this).toggle();
}
},
mouseleave: function(){
var dropdown = $(this).children('.dropdown-menu');
if(dropdown.hasClass('show') && dropdown.css('position') !== 'static'){ // Ignore collapsed navbar
bootstrap.Dropdown.getOrCreateInstance(this).toggle();
}
}
});