We Keep Coding

How to Make Nav Hidden When Clicked Outside Of It

I am using a checkbox to toggle/untoggled to display the dropdown Navigation. What I am trying to do is that if the user clicks anywhere other than the Navigation, the Navigation will become unchecked -> if (document.getElementById("navToggle").checked) {console.log("uncheck the nav")}
With my code it seems to execute even if the user clicks on the Navigation, ignoring this -> if (!event.target.matches('.top-nav').
/*window.onclick = function (event) {
if (!event.target.matches('.top-nav')) {
if (document.getElementById("navToggle").checked) {
console.log("uncheck the nav")
}
}
}*/
function myFunction(x) {
x.classList.toggle("change");
}
function dropdown() {
document.getElementById("myDropdown").style.display = "block"
}
window.onclick = function(event) {
if (!event.target.matches('.top-nav')) {
if (document.getElementById("navToggle").checked) {
console.log("uncheck the nav")
}
}
}
#import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');
:root {
--background: rgba(0, 214, 170, .85);
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
button {
cursor: pointer;
background: none;
border: 0;
color: inherit;
/* cursor: default; */
font: inherit;
line-height: normal;
overflow: visible;
padding: 0;
}
/* navigation styles start here */
header {
background: var(--background);
text-align: center;
position: fixed;
height: 5rem;
z-index: 999;
width: 100%;
}
/* changed this from the tutorial video to
allow it to gain focus, making it tabbable */
.nav-toggle {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.nav-toggle-label {
position: absolute;
top: 0;
left: 0;
margin-left: 1em;
height: 100%;
display: flex;
align-items: center;
}
.nav-toggle-container {
display: inline-block;
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 5px;
background-color: white;
margin: 6px 0;
transition: 400ms;
}
.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
transform: translate(0, -11px) rotate(45deg);
}
nav {
position: absolute;
text-align: left;
top: 100%;
left: 0;
background: var(--background);
width: 100%;
transform: scale(1, 0);
transform-origin: top;
transition: transform 400ms ease-in-out;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
margin-top: 1em;
margin-left: 1em;
margin-bottom: 1em;
}
nav a,
nav button {
color: white;
text-decoration: none;
font-size: 1.25rem;
text-transform: uppercase;
opacity: 0;
transition: opacity 150ms ease-in-out;
}
nav a:hover,
nav .dropdown:hover>button {
color: #000;
}
.nav-toggle:checked~nav {
transform: scale(1, 1);
}
.nav-toggle:checked~nav a,
.nav-toggle:checked~nav .dropdown>button {
opacity: 1;
transition: opacity 250ms ease-in-out 250ms;
}
.arrow {
border: solid #222;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
margin-bottom: 4px;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.dropdown:hover .arrow {
border: solid black;
border-width: 0 3px 3px 0;
}
.dropdown-content {
display: none;
}
.dropdown-content a {
display: block;
text-align: left;
padding: 0;
margin-top: .5em;
margin-left: .5em;
margin-bottom: .5em;
}
.show {
display: block;
}
<header id="top-nav">
<label for="navToggle" class="nav-toggle-label">
<span
><div class="nav-toggle-container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div></div
></span>
</label>
<input type="checkbox" id="navToggle" class="nav-toggle" />
<nav class="nav">
<ul>
<li>
Home
</li>
<li>About</li>
<li>
<div class="dropdown">
<button class="dropdown-button" onclick="dropdown()">
Classes <i class="arrow down"></i>
</button>
<div class="dropdown-content" id="myDropdown">
<div class="colums">
<h1>Semester 1</h1>
Physics 11
Chemistry 11
English 11
French 11
<h1>Semester 2</h1>
Gym 11
Psychology 11
Law 11
Pre-calculus 11
</div>
</div>
</div>
</li>
<li>Contact</li>
</ul>
</nav>
</header>

Try to use eventListener everywhere
window.addEventListener("click", event => {
const tgt = event.target.closest('.top-nav');
if (!tgt && document.getElementById("navToggle").checked) {
console.log("uncheck the nav")
}
})

How to close responsive Hamburger menu via link using JS?

I am kinda stuck at a roadblock so I figured I come here for some advice.
I'm helping my classmate integrate an embed code into their Carrd site. We got this menu working pretty well but there's 1 feature we can't figure out.
We're trying to close the responsive hamburger via JS but we're not sure what to do. The goal is to close the menu once a link is clicked.
Any advice would be appreciated, thank you!
<style>
body {
font-family: 'Helvetica Neue', sans-serif;
font-weight: 400;
}
* {
box-sizing: border-box;
}
nav {
padding: 30px;
}
nav ul {
float: right;
}
nav ul li {
display: inline-block;
float: left;
}
nav ul li:not(:first-child) {
margin-left: 25px;
}
nav ul li a {
display: inline-block;
outline: none;
color: white;
font-size: 16px;
text-decoration: none;
letter-spacing: 0.04em;
}
nav ul li a:hover {
color: #808080;
text-decoration: none;
}
#media screen and (max-width: 560px) {
.nav-container {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
background: #1f2227;
opacity: 0;
transition: all 0.2s ease;
}
.nav-container ul {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.nav-container ul li {
display: block;
float: none;
width: 100%;
text-align: right;
margin-bottom: 10px;
}
.nav-container ul li:nth-child(1) a {
transition-delay: 0.2s;
}
.nav-container ul li:nth-child(2) a {
transition-delay: 0.3s;
}
.nav-container ul li:nth-child(3) a {
transition-delay: 0.4s;
}
.nav-container ul li:nth-child(4) a {
transition-delay: 0.5s;
}
.nav-container ul li:not(:first-child) {
margin-left: 0;
}
.nav-container ul li a {
padding: 10px 25px;
opacity: 0;
color: #fff;
font-size: 24px;
font-weight: 600;
transform: translateY(-20px);
transition: all 0.2s ease;
}
.nav-open {
position: fixed;
right: 10px;
top: 10px;
display: block;
width: 48px;
height: 48px;
cursor: pointer;
z-index: 9999;
border-radius: 50%;
}
.nav-open i {
display: block;
width: 20px;
height: 2px;
background: #1f2227;
border-radius: 2px;
margin-left: 14px;
}
.nav-open i:nth-child(1) {
margin-top: 16px;
}
.nav-open i:nth-child(2) {
margin-top: 4px;
opacity: 1;
}
.nav-open i:nth-child(3) {
margin-top: 4px;
}
}
#nav:checked + .nav-open {
transform: rotate(45deg);
}
#nav:checked + .nav-open i {
background: #fff;
transition: transform 0.2s ease;
}
#nav:checked + .nav-open i:nth-child(1) {
transform: translateY(6px) rotate(180deg);
}
#nav:checked + .nav-open i:nth-child(2) {
opacity: 0;
}
#nav:checked + .nav-open i:nth-child(3) {
transform: translateY(-6px) rotate(90deg);
}
#nav:checked ~ .nav-container {
z-index: 9990;
opacity: 1;
}
#nav:checked ~ .nav-container ul li a {
opacity: 1;
transform: translateY(0);
}
.hidden {
display: none;
}
.show{
display:block;
}
</style>
<html>
<nav>
<input type="checkbox" id="nav" class="hidden"/>
<label for="nav" class="nav-open"><i></i><i></i><i></i></label>
<div class="nav-container">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</nav>
</html>

