Haeder

HTML

<script src="https://code.jquery.com/jquery-1.10.2.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>

CSS

.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)...

JavaScript

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;