We Keep Coding

How to make my navbar sticky in mobile view?

I want to make my navbar sticky, it is working on a regular screen view but it is not working on mobile view.
I have created a regular navbar for widescreen and a hamburger style navbar on mobile view.
I am still learning and new to frontend so I am aware that the below code is pretty bad. Any suggestions will be appreciated.
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
var navbar_mobile = document.getElementById("menuToggle");
var sticky_mobile = navbar_mobile.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
navbar_mobile.classList.add("sticky_mobile");
} else {
navbar.classList.remove("sticky");
navbar_mobile.classList.remove("sticky_mobile");
}
}
/* NAVIGATION FOR WIDE SCREEN*/
#navbar {
z-index: 10;
}
ul li:before {
content: ' ';
position: absolute;
left: 0;
}
.navigation-menu-sep {
width: 100%;
margin: 0 auto;
background: #fff;
}
.navigation-menu-sep .navigation-menu-sep-ul {
list-style: none;
text-align: center;
}
.navigation-menu-sep .navigation-menu-sep-ul li {
display: inline-block;
}
.navigation-menu-sep .navigation-menu-sep-ul li a {
display: block;
padding: 15px;
text-decoration: none;
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
.navigation-menu-sep .navigation-menu-sep-ul li a,
.navigation-menu-sep ul li a:after,
.navigation-menu-sep ul li a:before {
transition: all .5s;
}
.navigation-menu .navigation-menu-sep-ul li a:hover {
color: #555;
}
/* stroke */
.navigation-menu-sep .navigation-menu-sep-ul li a{
position: relative;
}
.navigation-menu-sep .navigation-menu-sep-ul li a:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #0e2e39;
height: 2px;
}
.navigation-menu-sep .navigation-menu-sep-ul li a:hover:after {
width: 100%;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
box-shadow: 0px 5px 0px #dedede;
}
.sticky_mobile {
position: fixed !important;
top: 0;
width: 100%;
box-shadow: 0px 5px 0px #dedede;
}
.sticky + .content {
padding-top: 60px;
}
#media screen and (max-width: 500px) {
#navbar {
display: none;
}
}
/* NAVIGATION MENU FOR MOBILE - HAMBURGER STYLE */
#menuToggle
{
display: block;
position: relative;
top: 10px;
background: #fff;
z-index: 10;
-webkit-user-select: none;
user-select: none;
margin-bottom: 50px;
}
#media screen and (min-width: 501px) {
#menuToggle {
display: none;
}
}
#menuToggle input
{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0; /* hide this */
z-index: 2; /* and place it over the hamburger */
-webkit-touch-callout: none;
}
/*
* Just a quick hamburger
*/
#menuToggle span
{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
margin-top: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child
{
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
/*
* Transform all the slices of hamburger
* into a crossmark.
*/
#menuToggle input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
/*
* But let's hide the middle one.
*/
#menuToggle input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
/*
* Ohyeah and the last one should go the other direction
*/
#menuToggle input:checked ~ span:nth-last-child(2)
{
transform: rotate(-45deg) translate(0, -1px);
}
/*
* Make this absolute positioned
* at the top left of the screen
*/
#menu
{
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: #ededed;
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.0);
}
#menu li
{
padding: 10px 0;
font-size: 22px;
}
/*
* And let's slide it in from the left
*/
#menuToggle input:checked ~ ul
{
transform: none;
}
<div id="navbar">
<nav class="navigation-menu-sep">
<ul class="navigation-menu-sep-ul">
<li>Home</li>
<li>About us</li>
<li>New Products</li>
<li>More</li>
</ul>
</nav>
</div>
<nav role="navigation">
<div id="menuToggle">
<!--
A fake / hidden checkbox is used as click reciever,
so you can use the :checked selector on it.
-->
<input type="checkbox" />
<!--
Some spans to act as a hamburger.
They are acting like a real hamburger,
not that McDonalds stuff.
-->
<span></span>
<span></span>
<span></span>
<!--
Too bad the menu has to be inside of the button
but hey, it's pure CSS magic.
-->
<ul id="menu">
<li>Home</li>
<li>About us</li>
<li>New Products</li>
<li>More</li>
</ul>
</div>
</nav>
Basically, I have more elements above this navbar.
I am not sure what I did wrong, but the sticky-navbar on mobile view sticks at the top instead of only sticking when the user scrolls.

There is a CSS feature for this.
position: sticky;

Try adding a little buffer before switching to the sticky mode. In the modified example below there is 100px buffer before triggering the sticky mode. Also removed the sticky_mobile class as they were both doing the same thing.
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop + 100;
var navbar_mobile = document.getElementById("menuToggle");
var sticky_mobile = navbar_mobile.offsetTop + 100;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
}
/* NAVIGATION FOR WIDE SCREEN*/
#navbar {
z-index: 10;
}
ul li:before {
content: ' ';
position: absolute;
left: 0;
}
.navigation-menu-sep {
width: 100%;
margin: 0 auto;
background: #fff;
}
.navigation-menu-sep .navigation-menu-sep-ul {
list-style: none;
text-align: center;
}
.navigation-menu-sep .navigation-menu-sep-ul li {
display: inline-block;
}
.navigation-menu-sep .navigation-menu-sep-ul li a {
display: block;
padding: 15px;
text-decoration: none;
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
.navigation-menu-sep .navigation-menu-sep-ul li a,
.navigation-menu-sep ul li a:after,
.navigation-menu-sep ul li a:before {
transition: all .5s;
}
.navigation-menu .navigation-menu-sep-ul li a:hover {
color: #555;
}
/* stroke */
.navigation-menu-sep .navigation-menu-sep-ul li a{
position: relative;
}
.navigation-menu-sep .navigation-menu-sep-ul li a:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #0e2e39;
height: 2px;
}
.navigation-menu-sep .navigation-menu-sep-ul li a:hover:after {
width: 100%;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
box-shadow: 0px 5px 0px #dedede;
}
.sticky + .content {
padding-top: 60px;
}
#media screen and (max-width: 500px) {
#navbar {
display: none;
}
}
/* NAVIGATION MENU FOR MOBILE - HAMBURGER STYLE */
#menuToggle
{
display: block;
position: relative;
top: 10px;
background: #fff;
z-index: 10;
-webkit-user-select: none;
user-select: none;
margin-bottom: 50px;
}
#media screen and (min-width: 501px) {
#menuToggle {
display: none;
}
}
#menuToggle input
{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0; /* hide this */
z-index: 2; /* and place it over the hamburger */
-webkit-touch-callout: none;
}
/*
* Just a quick hamburger
*/
#menuToggle span
{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
margin-top: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child
{
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
/*
* Transform all the slices of hamburger
* into a crossmark.
*/
#menuToggle input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
/*
* But let's hide the middle one.
*/
#menuToggle input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
/*
* Ohyeah and the last one should go the other direction
*/
#menuToggle input:checked ~ span:nth-last-child(2)
{
transform: rotate(-45deg) translate(0, -1px);
}
/*
* Make this absolute positioned
* at the top left of the screen
*/
#menu
{
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: #ededed;
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.0);
}
#menu li
{
padding: 10px 0;
font-size: 22px;
}
/*
* And let's slide it in from the left
*/
#menuToggle input:checked ~ ul
{
transform: none;
}
<div id="navbar">
<nav class="navigation-menu-sep">
<ul class="navigation-menu-sep-ul">
<li>Home</li>
<li>About us</li>
<li>New Products</li>
<li>More</li>
</ul>
</nav>
</div>
a
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
b
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
c
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
d
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
e
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
f
<nav role="navigation">
<div id="menuToggle">
<!--
A fake / hidden checkbox is used as click reciever,
so you can use the :checked selector on it.
-->
<input type="checkbox" />
<!--
Some spans to act as a hamburger.
They are acting like a real hamburger,
not that McDonalds stuff.
-->
<span></span>
<span></span>
<span></span>
<!--
Too bad the menu has to be inside of the button
but hey, it's pure CSS magic.
-->
<ul id="menu">
<li>Home</li>
<li>About us</li>
<li>New Products</li>
<li>More</li>
</ul>
</div>
</nav>

There was a bug in my javascript, that was the cause of it not being able to add the new class "sticky".
This is not the best but it works.
<script>
window.onscroll = function() {
myFunction();
myFunction_mobile();
}
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
var navbar_mobile = document.getElementById("menuToggle");
var sticky_mobile = navbar_mobile.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
}
function myFunction_mobile() {
if (window.pageYOffset >= sticky_mobile) {
navbar_mobile.classList.add("sticky_mobile");
} else {
navbar_mobile.classList.remove("sticky_mobile");
}
}
</script>

