I made up a button which must open up the menu in mobile version of the site with JQuery but it is not working in any way. I did the new project just with this button and menu to debug and it works fine and also I can't find any difference between this code and the original one. My brain hurts very much, please tell me why this button is not working and what should I do with it. (I replaced poping menu with exploding just to see if the button works)
$(document).ready(function(){
$('#menu-icon').click(function(){
$('header').toggle('explode');
});
});
nav {
margin-left: -35px;
margin-top: 5px;
margin-bottom: 5px;
position: relative;
border-bottom: 1px solid black;
border-top: 1px solid black;
}
#menu-icon {
background: url(../img/mobile-menu.png) no-repeat;
position: absolute;
left: -9999px;
width: 0px;
}
nav li {
display: inline;
}
nav .left-nav {
margin-top: -20px;
margin-right: 0px;
width: 200px;
float: right;
position: relative;
padding-top: 20px;
}
#login {
position: absolute;
top: 5px;
right: 0;
}
nav h3 {
text-indent: -9999px;
}
nav h3:after {
clear: both;
display: block;
content: ' ';
visibility: hidden;
height: 1%;
}
nav h3 a {
background: url(../img/cart.png) no-repeat;
width: 48px;
height: 44px;
position: absolute;
top: 10px;
left: 0;
padding: 0;
}
nav h3 a:hover {
background-color: white;
}
nav a {
font-family: 'Cormorant Infant', serif;
font-size: 26px;
letter-spacing: 3px;
margin-right: 5px;
color: #0d0d0d;
padding: 15px 5px;
}
nav a:hover {
background-color: #e8e8e8;
}
@media only screen and (max-width: 768px) {
nav {
height: 90px;
}
nav ul {
visibility: hidden;
}
nav .left-nav {
margin-top: -5px;
visibility: visible;
padding-top: 0;
}
nav #login {
letter-spacing: -1px;
font-size: 50px;
padding: 40px 0;
top: -35px;
margin-right: 55px;
}
nav h3 a{
left: -73px;
}
#menu-icon{
width: 78px;
height: 65px;
display: block;
left: 15px;
margin-top: 15px;
}
header h3 {
text-indent: -9999px;
}
.news {
width: 100%;
}
}
<script src="http://ift.tt/1oMJErh"></script>
<body>
<div class="container">
<header>
<h3 id="menu-icon"><a href="#"></a>Меню</h3>
<nav>
<ul>
<li><a href="#">Прайслист</a></li>
<li><a href="#">Подбор букета</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Доставка</a></li>
<div class="left-nav">
<li><h3><a href="#" ></a>Корзина</h3></li>
<li><a href="#" id="login">Войти</a></li>
</div>
</ul>
<ul class="mob-menu hidden">
<li><a href="#">Прайслист</a></li>
<li><a href="#">Подбор букета</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Доставка</a></li>
</ul>
</nav>
<div class="banner">
<a href="#" id="left"></a> <!-- image replacement лучше сделать в css без картинки -->
<a href="#" id="right"></a> <!-- image replacement -->
<h1>Цветочный Дом Полины</h1>
<ul>
<li id=selected><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</header>
</body>
Aucun commentaire:
Enregistrer un commentaire