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>
Related
Hey everyone I have been struggling with the nav menu and getting it to toggle on and off, it seems to be turning on and off in the dev tools but the li links don't disappear, I have tried rewriting the code, but still can't get it to work, I double checked to make sure i was selecting the right elements, please if anyone can help I would sincerely appreciate it!
Thank You
here is the code:
const showMenu = (toggleId, navId) => {
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId)
if (toggle && nav) {
toggle.addEventListener("click", () => {
nav.classList.toggle("show");
})
}
};
showMenu('nav-toggle', 'nav-menu');
<link rel="stylesheet" href="practice.css">
<link href='https://unpkg.com/boxicons#2.1.1/css/boxicons.min.css' rel='stylesheet'>
<header class="1-header" id="header">
<nav class="nav bd-grid">
<div class='nav_toggle' id='nav-toggle'>
<i class="bx bxs-grid"></i>
</div>
<!-- Roby -->
Sneaker Warehouse
<div class='nav_menu' id='nav-menu'>
<ul class="nav_list">
<li class="nav_item">Home</li>
<li class="nav_item">Featured</li>
<li class="nav_item">Women</li>
<li class="nav_item">New</li>
<li class="nav_item">Shop</li>
</ul>
</div>
<div class="nav_shop">
<i class="bx bx-shopping-bag"></i>
</div>
</nav>
</header>
<script src="practice.js"></script>
<script src="https://unpkg.com/boxicons#2.1.1/dist/boxicons.js"></script>
I got it working by reading one of the comments on this post. you forgot to add the css.
html
<link rel="stylesheet" href="practice.css">
<link href='https://unpkg.com/boxicons#2.1.1/css/boxicons.min.css' rel='stylesheet'>
<header class="1-header" id="header">
<nav class="nav bd-grid">
<div class='nav_toggle' id='nav-toggle'>
<i class="bx bxs-grid"></i>
</div>
<!-- Roby -->
Sneaker Warehouse
<button class='nav_menu' id='nav-menu'>
<ul class="nav_list">
<li class="nav_item">Home</li>
<li class="nav_item">Featured</li>
<li class="nav_item">Women</li>
<li class="nav_item">New</li>
<li class="nav_item">Shop</li>
</ul>
</button>
<div class="nav_shop">
<i class="bx bx-shopping-bag"></i>
</div>
</nav>
</header>
<script src="practice.js"></script>
<script src="https://unpkg.com/boxicons#2.1.1/dist/boxicons.js"></script>
js
const showMenu = (toggleId, navId) => {
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId)
if (toggle && nav) {
toggle.addEventListener("click", () => {
nav.classList.toggle("show");
toggle.classList.toggle("show");
})
}
};
showMenu('nav-toggle', 'nav-menu');
css
.nav_menu {
display: none;
}
.show {
display: initial;
}
what i want to happen is that on clicking one of the #playlist instances in the unordered list, it will take the corresponding instances inner text and use it to find the rest of the information, like the csv and cover. this is what i have so far but im not sure if im going in the right direction or how to continue. thanks
const playlistCover = document.querySelector('#playlist-cover');
const playlistName = document.querySelector('#playlist-name');
const playlistDuration = document.querySelector('#playlist-duration');
const playlistLength = document.querySelector('#playlist-length');
const playlistSize = document.querySelector('#playlist-size');
const playlistSelector = document.querySelectorAll('.playlist #playlist').forEach(item => {
item.addEventListener('click', event => {
loadPlaylist();
})
})
function loadPlaylist() {
playlistName.innerText = playlist
playlistCover.src = `static/playlists/${playlist}/cover.png`
playlistCSV = `static/playlists/${playlist}/${playlist}.csv`
}
<div class="playlists">
<h3>Playlists</h3>
<ul>
<li class="playlist">
<a id="playlist" href="#hyperpop">hyperpop</a><a id="options">...</a>
</li>
<li class="playlist">
<a id="playlist" href="#uk-rap">uk-rap</a><a id="options">...</a>
</li>
<li class="playlist">
<a id="playlist" href="#misc">misc</a><a id="options">...</a>
</li>
</ul>
</div>
<div class="main">
<div class="playlist-container">
<div class="info">
<div class="playlist-cover">
<img src="static/playlists/uk-rap/cover.png" alt="playlist-cover" id="playlist-cover">
</div>
<div class="playlist-details">
<div class="header">
<h1 id="playlist-name">uk-rap</h1>
</div>
<div id="playlist-data">
<p class="playlist-duration">6 hours 42 minutes</p>
<p class="playlist-songs">192 songs</p>
<p class="playlist-size">372.5 mb </p>
</div>
</div>
</div>
</div>
<script src="static/scripts/playlist loader.js"></script>
</div>
Here is a simplified version of your code.
The way it works is by making the information hidden by default.
Then, when you click on the name of the playlist, the information appears.
This is handled by toggling the hidden class by using elm.classList.toggle().
document.querySelectorAll(".playlist .info")
.forEach(p => p.parentElement.addEventListener(
"click",
() => p.classList.toggle("hidden"))
);
.hidden {
display: none;
}
li {
list-style: none;
}
.playlist>span:hover {
cursor: pointer;
font-weight: bold;
}
<div class="container">
<ul class="playlists">
<li class="playlist">
<span>UK-Rap</span>
<div class="info hidden">
<div class="duration">6 hours 42 mins</div>
<div class="songs">192 songs</div>
<div class="size">372.5 mb</div>
</div>
</li>
<li class="playlist">
<span>Jazz</span>
</li>
<li class="playlist">
<span>Pop</span>
</li>
</ul>
</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
How I can close user account dropdown menu after few seconds after click on icon?
When I use these code setTimeout works only 1 times, when I refresh the browser.
Someone can help?
<body>
<nav>
<div class="user">
<h1>User email</h1>
</div>
<div class="action">
<div class="profile" onclick="menuToggle();">
<i class="fa fa-user" style="font-size: 3em; color: #e0e1dd"></i>
</div>
<div class="menu">
<ul>
<li>line 1</li>
<li>line 2</li>
<li>line 3</li>
</ul>
</div>
</div>
</nav>
<script>
function menuToggle() {
const toggleMenu = document.querySelector('.menu');
toggleMenu.classList.toggle('active')
}
setTimeout(menuToggle, 4000);
</script>
You can try it using this code.
const toggleMenu = document.querySelector('.menu');
function menuToggle() {
toggleMenu.classList.toggle('active')
setTimeout(removeToggle, 4000);
}
function removeToggle() {
toggleMenu.classList.remove('active')
}
Put your setTimeout inside the function menuToggle
function menuToggle() {
setTimeout(function(){
const toggleMenu = document.querySelector('.menu');
toggleMenu.classList.toggle('active')
}, 4000);
}
I'm trying to loop through some elements with an attribute and based on which element I click, I'd like the is-active class to be added to the specific element.
The top section works, clicking on the specific tab, but the problem is with tabBody.
Right now, it adds the class to ALL elements and I cannot figure out where to put this to reference the correct div.
I just want whichever tab-body is active, to be the same tabs-bg is active, and have all that based on which tab is clicked.
I have this code (I've tried let el = this, says already defined):
const tab = document.querySelectorAll('[data-tabs-tab]');
const tabBody = document.querySelectorAll('[data-tabs-body]');
function changeMe() {
const activeTab = this.hasAttribute('data-tabs-tab');
[...tab].forEach(el => {
if (this !== el) {
el.classList.remove('is-active');
}
});
this.classList.add('is-active');
[...tabBody].forEach(el => {
if (el.hasAttribute('data-tabs-body') == activeTab) {
if (el.classList.contains('tabs-bg')) {
el.classList.add('is-active');
}
} else {
el.classList.remove('is-active');
}
});
}
tab.forEach(el => el.addEventListener('click', changeMe));
<div class="tabs" data-tabs>
<nav>
<ul class="tabs__tabs">
<li data-tabs-tab="one" class="is-active"></li>
<li data-tabs-tab="two"></li>
<li data-tabs-tab="three"></li>
</ul>
</nav>
<div class="tabs__content">
<div data-tabs-body="one" class="tab-body is-active"></div>
<div data-tabs-body="two" class="tab-body"></div>
<div data-tabs-body="three" class="tab-body"></div>
</div>
</div>
<div class="tabs__bg">
<div data-tabs-body="one" class="tabs-bg is-active"></div>
<div data-tabs-body="two" class="tabs-bg"></div>
<div data-tabs-body="three" class="tabs-bg"></div>
</div>
.hasAttribute() just checks to see if the attribute exists on the element. You should be using .getAttribute() instead to get the value of the attribute.
Also, not sure why the if (el.classList.contains('tabs-bg')) block was in there, but I commented it out to make the demo work.
const tab = document.querySelectorAll('[data-tabs-tab]');
const tabBody = document.querySelectorAll('[data-tabs-body]');
function changeMe() {
const activeTab = this.getAttribute('data-tabs-tab'); // Change here
[...tab].forEach(el => {
if (this !== el) {
el.classList.remove('is-active');
}
});
this.classList.add('is-active');
[...tabBody].forEach(el => {
if (el.getAttribute('data-tabs-body') === activeTab) { // and here
//if (el.classList.contains('tabs-bg')) {
el.classList.add('is-active');
//}
} else {
el.classList.remove('is-active');
}
});
}
tab.forEach(el => el.addEventListener('click', changeMe));
.is-active {color: red;}
<div class="tabs" data-tabs>
<nav>
<ul class="tabs__tabs">
<li data-tabs-tab="one" class="is-active">Tab 1</li>
<li data-tabs-tab="two">Tab 2</li>
<li data-tabs-tab="three">Tab 3</li>
</ul>
</nav>
<div class="tabs__content">
<div data-tabs-body="one" class="tab-body is-active">Tab Body Content 1</div>
<div data-tabs-body="two" class="tab-body">Tab Body Content 2</div>
<div data-tabs-body="three" class="tab-body">Tab Body Content 3</div>
</div>
</div>
<div class="tabs__bg">
<div data-tabs-body="one" class="tabs-bg is-active">Tab Body BG 1</div>
<div data-tabs-body="two" class="tabs-bg">Tab Body BG 2</div>
<div data-tabs-body="three" class="tabs-bg">Tab Body BG 3</div>
</div>