Mobile nav will not collapse on Single-page site using anchor links

I'm not sure how to get the mobile navigation that is currently sliding out onto the page to collapse once an anchor link has been clicked from the menu. Currently, the menu just stays open, obscuring the content underneath until the user clicks the "X" button.
Here is my HTML:
<div class="mobile-nav-button">
<div class="mobile-nav-button__line"></div>
<div class="mobile-nav-button__line"></div>
<div class="mobile-nav-button__line"></div>
</div>
<nav class="mobile-menu">
<ul>
<li><img src="../img/kct_logo.png"></li>
<li>ABOUT</li>
<li>SERVICES</li>
<li>HISTORY</li>
<li>PRICING</li>
<li>TESTIMONIALS</li>
<li>CONTACT</li>
</ul>
</nav>
Here is the corresponding CSS:
.mobile-nav-button {
width: 35px;
position: absolute;
margin: 2rem;
right: 0;
top: 0;
z-index: 9999;
cursor: pointer;
width: 35px;
height: 30px;
visibility: hidden;
}
.mobile-nav-button .mobile-nav-button__line {
width: 100%;
height: 3px;
background: white;
position: relative;
transition: 0.3s ease;
}
.mobile-nav-button .mobile-nav-button__line:nth-of-type(2) {
margin: 0.5rem 0;
}
.mobile-nav-button .mobile-nav-button__line--1 {
transform: rotate(45deg);
top: 13px;
position: absolute;
}
.mobile-nav-button .mobile-nav-button__line--2 {
display: none;
}
.mobile-nav-button .mobile-nav-button__line--3 {
transform: rotate(135deg);
top: 13px;
position: absolute;
}
.mobile-menu {
display: block;
max-width: 500px;
width: 100%;
right: -100%;
height: 100vh;
background: #091525;
position: absolute;
z-index: 9998;
transition: 0.2s ease;
top: 0;
opacity: 1;
}
.mobile-menu ul {
position: relative;
top: 50%;
transform: translateY(-50%);
padding: 0;
margin-right: 0;
}
.mobile-menu ul li {
list-style: none;
}
.mobile-menu ul li a {
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: block;
text-align: center;
text-decoration: none;
color: white;
font-family: 'Source Sans Pro', sans-serif;
font-size: 20px;
font-weight: 300;
line-height: 50px;
letter-spacing: 2px;
overflow: hidden;
position: relative;
}
.mobile-menu ul li a:after {
content: '';
background: #835a43;
width: 100%;
height: 100%;
position: absolute;
right: -100%;
top: 0;
z-index: -1;
transition: 0.4s ease;
}
.mobile-menu ul li a:hover {
color: #fff;
}
.mobile-menu ul li a:hover:after {
right: 0;
}
.mobile-menu img {
position: absolute;
width: 180px;
display: block;
left: 50%;
top: -4rem;
transform: translatex(-50%);
padding: 0;
text-align: center;
}
.mobile-menu--open {
right: 0;
opacity: 1;
}
And finally the JS:
$(document).ready(function () {
//Menu button on click event
$('.mobile-nav-button').on('click', function() {
// Toggles a class on the menu button to transform the burger menu into
a cross
$( ".mobile-nav-button .mobile-nav-button__line:nth-of-type(1)"
).toggleClass( "mobile-nav-button__line--1");
$( ".mobile-nav-button .mobile-nav-button__line:nth-of-type(2)"
).toggleClass( "mobile-nav-button__line--2");
$( ".mobile-nav-button .mobile-nav-button__line:nth-of-type(3)"
).toggleClass( "mobile-nav-button__line--3");
// Toggles a class that slides the menu into view on the screen
$('.mobile-menu').toggleClass('mobile-menu--open');
return false;
});
});
Just wondering if I would need to write some JS that would specifically target any of the anchor links in the menu, and then once any of those are clicked, remove that "mobile-menu--open" class in order to collapse the sliding menu?

