Кнопка меню гамбургер с помощью 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, то у вас уже в системе по умолчанию установлено. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
