What I need is a smooth hover effect for my dropdown menu.
$(this).find(".dropdown-menu").stop(true, true).delay(200).fadeOut(500); is not working for me. When the mouse out hover, the effect isn't working.
$(document).ready(function () {
// executes when HTML-Document is loaded and DOM is ready
// breakpoint and up
$(window).resize(function () {
if ($(window).width() >= 980) {
// when you hover a toggle show its dropdown menu
$(".navbar .dropdown-toggle").hover(function () {
$(this).parent().toggleClass("show");
$(this).parent().find(".dropdown-menu").toggleClass("show");
$(this).find(".dropdown-menu").stop(true, true).delay(200).fadeOut(500);
});
// hide the menu when the mouse leaves the dropdown
$(".navbar .dropdown-menu").mouseleave(function () {
$(this).removeClass("show");
});
// do something here
}
});
// document ready
//wow.js init
new WOW().init();
});
Here is my HTML markup. I am using bootstrap 4 latest version. what can I do with a smooth hover effect with jQuery or javascript
<header class="header_area">
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
<a class="navbar-brand" href="#">Light House</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="single.html">Single Post</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Pages
</a>
<div class="dropdown-menu animated fadeIn" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Item 1</a>
<a class="dropdown-item" href="#">Item 2</a>
<a class="dropdown-item" href="#">Item 3</a>
<a class="dropdown-item" href="#">Item 4</a>
<a class="dropdown-item" href="#">Item 5</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Pages
</a>
<div class="dropdown-menu animated fadeIn" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Item 1</a>
<a class="dropdown-item" href="#">Item 2</a>
<a class="dropdown-item" href="#">Item 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact_us.html">Contact Us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0 search_icon" type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</nav>
</header>
.hover() has two handlers. The mouse IN and the mouse OUT.
If you wish to define something to happen on mouse out, you have to define the handler.
element.hover(mouseenter, mouseleave);
Documentation
So I suggest:
$(".navbar .dropdown-toggle").hover(
// Mouseenter event handler
function () {
$(this).parent().toggleClass("show");
$(this).parent().find(".dropdown-menu").toggleClass("show");
},
// Mouseleave event handler
function(){
$(this).find(".dropdown-menu").stop(true, true).delay(200).fadeOut(500);
}
);
If you wish to use .hover(), this can be done like so:
$(".navbar .navbar-toggler").hover(function(e) {
$(".navbar .navbar-collapse").addClass("show").fadeIn(500);
}, function(e) {
$(".navbar .navbar-collapse").removeClass("show").fadeOut(500);
});
This has drawbacks as as soon as you move the mouse to click or select one of the Menu items, it will revert the class and become hidden.
I would advise staying with .click() for all cases. This will work for Mobile and Desktop browsers:
$(".navbar .navbar-toggler").click(function() {
$(".navbar .navbar-collapse").toggleClass("collapse show");
});
Working Example: https://jsfiddle.net/4gas2aok/4/
If you want to retain the fade, use .fadeToggle():
$(".navbar .navbar-toggler").click(function() {
$dropdown.fadeToggle(500).toggleClass("collapse show");
});
Bootstrap CSS addresses a lot of the width issues already, so you should not need to check the Window width, just let bootstrap handle it on it's own.
Full Example: https://jsfiddle.net/4gas2aok/7/
Related
i want to when scrolling it makes an active link one only active link and the others remove active ,the navbar is fixed, when it is active the link add class and the class name is active and when one link is clicked the other links should be unactive (remove class active) but it dosn't work , when i scroll down all the links are active please help
my active class css
.block{
height: 1200px;
}
.block:first-of-type{
margin-top: 1200px;
}
.navbar{
position: fixed !important;
top: 0;
width: 100%;
}
.active{
color: #000000 !important;
}
my navbar and body
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#action">action</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#method">method</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li ><a class="dropdown-item" href="#">Something else here</a></li>
<li ><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<ul>
<li class="block" class="block" id="services">services</li>
<li class="block" class="block" id="action">action</li>
<li class="block" class="block" id="method">method</li>
</ul>
my jquery code
$(document).ready(function(){
// Add active class on navbar link and remove from siblings
"use strict";
$(window).scroll(function(){
$('.block').each(function(){
if($(window).scrollTop() > $(this).offset().top){
// console.log($(this).attr('id'));
var blockId = $(this).attr('id');
$('a.nav-link[href^="#' +blockId+'"]').addClass('active');
$('.nav-link').removeClass('active');
}
});
});
});
You are immediately removing the active class from all links after you set the currently active one. You need to remove the active class from all the other links first, then apply the new one.
Swap the order of these lines:
$('a.nav-link[href^="#' +blockId+'"]').addClass('active');
$('.navbar a').removeClass('active');
Becomes:
$('.navbar a').removeClass('active');
$('a.nav-link[href^="#' +blockId+'"]').addClass('active');
The editor here struggled with your layout, so here's a codepen showing the above: https://codepen.io/29b6/pen/ZErMGpJ?editors=1111
This works fine, but bear in mind that listening to scroll events is quite an inefficient solution, especially as you're just looping over a bunch of DOM elements each time. You might want to read up about the Intersection Observer API for a more passive approach.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<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>
</li>
</ul>
</div>
</nav>
this is the code for navbar with dropdowns in bootstrap. but the problem is here dropdown is not working when is a toggle to the navbar dropdown icon
code Link: https://getbootstrap.com/docs/4.0/components/navbar/
any suggestions why it isn't working for react??
You need to use reactstrap npm package together with bootstrap. have a look here: https://reactstrap.github.io/
You should use react-bootstrap. It works fine with react and is specially made for react.
https://react-bootstrap.github.io/components/navbar/#navbars-overview
I'm having trouble making the background of the following navbar transparent. I've tried making background-color: transparent !important; for .navbar but that doesn't seem to work either.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarnavdropdown" aria-controls="navbarnavdropdown" aria-expanded="false" aria-label="toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarnavdropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html"><img src="assets/img/resultheap-logo.png" alt="" /></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog/index.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="faq.html">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact-form/index.html">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardropdownmenulink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbardropdownmenulink">
<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>
</li>
</ul>
</div>
</nav>
remove the bg-light class from the nav element, or override it inline or id with important. But the cleanest way is to remove simply the class. I think you could simply not override it because bootsstrap sets the color with the bg-light class also with !important.
I don't believe you may have mentioned it but have you tried the the 'opacity' css.
You can do:
opacity: 0; //Makes fully transparent
opacity: 0.5; //Half transparent
opacity 1; //No transparency
Hopefully this helps for the navbar. Let me know if it doesn't, i'll try and help in any way possible.
You can add a new css class as background-color: transparent; or you can change property of ".bg-light" class.
.bg-light {background-color:Transparent!important}
I'm trying to get the full href string off of my nav-link item but it's not working. Here is my menu:
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" id="menuClient" href="Modules/Clients/ClientDashboard.aspx" value="Client" runat="server">Client</a>
</li>
<li class="nav-item dropdown" >
<a class="nav-link dropdown-toggle" href="Modules/Suppliers/SuppliersDashboard.aspx" value="Suppliers" id="ddSuppliers" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" runat="server">
Suppliers
</a>
<div class="dropdown-menu" aria-labelledby="ddSuppliers">
<a class="dropdown-item" style="z-index: 999;" id="ddAddNewSupplier" runat="server" href="Modules/Supplier/AddSupplier.aspx">Add Supplier</a>
<a class="dropdown-item" style="z-index: 999;" id="ddSupplierList" runat="server" href="Modules/Supplier/List.aspx">Supplier List</a>
</div>
</li>
</ul>
</div>
I'm getting the href attribute in this jQuery function:
$('#navbarNavDropdown').find('.nav-link').each(function () {
var curr = $(this).attr('href');
console.log(curr);
});
And whenever I'm clicking on a menu instead of getting the full href I only get the current page. For example, if I click on client,
($this).attr('href');
gives me ClientDashboard.aspx instead of Modules/Clients/ClientDashboard.aspx.
How can I get the full string?
Thanks in advance.
I'm trying to figure out how to have a top navbar in bootstrap 4 and then when the user scrolls down a little on the page have the navbar fade in I can currently get the navbar to show up using the below script, however, it doesn't fade in it just immediately shows up very fast and awkwardly.
<script>
$(document).scroll(function(e){
var scrollTop = $(document).scrollTop();
if(scrollTop > 200){
$('.navbar').removeClass('static-top').addClass('fixed-top');
} else {
$('.navbar').removeClass('fixed-top').addClass('static-top');
}
});
</script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav><!--./nav-->
I'm looking for a navbar effect like this http://bootstraplovers.com/assan-v3.6/classic-template/html/index.html
$('.navbar').removeClass('static-top').addClass('fixed-top');
before calling .removeClass() you need to call .toggle() or other similar jquery effects. Refer to the documentation
.toggle() would hide the navbar, so maybe you want to post your question in the relevant stackoverflow section (jquery), think about how you want to build this animation and search the jquery documentation...