link ( a href above all divs)

Hi this is the scenario i have a sliding menu on right side of the website and the position of it is fixed. and there's a link "" that i want to float above it position absolute or relative with the z-index like this but even i add z-index 10000. position absolute or fixed its not showing up. outside the slider div.
Please check the image. check the green circle
NOTE: once the menu is open the #menu close is reviled
the css for it is and html honestly speaking im having a hard time for it thank you
#menu .close {
background-image: url("images/close.svg");
background-position: 4.85em 1em;
background-repeat: no-repeat;
border: 0;
cursor: pointer;
display: block;
height: 3em;
position: fixed;
right: 541px;
top: 0;
z-index: 50000;
display: block;
vertical-align: middle;
width: 7em;
}
Html
<div id="header" class="alt">
<nav id="nav">
<ul>
<li class="special">
<span> menu</span>
<div id="menu">
<div class="logo_menu">
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/logo.png">
</div>
<ul>
<li>Home</li>
<li>Company Values</li>
<li>Our services</li>
<li>Need Home health care now?</li>
<li>Meet the Team</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
Css
*/
#header {
-moz-transition: background-color 0.2s ease;
-webkit-transition: background-color 0.2s ease;
-ms-transition: background-color 0.2s ease;
transition: background-color 0.2s ease;
background: #2e3842;
height: 3em;
left: 112px;
line-height: 3em;
position: absolute;
top: -38px;
width: 100%;
z-index: 10000;
}
#header h1 {
-moz-transition: opacity 0.2s ease;
-webkit-transition: opacity 0.2s ease;
-ms-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
height: inherit;
left: 1.25em;
line-height: inherit;
position: absolute;
top: 0;
}
#header h1 a {
border: 0;
display: block;
height: inherit;
line-height: inherit;
}
#media screen and (max-width: 736px) {
#header h1 a {
font-size: 0.8em;
}
}
#header nav {
height: inherit;
line-height: inherit;
position: absolute;
right: -5px;
top: 38px;
}
#header nav > ul {
list-style: none;
margin: 0;
padding: 0;
white-space: nowrap;
}
#header nav > ul > li {
display: inline-block;
padding: 0;
}
#header nav > ul > li > a {
border: 0;
color: #000;
display: block;
font-size: 0.8em;
padding: 0 1.5em;
text-transform: uppercase;
padding-left: 0px !important;
}
#header nav > ul > li > a.menuToggle {
outline: 0;
position: relative;
}
#header nav > ul > li > a.menuToggle:before {
background-image: url("images/bars.svg");
background-position: right center;
background-repeat: no-repeat;
content: '';
display: inline-block;
height: 3.75em;
vertical-align: top;
width: 2em;
}
#media screen and (max-width: 736px) {
#header nav > ul > li > a.menuToggle {
padding: 0 1.5em;
}
#header nav > ul > li > a.menuToggle span {
display: none;
}
}
#media screen and (max-width: 736px) {
#header nav > ul > li > a {
padding: 0 0 0 1.5em;
}
}
#header nav > ul > li:first-child {
margin-left: 0;
}
#header.alt {
background: transparent;
}
#header.alt h1 {
-moz-pointer-events: none;
-webkit-pointer-events: none;
-ms-pointer-events: none;
pointer-events: none;
opacity: 0;
}
.logo_menu {
margin-bottom: 30px;
}
a.menuToggle {
text-decoration: none;
}
a.menuToggle span {
padding-left: 4px;
}

