Создание выпадающего меню навигации с помощью CSS3 и Jquery

Выпадающее меню html jquery

Частная коллекция качественных материалов для тех, кто делает сайты

• Creativo.one2000+ уроков по фотошопу
• Фото-монстр300+ уроков для фотографов
• Видео-смайл200+ уроков по видеообработке
• Жизнь в стиле «Кайдзен» Техники и приемы для гармоничной и сбалансированной жизни

Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».

Бесплатные уроки CSS для начинающих

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

• 

Забавные эффекты для букв

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Источник

Выпадающее меню на jQuery

Для того, чтобы самому написать навигацию в виде вертикального выпадающего меню на jQuery с выпадающим списком подкатегорий, необходимо понять сам принцип работы этого механизма. Но для начала разберем структуру навигации:

Но как, спросите вы? Да все на самом деле очень просто. Для начала давайте разберемся с таблицей стилей нашего списка навигации, выглядеть она будет следующим образом:

 body < background: rgb(244, 244, 244);font-family: Verdana;font-weight: 100; >/*---Навигация---*/ #menu < width: 200px; margin: 0; padding: 2px; >#menu li < list-style-type: none; >.menu < position: relative; background: chocolate; background: -moz-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); background: -webkit-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); background: -o-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); border: 1px solid #2AC4B3; >.menu:hover < background: #00c; background: -moz-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); background: -webkit-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); background: -o-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); >.menu span < width: 11px; height: 11px; display: block; position: absolute; top: 8px; right: 10px; cursor: pointer; >.menu ul < width: 150px; margin: 0; padding: 1px; position: absolute; top: -1px; left: 198px; >.menu ul li < background: chocolate; background: -moz-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); background: -webkit-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); background: -o-linear-gradient(top, rgb(198, 255, 242), #2AC4B3); border: 1px solid #fff; >.menu ul li:hover < background: #00c; background: -moz-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); background: -webkit-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); background: -o-linear-gradient(top, rgb(230, 230, 230), #0CBFAB); >.menu a < padding: 5px; display: block; text-decoration: none; color: white; >.menu a:hover < color: white; >/*---END---*/

Из таблицы стилей видно, что изначально выпадающий список не скрыт, но этот момент мы и будем исправлять при помощи jQuery:

$(document).ready(function()< $('.menu ul').hide(); $('.menu span').css('background', 'url("down.png")'); $('#menu li').hover(function()< $(this).children("ul").show(); /*Эквивалент $('ul', this).show();*/ $(this).find("span").css('background', 'url("right.png")'); /*Эквивалент $('span', this).css('background', 'url("right.png")');*/ >,function() < $(this).children("ul").hide(); /*Эквивалент $('ul', this).hide();*/ $(this).find("span").css('background', 'url("down.png")'); /*$('span', this).css('background', 'url("down.png")');*/ >) >)

Теперь подробно разберем jQuery код выпадающего меню, т.к. возможно кому-то он будет не совсем понятен. В самом начале прописана следующая конструкция:

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

Что означает эта запись? Конструкция «$()» позволяет произвести выборку элементов. Следовательно в самом начале нам необходимо скрыть наш выпадающий список. Мы берем конструкцию «$()» и пишем в ней интересующий нас объект. В нашем случае этим объектом будет маркированный список с классом «menu». Далее прописываем метод «hide()», позволяющий скрыть интересующий нас объект.

Далее идет следующая конструкция:

$('.menu span').css('background', 'url("down.png")');

Что она делает? Она ищет тег родительскому элементу которого присвоен класс «menu» и, при помощи метода «css(‘background’, ‘url(«down.png»)’)”, происходит присваивание свойству стиля «background» значения «url(«down.png»)». «down.png» – это иконка, показывающая, что список может раскрываться.

Затем идет конструкция, которая и будет раскрывать наш список, выглядит она следующим образом:

