html Мобильноеменюдлясайтабезанимации

Posted 2021-05-11

$(function() {
  var pull    = $('#pull');
    menu    = $('nav ul');
    menuHeight  = menu.height();
 
  $(pull).on('click', function(e) {
    e.preventDefault();
    menu.slideToggle();
  });
});

$(window).resize(function(){
  var w = $(window).width();
  if(w > 320 && menu.is(':hidden')) {
    menu.removeAttr('style');
  }
}); 

  nav {
    border-bottom: 0;
  }
  nav ul {
    display: none;
    height: auto;
  }
  nav a#pull {
    display: block;
    background-color: #283744;
    width: 100%;
    position: relative;
  }
  nav a#pull:after {
    content:"";
    background: url('nav-icon.png') no-repeat;
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 10px;
  }
}

<nav class="clearfix">
  <ul class="clearfix">
    <li><a href="#">Home</a></li>
    <li><a href="#">How-to</a></li>
    <li><a href="#">Icons</a></li>
    <li><a href="#">Design</a></li>
    <li><a href="#">Web 2.0</a></li>
    <li><a href="#">Tools</a></li>  
  </ul>
  <a href="#" id="pull">Menu</a>
</nav>