Anytime you want to put an element absolute on top of an element, you want to set the parent to position:relative and put the child element in the parent.
<div class="parent">
<a class="child">Child</a>
</div>
.parent {
position: relative;
z-index: 1;
}
.child {
position: absolute;
z-index: 2;
top: 0; //style to taste
left: 0; //style to taste
}

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>

Masking issue when sliding multiple divs behind a line

I have a CSS animation effect that's difficult to implement due to layering problems. See the snippet below:
var toggle = document.getElementById('toggle');
function toggleF() {
'use strict';
document.querySelector('nav').classList.add('fuzzyState');
}
toggle.addEventListener('click', toggleF);
body {
height: 90%;
color: #222;
text-align: center overflow:hidden;
}
button {
outline: 0;
cursor: pointer
}
#toggle {
float: left;
width: 38px;
height: 38px;
padding: 5px;
margin: auto;
background: #fff;
color: #666;
border: 0;
font-size: 150%
}
#toggle:hover {
background: #222;
color: #eee;
user-select: none;
-webkit-user-select: none
}
#toggle:active {
background: #022;
color: #fff
}
nav ul:after {
content"";
display: block;
clear: both
}
nav ul {
height: 150px;
margin: 0;
padding: 0;
font-size: 150%
}
nav li {
width: 140px;
height: 140px;
margin: 5px;
float: left;
list-style: none;
user-select: none;
-webkit-user-select: none
}
nav button {
display: block;
position: relative;
top: 50%;
width: 100%;
height: 100%;
background: transparent;
border: 0;
text-transform: uppercase;
transform: translateY(-50%)
}
nav button:hover {
background: #022;
color: #eee
}
nav button:active {
background: #033;
color: #fff
}
ul hr {
position: relative;
top: 50%;
width: 1px;
height: 90px;
margin: 10px;
background: #eee;
border: 0;
float: left;
transform: translateY(-50%);
z-index: 2
}
nav.fuzzyState #dos {
transform: translateX(230px)
}
nav.fuzzyState #uno {
transform: translateX(400px);
-webkit-filter: blur(1px)
}
nav.fuzzyState #tres {
/*transform:translateX(-230px)*/
}
nav #tres {
position: relative;
z-index: 1
}
#leftNavMask {
background: #fff;
position: absolute;
top: 15%;
right: 0;
left: 356px;
width: 200px;
height: 190px;
text-align: justify;
transform: translateY(-50%);
}
#rightNavMask {
background: #fff;
position: absolute;
top: 15%;
right: 0;
left: 156px;
width: 200px;
height: 190px;
text-align: justify;
transform: translateY(-50%);
z-index: -1
}
#dos,
#tres {
transition: transform 0.7s ease-in-out
}
#uno {
transition: transform 1s ease-in-out, -webkit-filter 1s ease-in-out;
}
<button id="toggle">+</button>
<nav>
<ul>
<li id="uno"><button>uno</button></li>
<li id="dos"><button>dos</button></li>
<hr>
<li id="tres"><button>tres</button></li>
<div id="leftNavMask"></div>
<div id="rightNavMask"></div>
</ul>
</nav>
After the + button is clicked my goal is to make the tres button slide to the left while being masked just like the uno and dos buttons, except in the opposite direction. It seems impossible to pull off because whatever z-index I give any elements there's no way to have the left mask on top of the correct elements while simultaneously having the right mask do its job. Are there any simple ways to do this without jQuery? Thanks.
To clarify: The uno and dos buttons are currently going under a div that is colored to match the background. I need the tres button to slide left under a second div that is somehow on top of the tres button to mask it but also below the uno and dos buttons so they aren't blocked at the beginning.

