Маленький, изящный скрипт для адаптивного меню

К слову, именно так и работает меню на нашем сайте)

$(document).ready(function(){
    $(".menu-trigger").click(function () {
      $("ul").slideToggle("300");
    });
    $(window).resize(function(){
        if ($(window).width() > 767) {
            $('ul').removeAttr('style');
        };
    });
});

<nav>
  <a href="#" class="menu-trigger">Меню</a>
  <ul>
    <li><a href="#">Пункт меню 1</a></li>
    <li><a href="#">Пункт меню 2</a></li>
    <li><a href="#">Пункт меню 3</a></li>
    <li><a href="#">Пункт меню 4</a></li>
  </ul>
</nav>

nav{
  background: #021542;
  text-align: center;
}
ul{
  margin: 0;
  padding: 0;
}
li{
  display: inline-block;
}
a{
  display: block;
  color: #fff;
  font-family: "Lato", sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  padding: 20px 30px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
a:hover{
  color: #fff;
  background: #FF534B;
}
.menu-trigger{
  color: #FF534B;
  font-weight: bold;
  display: none;
}
@media screen and (max-width: 767px){
  ul {
    display: none;
  }
  li {
    display: block;
  }
  .menu-trigger{
    display: block;
  }
}

Написать комментарий