Haeder

by Jakub Stefan

HTML

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<body class="wrapper">
  <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>
  content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br> content
  <br>
</body>

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

JavaScript

function hamburgerClick()
{
  $('#hamburgerMenu').click(function(e)
    {
      e.preventDefault();

      if ($('#hamburgerMenu').hasClass('is-active'))
      {
        $('#hamburgerMenu').removeClass('is-active');
        $('.wrapper').removeClass('noscroll');
        $('#menu').removeClass('is-active');
      }
      else
      {
        $('#hamburgerMenu').addClass('is-active');
        $('.wrapper').addClass('noscroll');
        $('#menu').addClass('is-active');
      }
    });
}


function hideMenuOutclick()
{
  $(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');
        $('.wrapper').removeClass('noscroll');
        $('#menu').removeClass('is-active');
      }
    }
  });
}


function beginJS()
{
  hamburgerClick();
  hideMenuOutclick();
  /* few more scripts */
}

window.onload = beginJS;