Long time since this question was asked, therefore, most probably you have found a solution already. But just in case, here you have a possible approach to what you wanted to achieve.
Instead of using absolute positioned divs with the same color of the background to cover the animated li elements, why don't use an overflow hidden property in the ul container? If you do this, the ul will act as a "mask" and when the li elements get animated outside the ul, they will be automatically "hidden". Take a look at your snippet already modified using this approach (I have used two ul elements to animate the li elements separately):
I saw that you placed an hr (and two div) inside the ul element and a ul should only contain li elements. For this solution, I used a pseudo-element to mimic the vertical line.
var toggle = document.getElementById('toggle');
function toggleF() {
document.querySelector('nav').classList.toggle('fuzzyState');
}
toggle.addEventListener('click', toggleF);
body {
color: #222;
}
button {
cursor: pointer;
outline: 0;
}
#toggle {
background: #fff;
border: 0;
color: #666;
float: left;
font-size: 150%;
height: 38px;
margin: auto;
padding: 5px;
width: 38px;
}
#toggle:hover {
background: #222;
color: #eee;
user-select: none;
}
#toggle:active {
background: #022;
color: #fff
}
nav ul {
display: inline-block;
font-size: 150%;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
}
nav ul.left::after {
content: "";
display: block;
border-right: 1px solid #eee;
height: 90px;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
nav li {
display: inline-block;
height: 140px;
list-style: none;
margin: 5px;
user-select: none;
transition: transform 0.7s ease-in-out;
width: 140px;
}
nav button {
background: transparent;
border: 0;
display: block;
height: 100%;
position: relative;
text-transform: uppercase;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
nav button:hover {
background: #022;
color: #eee;
}
nav button:active {
background: #033;
color: #fff;
}
nav.fuzzyState ul > li {
pointer-events: none;
}
nav.fuzzyState ul.left > li {
transform: translateX(200%);
}
nav.fuzzyState ul.right > li {
transform: translateX(-100%);
}
<button id="toggle">+</button>
<nav>
<ul class="left">
<li><button>uno</button></li>
<li><button>dos</button></li>
</ul>
<ul class="right">
<li><button>tres</button></li>
</ul>
</nav>