Menu bar does not switch to the left Position
Problem
My problem is that I am trying to get my menu button to move the left position by 230px
, back to 30px
when you click on it again. But for some reason it doesn't work the way I wanted it to.
What i want to do
When the user presses the menu button for the first time, I want the menu to change its left position to 230px
, when the user clicks on the menu again to close the navbar, I want the left menu position to go back to30px
What i get
Currently the menu button only changes its left position to 230px
, but does not return to30px
source to share
Your class .toggle
does not fall back to left: 30px;
. You can toggleClass
on it when opening / closing the menu.
jQuery:
if($nav.css("width", "20%")) {
$toggle.toggleClass('active');
} else if($nav.css("width", "0")) {
$toggle.toggleClass('active');
}
CSS:
.toggle {
position: fixed;
top: 30px;
left: 30px;
cursor: pointer;
color: #333;
transform: scale(1);
transition: all 300ms ease-in-out;
&:hover {
transform: scale(1.2);
}
&.active {
left: 230px
}
}
source to share
$toggle.on("click", () => {
toggle($nav, 350, () => {
// toggle
if($nav.css("width", "20%")) {
$toggle.css("left", "230px");
} else if($nav.css("width", "0")) {
$toggle.css("left", "30px");
}
});
});
I think your problem is $ nav width always> 0. And I change my code:
$toggle.on("click", () => {
toggle($nav, 350, () => {
// toggle
if($nav.hasClass("active")){
$toggle.css("left", "30px");
$nav.removeClass("active");
}
else{
$toggle.css("left", "230px");
$nav.addClass("active");
}
});
});
Hope for help.
source to share
you can achieve this simply by switching the active class like
$toggle.toggleClass('active');
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="//code.jquery.com/jquery-git.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
nav {
background-color: #333;
position: fixed;
height: 100%;
width: 25%;
display: none; }
nav ul {
list-style: none; }
nav ul li {
display: block;
color: #fff;
font: 500 1em Raleway;
padding: 10px;
cursor: pointer; }
nav ul li:hover {
background-color: #fff;
color: #333; }
.toggle {
position: fixed;
top: 30px;
left: 30px;
cursor: pointer;
color: #333;
transform: scale(1);
transition: all 300ms ease-in-out; }
.toggle:hover {
transform: scale(1.2); }
.toggle.active {
left: 230px; }
</style>
<script type='text/javascript'>//<![CDATA[
$(window).on('load', function() {
// cache elements
let $toggle = $(".toggle");
let $nav = $(".nav")
$(document).ready(() => {
// activate nav bar
$toggle.on("click", () => {
toggle($nav, 350, () => {
$toggle.toggleClass('active');
});
});
});
function toggle(e, speed, callback) {
e.animate({width: 'toggle'}, speed);
if (callback) {
return callback();
}
};
});//]]>
</script>
</head>
<body>
<nav class="nav">
<ul>
<li>General Info</li>
<li>Specs</li>
<li>RAM / Memory</li>
<li>Program Versions</li>
<li><i class="fa fa-cog" aria-hidden="true"></i> Settings</li>
</ul>
</nav>
<div class="toggle"><i class="fa fa-bars" aria-hidden="true"></i></div>
<script src="https://use.fontawesome.com/e66a204baf.js"></script>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "403x9prh"
}], "*")
}
</script>
</body>
</html>
source to share
no need to check state add id to menu button
<div id="menu-button" class="toggle"><i class="fa fa-bars" aria-hidden="true"></i></div>
switch to
$toggle.on("click", () => {
toggle($nav, 350, () => {
// toggle
document.getElementById("menu-button").classList.toggle('nav-active');
});
});
and change css to
.toggle {
position: fixed;
top: 30px;
cursor: pointer;
color: #333;
transform: scale(1);
transition: all 200ms ease-in-out;
&:hover {
transform: scale(1.2);
}
&.nav-active{
left:230px;
}
}
source to share