Slide Over Menu

index.html

<header>
  <h1 class="site-title">Site Name</h1>
  <i class="fa fa-bars nav-toggle"></i>
  <nav class="main-navigation" role="navigation">
    <span class="nav-toggle">Close</span>
    <ul>
      <li><a href="#">home</a></li>
      <li><a href="#">about</a></li>
      <li><a href="#">portfolio</a></li>
      <li><a href="#">contact</a></li>
  </nav>
</header>
  <main>
    <h2>Hello</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus urna eu tincidunt egestas. Nam interdum ut mi id dapibus. Cras commodo turpis vitae leo porttitor, nec rhoncus quam rhoncus. Vestibulum sed dui lacinia, mattis justo quis, laoreet mauris. Phasellus odio lorem, pulvinar a dolor ac, venenatis aliquam mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque in accumsan justo. Nam a ullamcorper quam. Fusce ornare metus eget vestibulum lobortis. 
    </p>
    <p>
      Praesent augue odio, sollicitudin at mollis vitae, pretium vitae velit. Phasellus vel venenatis eros. Phasellus vitae leo quam. Nunc eleifend vehicula mauris, et interdum augue tempus id. Cras cursus, turpis vitae venenatis gravida, purus sem eleifend elit, at ornare urna turpis in metus. Donec sit amet felis eu tellus pharetra gravida. Fusce mi odio, aliquam eu mi et, dapibus sodales tellus. Donec id tortor nec est consectetur lacinia. Aenean nisl nisl, dapibus laoreet augue non, tincidunt placerat tortor. Proin et nunc ligula. Donec scelerisque dolor et lacus pellentesque tincidunt. 
    </p>
  </main>

script.js

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

SlideOverMenu

This is an example of a slide over menu.

style.css

header {
  background: #333;
  color: #fff;
  padding: 20px;
  position: relative;
}

.site-title {
  margin-left: 100px;
  font-size: 1 rem;
}

.nav-toggle {
  position: absolute;
  top: 30px;
  cursor: pointer;
}

a {
  color: #fff;
  text-decoration: none;
}

nav a {
  font-size: 5em;
}

nav li {
  list-style: none;
}

.main-navigation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #333;
  text-align: center;
  transform: translateX(100%);
  transition: transform 0.6s ease;
}

.main-navigation.open {
  transform: translateX(0%);
}

.main-navigation .nav-toggle {
  right: 5%;
  top: 5%;
  font-size: 4em;
}

.main-navigation  ul {
  margin: 0;
  padding: 0;
}

.main-navigation  ul a {
  padding: 10px 20px;
  display: block;
}

test1.markdown

test1

A Pen by Ken Shoufer on CodePen.

License.