jquery выпадающее меню при нажатии
Jquery выпадающее меню при нажатии
Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».
Бесплатные уроки CSS для начинающих
Вдобавок к текстовым урокам по каскадным таблицам стилей, в данном разделе также представлены полезные уроки CSS для начинающих. Все материалы изложены в максимально простой и понятной форме, поэтому даже абсолютный новичок сможет быстро освоить все премудрости создания красивого оформления сайтов.
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.
Анимация фона при прокрутке страницы
Анимируем SVG фигуры при прокрутке страницы.
Пример 3D помещения выставки
Экспериментальная 3D проекция помещения галереи.
Выпадающее меню на jQuery
Для того, чтобы самому написать навигацию в виде вертикального выпадающего меню на jQuery с выпадающим списком подкатегорий, необходимо понять сам принцип работы этого механизма. Но для начала разберем структуру навигации:
Но как, спросите вы? Да все на самом деле очень просто. Для начала давайте разберемся с таблицей стилей нашего списка навигации, выглядеть она будет следующим образом:
Из таблицы стилей видно, что изначально выпадающий список не скрыт, но этот момент мы и будем исправлять при помощи jQuery:
Теперь подробно разберем jQuery код выпадающего меню, т.к. возможно кому-то он будет не совсем понятен. В самом начале прописана следующая конструкция:
В ней прописываются команды, которые необходимо выполнять после полной загрузки страницы. Сделано это для того, чтобы не появлялись разного рода ошибки, при невозможности найти какой-либо объект из-за того, что он банально ещё не загрузился.
Что означает эта запись? Конструкция «$()» позволяет произвести выборку элементов. Следовательно в самом начале нам необходимо скрыть наш выпадающий список. Мы берем конструкцию «$()» и пишем в ней интересующий нас объект. В нашем случае этим объектом будет маркированный список с классом «menu». Далее прописываем метод «hide()», позволяющий скрыть интересующий нас объект.
Далее идет следующая конструкция:
Что она делает? Она ищет тег родительскому элементу которого присвоен класс «menu» и, при помощи метода «css(‘background’, ‘url(«down.png»)’)”, происходит присваивание свойству стиля «background» значения «url(«down.png»)». «down.png» – это иконка, показывающая, что список может раскрываться.
Затем идет конструкция, которая и будет раскрывать наш список, выглядит она следующим образом:
Мы ищем тег родительскому элементу которого присвоен hover” и в скобках две функции. Первая функция будет выполняться при наведении курсора мыши, а вторая выполниться, если курсор мыши покинет интересующий нас элемент.
В первой функции прописано:
После этого у тега мы ищем потомков, а именно: тег и у него меняем фон на другую иконку.
После этого прописана функция, которая делает все, как было изначально, после того, как курсор мыши покинет элемент списка:
Ну вот и все! В заключении хочу отметить, что если ваш сайт довольно увесист, то возможно, скрипт будет запускаться слишком поздно (сайт будет долго грузиться) и пользователи будут видеть, как навигация сначала раскрывается полностью, а только потом скрывается, что, согласитесь, очень некрасиво. Следовательно, необходимо вынести все jQuery команды за эту конструкцию: «$(document).ready(function()<>)». Выглядеть это будет следующим образом:
Подключение нашего скрипта необходимо перенести из тега в самый конец, перед закрывающим тегом
jQuery для начинающих. Часть 2. JavaScript Меню.
В первой части были рассмотрены базовые принципы работы селекторов и приведены несколько примеров, в данной статье я постараюсь акцентировать внимание на реализации JavaScript меню для Вашего сайта.
Если Вам готовый код наглядней документации, то переходим от слов к делу, т.е. на страницу с примерами.
Slide меню
Два slide-меню на странице: вверху и внизу.
Кликаем по ссылке с классом «btn-slide», выезжает панель с меню.
Частично данный пример присутствует в первой части, так что особо углубляться в реализацию не буду, приведу лишь JavaScript код с пояснениями:
Slide меню 2
Slide-меню слева и справа страницы. Для начала приготовим HTML:
У нас должно получиться что-то наподобие следующего:
Теперь создадим обработчик событий для ссылок с классом «btn-slide»:
Затем нам необходимо найти элемент с классом «panel» и выдвинуть его на 120 пикселей:
Соединяем это вместе:
Drop-down меню
Одна из самых распространенных реализаций меню для сайта это горизонтальное выпадающее меню, его конечно можно реализовать при помощи CSS, но статья у нас о jQuery, так что будем орудовать оным. Начнем с HTML’a (замечу, что для всех остальных примеров код практически не отличается):
Ну и собственно сам HTML:
Далее нам необходимо добавить обработчик для события hover для элементов li:
И отображаем под-меню:
А теперь всё вместе:
Drop-down AJAX меню
Горизонтальное выпадающее меню с подгрузкой элементов AJAX’ом.
Для начала нам понадобится само меню:
И заготовки для подменю, назовем их menu1.html, menu2.html и menu3.html — по id соответствующих элементов меню (скорей всего данные элементы будут генерироваться динамически, но для упрощения примера используем статические странички):
Теперь, как и в предыдущем примере, нам необходим обработчик события hover:
Теперь необходимо загрузить недостающие элементы меню посредством AJAX’a:
Drop-down меню
Вертикальное выпадающее меню. Достаточно простенький примерчик:
Float меню
Плавающее меню. Нам понадобится плагин Dimensions (дабы работали методы height() и width()). Ну с HTML я думаю, Вы разберетесь:
Теперь по порядку — начнем с получение информации о текущем расположении «плавающих» меню:
Далее, нам необходимо «повесить» свою функцию для события scroll:
Ну и собственно наполнение:
Так же добавим отображение/скрытие элементов подменю:
Адаптивное выпадающее CSS меню на jQuery
Сам дизайн выполнен по стандарту, что на многие тематические сайты подойдет по своей структуре. Ведь сама основа выстроена полностью при помощи CSS, что не сложно поменять оттенок цвета, который соответствует основному стилю сайта. Если рассматривать его полностью на широком мониторе, то по левую сторону видим логотип, который идет под знаки, что некоторые ставят под оригинальный или не похожий шрифт, что кардинально отличается от запросов, что идут по левую сторону.
Эта навигация работает совершенно по-другому на мобильных устройствах, где на гаджет можно наблюдать вертикальном положение, и к материалу прикреплена demo страница, где можете ознакомиться со всеми включенными функциями. Также здесь присутствует кнопка для клика, чтоб развернуть панель, что позволяет видеть панель переключения в соответствии со стилистикой сайта.
Вид с большого монитора:
Здесь автоматически выстраивается панель на мобильном экране:
Что при клике разворачиваем полноценную панель с переходом по материалу:
Библиотеку прописываем в HEAD страниц
.animation-navigatsiya <
height: 72px;
background: #232222;
border-bottom: 2px solid;
border-color: #736f6f;
>
.akache-stvodas <
position: absolute;
padding-left: 20px;
float: left;
line-height: 72px;
text-transform: uppercase;
font-size: 25px;
>
.demesan-kusecega <
max-width: 1000px;
margin: 0 auto;
>
nav <
float: right;
>
nav ul <
list-style: none;
margin: 0;
padding: 0;
>
nav ul li <
float: left;
position: relative;
>
nav ul li a, nav ul li a:visited <
display: block;
padding: 0 12px;
line-height: 72px;
background: #232121;
color: #f5f5f5;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
>
nav ul li a:hover, nav ul li a:visited:hover <
background: #13589c;
color: #fbf9f9;
>
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after <
padding-left: 4px;
content: ‘ ▾’;
>
nav ul li ul li <
min-width: 190px;
>
nav ul li ul li a <
padding: 15px;
line-height: 20px;
>
.nalumes-nucludem <
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
>
.nav-mobile <
display: none;
position: absolute;
top: 0;
right: 0;
background: #232222;
height: 72px;
width: 70px;
>
@media only screen and (max-width: 860px) <
.nav-mobile <
display: block;
>
nav <
width: 100%;
padding: 70px 0 15px;
>
nav ul <
display: none;
>
nav ul li <
float: none;
>
nav ul li a <
padding: 15px;
line-height: 20px;
>
nav ul li ul li a <
padding-left: 30px;
>
.nalumes-nucludem <
position: static;
>
>
@media screen and (min-width: 799px) <
.nav-list <
display: block!important;
>
(function($) <
$(function() <
$(‘nav ul li a:not(:only-child)’).click(function(e) <
$(this).siblings(‘.nalumes-nucludem’).toggle();
$(‘#sadas-polnyus’).click(function() <
$(‘nav ul’).slideToggle();
>);
$(‘#sadas-polnyus’).on(‘click’, function() <
this.classList.toggle(‘active’);
>);
>);
>)(jQuery);
Как в начале было сказано, что вы можете изменить цвет границы, текст и фонового оттенка, который идет за основу, а здесь в темной гамме цвета. Кроме того, вы можете кардинально изменить размеры шрифта с добавлением текста в соответствии с вашими предпочтениями.
С помощью этого горизонтального меню, у вас появляется возможность добавлять или выбирать пользовательские компоненты HTML, чем вы красиво оформите сайт, где навигация идет как актуальный инструмент для поиска по интернет площадке.
Jquery выпадающее меню при нажатии
Это прекрасный способ добиться минимализма без отвлекающих факторов. Сегодня создадим такое меню самостоятельно.
Чтобы создать меню навигации, давайте сначала ознакомимся с настройками:
Для начала необходимо загрузить Normalize.css и настроить стили браузера по умолчанию, убедиться, что меню выглядит одинаково во всех браузерах. Для отображения стрелки перед элементами меню с подпунктами будем использовать FontAwesome. Для переключения классов в меню загружаем jQuery и перемещаем весь пользовательский jQuery код в script.js. Последняя ссылка является основной таблицей для веб-проекта.
Иконка-гамбургер
Иконка-гамбургер является общим атрибутом навигации по сайту. Часто она создается при помощи иконочного шрифта, такого как FontAwesome, но в этом уроке мы добавим некоторую анимацию, а потому будем создавать ее с нуля. Наша иконка-гамбургер представляет собой тег span, содержащий три div класса, отображающийся в виде горизонтальных полос.
Стили выглядят следующим образом:
Выпадающее меню навигации
Теперь, когда у вас есть иконка-гамбургер, давайте сделаем ее полезной и создадим выпадающее меню при нажатии на нее. Вот как выглядит разметка меню:
Положение фиксированное, поэтому при прокрутке страницы меню всегда остается в одном положении. Высота 100% позволяет меню занимать все вертикальное пространство на странице. Обратите внимание, что в поле margin-left установлено отрицательное число, равное ширине меню. Это значит, что меню будет исчезать из окна просмотра. Чтобы сделать его снова видимым, мы создаем другой класс toggler с jQuery. Наш файл JavaScript будет выглядеть так:
Подменю и ссылки
span имеет ::after pseudo-element и содержит стрелку FontAwesome. По умолчанию подменю скрыто и будет видно только при нажатии на стрелку. Вот как мы это можем сделать с jQuery:
Элементы меню в примере имеют hover-эффект. Он создается с использованием ::after pseudo-element. Код выглядит так:
::after pseudo-element содержит элемент block level внизу каждой ссылки с полной шириной и высотой 0.15em. Выглядит все это как подчеркивание. Особенность заключается в том, что мы не просто применяем цвет фона к линии, мы используем функцию linear-gradient() на фоновом изображении. Хотя эта функция предназначена для создания цветовых градиентов, мы можем менять цвет, указав нужные проценты.
Вместо прозрачной части вы можете использовать любой другой цвет. Вы также можете поэкспериментировать с градиентами.
Каждый из рассмотренных нами элементов работает как единое целое. Вы можете создать такое меню, используя любой дизайн сайта из коллекции TemplateMonster. Как видите, сделать это проще, чем можно себе представить. Удачи в создании профессиональных и удобных для пользователей сайтов!