Since you are using a checkbox for the menu, it's as simple as unchecking the checkbox once a link is clicked.
document.querySelectorAll('li>a').forEach(link => {
link.addEventListener('click', () => {
document.querySelector('input[type=checkbox]').checked = false
})
})
1, Select all the links inside the list with querySelectorAll
2, Loop through the links and add a click event listener for each link
3, Select the input tag which is the checkbox and set the checked property to false

How include a sub menu in my main menu?

I'm a undergraduate student and I'm making a website for project.
Now, I'm making the "Mobile version", adding media-queries to my website and I want to make a Hamburger menu.
In this picture is what I did till now.
I want to put a link to menu tab,so when I pressed the "Menu" tab,the website will jump to another div(a new menu with new tabs).
With few words, I want to change it in a multi-menu.
I'm sorry for my English, I tried the best with my syntax.
I can't use JQuery at all..
Thanks in advance!
Here is my code:
#menu { visibility: hidden; }
#DropMobile { display: none; }
label {
position: fixed;
top: 5%;
left: 5%;
width: 20px;
height: 2px;
background: rgba(229,229,229,0.88);
cursor: pointer;
transition: 0.6s;
z-index: 10;
}
label:before {
content: "";
position: absolute;
width: 20px;
height: 2px;
margin: 0;
padding: 0;
background: rgba(229,229,229,0.88);
transition: 0.6s;
transform: translateY(5px);
z-index: 99;
}
label:after {
content: "";
position: absolute;
width: 20px;
height: 2px;
margin: 0;
padding: 0;
background: rgba(229,229,229,0.88);
transition: 0.6s;
transform: translateY(-5px);
}
label div {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
padding: 0;
opacity: 0;
transition: display 5s ease-in-out;
}
label div nav ul { margin-top: 25%; padding: 0; list-style-type: none;}
label div nav ul li { margin: 5% 0; text-align: center;}
label div nav ul li a {
display: inline-block;
font-family: 'Catamaran', sans-serif;
font-size: 1em;
text-decoration: none;
color: rgba(229,229,229,0.9);
padding-bottom: 5px;
}
#menu:checked + label { width: 0;}
#menu:checked + label div {
display: block;
background: black;
opacity: 0.9;
transition: opacity 2s linear;
}
#menu:checked + label:before {
background: rgba(229,229,229,0.88);;
transform: rotate(38deg) translate(0px);
}
#menu:checked + label:after {
background: rgba(229,229,229,0.88);;
transform: rotate(-38deg) translate(0px);
}
<header id="MenuMobile">
<input type="checkbox" id="menu">
<label for="menu">
<div>
<nav role="navigation">
<ul>
<li> Home </li>
<li> <a> Menu </a>
<li> Reservation </li>
<li> About Us </li>
<li> Contact </li>
</ul>
</nav>
</div>
</label>
</header>

