Menu practice

by Danielle Parkinson

HTML

<header>
<h1>
Heading 1
</h1>
<span class="menu-open">Menu</span>
</header>
<div class="nav-container">
<ul>
Nav 1
</ul>
<ul>
Nav 2
</ul>
</div>

SCSS

header {
background-color: grey;
height: 50px;
width: 100%;
position: fixed;
}

span.menu-open{
  width: 50px;
  height: 100%;
  background-color: white;
  float: left;
  font-family: 'Arial';
  font-size: 14px;
  color: purple;
  horizontal-align: center;
  line-height:50px;
}

h1 {
  font-family:'Arial';
  font-size: 16px;
  padding-right: 30px;
  line-height: 25px;
  color: white;
  float: right;
}
  
  span.menu-open:hover{
    background-color:blue;
    color: white;
    cursor: pointer;
  }
  
  span.menu-open:{
    background-color: purple
  }
  
  .nav-container {
    width: 150px;
    height: 100%;
    left:0;
    transform: translateX(-150px);
    position: absolute;
    background-color: grey;
    overflow: hidden;
    
    -webkit-transition: transform 1s ease-in-out;
    -moz-transition: transform 1s ease-in-out;
  }
  .nav-show {
    transform: translateX(0);
  }

JavaScript

$('.menu-open').click(function() {
  $('.nav-container').addClass('nav-show')
});