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:

<!DOCTYPE html>
	<html lang="en">
	    <head>
	       <title>Создание выпадающего меню навигации с помощью CSS3 и Jquery</title>
	        <link rel="stylesheet" href="css/style.css"/>
	        <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
	       <script type="text/javascript" src="js/jquery.js"></script>
	    </head>

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

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

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

<ul id="toggle">
	    <li>
	        <div class="active"> <span class="menu-icons home"><iclass="menu-icons fa fa-home"></i>  </span>
	             <h3>Главная</h3>
	        </div>
	    </li>
	 
	    <li>
	        <div><span class="menu-icons about"> <i class="fa fa-user"></i> </span>
	            <h3>О нас</h3>
	                <span class="the-btn"><i class="fa fa-plus"></i></span>
	                    <div class="clear"></div>
	        </div>
	            <ul>
	                <li><a href="#">Наша команда</a></li>
	                <li><a href="#">Наши услуги</a></li>
	            </ul>
	    </li>
	 
	    <li>
	        <div><span class="menu-icons portfolio"><i class="fa fa-briefcase"></i> </span>
	             <h3>Портфолио</h3>
	                <span class="the-btn"><i class="fa fa-plus"></i></span>
	        </div>
	            <ul>
	                <li><a href="#">Веб-дизайн</a>
	                </li>
	                <li><a href="#">Графический дизайн</a>
	                </li>
	            </ul>
	    </li>
	 
	    <li>
	        <div> <span class="menu-icons contact"><i class="fa fa-envelope"></i> </span>
	             <h3>Контакты</h3>
	        </div>
	    </li>
	</ul>

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

код в веб-браузере

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 {
	    clear: both;
	    display: block;
	    overflow: hidden;
	    visibility: hidden;
	}

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

код в веб-браузере

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

span.menu-icons {
	    font-size: 26px;
	    height: 20px;
	    width: 22px;
	    float: left;
	    margin: 6px 12px 10px 12px;
	    color: #fff;
	}
	span.the-btn {
	    float: right;
	    font-size: 26px;
	    height: 30px;
	    width: 43px;
	    margin-top: -34px;
	    margin-right: -10px;
	    padding:0;
	    color: #fff;
	}

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

в браузере

Наконец, нам нужно определить стили для подменю, но по умолчанию подменю будут скрыты, позже мы зададим для них анимацию с помощью 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 {
	    color: #f58220;
	}

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

В браузере 2

Эффект 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. Вы можете поиграть со стилями и настроить их по своему вкусу.

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

Перевод статьи «Create a Sliding Navigation Menu in CSS3 and jQuery 4 Easy Steps» был подготовлен дружной командой проекта Сайтостроение от А до Я.