Заготовка адаптивного меню для сайта

Всем привет!
Хочу предложить классный код адаптивного меню! Скорее это будет похоже на заготовку (промежуточный продукт), которую вы можете использовать, предварительно вставив соответствующие названия меню.

Как только размер экрана будет меньше, чем 999 px, меню становится вот таким:

При клике меню раскрывается:

При нажатии на крестик, меню возвращается в исходный вид.
Теперь сам код.

JS:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
(function($){
$(function() {
$('.menu__icon').on('click', function() {
$(this).closest('.menu').toggleClass('menu_state_open');
});
});
})(jQuery);
</script>

CSS:

.menu__icon {
display: none;
width: 45px;
height: 35px;
position: relative;
cursor: pointer;
}

.menu__icon span {
display: block;
position: absolute;
height: 9px;
width: 100%;
background: #333333;
border-radius: 9px;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease-in-out;
}

.menu__icon span:nth-child(1) {
top: 0px;
}

.menu__icon span:nth-child(2), .menu__icon span:nth-child(3) {
top: 13px;
}

.menu__icon span:nth-child(4) {
top: 26px;
}

.menu__links-item {
display: inline-block;
color: #333333;
font-family: Arial;
font-size: 14px;
line-height: 30px;
padding: 0 10px;
text-transform: uppercase;
text-decoration: none;
}

.menu__links-item:hover {
text-decoration: underline;
}

.menu.menu_state_open .menu__icon span:nth-child(1) {
top: 18px;
width: 0%;
left: 50%;
}

.menu.menu_state_open .menu__icon span:nth-child(2) {
transform: rotate(45deg);
}

.menu.menu_state_open .menu__icon span:nth-child(3) {
transform: rotate(-45deg);
}

.menu.menu_state_open .menu__icon span:nth-child(4) {
top: 18px;
width: 0%;
left: 50%;
}

.menu.menu_state_open .menu__links {
opacity: 1;
}

@media screen and (max-width: 999px) {
.menu__icon{
display: inline-block;
}

.menu__links {
position: fixed;
display: block;
top: 0;
right: 0;
left: 0;
margin-top: 52px;
background-color: rgba(0, 0, 0, 0.8);
z-index: 1000;
overflow: auto;
opacity: 0;
}

.menu__links-item {
display: block;
padding: 10px 0;
text-align: center;
color: #ffffff;
}
}

HTML:

<div class="menu">
<div class="menu__icon">
<span></span>
<span></span>
<span></span>
<span></span>
</div>

<div class="menu__links">
<a class="menu__links-item" href="#">Меню 1</a>
<a class="menu__links-item" href="#">Меню 2</a>
</div>
</div>

Копируйте, вставляйте на сайт и смотрите результат!

Если вы хотите, чтобы меню сразу отображалось вот в таком виде:

тогда замените в CSS вот эту часть кода:

@media screen and (max-width: 999px) {
.menu__icon{
display: inline-block;
}

.menu__links {
position: fixed;
display: block;
top: 0;
right: 0;
left: 0;
margin-top: 52px;
background-color: rgba(0, 0, 0, 0.8);
z-index: 1000;
overflow: auto;
opacity: 0;
}

.menu__links-item {
display: block;
padding: 10px 0;
text-align: center;
color: #ffffff;
}
}

на вот такое:

.menu__icon{
display: inline-block;
}

.menu__links {
position: fixed;
display: block;
top: 0;
right: 0;
left: 0;
margin-top: 52px;
background-color: rgba(0, 0, 0, 0.8);
z-index: 1000;
overflow: auto;
opacity: 0;
}

.menu__links-item {
display: block;
padding: 10px 0;
text-align: center;
color: #ffffff;
}

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Добавить комментарий

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: Вебмастеру, для сайта