Cacher is the code snippet organizer for pro developers

///////////////
// base style
///////////////
body {
  margin: 0;
  font-family: avenir, 'avenir next', helvetica, arial, sans-serif;
}

a {
  text-decoration: none;
}

///////////////
// region style
///////////////
.navigation {
  background: cyan;
  height: 60px;
  line-height: 60px;
}

///////////////
// menu style
///////////////
.navigation {
  h2 {
    display: none;
    position: relative;
    margin: 0;
    padding: 0 20px;
    cursor: pointer;
    &:after {
      position: absolute;
      top: 0;
      right: 20px;
      content: "\2630";
    }
  }
  a {
    display: block;
    padding: 0 10px;
    color: #000;
    line-height: 40px;
    &:hover {
      background: magenta;
    }
  }
  ul {
    margin: 0;
    padding: 0;
    text-align: center;
    li {
      display: inline-block;
      vertical-align: middle;
      zoom: 1;
      *display: inline;
    }
  }
  @media (max-width: 768px) {
    h2 {
      display: block;
    }
    a {
      padding: 0 20px;
    }
    ul {
      display: none;
      width: 100%;
      li {
        display: block;
        // text-align: left;
        background: cyan;
        border-bottom: solid 1px magenta;
        &.last {
          border-bottom: none;
        }
      }
    }
  }
}

$(function() {
  $('.navigation h2') .click(function() {
    $('.navigation ul').slideToggle();
  });
});

<div class="navigation">
  <nav class="block-menu">
    <h2>Menu</h2>
    <ul class="menu">
      <li><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
      <li><a href="#">Menu Item</a></li>
    </ul>
  </nav>
</div>