BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Вебмастеру » Заготовка адаптивного меню для сайта

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

2017-10-16 / Вр:22:32 / просмотров: 1590

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

Как только размер экрана будет меньше, чем 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;
}

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

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

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

Метки: ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 802
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4573