» »

Кнопка меню гамбургер с помощью CSS и jQuery

Кнопка меню гамбургер с помощью CSS и jQuery

Чтоб создать качественный сайт по функциональности, то без кнопки гамбургер не обойтись, так как она отвечает за появление навигаций сайта. Безусловно она стала очень популярна для пользователей широкого монитора, также мобильных носителей. Больше всего она отвечает за меню на сайте на всех гаджетов. И здесь плюсы от нее идет в компактности и оригинальности, где присутствует анимация. Где пользователя такой функцией приятно и удобно, так как всегда можно увидеть, где сразу понимаешь, что вы откроете.

С тех пор веб-дизайн превратился в более сложную художественную форму. Необходимо тщательно подумать и рассмотреть возможность разработки сайта, который работает во всех платформах и размерах экрана. Одним из наиболее важных аспектов гибкого веб дизайна является навигация. Его обычно нужно скрывать и получать с помощью кнопки, чтобы упростить дизайн, и создать место для важного контента.

В настоящее время все знакомы с символом навигации 3-го уровня, который был должным образом прозваны кнопками гамбургера, это стандарт в навигационных кнопках. В начале мы просто использовали бы изображения как наши кнопки для гамбургеров, но теперь нам нравится использовать чистый CSS поверх изображений, когда это возможно. Это привело к созданию чистой кнопки CSS, и мы сделали еще один шаг, добавив приятную анимацию с открытым и закрытым переходом.

1. Нужно создать структуру HTML для вашей кнопки:

На первом этапе выстраиваем основную структуру HTML, что предназначена для кнопки навигации:

Код
<a id="kisnext-generation"><span>Переключить меню</span></a>

Также для заметки:

1. Здесь заостряем внимание в HTML и CSS идентификатор kisnext-generation, что изначально ссылается на весь этот каркас.
2. Также есть тема подключить любой шрифт текста для вызова, хотя здесь знаки будут скрыты и фактически не виден.
3. Любой элемент HTML может быть использован.

2. Переходим к стилям CSS для стилизации:

В последующем шаге мы будем ссылаться на идентификатор, используемый на кнопке гамбургера в шаге 1, и нарисуем его при помощи стилистики CSS.

Код
#kisnext-generation{  
display: block;  
float: right;  
padding: 15px;  
cursor: pointer;  
}
#kisnext-generation span, #kisnext-generation span::before, #kisnext-generation span::after{  
width: 31px;  
height: 3.8px;  
float: left;  
display: block;  
background: #000;  
position: relative;  
text-indent: -9000px;  
}
#kisnext-generation span{ margin: 7px 0; }
#kisnext-generation span::before, #kisnext-generation span::after{  
content: '';  
position: absolute;  
}
#kisnext-generation span::before{ top: -7px; }
#kisnext-generation span::after{ bottom: -7px; }
#kisnext-generation span, #nav_btn span:before, #nav_btn span:after{  
-webkit-transition: all 100ms ease-in-out;
-moz-transition: all 100ms ease-in-out;
-ms-transition: all 100ms ease-in-out;
-o-transition: all 100ms ease-in-out;
transition: all 100ms ease-in-out;
}
#kisnext-generation.active span{ background-color: transparent; }
#kisnext-generation.active span::before, #nav_btn.active span::after{ top: 0; }
#kisnext-generation.active span:before{  
transform: rotate(45deg);  
-webkit-transform: rotate(45deg);  
}
#kisnext-generation.active span::after{  
transform: translateY(-10px) rotate(-45deg);  
-webkit-transform: translateY(-10px) rotate(-45deg);  
top: 10px;  
}

Элементы для заметок:

1. Убедитесь, что вы ссылаетесь на тот же идентификатор, который размещен на вашем элементе HTML.
2. При необходимости отрегулируйте прокладку на #kisnext-generation.
3. Мы чувствуем, что мы разработали довольно стандартный размер для кнопки, но если вам нужно изменить высоту, вам также потребуется отрегулировать маржу, а также позиционирование для тегов span.

3. Отрегулируйте цвет фона для адаптации к дизайну вашего сайта.

Используйте jQuery для запуска анимации CSS для кнопки Гамбургер. Заключительный шаг в этом уроке, это оживить анимацию CSS, используя простую функцию щелчка jQuery для включения и отключения активного класса.

Код
$(document).ready(function() {
  $('#kisnext-generation').click(function(e) {
  $(this).toggleClass("active");
  e.preventDefault();
  });
});

Элементы для заметок:

1. Нужно убедиться, на какой индикатор ссылаетесь, что размещен на вашем HTML.
2. Этот шаг зависит от библиотеки JavaScript jQuery, чтобы функционировать; вы должны либо напрямую подключиться к jQuery, либо загрузить последнюю версию и загрузить ее на свой сервер.
3. Этот jQuery является временным и используется только для фактического запуска анимации CSS; он будет обновлен во второй части этой серии учебников.

В этом руководстве рассмотрели несколько простых шагов, чтобы создать удобное меню гамбургеров для вашего сайта с использованием HTML, CSS и немного jQuery.

Нужно подключить jQuery, где после этого отлично работать будет. У кого конструктор uCoz, то у вас уже в системе по умолчанию установлено.

Демонстрация
03.07.2018 Просмотров: 221 Комментарий: (1)

Поделиться в социальных сетях

Материал разместил

Комментарий: 1
Kosten
Kosten 03.07.2018 00:371
0
Если кому нужно загрузить jQuery, то вы можете загрузить последнюю версию jQuery, перейдя по ссылке.

Ссылка: jquery.com/download
avatar