Mobile menu

tworzymy mobilne menu z fajnym efektem po najechaniu na przycisk i otwarciu menu mobilnego.

kod html w wersji desktop:

  <!-- header section -->
  <section id="sidebar">
    <!-- Menu -->
    <nav class="navmenu">
      <ul id="menu-main" class="menu">
        <li><a href="/home">home</a></li>
        <li><a href="/about">about</a></li>
        <li><a href="/portfolio">portfolio</a></li>
        <li><a href="/contact">contact</a></li>
      </ul>      
    </nav><!-- //Menu -->
  </section><!-- //header section -->

w jQuery wprowadzamy link włączania/wyłączania menu:

jQuery(document).ready(function() {		

  //MobileMenu
  jQuery('#sidebar').append('<a href="javascript:void(0)" class="menu_toggler"><span></span></a>');
  
  //When user clicks the Icon
  jQuery(".menu_toggler").click(function() {
    jQuery(this).toggleClass("active");
  });  
  
  jQuery('#sidebar').append('<div class="mobile_menu_wrapper"><ul class="mobile_menu"/></div>');	
  jQuery('.mobile_menu').html(jQuery('#sidebar').find('#menu-main').html());
  jQuery('.mobile_menu_wrapper').hide();
  jQuery('.menu_toggler').click(function(){
    jQuery('.mobile_menu_wrapper').slideToggle(300);
  });
  
});

kod css do ostylowania wyglądu przycisku i jego zachowania po najechaniu i kliknięciu:

@media (max-width: 600px) {
  /* ___________________ MENU ___________________ */ 

  a.menu_toggler {  		
    position:absolute;
    right:12px;
    top:12px;
    display:block;
    margin:0;
    width:40px;
    height:40px;
    padding-top: 20px;
    background:#fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    text-align:center;
  }
  
  .menu_toggler span, .menu_toggler span:before, .menu_toggler span:after{
    content: '';
    position: absolute;
    display: block;
    width: 20px;
    height: 1px;
    cursor: pointer;
    background:#5a5b5c;      
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
  }
  .menu_toggler span:before {
    top: -4px;
  }
  .menu_toggler span:after {
    bottom: -4px;
  }
  .menu_toggler:hover span:before {
    top: -6px;
  }
  .menu_toggler:hover span:after {
    bottom: -6px;
  }
  .menu_toggler span, .menu_toggler span:before, .menu_toggler span:after {
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
  }
  .menu_toggler.active span {
    background-color: transparent;
  }
  .menu_toggler.active span:before, .menu_toggler.active span:after {
  top: 0;
  }
  .menu_toggler.active span:before {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .menu_toggler.active span:after {
    top: 10px;
    -webkit-transform: translateY(-10px) rotate(-45deg);
    -ms-transform: translateY(-10px) rotate(-45deg);
    transform: translateY(-10px) rotate(-45deg);
    }   
  
  .mobile_menu_wrapper{
    background:#1b1a1a;
    text-transform: uppercase;
    font-family: 'montserratregular', sans-serif;
    font-size:18px;
    text-align:center;
    color:#fff;   
    position: fixed;
    left: 0;
    top: 70px;
    width: 100%;
    z-index: 999;
  }
  .mobile_menu li{
  	list-style:none;
  }
  .mobile_menu li a{
    display:block;
    color:#fff;
    padding:10px 0;
  }
  .mobile_menu li a:hover{
    background:#e22117;
    color:#fff;
  }
  #mobile-header:after, .mobile_menu_wrapper:after  { 
    content:'';
    height:6px;
    display:block;
    width:100%;
    position:absolute;
    bottom:-6px;
    background:url('images/menu_shadow.png') repeat-x left top;
  }