I have a hamburger menu which is almost complete with just 1 bug/issue that I can't figure out. My nav links to different areas on the home page. So on the home page the user can click a nav link which would instantly take them down to the desired location on the page.
My issue comes as there is no loading so once the user clicks on the nav link they are brought to the location but the dropdown menu will not close. I tried adding .hide to the JS which hides the dropdown on the click of a link but that created my new issue.
After the user clicks one of the nav links it does hide the menu but upon clicking the menu icon again the menu will not open at all. In dev tools I see that upon clicking one of the nav links it is given the style of display:none so I feel that the issue might lie there. Thanks for the help and please let me know if any other information is needed!
HTML:
<nav class="navbar navbar-light navbar-fixed-top">
<div class="wrapping container-fluid">
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav navbar-nav float-sm-right mr-0 menu">
<li class="nav-item">
<span class="sr-only"></span>
</li>
<li class="nav-item">
<a class="nav-link" href="#schedule">Schedule<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#workshops">Workshops</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#locations">Location</a>
</li>
<li class="nav-item">
<a class="nav-link last-link" href="#register">Register</a>
</li>
</ul>
<a class="navbar-brand" href="#home"><img class="logo" src="img/Logo.png" alt=""></a>
</div>
</nav>
CSS for this menu:
.menu{
height: 0;
overflow: hidden;
transition: height 0.3s;
}
.open{
height: 295px;
}
.hamburger {
cursor: pointer;
padding: 15px 10px 15px 0;
display: block;
float: right;
margin-top: 15px;
}
JS:
$('.hamburger').on('click', function () {
$('.menu').toggleClass('open');
});
$( '.menu a' ).on("click", function(){
$('.menu').hide();
});
If you're going to use .toggleClass('open') to open the menu, use it for closing the menu as well.
Generally, though, you'll want to use .addClass() and .removeClass() instead:
$('.hamburger').on('click', function () {
$('.menu').addClass('open');
});
$( '.menu a' ).on("click", function(){
$('.menu').removeClass('open');
});
If your hamburger menu has checkbox behind it, you can simple set it to unchecked to close the hamburger menu
function hideMenu(){
let menuOpen = document.querySelector('.toggler').checked;
if(menuOpen = true){
document.querySelector('.toggler').checked = false;
}
}
window.addEventListener("scroll", hideMenu);
Related
This is a single-page website currently I am working on. But When I click another link in the navbar it's not changing color though hovering is working perfectly. Here is my html code :
<html>
<body>
<div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 ">
<li class="nav-item ">
<a class="nav-link scroll active " aria-current="page" href="#intro">Home</a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#about">About Us </a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#">Products</a>
</li>
</ul>
</div>
</html>
</body>
enter image description here
Here is my css:
<style>
.navbar .nav-item a {
color: #5cbf8f !important;
}
.navbar .nav-item a:hover {
color: #028b77 !important;
}
.navbar .nav-item a.active {
color: #028b77 !important;
}
</style>
enter image description here
Here is my Js :
<script>
$(document).ready(function () {
var scrollLink = $(".scroll");
// Smooth scrolling
scrollLink.click(function (e) {
e.preventDefault();
$("body,html").animate(
{
scrollTop: $(this.hash).offset().top,
},
1000
);
});
// Active link switching
$(window).scroll(function () {
var scrollbarLocation = $(this).scrollTop();
scrollLink.each(function () {
var sectionOffset = $(this.hash).offset().top - 20;
if (sectionOffset <= scrollbarLocation) {
$(this).parent().addClass("active");
$(this).parent().siblings().removeClass("active");
}
});
});
});
</script>
enter image description here
N.B: Don't really know about js, just found it on the internet.
Navbar:
enter image description here
I think your js is wrong.
$('.active').removeClass('active');
$(this).addClass('active');
More efficient options are available if the DOM hierarchy is known.
For example, if they're all siblings, you can use this:
$(this).addClass('active').siblings('.active').removeClass('active');
This question already has answers here:
How to addEventListener to multiple elements in a single line
(15 answers)
Closed 2 years ago.
I know this question has been asked before, but this one has a bit of a twist.
I've seen a few downvotes on this questions. Please be so kind as to let me know your reasons for downvoting so that I will be able to correct this in future. Thanks for your input all.
I have a single page scroll website with a nav menu overlay on screens smaller than 992px. The menu toggles fine, however when a nav link is clicked the nav menu remains open with the exception of the first nav-link.
I like to have every link closing the nav menu on click.
So How do get all the nav links to close the nav menu on click? I have a hunch it has to do with using querySelectorAll instead of just querySelector.
Here's a link to the site: https://portfolioprime.github.io/robotics/
Any assistance would be greatly appreciated.
Here's the navigation html.
HTML
<body>
<header>
<nav class="nav">
<!-- Nav Menu -->
<ul class="nav-list">
<li class="nav-item">
Home</li>
<li class="nav-item">
Robots</li>
<li class="nav-item">
Projects</li>
<li class="nav-item">
Research</li>
<li class="nav-item">
Explore</li>
<li class="nav-item">
Prosthetics</li>
<li class="nav-item">
Contact</li>
</ul>
<!-- Menu-toggle -->
<div class="menu-toggle">
<i class="fas fa-bars"></i>
<i class="fas fa-times"></i>
</div>
</nav>
</header>
</body>
And here's the Javascript.
JS
// Select element function
const selectElement = function (element) {
return document.querySelector(element);
};
let menuToggler = selectElement('.menu-toggle');
let body = selectElement('body');
let menuClose = selectElement('.nav-link');
// Open/Close menu on .menu-toggle click
menuToggler.addEventListener('click', function () {
body.classList.toggle('open');
});
// Close menu on .nav-link click
menuClose.addEventListener('click', function () {
body.classList.remove('open');
});
And you may be interested in the CSS for the .open class that is appended to the body with javascript.
CSS
.open .nav-list {
bottom: 0;
}
.nav-link:hover {
border-bottom: none;
}
.menu-toggle {
display: block;
}
.open .menu-toggle .fa-bars {
display: none;
}
.open .menu-toggle .fa-times {
display: block;
position: fixed;
right: 2.7rem;
top: 2rem;
}
Your hunch is totally correct. This does it.
// Select element function
const selectElement = (element) =>
document.querySelector(element);
const getAllWithClass = (className) =>
document.getElementsByClassName(className);
const
body = selectElement('body'),
// Converts the returned collection to a proper Array
navLinks = Array.from(getAllWithClass("nav-link"));
// Close menu on .nav-link click
navLinks.forEach(link => { // The Array method `forEach` loops through
link.addEventListener('click', function() {
body.classList.remove('open');
console.log("(No more blue background means it's closed)");
});
});
.open .nav-list {
background-color: lightskyblue;
}
<body class="open">
<ul class="nav-list">
<li class="nav-item">
Home</li>
<li class="nav-item">
Robots</li>
<li class="nav-item">
Projects</li>
</ul>
</body>
Note: I think it would be better to add a single click-listener on the whole menu, (and check that the target of any click event is a nav-link before proceeding). But since you wanted to see how to add multiple listeners at once, I stuck with this.
right now i have this code to indicate on the nav links what id i am on.
But how can i also add a scroll function, if i scroll down to specific id then add the class to the right nav link. Thank you.
$(window).load(function(){
$("nav.site-nav ul.open.desktop li a").click(function() {
$('.current_yes').removeClass('current_yes');
$(this).addClass("current_yes");
});
});
jQuery(document).ready(function($){
var url = window.location.href;
$('nav.site-nav ul.open.desktop li a').filter(function() {
return this.href == url;
}).closest('a').addClass('current_yes');
});
and the nav look like this:
<div class="wrapper">
<nav class="site-nav">
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
<ul class="open desktop">
<li><a id="link1" href="index.php#"><i class="site-nav--icon"></i>Hem</a></li>
<li><a id="link2" href="index.php#products-anchor"><i class="site-nav--icon"></i>Produkter</a></li>
<li><a id="link3" href="index.php#uthyres-anchor"><i class="site-nav--icon"></i>Uthyres</a></li>
<li><a id="link4" href="#rent"><i class="site-nav--icon"></i>Kontakta</a></li>
</ul>
</nav>
</div>
The css for current link:
.current_yes {
border-bottom: 2px solid #732813;
}
So, I'm trying to use bootstraps "active" class, but when I hover over a different navbar link, I want the "active" to take the look of the other navbar link that are not being hovered over.
Here is my relevant HTML:
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a id="active" href="#">TOWER DUEL</a></li>
<li><a class="otherNavs" href="#thecrew">THE CREW</a></li>
<li><a class="otherNavs" href="./presskit/">PRESSKIT</a></li>
</ul>
</div>
And here is my Relavent JQuery
$( ".otherNavs" ).hover(function() {
$("#active" ).css("color", "#68ddff !important");
$("#active" ).css("color", "#68ddff !important");
$("#active").css("background", "#0f2436")
$("#active").css("background", "-webkit-linear-gradient(#0f2436, #14335c)")
$("#active").css("background", "-o-linear-gradient(#0f2436, #14335c)")
$("#active").css("background", "-moz-linear-gradient(#0f2436, #14335c)")
$("#active").css("background", "linear-gradient(#0f2436, #14335c)")
});
As you may have noticed by now... There is a curveball. My background is gradient, so I had to use all that browser support bullshit, lol.
Im to the point where im like positive this code should work, but its not.
Also, I have confirmed my jquery library is functional, I'm using it in another parts of my code.
I do realize I have no support to "Pop it back in place" when I'm done hovering, but that's the easy part once I get the initial code working.
EDIT:
So I was approached with a much easier method, simply removing the class onhover and adding it back after:
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li id="activePage" class="active">TOWER DUEL</li>
<li><a class="otherNavs" href="#thecrew">THE CREW</a></li>
<li><a class="otherNavs" href="./presskit/">PRESSKIT</a></li>
</ul>
</div>
And my new jquery:
$(".otherNavs").hover( function () {
$("#activePage").removeclass("active");
}, function () {
$("#activePage").addclass("active");
});
However, this code is still unfunctional. Any ideas?
Thanks
I think you should use addClass() when the mouse hovers over the element, and use removeClass() when the mouse stops hovering, instead of css(), like this:
$(".otherNavs").hover( function () {
$(".active").addclass("myclass");
}, function () {
$(".active").removeclass("myclass");
});
And then add this to your CSS:
.myclass {
color: #68ddff !important;
background: #0f2436;
background: -webkit-linear-gradient(#0f2436, #14335c);
background: -moz-linear-gradient(#0f2436, #14335c);
background: -o-linear-gradient(#0f2436, #14335c);
background: linear-gradient(#0f2436, #14335c);
}
UPDATE:
For your new markup use this:
$(document).ready(function() {
$(".otherNavs").hover(function() {
$("#activePage").removeClass("active");
}, function() {
$("#activePage").addClass("active");
});
});
your code should work if you put your <script> before the closing </body> tag.
Pure CSS:
#navbar:hover .active:not(:hover) {
color: #68ddff !important;
background: "#0f2436";
background: -webkit-linear-gradient(#0f2436, #14335c);
background: -o-linear-gradient(#0f2436, #14335c);
background: -moz-linear-gradient(#0f2436, #14335c);
background: linear-gradient(#0f2436, #14335c);
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a id="active" href="#">TOWER DUEL</a></li>
<li><a class="otherNavs" href="#thecrew">THE CREW</a></li>
<li><a class="otherNavs" href="./presskit/">PRESSKIT</a></li>
</ul>
</div>
Whenever I hover over the second button in the menu, a "submenu" appears. When it appears, it partially covers the images in a div "container".
The styling of the submenu is such that it is semi-transparent so the images inside the div "container" also appear in the background of the menu, which doesnt look that good.
I know that the simple solution would be to change the location of the div but then the images would not be centered so that is not an option. I was wondering if it is possible that whenever I hover over the buttons that have a submenu, the div "container" hide and appear again when I move my mouse away from the menu. The div "container" should not hide when hovering over first Home button since it does not have a submenu and images should remain hidden as long as the menu is open. Is it possible in javascript or jQuery or CSS3??
HTML Code:
<div id="menu">
<ul class="menu" id="tempMenu">
<li class="Home">Home</li>
<li class="HOme2"><a id="secondElement" href="www.google.com">Home2</a><div>
<ul class="submenu">
<li>
<a id="one" href="">One</a>
</li></br>
<li>
<a id="two" href="">two</a>
</li>
<li>
<a id="three" href="">three</a>
</li>
<li>
<a id="four" href="">four</a>
</li>
<li>
<a id="five" href="">five</a>
</li>
<li>
<a id="six" href="">six</a>
</li>
<li>
<a id="seven" href="">seven</a>
</li>
<li>
<a id="eight" href="">eight</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div id="container">
<div id="box1" class="box">Image1<img src="images/image1.png"></div>
<div id="box2" class="box">Image2<img src="images/image2.png"></div>
</div>
CSS Code:
ul.menu .submenu{
display: none;
position: absolute;
}
ul.menu li:hover .submenu{
display: block;
}
$('.submenu').hover(function() {
$('#container').hide()
}, function() {
$('#container').show()
});
You basically want to detect on the hover event whenever the current menu item (one of the .menu > a elements) contains a submenu (.submenu).
What about :
$('.menu > a').hover(function(){
if ($(this).find('.submenu').length != 0) {
$('#container').hide();
}
}, function(){
$('#container').show();
});
Also, some of your html closing tags have issues, you should ensure that they are all closing in a correct order to prevent unexpected glitches.
firstly give that div 2 class names like-class1,class2
in Css :
.class1{
display: none;
position: absolute;
}
.class2{
display : block;
}
in jquery :
//this would track mouse pointer in/out events
$("#menu").hover( function(event){ $("#div").attr("class","class1"); },
function(event){ $("#div").attr("class","class1"); } );
You forgot to close this
<li class="HOme2"><a id="secondElement" href="www.google.com">Home2</a><div>
to
<li class="HOme2"><a id="secondElement" href="www.google.com">Home2</a></li><div>
for the Jquery i think this will help
$('.submenu').mouseenter(function() {
$('#container').hide()
}).mouseleave(function(){
$('#container').show()
});