Minimal Responsive Sliding Menu with jQuery and CSS3

A minimal, responsive, cross platform navigation that converts a regular menu into a toggleable slide down menu, built using jQuery and CSS3 flex box model.

How to use it:

1. Create an html list based navigation menu for your website.

<nav>
  <div id="toggle-menu">Toggle Menu</div>
   <ul class="menu">
     <li><a href="#">Home</a></li>
     <li><a href="#">Blog</a></li>
     <li><a href="#">Contact</a></li>
     <li><a href="#">About</a></li>
   </ul>
 </nav>

2. Style the menu and make it responsive using CSS3 flexible box and media queries. In this case, the breakpoint is 568px.

@media screen and (max-width: 568px) {

.menu {
  padding: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  list-style: none;
  background: #C0392B;
  display: none;
}

@media screen and (min-width: 568px) {

.menu { display: flex; }

li {
  text-align: center;
  border-right: 1px solid rgba(0,0,0,0.2);
}

a { padding-left: 0px; }
}

li {
  flex: auto;
  border-bottom: 1px solid rgba(0,0,0,0.2);
}

li:last-child { border: none; }

a {
  color: #eee;
  text-decoration: none;
  line-height: 3;
  display: block;
  padding-left: 1em;
}

a:hover { background: rgba(0,0,0,0.2); }

#toggle-menu {
  background: rgba(0,0,0,0.7);
  border-bottom: 1px solid rgba(0,0,0,0.2);
  line-height: 2.5;
  color: #fff;
  padding-left: 1em;
  font-size: 0.9em;
  cursor: pointer;
}

@media screen and (min-width: 568px) {

#toggle-menu { display: none; }

}

3. Include the needed jQuery library at the bottom of the web page.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

4. The jQuery script to enable the menu toggle button on mobile devices (Screen width < 568px).

$('#toggle-menu').click(function(){
  $(this).next().slideToggle();
})

---

This awesome jQuery plugin is developed by loogier. For more Advanced Usages, please check the demo page or visit the official website.