<span class="hamburger" id="hamburger" onclick="openNav()">
<nav id="nav-bar" class="nav-bar">
×
<ul>
<li>Home</li>
<li>Contact</li>
<li>About</li>
<li>Help</li>
<li>Address</li>
</ul>
</nav>
<script>
navBar = document.getElementById('nav-bar');
document.onclick = function(clickEvent) {
if(clickEvent.target.id !== 'nav-bar'){
navBar.classList.remove('active');
}
}
function openNav() {
navBar.classList.toggle('active');
document.body.style.backgroundColor = 'rgba(0,0,0,0.4)';
}
function closeNav() {
navBar.classList.remove('active');
document.body.style.backgroundColor = '#fefefe';
}
</script>
Actually, I'm trying to close the navbar when I click outside the navbar. When I call the onclick openNav function, at the same time document.onclick function also called. This will caused my navbar is not opened. The document.onclick function should not call when I call the openNav onclick function. How can I fix this?
navBar = document.getElementById('nav-bar');
document.onclick = function(clickEvent) {
var clickover = clickEvent.target;
if (!document.getElementById('nav-bar').contains(clickover) && clickover.id!="hamburger" ){
navBar.classList.remove('active');
document.body.style.backgroundColor = '#fefefe';
}
}
function openNav() {
navBar.classList.add('active');
document.body.style.backgroundColor = 'rgba(0,0,0,0.4)';
}
function closeNav() {
navBar.classList.remove('active');
document.body.style.backgroundColor = '#fefefe';
}
ul li{
margin:5px;
display:inline-block;
}
.closebtn{
cursor:pointer;
}
<span class="hamburger" id="hamburger" onclick="openNav()">open Nav</span>
<nav id="nav-bar" class="nav-bar">
<a class="closebtn" onclick="closeNav()">×</a>
<ul>
<li>Home</li>
<li>Contact</li>
<li>About</li>
<li>Help</li>
<li>Address</li>
</ul>
</nav>
Related
This is the navbar html code:
<nav id="navbar">
<ul class="menu">
<li class="logo"><img src="img/LOGO JS BLANCO PNG.png"></li>
<li class="item">Home</li>
<li class="item">About</li>
<li class="item">Portfolio</li>
<li class="item">Knowledge</li>
<li class="item">Experience</li>
<li class="item">Contact</li>
<li class="toggle"><i class="fas fa-bars"></i></li>
</ul>
</nav>
This is the navbar js code:
const toggle = document.querySelector(".toggle");
const menu = document.querySelector(".menu");
/* Toggle mobile menu */
function toggleMenu() {
if (menu.classList.contains("active")) {
menu.classList.remove("active");
toggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
} else {
menu.classList.add("active");
toggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
}
}
/* Event Listeners */
toggle.addEventListener("click", toggleMenu, false);
for (let item of items) {
item.addEventListener("keypress", toggleItem, false);
}
I want navbar to be closed when I click on a menu option. Any solution here? thanks
You can add the click to the menu instead of just the .toggle link
const toggle = document.querySelector(".toggle");
const menu = document.querySelector(".menu");
/* Toggle mobile menu */
function toggleMenu() {
menu.classList.toggle("active");
const icon = toggle.querySelector("a i.fas");
icon.classList.toggle('fa-bars');
icon.classList.toggle('fa-times');
}
/* Event Listeners */
menu.addEventListener("click", toggleMenu, false);
#navbar .item {
display: none;
}
#navbar .menu.active .item {
display: list-item;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet"/>
<nav id="navbar">
<ul class="menu">
<li class="logo">
<img src="img/LOGO JS BLANCO PNG.png">
</li>
<li class="item">Home</li>
<li class="item">About</li>
<li class="item">Portfolio</li>
<li class="item">Knowledge</li>
<li class="item">Experience</li>
<li class="item">Contact</li>
<li class="toggle"><i class="fas fa-bars"></i></li>
</ul>
</nav>
In this menu, I'm trying to change the "+" symbol to "-" on click, but I don't know how to proceed. It will be a button that I'll change to custom icons later...
html
<header id="header">
<div class="header-container">
<p id="logo">Logo</p>
<nav id="nav">
<div id="btn-mobile">+</div>
<ul id="menu">
<li>Sobre</li>
<li>Trabalhos</li>
<li>Carreiras</li>
<li>Contato</li>
</ul>
</nav>
</div>
</header>
js
const btnMobile = document.getElementById('btn-mobile');
function toggleMenu() {
const nav = document.getElementById('nav');
nav.classList.toggle('active');
}
btnMobile.addEventListener('click', toggleMenu);
thanks!
All you got to do is use innerText on your btn-mobile
const btnMobile = document.getElementById('btn-mobile');
function toggleMenu() {
const nav = document.getElementById('nav');
const btnMobile = document.getElementById('btn-mobile');
nav.classList.toggle('active');
btnMobile.innerText = '-';
}
btnMobile.addEventListener('click', toggleMenu);
or textContent, both does almost the same job, there's just some minor difference.
Reference:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText
MDN is a great place to learn these basic JS DOM method.
You can use i and use css class to set the content of + or -
const btnMobile = document.getElementById('icon');
function toggleMenu() {
if (btnMobile.classList.contains('icon-plus')) {
btnMobile.classList.remove('icon-plus');
btnMobile.classList.add('icon-minus')
} else if (btnMobile.classList.contains('icon-minus')) {
btnMobile.classList.remove('icon-minus');
btnMobile.classList.add('icon-plus')
}
}
btnMobile.addEventListener('click', toggleMenu);
.icon-plus:after {
content: '+';
cursor: pointer;
}
.icon-minus:after {
content: '-';
cursor: pointer;
}
<header id="header">
<div class="header-container">
<p id="logo">Logo</p>
<nav id="nav">
<div id="btn-mobile">
<i id='icon' class="icon icon-plus"></i>
</div>
<ul id="menu">
<li>Sobre</li>
<li>Trabalhos</li>
<li>Carreiras</li>
<li>Contato</li>
</ul>
</nav>
</div>
</header>
const hamburger = document.querySelector(
".header .nav-bar .nav-list .hamburger"
);
const mobile_menu = document.querySelector(".header .nav-bar .nav-list ul");
const menu_item = document.querySelectorAll(
".header .nav-bar .nav-list ul li a"
);
const header = document.querySelector(".header .container");
document.addEventListener("scroll", () => {
var scroll_position = window.scrollY;
if (scroll_position > 250) {
header.style.backgroundColor = "#29323c";
} else {
header.style.backgroundColor = "transparent";
}
});
<section id="header">
<div class="header container">
<div class="nav-bar">
<div class="brand">
<a href="#hero">
<h1>ELITE.</h1>
</a>
</div>
<div class="nav-list">
<div class="hamburger"><div class="bar"></div></div>
<ul>
<li>Home</li>
<li>Services</li>
<li>Projects</li>
<li>Our CEO</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</section>
When I scroll past 250 the background color is not changing from transparent to the expected color in the JS code. How can I make MY JS respond on browser?
You used .header .container instead of #header .container
const hamburger = document.querySelector(
".header .nav-bar .nav-list .hamburger"
);
const mobile_menu = document.querySelector(".header .nav-bar .nav-list ul");
const menu_item = document.querySelectorAll(
".header .nav-bar .nav-list ul li a"
);
const header = document.querySelector("#header .container");
document.addEventListener("scroll", () => {
var scroll_position = window.scrollY;
if (scroll_position > 250) {
header.style.backgroundColor = "#29323c";
} else {
header.style.backgroundColor = "transparent";
}
});
#header {
position:fixed;
}
<section id="header">
<div class="header container">
<div class="nav-bar">
<div class="brand">
<a href="#hero">
<h1>ELITE.</h1>
</a>
</div>
<div class="nav-list">
<div class="hamburger"><div class="bar"></div></div>
<ul>
<li>Home</li>
<li>Services</li>
<li>Projects</li>
<li>Our CEO</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</section>
<div style="height:500vh"></div>
$('.open-overlay').click(function() {
var overlay_navigation = $('.overlay-navigation'),
nav_item_1 = $('nav li:nth-of-type(1)'),
nav_item_2 = $('nav li:nth-of-type(2)'),
nav_item_3 = $('nav li:nth-of-type(3)'),
nav_item_4 = $('nav li:nth-of-type(4)'),
nav_item_5 = $('nav li:nth-of-type(5)'),
top_bar = $('.bar-top'),
middle_bar = $('.bar-middle'),
bottom_bar = $('.bar-bottom');
overlay_navigation.toggleClass('overlay-active');
if (overlay_navigation.hasClass('overlay-active')) {
top_bar.removeClass('animate-out-top-bar').addClass('animate-top-bar');
middle_bar.removeClass('animate-out-middle-bar').addClass('animate-middle-bar');
bottom_bar.removeClass('animate-out-bottom-bar').addClass('animate-bottom-bar');
overlay_navigation.removeClass('overlay-slide-up').addClass('overlay-slide-down')
nav_item_1.removeClass('slide-in-nav-item-reverse').addClass('slide-in-nav-item');
nav_item_2.removeClass('slide-in-nav-item-delay-1-reverse').addClass('slide-in-nav-item-delay-1');
nav_item_3.removeClass('slide-in-nav-item-delay-2-reverse').addClass('slide-in-nav-item-delay-2');
nav_item_4.removeClass('slide-in-nav-item-delay-3-reverse').addClass('slide-in-nav-item-delay-3');
nav_item_5.removeClass('slide-in-nav-item-delay-4-reverse').addClass('slide-in-nav-item-delay-4');
} else {
top_bar.removeClass('animate-top-bar').addClass('animate-out-top-bar');
middle_bar.removeClass('animate-middle-bar').addClass('animate-out-middle-bar');
bottom_bar.removeClass('animate-bottom-bar').addClass('animate-out-bottom-bar');
overlay_navigation.removeClass('overlay-slide-down').addClass('overlay-slide-up')
nav_item_1.removeClass('slide-in-nav-item').addClass('slide-in-nav-item-reverse');
nav_item_2.removeClass('slide-in-nav-item-delay-1').addClass('slide-in-nav-item-delay-1-reverse');
nav_item_3.removeClass('slide-in-nav-item-delay-2').addClass('slide-in-nav-item-delay-2-reverse');
nav_item_4.removeClass('slide-in-nav-item-delay-3').addClass('slide-in-nav-item-delay-3-reverse');
nav_item_5.removeClass('slide-in-nav-item-delay-4').addClass('slide-in-nav-item-delay-4-reverse');
}
})
<div class="overlay-navigation">
<nav role="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Works</li>
<li>Contact</li>
</ul>
</nav>
</div>
<section class="home">
<div class="open-overlay">
<span class="bar-top"></span>
<span class="bar-middle"></span>
<span class="bar-bottom"></span>
</div>
</section>
Here is my code when being ran on code snippet, thank you for your assistance in advance :)
$('.open-overlay').click(function() {
var overlay_navigation = $('.overlay-navigation'),
nav_item_1 = $('nav li:nth-of-type(1)'),
nav_item_2 = $('nav li:nth-of-type(2)'),
nav_item_3 = $('nav li:nth-of-type(3)'),
nav_item_4 = $('nav li:nth-of-type(4)'),
nav_item_5 = $('nav li:nth-of-type(5)'),
top_bar = $('.bar-top'),
middle_bar = $('.bar-middle'),
bottom_bar = $('.bar-bottom');
overlay_navigation.toggleClass('overlay-active');
if (overlay_navigation.hasClass('overlay-active')) {
top_bar.removeClass('animate-out-top-bar').addClass('animate-top-bar');
middle_bar.removeClass('animate-out-middle-bar').addClass('animate-middle-bar');
bottom_bar.removeClass('animate-out-bottom-bar').addClass('animate-bottom-bar');
overlay_navigation.removeClass('overlay-slide-up').addClass('overlay-slide-down')
nav_item_1.removeClass('slide-in-nav-item-reverse').addClass('slide-in-nav-item');
nav_item_2.removeClass('slide-in-nav-item-delay-1-reverse').addClass('slide-in-nav-item-delay-1');
nav_item_3.removeClass('slide-in-nav-item-delay-2-reverse').addClass('slide-in-nav-item-delay-2');
nav_item_4.removeClass('slide-in-nav-item-delay-3-reverse').addClass('slide-in-nav-item-delay-3');
nav_item_5.removeClass('slide-in-nav-item-delay-4-reverse').addClass('slide-in-nav-item-delay-4');
} else {
top_bar.removeClass('animate-top-bar').addClass('animate-out-top-bar');
middle_bar.removeClass('animate-middle-bar').addClass('animate-out-middle-bar');
bottom_bar.removeClass('animate-bottom-bar').addClass('animate-out-bottom-bar');
overlay_navigation.removeClass('overlay-slide-down').addClass('overlay-slide-up')
nav_item_1.removeClass('slide-in-nav-item').addClass('slide-in-nav-item-reverse');
nav_item_2.removeClass('slide-in-nav-item-delay-1').addClass('slide-in-nav-item-delay-1-reverse');
nav_item_3.removeClass('slide-in-nav-item-delay-2').addClass('slide-in-nav-item-delay-2-reverse');
nav_item_4.removeClass('slide-in-nav-item-delay-3').addClass('slide-in-nav-item-delay-3-reverse');
nav_item_5.removeClass('slide-in-nav-item-delay-4').addClass('slide-in-nav-item-delay-4-reverse');
}
})
<div class="overlay-navigation">
<nav role="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Works</li>
<li>Contact</li>
</ul>
</nav>
</div>
<section class="home">
<div class="open-overlay">
<span class="bar-top"></span>
<span class="bar-middle"></span>
<span class="bar-bottom"></span>
</div>
</section>
My hamburger icon is currently not opening, I figure that it is a problem with my JavaScript. Any other tips and tricks when coming to JavaScript are very much welcome as I am a beginner, so your assistance would be very much appreciated.
java.js
$('.open-overlay').click(function () {
var overlay_navigation = $('.overlay-navigation'),
nav_item_1 = $('nav li:nth-of-type(1)'),
nav_item_2 = $('nav li:nth-of-type(2)'),
nav_item_3 = $('nav li:nth-of-type(3)'),
nav_item_4 = $('nav li:nth-of-type(4)'),
nav_item_5 = $('nav li:nth-of-type(5)'),
top_bar = $('.bar-top'),
middle_bar = $('.bar-middle'),
bottom_bar = $('.bar-bottom');
overlay_navigation.toggleClass('overlay-active');
if (overlay_navigation.hasClass('overlay-active')) {
top_bar.removeClass('animate-out-top-bar').addClass('animate-top-bar');
middle_bar.removeClass('animate-out-middle-bar').addClass('animate-middle-bar');
bottom_bar.removeClass('animate-out-bottom-bar').addClass('animate-bottom-bar');
overlay_navigation.removeClass('overlay-slide-up').addClass('overlay-slide-down');
nav_item_1.removeClass('slide-in-nav-item-reverse').addClass('slide-in-nav-item');
nav_item_2.removeClass('slide-in-nav-item-delay-1-reverse').addClass('slide-in-nav-item-delay-1');
nav_item_3.removeClass('slide-in-nav-item-delay-2-reverse').addClass('slide-in-nav-item-delay-2');
nav_item_4.removeClass('slide-in-nav-item-delay-3-reverse').addClass('slide-in-nav-item-delay-3');
nav_item_5.removeClass('slide-in-nav-item-delay-4-reverse').addClass('slide-in-nav-item-delay-4');
} else {
top_bar.removeClass('animate-top-bar').addClass('animate-out-top-bar');
middle_bar.removeClass('animate-middle-bar').addClass('animate-out-middle-bar');
bottom_bar.removeClass('animate-bottom-bar').addClass('animate-out-bottom-bar');
overlay_navigation.removeClass('overlay-slide-down').addClass('overlay-slide-up');
nav_item_1.removeClass('slide-in-nav-item').addClass('slide-in-nav-item-reverse');
nav_item_2.removeClass('slide-in-nav-item-delay-1').addClass('slide-in-nav-item-delay-1-reverse');
nav_item_3.removeClass('slide-in-nav-item-delay-2').addClass('slide-in-nav-item-delay-2-reverse');
nav_item_4.removeClass('slide-in-nav-item-delay-3').addClass('slide-in-nav-item-delay-3-reverse');
nav_item_5.removeClass('slide-in-nav-item-delay-4').addClass('slide-in-nav-item-delay-4-reverse');
}
});
my html
<div class="overlay-navigation">
<nav role="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Works</li>
<li>Contact</li>
</ul>
</nav>
</div>
<section class="home">
<div class="open-overlay">
<span class="bar-top"></span>
<span class="bar-middle"></span>
<span class="bar-bottom"></span>
</div>
</section>
It's a bit hard to see what's going on as you're not including your CSS, and there's a lot of unnecessary code there (everything relating to your nav items).
I broke out a simple example that works:
document.getElementById('open-overlay').addEventListener('click', e => {
document.getElementById('overlay-navigation').classList.toggle('active');
})
.bar {
display: block;
height:5px;
width:20px;
margin:2px 0;
background-color: black;
}
#overlay-navigation {
display: none;
}
#overlay-navigation.active {
display: block;
}
<section class="home">
<div id="open-overlay">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</section>
<div id="overlay-navigation">
<nav role="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Works</li>
<li>Contact</li>
</ul>
</nav>
</div>
Things that I changed:
open-overlay and overlay-navigation are now ids and not classes
overlay-navigation has it's display set to none by default (hidden)
.active simply sets the display back to block
I am writing a code to open and close navigation bar with the button
my code is as follows
#DIV1{
display:block;}
<div id="DIV1">
<ul class="topnav">
<li>About</li>
<li>Contact</li>
<li>News</li>
<li>Home</li>
</ul>
</div>
<button onClick="abc()">HIDE</button>
<script>
function abc()
{
var togg = document.getElementById('DIV1')
if (togg.style.display == "block")
{
togg.style.display="none";
}
else if (togg.style.display == "none")
{
togg.style.display="block";
}
}
</script>
It wont work what should I do or what am I doing wrong? There are other CSS properties for navigation bar which I have skipped.
It doesn't work because you have to set its display with javascript or with inline style to get something by yourDiv.style.display. In your case, when you click on your button, the display is not set and then you can't enter nor in your if neither in your else if statement. So try this:
var togg = document.getElementById('DIV1');
togg.style.display="block"; /* => I set a display value */
function abc(){
if (togg.style.display == "block")
{
togg.style.display="none";
}
else if (togg.style.display == "none")
{
togg.style.display="block";
}
}
#DIV1 {
display:block;
}
/*you can remove this rule. You are changing the display via javascript */
<div id="DIV1">
<ul class="topnav">
<li>About</li>
<li>Contact</li>
<li>News</li>
<li>Home</li>
</ul>
</div>
<button onClick="abc()">HIDE</button>
Another way: you could simply create a class to "hide" your div and then toggle it using classList and toggle:
function abc(){
var togg = document.getElementById('DIV1')
togg.classList.toggle("myClass");
}
.myClass {
display:none;
}
<div id="DIV1">
<ul class="topnav">
<li>About</li>
<li>Contact</li>
<li>News</li>
<li>Home</li>
</ul>
</div>
<button onClick="abc()">HIDE</button>
here is the correct code:
<style> #DIV1{
display:block;}
</style>
<div id="DIV1">
<ul class="topnav">
<li>About</li>
<li>Contact</li>
<li>News</li>
<li>Home</li>
</ul>
</div>
<button onClick="abc()">HIDE</button>
<script>
function abc()
{
var togg = document.getElementById('DIV1');
if (togg.style.display == "block")
{
togg.style.display="none";
}
else
{
togg.style.display="block";
}
}
</script>
if i understood your question try this one:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#div1{
display:block;}
</style>
<script>
function abc()
{
var togg = document.getElementById("div1")
if (togg.style.display === "none")// 3 ===
{
togg.style.display="block";
}
else {
togg.style.display="none";
}
}
</script>
</head>
<body>
<div id="div1">
<ul class="topnav">
<li>About</li>
<li>Contact</li>
<li>News</li>
<li>Home</li>
</ul>
</div>
<button onclick="abc()">HIDE</button>
</body>
</html>