Всем доброй ночи!
Я работаю над своим первым адаптивным сайтом. Решил делать Mobile-first. Сделал меню, которое разворачивается на десктопе, но в мобильном браузере отказывается работать.
Тема судя по информации в сети, не нова. Все то, что я нашел там, указывает на то, что ошибка в js.
Подскажите пожалуйста, на что обратить внимание, чтобы исправить. Я приведу только часть кода и разметки, так как всего много.
HTML часть:
<body>
<div id="toggle">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<div id="menu">
<ul>
<li>About WIOTTO</li>
<li>Destinations</li>
<li>Luxury hotels</li>
<li>Luxury villas</li>
<li>HM offers</li>
<li>Family offers</li>
<li>For business</li>
<li>Contacts</li>
</ul>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/js.js"></script>
</body>
CSS часть:
body {
background: #45ad94;
}
#toggle {
width: 28px;
height: 30px;
margin: 10px auto;
}
#toggle div {
width: 100%;
height: 5px;
background: white;
margin: 4px auto;
transition: all 1s;
backface-visibility: hidden;
}
#toggle.on .one {
transform: rotate(45deg) translate(5px, 5px);
}
#toggle.on .two {
opacity: 0;
}
#toggle.on .three {
transform: rotate(-45deg) translate(7px, -8px);
}
#menu {
color: white;
border: 1px solid white;
width: 83.75%;
height: auto;
padding: 10px;
border-radius: 3px;
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans",
"Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
line-height: 100px;
text-align: center;
margin: auto;
display: none;
}
ul {
line-height: 1.5rem;
text-align: left;
}
ul li {
list-style-type: none;
}
JS часть:
"use strict"
$("#toggle").click(function() {
$(this).toggleClass("on");
$("#menu").slideToggle();
});