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);
}
Related
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>
Having trouble closing the Menu after clicking the hamburger button. What's the best way to close the entire menu screen once any of the items are clicked?
My HTML is:
`<body>
<div class="menu-wrap">
<input type="checkbox" class="toggler">
<div class="hamburger">
<div></div>
</div>
<div class="menu">>
<div>
<div>
<ul>
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>`
I've tried using jQuery but havent had success. Here's the js code:
`$('.toggler').on('click', function () {
$('.menu').toggleClass('open');
});
$('.menu li').on("click", function () {
$('.menu-wrap').toggleClass('open');
});`
Or if there's a simpler way using CSS to close the menu?
Here's the codepen to run: https://jsfiddle.net/7rmcx861/#&togetherjs=g5zDdkhjc5
https://jsfiddle.net/h7et0qnv/
this menu style work on input chechbox situation. If checked your hamburger menu get visible else get hidden . so just need to change its situation
wrote one function in your script.
function toggle(){
$(".toggler").prop("checked", false);
}
then put this function to onclick event of menu list
<li><a onclick="toggle()" href="#Home">Home</a></li>
<li><a onclick="toggle()" href="#About">About</a></li>
<li><a onclick="toggle()" href="#">Menu</a></li>
<li><a onclick="toggle()" href="#">Contact</a></li>
If you want to do it with vanilla js, I would suggest you to use CustomEvents. There might be other ways of doing it in frameworks like React.
For every menu item I would emit a custom event -
var menuItems = document.querySelectorAll('.menu li');
for (var i = 0; i < menuItems.length; ++i) {
menuItems[i].addEventListener('click', function(e) {
var closeEvent = new CustomEvent('closeMenu', {
bubbles: true,
});
e.currentTarget.dispatchEvent(closeEvent);
});
}
The 'menu' can then react to this custom event and close itself if open -
var menu = document.querySelector('.menu')
if (menu) {
menu.addEventListener('closeMenu', function (e) {
e.currentTarget.classList.remove('open');
});
}
You can have the usual menu 'toggler' for opening and closing the menu when it is clicked.
Update:
I figured things were not very clear. So here I am adding some sample code.
Note: I added the toggler and subsequently changed the menu eventHandler slightly.
var menuItems = document.querySelectorAll('.menu li');
for (var i = 0; i < menuItems.length; ++i) {
menuItems[i].addEventListener('click', function(e) {
var closeEvent = new CustomEvent('closeMenu', {
bubbles: true,
});
e.currentTarget.dispatchEvent(closeEvent);
});
}
var menu = document.querySelector('.menu')
var toggler = document.querySelector('.toggler')
if (menu && toggler) {
menu.addEventListener('closeMenu', function(e) {
menu.classList.remove('open');
toggler.checked = false;
});
toggler.addEventListener('click', function(e) {
menu.classList.toggle('open');
});
}
.menu {
background-color: white;
display: inline-block;
padding-right: 1rem;
}
.menu.open {
visibility: visible;
}
.menu {
visibility: hidden;
}
<div class="menu-wrap">
<input type="checkbox" class="toggler" checked>
<div class="hamburger">
<div></div>
</div>
<div class="menu open">
<div>
<div>
<ul>
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
I'm creating a menu component on a Vuejs project. This menu has 2 dropdowns, I already created some methods and used Vue directives so when I click in 1 of them, the other hides and vice versa, I'd also like to know how to hide them by clicking outside.
I've tried 2 Vue libs but didn't work for me. Also, I'd like to do this manually if possible and not externally.
HTML:
<!-- menu -->
<div>
<ul>
<li><span>Home</span></li>
<li v-on:click="toggle1(), dropAreas =! dropAreas">
<span>Areas</span>
</li>
<li v-on:click="toggle2(), dropAdmin =! dropAdmin">
<span>Administration</span>
</li>
</ul>
</div>
<!-- /menu -->
<!-- dropdowns-->
<div v-if="dropAreas">
<ul>
<li>
<span>Kitchen</span>
</li>
<li>
<span>Baths</span>
</li>
</ul>
</div>
<div v-if="dropAdmin">
<ul>
<li>
<span>Profile</span>
</li>
<li>
<span>Services</span>
</li>
</ul>
</div>
<!-- /dropdowns-->
JS
data () {
return {
dropAreas: false,
dropAdmin: false
}
},
methods: {
toggle1 () {
if (this.dropAdmin === true) {
this.dropAdmin = false
}
},
toggle2 () {
if (this.dropAreas === true) {
this.dropAreas = false
}
}
}
*This code is being called in another component, "Home", like this:
<template>
<div>
<menu></menu>
<!-- [...] -->
</div>
</template>
Any ideas on how to do it manually? Is it possible? Thank you.
It's a bit of a hack, but you can do it using tabindex HTML attribute and :focus CSS pseudo-class:
new Vue({
el: '#app',
template: `
<div class="container">
<div
ref="menu"
id="menu"
tabindex="0"
>Menu</div>
<ul id="dropdown">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
`
});
#menu {
display: inline-block;
padding: 1em;
border: 1px solid #e6e6e6;
cursor: pointer;
}
#dropdown {
display: none;
}
#menu:focus + #dropdown {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app"></div>
I am developing a responsive website in which when clicked on hamburger, displays a nav ul, but I have not been able to set the list display to none when clicked on the hamburger second time.
HTML
<div class=""container hamburger" onclick="toggleHamburger(this)" id="hamburger">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<ul class="col-m-9 navlist" id="navlist">
<li><a id="HTML" href="#">HTML</a></li>
<li><a id="CSS" href="#">CSS</a></li>
<li><a id="JS" href="#">JS</a></li>
<li><a id="FAQ" href="#">FAQ</a></li>
<li><a id="About" href="#">About</a></li>
JS
function toggleHamburger(hamburg) {
hamburg.classList.toggle("change");
displayNavList();
}
function displayNavList(){
var navList = document.getElementById("navlist");
navList.style.display = "block";
}
So, basically I want to know that if there is any way in JS to call another function when clicked on the hamburger second time.
See the problem on AdiCodes, with the hamburger, it can open the nav list but cannot close it.
Is that what you want to achieve ? or did I misunderstand the question ?
var hamburger = document.querySelector('#hamburger'),
navList = document.querySelector('#navlist');
var toggleNav = function() {
hamburger.classList.toggle('js-active')
navList.classList.toggle('js-active')
}
hamburger.addEventListener('click', toggleNav)
#hamburger {
color: red;
}
.js-active#hamburger {
color: green;
}
#navlist {
display: none;
}
.js-active#navlist {
display: block;
}
<div class="container hamburger" id="hamburger">
HAMBURGER
</div>
<ul class="col-m-9 navlist" id="navlist">
<li><a id="HTML" href="#">HTML</a></li>
<li><a id="CSS" href="#">CSS</a></li>
<li><a id="JS" href="#">JS</a></li>
<li><a id="FAQ" href="#">FAQ</a></li>
<li><a id="About" href="#">About</a></li>
</ul>
Why don't you show/hide your list with a class, then you can toggle that class in your click handler too:
function toggleHamburger(hamburg) {
hamburg.classList.toggle("change");
var navList = document.getElementById("navlist");
navList.classList.toggle("shown");
}
With the CSS:
#navlist:not(.shown) {
display: none;
}
You can define a global counter
var count = 0;
The first time you click it will show your nav, and the second time it will toggle.
var count = 0;
function toggleHamburger(hamburg) {
if(count >= 1){
var navList = document.getElementById("navlist");
navList.style.display = "none";
}else{
hamburg.classList.toggle("change");
displayNavList();
}
count ++;
}
function displayNavList(){
var navList = document.getElementById("navlist");
navList.style.display = "block";
}
<div class="container hamburger" onclick="toggleHamburger(this)" id="hamburger">
<div class="bar1">test</div>
<div class="bar2">test</div>
<div class="bar3">test</div>
</div>
<ul class="col-m-9 navlist" id="navlist" style="display: none;">
<li><a id="HTML" href="#">HTML</a></li>
<li><a id="CSS" href="#">CSS</a></li>
<li><a id="JS" href="#">JS</a></li>
<li><a id="FAQ" href="#">FAQ</a></li>
<li><a id="About" href="#">About</a></li>
I'm having a list of products displayed. Once the show more is clicked the text within the extras class needs to be displayed, the show more needs to be hidden and show less needs to be visible. The opposite needs to happen when show less is clicked.
I used the below jQuery code and it works but the problem is that it shows/hide add the extra text in every block. I want it to show only the relevant block.
Javascript
$(document).ready(function() {
$('.extras').css("display", "none");
$('.showmore').click(function() {
$(".extras").toggle();
$('.showmore').hide();
$('.less').show();
});
$('.less').click(function() {
$(".extras").toggle();
$('.extras').hide();
$('.showmore').show()
});
});
HTML
<div class="blocks">
<div class="right">
<ul class="options">
<li class="x">Service 1</li>
<li class="y">Service 2</li>
<li class="z">Service 3</li>
<li class="r">Service 4</li>
<li class="k">Service 5</li>
</ul>
<div class="showmore"><a>+ show more</a></div>
</div>
<div class="extras">
<p>test text</p>
<div class="less"><a>- hide</a></div>
</div>
</div>
<div class="blocks">
<div class="right">
<ul class="options">
<li class="x">Service 1</li>
<li class="y">Service 2</li>
<li class="z">Service 3</li>
<li class="r">Service 4</li>
<li class="k">Service 5</li>
</ul>
<div class="showmore"><a>+ show more</a></div>
</div>
<div class="extras">
<p>test text</p>
<div class="less"><a>- hide</a></div>
</div>
</div>
<div class="blocks">
<div class="right">
<ul class="options">
<li class="x">Service 1</li>
<li class="y">Service 2</li>
<li class="z">Service 3</li>
<li class="r">Service 4</li>
<li class="k">Service 5</li>
</ul>
<div class="showmore"><a>+ show more</a></div>
</div>
<div class="extras">
<p>test text</p>
<div class="less"><a>- hide</a></div>
</div>
</div>
Any help will be appreciated.
Make sure you do your logic in relevant sections. Demo Here
Try:
$(document).ready(function () {
$('.extras').css("display","none");
$('.showmore').click(function () {
var parent = $(this).closest('.blocks');
$(parent).find(".extras").toggle();
$(parent).find('.less').show();
$(this).hide();
});
$('.less').click(function () {
var parent = $(this).closest('.blocks');
$(parent).find(".extras").toggle();
$(parent).find('.showmore').show();
$(this).hide();
});
});
Use .closest()
$(document).ready(function() {
$('.extras').css("display", "none");
$('.showmore').click(function() {
var $div = $(this).closest('.blocks');
$div.find(".extras").toggle();
$div.find('.showmore').hide();
$div.find('.less').show();
});
$('.less').click(function() {
var $div = $(this).closest('.blocks');
$div.find(".extras").toggle();
$div.find(".extras").hide();
$div.find('.showmore').show();
});
});
Check Fiddle
try using $(this).toggle() in the event handler.
Or I guess more completely, $('.extras').hide(); $(this).show();
Use the $(this) to get the relevant content,
so inside the $(".showmore").click(),
$(this).parents(".blocks").children(".extras").toggle();
$(this).parents(".blocks").children('.showmore').hide();
$(this).parents(".blocks").children('.less').show();
Test Link
You can combine closest, find and toggle to work.
So all your javascript can be changed to the following.
$('.showmore, .less').click(function() {
var $elements = $(this).closest('.blocks').find('.extras, .showmore');
$elements.toggle();
});
demo
References
Closest
Find
Toggle