EPadxd

EPadxd.markdown

EPadxd

A Pen by Nikesh Suwal on CodePen.

License.

index.html

<h1>Slide Over Menu</h1>
<div class="nav-toggle">Menu <i class="fa fa-bars fa-1x"></i></div>
<nav role='navigation' class="main-menu">
  <span class="nav-toggle  close">close <i class="fa fa-times"></i></span>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>  

script.js

$(function(){
  $('.main-menu ul').hide()
  $('.nav-toggle').on('click',function(){
    $('.main-menu ul').toggle();
    $('.main-menu').toggleClass('open');
  });
})

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

style.css

nav
  width: 300px
  height: 100%
  ul
    padding-left: 0
    margin-top: 40px
  li
    list-style: none
    border-bottom: 1px solid #444
  a
    padding: 10px
    text-decoration: none
    display: block
    color: #555
    font:
      size: 18px
.main-menu
  position: fixed
  left: 0
  top: 70px
  height: 100%
  width: 300px
  background: #222
  transform: translateX(-100%)
  transition: transform 1s ease
  
.main-menu.open
  transform: translateX(0)
  
.nav-toggle
  color: black
  padding: 10px
  cursor: pointer
  font:
    weight: bold
    size: 20px
.close
  color: #fff
  position: absolute
  top: 5px
  right: 5px

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />

Slider Overlay Menu