How can i change class of parent on click of checkbox and back?

I have made a responsive menu, everything works expect if you go on mobile.
I want the hamburger icon to scroll with the menu links, now if you scroll it just stays at the top, need to give the hamburgericon a position fixed on click and if it is clicked again return it to position absolute
i tried with javascript and sass, if it can be done with just pure css then its prerfect or else some javascript would be fine
the icon id is #menutoggle <= need to make this position: fixed on checkbox clicked
#header {
transition: all 300 ms ease;
font-size: 0.9em;
font-weight: 300;
background: black;
margin: 0 auto;
padding: 2em 0 1em;
border-bottom: 4px solid red;
}
#media only screen and (min-width: 768px) and (max-width: 1023px) {
#header {
padding: 1em 0;
}
}
#media only screen and (max-width: 767px) {
#header {
height: 4em;
padding: 0;
}
}
#header a {
color: white;
}
#header .header-inner {
max-width: 1024px;
margin: 0 auto;
position: relative;
height: 4em;
}
#media only screen and (min-width: 768px) and (max-width: 1023px) {
#header .header-inner {
max-width: 768px;
height: 3em;
}
}
#media only screen and (max-width: 767px) {
#header .header-inner {
height: 4em;
padding: 0 1em 1em;
}
}
#header .navbar {
top: 0;
height: 100%;
}
#media only screen and (max-width: 767px) {
#header .navbar {
left: 0;
height: 100%;
width: 100%;
position: absolute;
}
}
#header .navbar .leaf {
transition: all 300ms ease;
border-radius: 20px;
}
#header .navbar .leaf:hover {
background: red;
}
#header .navbar .logo {
margin: 1em 0;
position: absolute;
right: 360px;
text-align: center;
top: -38px;
z-index: 5;
}
#media only screen and (max-width: 767px) {
#header .navbar .logo {
position: absolute;
transform: translate(50%, 0px);
margin: 0 auto;
width: 60px;
height: 50px;
right: 50%;
top: 5px;
background: url("../images/crown.jpg.svg");
background-repeat: no-repeat;
background-size: contain;
}
}
#media only screen and (min-width: 768px) and (max-width: 1023px) {
#header .navbar .logo {
margin: 0.5em 0;
right: 280px;
top: -20px;
}
}
#header .navbar .logo img {
background-position: contain;
width: 300px;
}
#media only screen and (max-width: 767px) {
#header .navbar .logo img {
width: 135px;
height: 50px;
opacity: 0;
}
}
#media only screen and (min-width: 768px) and (max-width: 1023px) {
#header .navbar .logo img {
width: 225px;
}
}
#header .navbar .menu {
text-align: center;
margin-top: 2em;
}
#media only screen and (max-width: 767px) {
#header .navbar .menu {
display: none;
}
}
#header .navbar .menu ul {
list-style-type: none;
}
#header .navbar .menu ul .video {
margin-right: 345px;
}
#media only screen and (min-width: 768px) and (max-width: 1023px) {
#header .navbar .menu ul .video {
margin-right: 260px;
}
}
#header .navbar .menu li {
display: inline;
padding: 10px 1.2em;
margin-right: 40px;
}
#media only screen and (min-width: 1024px) {
#header .navbar .menu li {
padding: 10px 1.2em;
margin-right: 40px;
}
}
#header .navbar .menu li:last-child {
margin-right: 0px;
}
#header .navbar nav {
display: none;
transition: all 300ms ease;
width: 100%;
/* And let's fade it in from the left */
}
#media only screen and (max-width: 767px) {
#header .navbar nav {
display: block;
}
}
#header .navbar nav a {
text-decoration: none;
color: white;
transition: color 0.3s ease;
}
#header .navbar nav a:hover {
color: red;
}
#header .navbar nav #menuToggle {
display: block;
position: relative;
z-index: 1;
-webkit-user-select: none;
user-select: none;
top: 16px;
}
#header .navbar nav #menuToggle input {
display: block;
width: 55px;
height: 32px;
position: absolute;
top: 0px;
left: -5px;
cursor: pointer;
opacity: 0;
/* hide this */
z-index: 12;
/* and place it over the hamburger */
-webkit-touch-callout: none;
}
#header .navbar nav #menuToggle ul a {
width: 100;
display: block;
border-bottom: 1px solid rgba(215, 7, 120, 0.2);
}
#header .navbar nav #menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-left: 10px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 3;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
}
#header .navbar nav #menuToggle span:first-child {
transform-origin: 0% 0%;
margin-left: 10px;
}
#header .navbar nav #menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
margin-left: 10px;
}
#header .navbar nav #menuToggle input:checked ~ span {
opacity: 1;
margin-left: 10px;
transform: rotate(45deg) translate(-2px, -1px);
background: red;
}
#header .navbar nav #menuToggle input:checked ~ span:nth-last-child(3) {
margin-left: 10px;
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#header .navbar nav #menuToggle input:checked ~ span:nth-last-child(2) {
margin-left: 10px;
opacity: 1;
transform: rotate(-45deg) translate(0, -1px);
}
#header .navbar nav #menu {
position: absolute;
width: 100%;
padding: 50px;
height: 100vh;
top: 0;
position: fixed;
background: black;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}
#header .navbar nav #menu li {
padding: 10px 0;
font-size: 22px;
}
#header .navbar nav #menuToggle input:checked ~ ul {
transform: scale(1, 1);
opacity: 1;
width: 100%;
top: 0;
}
.blok {
width: 100%;
height: 1000px;
background: blue;
}
<body>
<section id="home">
<div id="header">
<div class="header-inner">
<div class="navbar">
<div class="logo">
<img src="" />
</div>
<div class="menu">
<ul class="menu">
<li class="leaf"><a title="" href="/photo">Home</a></li>
<li class="leaf video"><a title="" href="/video">About</a></li>
<li class="leaf"><a title="" href="/music">Menu</a></li>
<li class="leaf"><a title="" href="/forum">Contact</a></li>
</ul>
</div>
<nav role="navigation">
<div id="menuToggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<a href="#">
<li>Home</li>
</a>
<hr class="line-menu">
<a href="#">
<li>About</li>
</a>
<hr class="line-menu">
<a href="#">
<li>Info</li>
</a>
<hr class="line-menu">
<a href="#">
<li>Contact</li>
</a>
</ul>
</div>
</nav>
</div>
</div>
</div>
<!--end header-->
<!--begin header-->
<div class="blok"></div>

