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">
<a href="index-5.html">Zleć naprawę</a>
</button>
<button id="hamburgerMenu"><span>toggle menu</span></button>
<nav id="menu">
<ul>
<li class="current"><a href="index.html">Start</a></li>
<li><a href="index-1.html">O nas</a></li>
<li><a href="index-2.html">Serwis</a></li>
<li><a href="index-3.html">W sumie to nie wiem</a></li>
<li><a href="index-4.html">Kontakt</a></li>
<li><a href="index-5.html">Zleć naprawę</a></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 :)