$('#menu li').hover(function()< $(this).children("ul").show(); $(this).find("span").css('background', 'url("right.png")'); >,function()

Мы ищем тег родительскому элементу которого присвоен hover” и в скобках две функции. Первая функция будет выполняться при наведении курсора мыши, а вторая выполниться, если курсор мыши покинет интересующий нас элемент.

В первой функции прописано:

$(this).children("ul").show(); $(this).find("span").css('background', 'url("right.png")');

После этого у тега мы ищем потомков, а именно: тег и у него меняем фон на другую иконку.

После этого прописана функция, которая делает все, как было изначально, после того, как курсор мыши покинет элемент списка:

Чтобы написанный код на jQuery заработал и наше выпадающее меню работало корректно, необходимо скачать с сайта jquery.com библиотеку и подключить её, прописав после открывающего тега строку .

Ну вот и все! В заключении хочу отметить, что если ваш сайт довольно увесист, то возможно, скрипт будет запускаться слишком поздно (сайт будет долго грузиться) и пользователи будут видеть, как навигация сначала раскрывается полностью, а только потом скрывается, что, согласитесь, очень некрасиво. Следовательно, необходимо вынести все jQuery команды за эту конструкцию: «$(document).ready(function()<>)». Выглядеть это будет следующим образом:

$(document).ready(function()< >) $('.menu ul').hide(); $('.menu span').css('background', 'url("down.png")'); $('#menu li').hover(function()< $(this).children("ul").show(); $(this).find(«span»).css('background', 'url("right.png")'); >,function() < $(this).children("ul").hide(); $(this).find(«span»).css('background', 'url("down.png")'); >)

Источник

4 простых шага создания выпадающего меню навигации с помощью CSS3 и jQuery

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

В этой статье я покажу, как создать выпадающее меню навигации с помощью CSS3 и некоторых элементов JQuery , управляющих анимацией слайдеров.

Окончательный внешний вид

Использование Font Awesome (веб-иконок)

Вместо того чтобы использовать для нашего выпадающего меню обычные .png иконки, мы применим Font Awesome .

Преимущества использования веб-шрифтов или веб-иконок заключаются в следующем:

• Существование различных иконок на выбор;
• Вы можете сэкономить деньги. Вам не нужно платить за иконки;
• Вы можете сэкономить время. Вы можете использовать CSS, чтобы легко включить их в свой проект;
• Быстрая загрузка — веб-шрифты / иконки автоматически обновляются, чтобы соответствовать новым версиям веб-браузеров;
• Веб-шрифты / иконки SEO дружелюбны.

Существует два способа использования Font Awesome . Первый — использование в HTML-разметке ссылки BootstrapCDN , второй — загрузить файлы Font Awesome с сайта Font Awesome , а затем использовать в HTML-разметке ссылку Default CSS .

Чтобы узнать больше об этом, вы можете ознакомиться со страницей «С чего начать» Font Awesome .

В этой статье для доступа к веб-шрифтам / иконкам Font Awesome я буду использовать ссылку BootstrapCDN .

Разметка

В HTML-файл мы сперва добавим тип документа HTML5 и ряд ссылок раздела заголовка. В том числе ссылку на файл CSS , ссылку BootstrapCDN и ссылку на файл нашей библиотеки JQuery :

HTML-структура меню будет представлять собой неупорядоченный список, где элемент родительского меню форматируется в тег H3. Тег H3 состоит из блока span иконки меню, заключенного в тег div .

Если элемент родительского меню имеет элементы подменю, он будет содержать иконку плюс (+) или минус (-) (в зависимости от того, выбран он или нет), которая добавляется с помощью веб-шрифтов / иконок Font Awesome .

Обратите внимание, Font Awesome , чтобы показать иконки, использует тег иконок (i). С базой данных кодов классов и иконками Font Awesome вы можете ознакомиться здесь :

Таким образом, если вы сейчас откроете этот код в веб-браузере, вы увидите то же, что изображено на рисунке ниже:

CSS

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

В этой части мы задаем стили родительского меню, определяя для них размеры и цвета фона, в зависимости от текущего состояния (выбран / не выбран), а также стили тега Н3, который используется для названий родительских элементов:

body < width: 100%; background: #fff; >#toggle < width: 240px; list-style: none; margin: 170px auto; >#toggle div:hover < background: #f3b784; >#toggle div.active < background: #f3b784; >#toggle div < background-color: #f58220; cursor: pointer; display: block; margin: 1px; >#toggle h3 < font-size: 14px; margin: 0; padding: 0; font-family: Tahoma; color: #fff; line-height: 41px; font-weight: normal; text-shadow: 1px 1px 0px #adadad; filter: dropshadow(color=#adadad, offx=1, offy=1); >.clear

Если вы сейчас просмотрите код в веб-браузере, то увидите следующее:

Далее мы поместим слева иконки меню, а справа иконки плюс / минус:

Теперь в браузере вы должны увидеть то же, что показано на рисунке ниже:

Наконец, нам нужно определить стили для подменю, но по умолчанию подменю будут скрыты, позже мы зададим для них анимацию с помощью JQuery :

#toggle ul < list-style: none; display: none; background-color:#f3b784; color: fff; >#toggle ul li < line-height: 41px; color: #fff; list-style: circle; width: 240px; padding: 0; margin: 0; >#toggle a < text-decoration: none; color: #fff; font-family: Tahoma; font-size: 14px; text-shadow: 1px 1px 0px #adadad; filter: dropshadow(color=#adadad, offx=1, offy=1); >#toggle a:hover

В браузере вы теперь должны видеть следующее:

Эффект JQuery

Когда все блоки элементов отображаются соответствующим образом, нам нужно создать эффект JavaScript .

В моем коде JQuery я создал специальную переменную, которая принимает значение ссылки текущей иконки меню с помощью кода:

$currIcon=$(this).find(“span.the-btn > i”).

После этого я могу изменять все иконки обратно к свернутому состоянию (иконки плюсов). Далее, используя toggleClass , я переключаю иконки плюс / минус в ранее сохраненном элементе $currIcon :

$("#toggle > li > div").click(function () < if (false == $(this).next().is(':visible')) < $('#toggle ul').slideUp(); >var $currIcon=$(this).find("span.the-btn > i") $("span.the-btn > i").not($currIcon).addClass('fa-plus').removeClass('fa-minus'); $currIcon.toggleClass('fa-minus fa-plus'); $(this).next().slideToggle(); $("#toggle > li > div").removeClass("active"); $(this).addClass('active'); >);

Заключение

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

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

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

Источник