Add this code
#media only screen and(max-width: 767px) {
#header {
position: fixed;
top: 0;
width: 100% ;
}
}

jq:
$(document).on('change', '.checkbox', function() {
$('#menutoggle').toggleClass('position-style');
});
css:
.position-style {
position: fixed;
}
Hope this help you ;]
//edit https://jsfiddle.net/zfo5nzf3/
this code working, its adding '.position' class (where rule is position: fixed;) to #menutoggle according to your "the icon id is #menutoggle <= need to make this position: fixed on checkbox clicked".

Hide menu outclick [duplicate]

This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 6 years ago.
I am writing menu for responsive website, but I am stunned in one moment - hide menu when outclick...
I would really appreciate any help with my bugged jQuery :) - link to jsfiddle
function hamburgerClick()
{
$('#hamburgerMenu').click(function(e) // (hide || show) menu by clicking "hamburgerMenu" icon
{
e.preventDefault();
if( $('#hamburgerMenu').hasClass('is-active') )
{
$('#hamburgerMenu').removeClass('is-active');
$('#menu').removeClass('is-active');
}
else
{
$('#hamburgerMenu').addClass('is-active');
$('#menu').addClass('is-active');
}
});
}
function hideMenuOutclick() /* does not work */
{
if( $('#hamburgerMenu').hasClass('is-active') )
{
$(document).click(function(e)
{
if( ($(e.target).closest('#menu').length!==0) ||
($(e.target).closest('#hamburgerMenu').length!==0) )
{
$('#hamburgerMenu').removeClass('is-active');
$('#menu').removeClass('is-active');
}
});
}
}
function beginJS()
{
hamburgerClick();
hideMenuOutclick();
/* few more scripts */
}
window.onload = beginJS;
.bg-red
{
background-color: #e32624;
}
/********** pure header **********/
#header
{
width: 100%;
height: 56px;
display: block;
position: fixed;
}
/********** fixing Comission **********/
.fixingComission
{
display: block;
float: right;
position: relative;
width: auto;
height: 56px;
appearance: none;
box-shadow: none;
border-radius: none;
background-color: #e32624;
transition: background 0.3s;
}
.fixingComission a
{
font-size: 26px;
color: #ffffff;
padding: 10px 12px;
}
/********** hamburger button **********/
#hamburgerMenu
{
display: block;
float: left;
position: relative;
overflow: hidden;
width: 56px;
height: 56px;
font-size: 0;
text-indent: -9999px;
appearance: none;
box-shadow: none;
border-radius: none;
cursor: pointer;
background-color: #e32624;
transition: background 0.3s;
}
#hamburgerMenu:focus
{
outline: none;
}
/********** hamburger button span **********/
#hamburgerMenu span
{
display: block;
position: absolute;
top: 25px;
left: 12px;
right: 12px;
height: 5px;
background: white;
transition: transform 0.3s;
}
#hamburgerMenu span::before,
#hamburgerMenu span::after
{
position: absolute;
display: block;
left: 0;
width: 100%;
height: 5px;
background-color: #fff;
content: "";
}
#hamburgerMenu span::before
{
top: -14px;
transform-origin: top right;
transition: transform 0.3s, width 0.3s, top 0.3s;
}
#hamburgerMenu span::after
{
bottom: -14px;
transform-origin: bottom right;
transition: transform 0.3s, width 0.3s, bottom 0.3s;
}
#hamburgerMenu span:focus
{
outline: none;
}
/********** hamburger button active - class added onclick by JS **********/
#hamburgerMenu.is-active
{
background-color: #bc1a18;
}
/********** hamburger button span active **********/
#hamburgerMenu.is-active span
{
transform: rotate(180deg);
}
#hamburgerMenu.is-active span::before,
#hamburgerMenu.is-active span::after
{
width: 50%;
}
#hamburgerMenu.is-active span::before
{
top: 0;
transform: translateX(22px) translateY(2px) rotate(45deg);
}
#hamburgerMenu.is-active span::after
{
bottom: 0;
transform: translateX(22px) translateY(-2px) rotate(-45deg);
}
/********** navigation **********/
#menu
{
display: block;
position: fixed;
z-index: 1000;
background-color: #003e78;
overflow: hidden;
-webknit-overflow-scroll: touch; /* for mobile safari */
top: 56px;
width: 65%;
height: 100%;
left: -65%;
transition-property: opacity, left;
transition-duration: 0.3s, 0.5s;
}
#menu.is-active
{
left: 0;
}
#menu ul
{
overflow: auto;
width: 100%;
height: 100%;
padding-right: 0; /* exact value is given by JS to hide scrollbar */
}
#menu ul::-webkit-scrollbar
{
display: none;
}
#menu ul li
{
display: inline-block;
width: 100%;
height: 52px;
}
#menu ul li.current,
#menu ul li:hover,
#menu ul li:active
{
background-color: #0066c5;
}
#menu ul li a
{
display: block;
height: 30px;
width: 100%;
color: #ffffff;
font-size: 1em;
padding: 12px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<header id="header" class="bg-red">
<button class="fixingComission">
Zleć naprawę
</button>
<button id="hamburgerMenu"><span>toggle menu</span></button>
<nav id="menu">
<ul>
<li class="current">Start</li>
<li>O nas</li>
<li>Serwis</li>
<li>W sumie to nie wiem</li>
<li>Kontakt</li>
<li>Zleć naprawę</li>
</ul>
</nav>
</header>
//hamburgerClick is working, but hideMenuOutclick is not.
I know, that on jsfiddle project isn't working, but it works on localhost and srv with implemented jQuery v1.10.2
I would be really grateful to tip about scrolling in CSS3:
Why despite "overflow: auto" '$("#menu").onMouseOver' is still scrolling whole page? Is it possible to force scrolling some element (even if it is full-viewed in computer screen), not whole page?
EDIT: Hiding menu is done with click event (which will be matched for invalids and it won't be click - really thanks to point this out!) Now only thing is this scrolling :)

For the jsfiddle bug the problem is in this line:
if( $('#hamburgerMenu').hasClass('is-active') ) {
If the menu is not active on document load the event handler never be attached.
The updated jsfiddle: the errors here are: jquery missing, load type: wrap in the head.
I assume you want to close the menu when clicking outside the menu.
For the second part of your question I figured out the problem is related to the height of the #menu: change it from 100% to 50%.
The snippet:
function hamburgerClick()
{
$('#hamburgerMenu').click(function(e) // (hide || show) menu by clicking "hamburgerMenu" icon
{
e.preventDefault();
if( $('#hamburgerMenu').hasClass('is-active') )
{
$('#hamburgerMenu').removeClass('is-active');
$('#menu').removeClass('is-active');
}
else
{
$('#hamburgerMenu').addClass('is-active');
$('#menu').addClass('is-active');
}
});
}
function hideMenuOutclick() /* does not work */
{
$(document).click(function(e)
{
if( ($(e.target).closest('#menu').length==0) &&
($(e.target).closest('#hamburgerMenu').length==0) )
{
if( $('#hamburgerMenu').hasClass('is-active') ) {
$('#hamburgerMenu').removeClass('is-active');
$('#menu').removeClass('is-active');
}
}
});
}
function beginJS()
{
hamburgerClick();
hideMenuOutclick();
/* few more scripts */
}
window.onload = beginJS;
.bg-red
{
background-color: #e32624;
}
/********** pure header **********/
#header
{
width: 100%;
height: 56px;
display: block;
position: fixed;
}
/********** fixing Comission **********/
.fixingComission
{
display: block;
float: right;
position: relative;
width: auto;
height: 56px;
appearance: none;
box-shadow: none;
border-radius: none;
background-color: #e32624;
transition: background 0.3s;
}
.fixingComission a
{
font-size: 26px;
color: #ffffff;
padding: 10px 12px;
}
/********** hamburger button **********/
#hamburgerMenu
{
display: block;
float: left;
position: relative;
overflow: hidden;
width: 56px;
height: 56px;
font-size: 0;
text-indent: -9999px;
appearance: none;
box-shadow: none;
border-radius: none;
cursor: pointer;
background-color: #e32624;
transition: background 0.3s;
}
#hamburgerMenu:focus
{
outline: none;
}
/********** hamburger button span **********/
#hamburgerMenu span
{
display: block;
position: absolute;
top: 25px;
left: 12px;
right: 12px;
height: 5px;
background: white;
transition: transform 0.3s;
}
#hamburgerMenu span::before,
#hamburgerMenu span::after
{
position: absolute;
display: block;
left: 0;
width: 100%;
height: 5px;
background-color: #fff;
content: "";
}
#hamburgerMenu span::before
{
top: -14px;
transform-origin: top right;
transition: transform 0.3s, width 0.3s, top 0.3s;
}
#hamburgerMenu span::after
{
bottom: -14px;
transform-origin: bottom right;
transition: transform 0.3s, width 0.3s, bottom 0.3s;
}
#hamburgerMenu span:focus
{
outline: none;
}
/********** hamburger button active - class added onclick by JS **********/
#hamburgerMenu.is-active
{
background-color: #bc1a18;
}
/********** hamburger button span active **********/
#hamburgerMenu.is-active span
{
transform: rotate(180deg);
}
#hamburgerMenu.is-active span::before,
#hamburgerMenu.is-active span::after
{
width: 50%;
}
#hamburgerMenu.is-active span::before
{
top: 0;
transform: translateX(22px) translateY(2px) rotate(45deg);
}
#hamburgerMenu.is-active span::after
{
bottom: 0;
transform: translateX(22px) translateY(-2px) rotate(-45deg);
}
/********** navigation **********/
#menu
{
display: block;
position: fixed;
z-index: 1000;
background-color: #003e78;
overflow: hidden;
-webknit-overflow-scroll: touch; /* for mobile safari */
top: 56px;
width: 65%;
height: 50%;
left: -65%;
transition-property: opacity, left;
transition-duration: 0.3s, 0.5s;
}
#menu.is-active
{
left: 0;
}
#menu ul
{
overflow: auto;
width: 100%;
height: 100%;
padding-right: 0; /* exact value is given by JS to hide scrollbar */
}
#menu ul::-webkit-scrollbar
{
display: none;
}
#menu ul li
{
display: inline-block;
width: 100%;
height: 52px;
}
#menu ul li.current,
#menu ul li:hover,
#menu ul li:active
{
background-color: #0066c5;
}
#menu ul li a
{
display: block;
height: 30px;
width: 100%;
color: #ffffff;
font-size: 1em;
padding: 12px 0;
}
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<header id="header" class="bg-red">
<button class="fixingComission">
Zleć naprawę
</button>
<button id="hamburgerMenu"><span>toggle menu</span></button>
<nav id="menu">
<ul>
<li class="current">Start</li>
<li>O nas</li>
<li>Serwis</li>
<li>W sumie to nie wiem</li>
<li>Kontakt</li>
<li>Zleć naprawę</li>
</ul>
</nav>
</header>