Как сделать так, чтобы при уменьшении окна осталась только кнопка, а ненумерованный список меню появлялся после нажатия на "сендвич"
Вот код:
$(window).resize(function() {
var width = $(window).width();
if (width > 760 && $('ul').is(':hidden')) {
$('ul').removeAttr('style');
}
});
$('.menu-icon').click(function() {
$('.menu').toggle("active");
});
.menu {
padding: 0;
margin: 0;
font-family: Arial;
}
.menu li {
display: block;
float: left;
}
.menu li a {
padding: 10px;
display: block;
color: #fff;
background: #444;
text-decoration: none;
margin: 1px;
}
.menu li a:hover {
background: #222;
}
.menu-icon {
text-align: right;
display: none;
}
.menu-icon svg g {
fill: #444;
}
@media (max-width: 600px) {
.menu-icon {
display: block;
}
.menu li {
float: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
<div class="menu-icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink" height="25px" version="1.1" viewBox="0 0 25 25" width="25px" data-livestyle-extension="available">
<title/>
<desc/>
<defs/>
<g fill="none" fill-rule="evenodd" id="TabBar-Icons" stroke="none" stroke-width="1">
<g id="Hamburger">
<path d="M0,2 L25,2 L25,6 L0,6 L0,2 Z M0,10 L25,10 L25,14 L0,14 L0,10 Z M0,18 L25,18 L25,22 L0,22 L0,18 Z" />
</g>
</g>
</svg>
</div>
<ul class="menu">
<li><a href="#">ГАЛЕРЕЯ</a>
</li>
<li><a href="#">ОБ АВТОРЕ</a>
</li>
<li><a href="#">ВЫСТАВКИ</a>
</li>
<li><a href="#">АРТВОЯЖ</a>
</li>
<li><a href="#">КОНТАКТЫ</a>
</li>
</ul>
</nav>
width < 760
, то скрывалось меню?