JAVASCRIPT create hamburger menu javascript - Net-Raft.com

Welcome aboard! We are happy you are here and wish you good net-raft!




Just a Web Code Solution

create hamburger menu using javascript


 738

Show ResultJAVASCRIPT


2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="/StyleSheet.css" type="text/css" rel="stylesheet">

<script>
document.addEventListener("DOMContentLoaded", function(event) {

(function() {

var hamburger = {
navToggle: document.querySelector('.nav-toggle'),
nav: document.querySelector('nav'),

doToggle: function(e) {
e.preventDefault();
this.navToggle.classList.toggle('expanded');
this.nav.classList.toggle('expanded');
}
};

hamburger.navToggle.addEventListener('click', function(e) { hamburger.doToggle(e); });

}());

});
</script>

</head>
<body>

<div class="nav-toggle">
<div class="nav-toggle-bar"></div>
</div>
<nav class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>

</body>
</html>

// StyleSheet.css
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
*:focus {
outline: none;
}
html {
background: black;
color: white;
font: normal 10px/1.42857 'Source Sans Pro', Helvetica, Arial, sans-serif;
}
body {
background: none;
color: inherit;
font: inherit;
}
a {
color: inherit;
cursor: pointer;
text-decoration: none;
}
a:hover {
opacity: 0.8;
}
/* nav toggle */
.nav-toggle {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: pointer;
height: 2rem;
left: 2rem;
position: fixed;
top: 2rem;
width: 3.6rem;
z-index: 2;
}
.nav-toggle:hover {
opacity: 0.8;
}
.nav-toggle .nav-toggle-bar, .nav-toggle .nav-toggle-bar::after, .nav-toggle .nav-toggle-bar::before {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background: white;
content: '';
height: 0.4rem;
width: 100%;
}
.nav-toggle .nav-toggle-bar {
margin-top: 0;
}
.nav-toggle .nav-toggle-bar::after {
margin-top: 0.8rem;
}
.nav-toggle .nav-toggle-bar::before {
margin-top: -0.8rem;
}
.nav-toggle.expanded .nav-toggle-bar {
background: transparent;
}
.nav-toggle.expanded .nav-toggle-bar::after, .nav-toggle.expanded .nav-toggle-bar::before {
background: black;
margin-top: 0;
}
.nav-toggle.expanded .nav-toggle-bar::after {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.nav-toggle.expanded .nav-toggle-bar::before {
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* nav */
.nav {
-webkit-transition: left 1s ease;
-moz-transition: left 1s ease;
-ms-transition: left 1s ease;
-o-transition: left 1s ease;
transition: left 1s ease;
background: white;
color: black;
font-size: 2rem;
height: 100vh;
left: -20rem;
padding: 6rem 2rem 2rem 2rem;
position: fixed;
top: 0;
width: 20rem;
z-index: 1;
}
.nav.expanded {
left: 0;
}
.nav ul {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
list-style: none;
margin: 0;
padding: 0;
}


By     Created   
The power of the user (%)
6%



The most helpful JAVASCRIPT solutions

How to get client machine name or computer name with javascript ?How to get client machine name or computer name with javascript ?JAVASCRIPT

Click to see more ...

  9.4K     388

get client hostname javascriptget client hostname javascriptJAVASCRIPT

Click to see more ...

  3.7K     272

detect ie javascriptdetect ie javascriptJAVASCRIPT

Click to see more ...

  2.3K     187

Create fireworks using javascriptCreate fireworks using javascriptJAVASCRIPT

Click to see more ...

  2K     147

fire event when user is idle javascriptfire event when user is idle javascriptJAVASCRIPT

Click to see more ...

  1.7K     112

create 3d barrel using javascriptcreate 3d barrel using javascriptJAVASCRIPT

Click to see more ...

  1.8K     111

how to create foreach class using javascript ?how to create foreach class using javascript ?JAVASCRIPT

Click to see more ...

  1.4K     108

create qr code javascriptcreate qr code javascriptJAVASCRIPT

Click to see more ...

  1.1K     101

get ip address javascriptget ip address javascriptJAVASCRIPT

Click to see more ...

  1K     76

get filename using javascript get filename using javascript JAVASCRIPT

Click to see more ...

  743     62