Мобильное меню



Пример создания мобильного меню HTML
<nav>
  <a href="#" class="menu-trigger">Menu</a>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Products</a></li>
  </ul>
</nav>
CSS
body {
  background-color: #F8ECC2;
  font-family: Arial, sans-serif;
}

nav {
  width: 100%;
  background-color:#65A8A6;
}

nav ul li {
  display:inline-block;  
}

nav a {
  color:#F8ECC2;
  display:block;
  text-decoration: none;
  padding:20px 30px;
 }

nav a:hover {
  background: #E65540;
}

.menu-trigger {
  display:none;
  color:#F8ECC2;
}

@media screen and (max-width:500px) {
  .menu-trigger {
    display:block;
  }
  nav ul li {
    display:block;
    border-top:1px #79896D solid;    
  }
  nav ul {
    display:none;
  }
}
JS
$(document).ready(function() {
  $('.menu-trigger').click(function() {
    $('nav ul').slideToggle(500);
  });//end slide toggle
  
  $(window).resize(function() {		
		if (  $(window).width() > 500 ) {			
			$('nav ul').removeAttr('style');
		 }
	});//end resize
});//end ready
пример https://codepen.io/docode/pen/QbbQwm

Comments

    No results found.