I'm new with jQuery code.. I tried to develop a "full page menu" by me but i have some difficulty to hide menù on second click.. i tried .toggle() but i read that was retired.. can you help me? thank you so much and sorry for my bad english.
HTML
<div class="container">
<a id="bars" href="#">Apri/Chiudi Menù</a>
</div>
<nav id="nav" class="nav-default">
<ul>
<li>Home</li>
<li>Servizi</li>
<li>Portfolio</li>
<li>Contatti</li>
</ul>
</nav>
CSS
#bars {
position: fixed;
z-index: 2;
}
#nav {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
#nav ul {
list-style: none;
}
.nav-default {
left: -100%;
top:0;
background: #ccc;
}
jQuery
$(document).ready(function() {
$("#bars").click(
function (){
$(".nav-default").animate({
left: "0"
}, 1000, function() {
// Animation complete.
});
});
});
PS Whit this code when i click menù only reveal!
You didn't wrote coded for reset animation. That why it move only one time here i reset the animation if the class exist moved. please look and let me know if you have any issues.
$("#bars").click(function (){
var move;
if(!$(".nav-default").hasClass('moved')){
var move = 0;
$(".nav-default").addClass('moved');
}
else{
var move = "-100%";
$(".nav-default").removeClass('moved');
}
$(".nav-default").animate({
left: move
}, 1000);
});
I would recommend using CSS transitions and adding a class to denote the menu is active.
Here's the jsfiddle of the below code: http://jsfiddle.net/975va7qv/
HTML stays the same:
<div class="container">
<a id="bars" href="#">Apri/Chiudi Menù</a>
</div>
<nav id="nav" class="nav-default">
<ul>
<li>Home</li>
<li>Servizi</li>
<li>Portfolio</li>
<li>Contatti</li>
</ul>
</nav>
CSS - added new class for when the menu is open. Added a transition to the left
property to give it a smooth transition.
#bars {
position: fixed;
z-index: 2;
}
#nav {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
#nav ul {
list-style: none;
}
.nav-default {
left: -100%;
top:0;
background: #ccc;
transition: left .5s ease;
}
.nav-default.is-open {
left: 0
}
JQuery
$(document).ready(function() {
var nav = $('.nav-default'),
bar = $('#bars');
bar.click(function (){
// Check to see if the nav is open
if (nav.hasClass('is-open')) {
// If it is, close it
nav.removeClass('is-open');
} else {
// Nav is closed - open it up
nav.addClass('is-open');
}
});
});
Make use of a flag to set/revert animation.
var flag=0; //Initial value to 0
$(document).ready(function() {
$("#bars").click(
function (){
if(flag==0) //Check here
$(".nav-default").animate({
left: "0"
}, 1000, function() {
flag=1;
});
else
$(".nav-default").animate({
left: "-100%"
}, 1000, function() {
flag=0;
});
});
});
Fiddle here .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.