Здравствуйте.
Помогите пожалуйста, еще плохо разбираюсь в js, как в выдвижном меню сделать открытие и закрытие на текст "Меню". Когда ставлю один класс, то меню открывается и сразу закрывается. Вот код:
<html>
<head>
<style type="text/css">
/* Body */
body {
width: 750px;
margin: auto;
}
.block {
margin: 0 auto;
overflow: hidden;
position: relative;
width: 750px;
}
/* Menu */
.menu {
background: #555 url('images/menu-bg.jpg') repeat left top;
left: -285px;
height: 100%;
position: fixed;
width: 285px;
}
/* Basic CSS */
.background {
background-image: url('images/chicago-night.jpg');
height: 100%;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.menu ul {
border-top: 1px solid #555;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #555;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu li:hover {
cursor: pointer;
background-color: #555;
}
.menu a {
color: #fff;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 6px;
}
.icon-menu {
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
padding-bottom: 25px;
padding-left: 25px;
padding-top: 25px;
text-decoration: none;
text-transform: uppercase;
}
.icon-menu img {
margin-right: 5px;
}
</style>
</head>
<body>
<div class="icon-menu">
Menu
</div>
<div class="block">
<div class="background">
<div class="menu">
<!-- Иконка меню -->
<div class="icon-close">
<img src="images/close-btn.png">
</div>
<!-- Меню -->
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="menu.js"></script>
</body>
</html>
/* Открытие меню */
var main = function() { //главная функция
$('.icon-menu').click(function() { //выбираем класс icon-menu и добавляем метод click с функцией, вызываемой при клике
$('.menu').animate({ //выбираем класс menu и метод animate
left: '285px' //теперь при клике по иконке, меню, скрытое за левой границей на 285px, изменит свое положение на 0px и станет видимым
}, 200); //скорость движения меню в мс
$('.block').animate({ //выбираем тег body и метод animate
left: '285px' //чтобы всё содержимое также сдвигалось вправо при открытии меню, установим ему положение 285px
}, 200); //скорость движения меню в мс
});
/* Закрытие меню */
$('.icon-close').click(function() { //выбираем класс icon-close и метод click
$('.menu').animate({ //выбираем класс menu и метод animate
left: '-285px' //при клике на крестик меню вернется назад в свое положение и скроется
}, 200); //скорость движения меню в мс
$('.block').animate({ //выбираем тег body и метод animate
left: '0px' //а содержимое страницы снова вернется в положение 0px
}, 200); //скорость движения меню в мс
});
};
$(document).ready(main); //как только страница полностью загрузится, будет вызвана функция main, отвечающая за работу меню
