Open hamburger menu - javascript

Open hamburger menu - javascript

can anyone help me making my "hamburger menu" do something? I want that, when a person clicks on it, words like "Home and Works" appear on the side. And then when you close it, and goes to its previous form, the menu disappears as well.
HTML
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<div class="bar6"></div>
<div class="bar5"></div>
</div>
CSS
<style>
.container {
display: inline-block;
cursor: pointer;
position: absolute;
top: 50px;
right: 50px;
z-index: 99
}
.bar1{
width: 48px;
height: 5px;
background-color: rgb(156, 156, 156);
margin: 6px 0;
transition: 0.4s;
}
.bar2{
width: 48px;
height: 5px;
background-color: rgb(63, 63, 63);
margin: 6px 0;
transition: 0.4s;
}
.bar3{
width: 48px;
height: 5px;
background-color: rgb(134, 134, 134);
margin: 6px 0;
transition: 0.4s;
}
.bar4{
width: 48px;
height: 5px;
background-color: rgb(77, 77, 77);
margin: 6px 0;
transition: 0.4s;
}
.bar5{
width: 20px;
height: 7px;
background-color: rgb(255, 255, 255);
margin: 6px 0;
transition: 0.7s;
z-index: 99
}
.bar6 {
width: 37.5px;
height: 7px;
background-color: rgb(255, 255, 255);
margin: 6px 0;
transition: 0.7s;
z-index: 99
}
.bar7 {
width: 37.5px;
height: 5px;
background-color: rgb(255, 255, 255);
margin: 6px 0;
transition: 0.7s;
z-index: 99
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-75deg) translate(-22px, 18px) ;
}
/* Rotate second bar */
.change .bar2 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(75deg) translate(15px, 1.5px) ;
}
/* Rotate third bar */
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(-75deg) translate(-3.5px,3px) ;
}
/* Rotate forth bar */
.change .bar4 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(75deg) translate(-2.9px, -14px) ;
}
/* Rotate fifth bar */
.change .bar6 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(90deg) translate(0px, -12.7px) ;
}
/* Rotate sixth bar */
.change .bar5 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-90deg) translate(54px, 21.5px) ;
}
</style>
JavaScript
<script>
function myFunction(x) {
x.classList.toggle("change");
}
</script>
What do I need to put more? Those bars function as my logo, so I didn't want to get them off, but at the same time, as a newbie, I don't know how to incorporate a menu in it.
Thank you!

Related

how to populate the upper part of a semicircle?

