Простая навигация для мобильных устройств

Простая навигация для мобильных устройств основанная на jQuery и CSS3
Преобразуется на мобильных разрешениях экрана.

Как использовать:
1. Создаём навигацию

<nav class="nav">
  <a class="toggle-nav" href="#">&#9776;</a>
  <div class="nav-mobile">
    <ul class="left">
      <li><a href="#">Home</a></li>
      <li><a href="#">Categories</a></li>
      <li><a href="#">Most Popular</a></li>
    </ul>
    <ul class="right">
      <li>
        <a href="#">About</a>
      </li>
      <li>
        <a href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

2. Подключаем стили CSS

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

ul { list-style: none; }

.nav {
	display: block;
  background: #0275d8;
  min-height: 50px;
}

.nav .left {
  float: left;
  margin-left: 1em;
}

.nav .left li {
  border-bottom: 1px solid #ED5565;
  font-size: 14px;
  float: left;
}

.nav .left li a {
  display: block;
  padding: 10px 15px;
  line-height: 30px;
}

.nav .left li a:hover { background: #ED5565; }

.nav .right {
  float: right;
  margin-right: 1em;
}

.nav .right li {
  border-bottom: 1px solid #ED5565;
  font-size: 14px;
  float: left;
}

.nav .right li a {
  display: block;
  padding: 10px 15px;
  line-height: 30px;
}

.nav .right li a:hover { background: #ED5565; }

.toggle-nav { display: none; }

.nav-mobile style { display: block; }

3. Стили выпадающего меню для мобильных устройств.

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

.nav { border-bottom: 1px solid rgba(0,0,0,0.1); }

.toggle-nav {
  display: block;
  padding: 10px;
  position: absolute;
  right: 10px;
  line-height: 30px;
}

.toggle-nav:after { content: 'Menu'; }

.nav-mobile { display: none; }

.style-mobile {
  background: #DA4453;
  top : 51px;
  position : absolute;
  width : 100%;
}

.style-mobile li {
  display: block;
  width: 100%;
}

.nav .right {
  display: block;
  float: none;
  margin: 0em;
}

.nav .left {
  display: block;
  float: none;
  margin: 0em;
}

4. Подключаем библиотеку jQuery

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

5. Подключаем меню (В шапку сайта)

$(function(){

  // Returns width of browser viewport
  var browser = $(window).width();
  // Returns width of HTML document
  var document = $(document).width();

  var nav = $('.nav .toggle-nav');

  nav.click(function(e){
      $('.nav .nav-mobile').addClass('style-mobile').slideToggle('slow');
      e.preventDefault();
  });

});