so Im trying to make an interactive button that would be placed on the bottom of my screen and when clicked, a semicircle is created around it. this has buttons inside, so its kind of a navigation menu. Im now struggling with the math behind it. Right now, the buttons are distributed all around the circle, however i want them to only be placed in the upper part of my semicircle. This is the code i have so far:
var items = document.querySelectorAll('.menuItem');
for(var i = 0, l = items.length; i < l; i++) {
items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
}
document.querySelector('.center').onclick = function(e) {
e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
}
#import "https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";
body {
/* Image source: http://wallbase.cc/wallpaper/718405 */
/* Excuse the base64 mess, imgur blocked the hotlinked image and this seemed like the fastest solution */
background: cornflowerblue url(" data:image/png;base64,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") no-repeat fixed;
background-size: cover;
}
a {
font-size: 14px;
text-decoration: none;
outline: 0;
}
.circle,
.ring {
height: 256px;
position: relative;
width: 256px;
}
.circle {
margin: 0 auto;
}
.ring {
background-color: rgba(0,0,0,0.5);
border-radius: 50%;
opacity: 0;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(0.1) rotate(-270deg);
-moz-transform: scale(0.1) rotate(-270deg);
-transform: scale(0.1) rotate(-270deg);
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.open .ring {
opacity: 1;
-webkit-transform: scale(1) rotate(0);
-moz-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
.center {
background-color: rgba(255,255,255,0.3);
border-radius: 50%;
border: 2px solid #ffffff;
bottom: 0;
color: white;
height: 80px;
left: 0;
line-height: 80px;
margin: auto;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 80px;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.open .center {
border-color: #aaaaaa;
}
.menuItem {
border-radius: 50%;
color: #eeeeee;
display: block;
height: 40px;
line-height: 40px;
margin-left: -20px;
margin-top: -20px;
position: absolute;
text-align: center;
width: 40px;
}
<div class="circle">
<div class="ring">
</div>
</div>
the end would look something like this
button mockup

Both the top and left calculations need adjusting so there isn't so much movement:
var items = document.querySelectorAll('.menuItem');
for (var i = 0, l = items.length; i < l; i++) {
items[i].style.left = (50 - 35 * Math.cos(-0.125 * Math.PI - (1 / l) * i * Math.PI)).toFixed(4) + "%";
items[i].style.top = (50 + 35 * Math.sin(-0.125 * Math.PI - (1 / l) * i * Math.PI)).toFixed(4) + "%";
}
document.querySelector('.center').onclick = function(e) {
e.preventDefault();
document.querySelector('.circle').classList.toggle('open');
}
#import "https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";
body {
/* Image source: http://wallbase.cc/wallpaper/718405 */
/* Excuse the base64 mess, imgur blocked the hotlinked image and this seemed like the fastest solution */
background: cornflowerblue url(" data:image/png;base64,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") no-repeat fixed;
background-size: cover;
}
a {
font-size: 14px;
text-decoration: none;
outline: 0;
}
.circle,
.ring {
height: 256px;
position: relative;
width: 256px;
}
.circle {
margin: 0 auto;
}
.ring {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
opacity: 0;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(0.1) rotate(-270deg);
-moz-transform: scale(0.1) rotate(-270deg);
transform: scale(0.1) rotate(-270deg);
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
position: relative;
}
.open .ring {
opacity: 1;
-webkit-transform: scale(1) rotate(0);
-moz-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
.center {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 50%;
border: 2px solid #ffffff;
bottom: 0;
color: white;
height: 80px;
left: 0;
line-height: 80px;
margin: auto;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 80px;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.open .center {
border-color: #aaaaaa;
}
.menuItem {
border-radius: 50%;
color: #eeeeee;
display: block;
height: 40px;
line-height: 40px;
margin-left: -20px;
margin-top: -20px;
position: absolute;
text-align: center;
width: 40px;
}
<div class="circle">
<div class="ring">
</div>
</div>

Why does only a part of the code execute on submission of a form?

I've made a form which, on submitting, triggers the function "validateForm()" from an external .js file. Here's the html:
<div class="loginContainer">
<div id="login "class="login">
<img src="picture.tiff" class="loginImage">
<div class="loginHeading">
Login
</div>
<form id="form" onsubmit="validateForm()">
<input type="text" class="loginTextbox" name="name" placeholder="Username"></input>
<input type="password" class="loginTextbox" name="password" placeholder="Password"></input>
<div id="loginButtonContainer">
<input type="reset" class="loginButton" value="Reset">
<input type="submit" class="loginButton recommended" value="Login">
</div>
</form>
</div>
<script src="validator.js">
</script>
On clicking submit, it triggers the function "validateForm()" function, which checks to see if the username is "username" and password is "password".(It's only an experiment I'm doing, so not much security needed.) And if they're not, it adds "disabled" and "invalid" classes to the form, and then removes them. (it functions like the macOS password screen on boot up.)
Only for some reason, it only executes part of the code:
function validateForm() {
var form = document.getElementById("login");
var name = document.forms["form"]["name"].value;
var password = document.forms["form"]["password"].value;
if (name == "username" && password == "password") {
alert("Password is correct.");
} else {
alert("Password is incorrect.");
// this part doesn't execute.
form.classList.add("disabled");
setTimeout(function(){
form.classList.add("invalid");
}, 2000);
setTimeout(function(){
form.classList.remove("invalid");
form.classList.remove("disabled");
}, 600);
}
}
The part of code from form.classList.add("disabled"); doesn't execute. Can someone help me out with this?
edit:
I tried <div id="login" class="login"> instead of <div id="login "class="login">, it doesn't work.
Edit 2:
Here is the CSS:
body {
background-image: url("background.jpg");
font-family: system-ui;
background-size: cover;
background-position: center;
}
.loginContainer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(10, 10, 10, 0.5);
z-index: 1;
}
.login {
height: 360px;
width: 300px;
background-color: #fbfbfb;
border: 2px;
border-radius: 16px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
z-index: 0;
-webkit-transform: translate(-50%, -50%);
}
.loginimage {
width: 100px;
height: 100px;
padding-top: 25px;
}
.loginHeading {
font-size: 30px;
font-weight: bold;
height: 50px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.loginTextbox {
height: 50px;
width: 270px;
margin: 4px;
background-color: #fff;
border: 2px;
border-radius: 16px;
font-size: 20px
padding-right: 1rem;
padding-left: 1rem;
}
.invalid {
animation: shake .5s linear;
}
.loginTextbox:focus, textarea:focus {
box-shadow: 0 0 5px #0084FF;
border: 1px solid #006AFF;
}
.disabled {
background-image: -webkit-linear-gradient(#cccccc, #bbbbbb);
color: gray;
}
.loginbuttonContainer{
height: 83px;
width: 300px;
}
.loginbutton {
height: 50px;
width: 130px;
margin: 4px;
background-color: #f5f5f5;
border: 2px;
border-radius: 16px;
font-size: 20px
}
.loginbutton:hover {
background-color: #f0f0f0;
}
.loginbutton:active {
background-image: -webkit-linear-gradient(#0084FF, #006AFF);
color: white;
}
.destructive {
color: red;
}
.recommended {
background-image: -webkit-linear-gradient(#0095FF, #007BFF);
color: white;
}
#keyframes shake {
8%, 41% {
-webkit-transform: translateX(-10px);
-webkit-transform: translate(-50%, -50%);
}
25%, 58% {
-webkit-transform: translateX(10px);
-webkit-transform: translate(-50%, -50%);
}
75% {
-webkit-transform: translateX(-5px);
-webkit-transform: translate(-50%, -50%);
}
92% {
-webkit-transform: translateX(5px);
-webkit-transform: translate(-50%, -50%);
}
0%, 100% {
-webkit-transform: translateX(0);
-webkit-transform: translate(-50%, -50%);
}
}
#supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
.login {
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
background-color: rgba(255, 255, 255, 0.5);
}
}

I believe this here is where your problem lies
<div id="login "class="login">
There is additional " " after id="login"
And you're calling it with
var form = document.getElementById("login");
Just change
<div id="login "class="login">
to
<div id="login"class="login">
Edit V2
Change the following
setTimeout(function(){
form.classList.remove("invalid");
form.classList.remove("disabled");
}, 9000); //Changes the delay of removing the effects
#keyframes shake {
8%, 41% {
transform: translateX(-10px);
transform: translate(-50%, -50%);
}
25%, 58% {
transform: translateX(10px);
transform: translate(-50%, -50%);
}
75% {
transform: translateX(-5px);
transform: translate(-50%, -50%);
}
92% {
transform: translateX(5px);
transform: translate(-50%, -50%);
}
0%, 100% {
transform: translateX(0);
transform: translate(-50%, -50%);
}
}
Change from 0.5s to 2 or 3 or so, because is too instant
.invalid {
animation: shake 5s linear;
}
Changed the color code here too
.disabled {
background-image: linear-gradient(red, blue);
color: gray;
}

Show/hide multiple popup when clicked

I have created a Pen on Show/hide multiple popup : https://codepen.io/Volabos/pen/BGdBKw
As you see, here we have 3 sections for 2016, 2017, and 2018. The goal is when user clicks on them different windows will slip-up displaying different information.
My implementation works fine for 2016. In that case, a Pop-up window showing PART 01 will open. However, for 2017, I have implemented just same logic, but failed to show PART 02.
Could someone point me exactly what went wrong for 2017?
var toggle = document.getElementById('toggle_Y1');
var slider = document.querySelector('.slider_Y1');
var toggle1 = document.getElementById('toggle_Y11');
toggle.addEventListener('click', toggleSlider, false);
toggle1.addEventListener('click', toggleSlider, false);
function toggleSlider() {
if (slider.classList.contains('opened_Y1')) {
slider.classList.remove('opened_Y1');
slider.classList.add('closed_Y1');
} else {
slider.classList.remove('closed_Y1');
slider.classList.add('opened_Y1');
}
}
var toggle_2 = document.getElementById('toggle_Y2');
var slider_2 = document.querySelector('.slider_Y2');
var toggle1_2 = document.getElementById('toggle_Y21');
toggle_2.addEventListener('click', toggleSlider_2, false);
toggle1_2.addEventListener('click', toggleSlider_2, false);
function toggleSlider_2() {
if (slider_2.classList.contains('opened_Y2')) {
slider_2.classList.remove('opened_Y2');
slider_2.classList.add('closed_Y2');
} else {
slider_2.classList.remove('closed_Y2');
slider_2.classList.add('opened_Y2');
}
}
.content_EQ_Announcement_Y {
margin: 0 auto;
padding: 10px 0 10px 0;
width: 33.2%;
height: 300px;
display: inline-block;
float: left;
border-right: 1px solid #e5e5e5;
background: rgba(0, 0, 0, .0);
text-align: center;
cursor: pointer;
}
.Y1 {
border-right: 0px solid #e5e5e5;
}
.EQ_Announcement_Y1 {
overflow: hidden;
position: absolute;
height: 292px;
width: 100%;
background: rgba(0, 0, 0, .0);
margin-top: 4px;
}
.slider_Y1,
.slider_Y2 {
height: 100%;
width: 100%;
background: rgba(0, 0, 0, .0);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
padding: 0px;
border: 1px solid #cccccc;
z-index: 200;
-webkit-transition: -webkit-transform .3s ease;
-moz-transition: -moz-transform .3s ease;
-ms-transition: -ms-transform .3s ease;
transition: transform .3s ease;
}
.slider_Y1.opened_Y1,
.slider_Y2.opened_Y2 {
-webkit-transform: translate(0, 0%);
-moz-transform: translate(0, 0%);
-ms-transform: translate(0, 0%);
transform: translate(0, 0%);
background: #fff;
}
.slider_Y1.closed_Y1,
.slider_Y2.closed_Y2 {
-webkit-transform: translate(0, 100%);
-moz-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
transform: translate(0, 100%);
}
#toggle_Y11,
#toggle_Y21 {
margin: 0;
padding: 0;
background: rgba(0, 0, 0, .0);
width: 100%;
height: 100%;
text-align: left;
position: absolute;
}
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<div class="EQ_Announcement_Y1">
<div class='content_EQ_Announcement_Y'>
<div id='toggle_Y1'>2016</div>
</div>
<div class='content_EQ_Announcement_Y'>
<div id='toggle_Y2'>2017</div>
</div>
<div class='content_EQ_Announcement_Y'>
<div id='toggle_Y3'>2018</div>
</div>
<div class="slider_Y1 closed_Y1">
<div id='toggle_Y11'>
PART 01
</div>
</div>
<div class="slider_Y2 closed_Y2">
<div id='toggle_Y21'>
PART 02
</div>
</div>
</div>

Transform .slider_Y2.opened_Y2 to -100%
var toggle = document.getElementById('toggle_Y1');
var slider = document.querySelector('.slider_Y1');
var toggle1 = document.getElementById('toggle_Y11');
toggle.addEventListener('click', toggleSlider, false);
toggle1.addEventListener('click', toggleSlider, false);
function toggleSlider() {
if (slider.classList.contains('opened_Y1')) {
slider.classList.remove('opened_Y1');
slider.classList.add('closed_Y1');
} else {
slider.classList.remove('closed_Y1');
slider.classList.add('opened_Y1');
}
}
var toggle_2 = document.getElementById('toggle_Y2');
var slider_2 = document.querySelector('.slider_Y2');
var toggle1_2 = document.getElementById('toggle_Y21');
toggle_2.addEventListener('click', toggleSlider_2, false);
toggle1_2.addEventListener('click', toggleSlider_2, false);
function toggleSlider_2() {
if (slider_2.classList.contains('opened_Y2')) {
slider_2.classList.remove('opened_Y2');
slider_2.classList.add('closed_Y2');
} else {
slider_2.classList.remove('closed_Y2');
slider_2.classList.add('opened_Y2');
}
}
.content_EQ_Announcement_Y {
margin: 0 auto;
padding: 10px 0 10px 0;
width: 33.2%;
height: 300px;
display: inline-block;
float: left;
border-right: 1px solid #e5e5e5;
background: rgba(0, 0, 0, .0);
text-align: center;
cursor: pointer;
}
.Y1 {
border-right: 0px solid #e5e5e5;
}
.EQ_Announcement_Y1 {
overflow: hidden;
position: absolute;
height: 292px;
width: 100%;
background: rgba(0, 0, 0, .0);
margin-top: 4px;
}
.slider_Y1,
.slider_Y2 {
height: 100%;
width: 100%;
background: rgba(0, 0, 0, .0);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
padding: 0px;
border: 1px solid #cccccc;
z-index: 200;
-webkit-transition: -webkit-transform .3s ease;
-moz-transition: -moz-transform .3s ease;
-ms-transition: -ms-transform .3s ease;
transition: transform .3s ease;
}
.slider_Y1.opened_Y1 {
-webkit-transform: translate(0, 0%);
-moz-transform: translate(0, 0%);
-ms-transform: translate(0, 0%);
transform: translate(0, 0%);
background: #fff;
}
.slider_Y1.closed_Y1,
.slider_Y2.closed_Y2 {
-webkit-transform: translate(0, 100%);
-moz-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
transform: translate(0, 100%);
}
.slider_Y2.opened_Y2 {
background: white;
-webkit-transform: translate(0, -100%);
-moz-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
transform: translate(0, -100%);
}
#toggle_Y11,
#toggle_Y21 {
margin: 0;
padding: 0;
background: rgba(0, 0, 0, .0);
width: 100%;
height: 100%;
text-align: left;
position: absolute;
}
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<div class="EQ_Announcement_Y1">
<div class='content_EQ_Announcement_Y'>
<div id='toggle_Y1'>2016</div>
</div>
<div class='content_EQ_Announcement_Y'>
<div id='toggle_Y2'>2017</div>
</div>
<div class='content_EQ_Announcement_Y'>
<div id='toggle_Y3'>2018</div>
</div>
<div class="slider_Y1 closed_Y1">
<div id='toggle_Y11'>
PART 01
</div>
</div>
<div class="slider_Y2 closed_Y2">
<div id='toggle_Y21'>
PART 02
</div>
</div>
</div>

.slider_Y1 height = 100% ===> distance from top = 100%
.slider_Y2.opened_Y2 height = 100% + .slider_Y1 height === > distance from top = 200%
.slider_Y2.opened_Y2 {
-webkit-transform: translate(0, -100%);
-moz-transform: translate(0, -100%);
-ms-transform: translate(0, -100%);
transform: translate(0, -100%);
background: #fff;
}

Toggle Element Colour Based on Background Colour in JS

I've written some JavaScript code that almost works the way I want it to, but I need some help figuring out how to make it work the way I need it to.
I want to change the colour of a fixed navigation element (hamburger) when it encounters a section with the class of white.Right now this is accomplished by adding a class of darker to that nav element.
What I can't figure out is how to have the darker class removed when I scroll past an element that no longer has the class of white. Any help is much appreciated!
Thanks in advance! :)
Code pen demo
The code is as follows: (Maybe not showing as expected here in SO, better in Codepen)
$(document).ready(function(){
$('#hamburger').click(function(){
$(this).toggleClass('open');
});
});
$(document).ready(function () {
var change = $('.change');
$(window).scroll(function () {
var y = $(this).scrollTop();
var z = $('.white').offset().top;
if (y >= z) {
change.addClass('darker');
}
else {
change.removeClass('darker');
}
});
});
//Variables
$grey-darker: hsl(0, 0%, 21%);
$grey: hsl(0, 0%, 48%);
$white: hsl(0, 0%, 100%);
$bold: 900;
//Formatting
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: sans-serif;
letter-spacing: -1.5px;
}
h1 {
color: $white;
font-size: 7em;
font-weight: $bold;
}
//Navigation/
.navigation {
display:flex;
vertical-align:top;
width: 100%;
height: 76px;
position: fixed;
}
//Hamburger --> This should change from white & blue depending on background color
#hamburger {
width: 30px;
height: 20px;
margin-left: auto;
align-self: center;
margin-right: 30px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out, ;
transition-delay: background 0.4s;
cursor: pointer;
z-index: 5;
}
#hamburger span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: $white;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out, ;
transition-delay: background 0.4s;
}
#hamburger span.change.darker{
background: Blue;
}
#hamburger span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#hamburger span:nth-child(2) {
top: 6px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#hamburger span:nth-child(3) {
top: 12px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#hamburger.open span:nth-child(1) {
background:white;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0px;
left: 5px;
}
#hamburger.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#hamburger.open span:nth-child(3) {
background:white;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 22px;
left: 5px;
}
//Main
.container-fullpage {
display: flex;
flex-direction: row;
flex-flow: row wrap;
align-items: center;
justify-content: space-around;
height: 100vh;
width: 100vw;
}
.sectionOne {
background: blue;
}
.sectionTwo{
color: blue;
background: $white;
}
.sectionTwo h1 {
color: blue;
}
.sectionThree{
background: blue;
}
.sectionFour{
background: $white;
}
.sectionFour h1 {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header">
<nav class="navigation">
<div class="hamburger" id="hamburger">
<span class="change"></span>
<span class="change"></span>
<span class="change"></span>
</div>
</nav>
</header>
<main>
<div class="container-fullpage sectionOne">
<h1 class="home">First Section</h1>
</div>
<div class="container-fullpage sectionTwo white">
<h1>Second Section</h1>
</div>
<div class="container-fullpage sectionThree">
<h1>Third Section</h1>
</div>
<div class="container-fullpage sectionFour white">
<h1>Fourth Section</h1>
</div>
</main>

I think this is the javascript code that will do what you want:
$(document).ready(function(){
$('#hamburger').click(function(){
$(this).toggleClass('open');
});
});
$(document).ready(function () {
var change = $('.change');
$(window).scroll(function () {
var top1 = change.offset().top;
var bottom1 = change.offset().top + change.outerHeight(true);
var overlapsWhite = false;
$('.white').each(function() {
var top2 = $(this).offset().top;
var bottom2 = $(this).offset().top + $(this).outerHeight(true);
if (top1 >= top2 && bottom2 >= bottom1){
overlapsWhite = true;
return false;
}
});
if (overlapsWhite) {
change.addClass('darker');
}
else {
change.removeClass('darker');
}
});
});
Check on Code pen

How to hide/show the menu using classList toogle

I am creating an interactive hamburger button that shows and hides the menu. what I am trying to achieve here is when I click the hamburger button, the menu shows up and when I click transformed "X" button, the menu hides itself vice versa. I would appreciate tips. Thank you so much.
function myFunction(y) {
y.classList.toggle("change");
}
.container {
display: inline-block;
cursor: pointer;
}
[class*="bar"] {
width: 35px;
height: 5px;
background-color: #000a;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
/* Menu */
.menu {
padding: 50px 0;
width: 300px;
height: 300px;
position: absolute;
top: 50px;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
transition: 0.3s;
}
.menu>a {
text-align: center;
margin: 50px 10px;
display: block;
color: #fffa;
font-size: 1.5rem;
text-decoration: none;
transition: 0.5s;
}
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="menu" class="menu">
Home
Work
About
</div>

You have done everything except connect those two. You just need to add the following CSS:
.menu {
display: none;
}
.change + .menu {
display: block;
}
function myFunction(y) {
y.classList.toggle("change");
}
.container {
display: inline-block;
cursor: pointer;
}
[class*="bar"] {
width: 35px;
height: 5px;
background-color: #000a;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
/* Menu */
.menu {
padding: 50px 0;
width: 300px;
height: 300px;
position: absolute;
top: 50px;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
transition: 0.3s;
}
.menu>a {
text-align: center;
margin: 50px 10px;
display: block;
color: #fffa;
font-size: 1.5rem;
text-decoration: none;
transition: 0.5s;
}
.menu {
display: none;
}
.change + .menu {
display: block;
}
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="menu" class="menu">
Home
Work
About
</div>
Bonus
If you want a nice fading animation, you can also use opacity.
function myFunction(y) {
y.classList.toggle("change");
}
.container {
display: inline-block;
cursor: pointer;
}
[class*="bar"] {
width: 35px;
height: 5px;
background-color: #000a;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
/* Menu */
.menu {
padding: 50px 0;
width: 300px;
height: 300px;
position: absolute;
top: 50px;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
transition: 0.3s;
}
.menu>a {
text-align: center;
margin: 50px 10px;
display: block;
color: #fffa;
font-size: 1.5rem;
text-decoration: none;
transition: 0.5s;
}
.menu {
opacity: 0;
transition: opacity 0.5s linear;
}
.change + .menu {
opacity: 1;
}
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="menu" class="menu">
Home
Work
About
</div>

Please try this code
function myFunction(y) {
y.classList.toggle("change");
}
.container {
display: inline-block;
cursor: pointer;
}
[class*="bar"] {
width: 35px;
height: 5px;
background-color: #000a;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 7px);
transform: rotate(-45deg) translate(-9px, 7px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -7px);
transform: rotate(45deg) translate(-8px, -7px);
}
.menu {
padding: 50px 0;
width: 300px;
height: 300px;
position: absolute;
top: 50px;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
transition: 0.3s;
}
.menu>a {
text-align: center;
margin: 50px 10px;
display: block;
color: #fffa;
font-size: 1.5rem;
text-decoration: none;
transition: 0.5s;
}
.menu {
max-height: 0;
padding: 0;
}
.change + .menu {
max-height: 500px;
}
.change + .menu,
.change ,
.menu {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="menu" class="menu">
Home
Work
About
</div>

We Keep Coding

JavaScript is the programming language of the Web.

Open hamburger menu - javascript

Related

how to populate the upper part of a semicircle?

Why does only a part of the code execute on submission of a form?

Show/hide multiple popup when clicked

Toggle Element Colour Based on Background Colour in JS

How to hide/show the menu using classList toogle

Categories

Resources