—»     —»   Разработка скользящего меню навигации на CSS3 и jQuery в 4 простых этапа
  Раздел: Меню и Навигация   Нет комментариев  

Разработка скользящего меню навигации на CSS3 и jQuery в 4 простых этапа



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

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

Давайте приступим.

Финальный результат


Применение Font Awesome (веб-иконки)

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

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

Существует 2 способа использования Font Awesome для нашего дизайн-проекта. Первый заключается в том, чтобы воспользоваться ссылкой BootstrapCDN в HTML-разметке, а второй подразумевает скачивание Font Awesome с официального сайта и последующее указание ссылки на CSS-документ в вашей HTML-разметке. Чтобы узнать об этом подробнее, предлагаем вам ознакомиться с официальной документацией Font Awesome.

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

Разметка

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

<!DOCTYPE html>
<html lang="en">
<head>
<title>Create a Sliding Navigation using CSS3 and 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 использует тэг icon (i) для отображения иконок. Здесь вы можете ознакомиться с базой данных кодов классов для Font Awesome.

      <ul id="toggle">
<li>
<div class="active"> <span class="menu-icons home"><i class="menu-icons fa fa-home"></i> </span>
<h3>HOME</h3>
</div>
</li>

<li>
<div><span class="menu-icons about"> <i class="fa fa-user"></i> </span>
<h3>ABOUT US</h3>
<span class="the-btn"><i class="fa fa-plus"></i></span>
<div class="clear"></div>
</div>
<ul>
<li><a href="#">OUR TEAM</a></li>
<li><a href="#">OUR SERVICES</a></li>
</ul>
</li>

<li>
<div><span class="menu-icons portfolio"><i class="fa fa-briefcase"></i> </span>
<h3>PORTFOLIO</h3>
<span class="the-btn"><i class="fa fa-plus"></i></span>
</div>
<ul>
<li><a href="#">WEB DESIGN</a>
</li>
<li><a href="#">GRAPHIC DESIGN</a>
</li>
</ul>
</li>

<li>
<div> <span class="menu-icons contact"><i class="fa fa-envelope"></i> </span>
<h3>CONTACT</h3>
</div>
</li>
</ul>

Итак, на данном этапе, если вы захотите проверить работу меню в браузере, то получите примерно то же самое, что представлено на картинке ниже.

Разработка скользящего меню навигации на CSS3 и jQuery в 4 простых этапа

CSS-код

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

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

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;
}

Итак, если вы сейчас захотите проверить работу меню в браузере, то получите нечто следующее.

Разработка скользящего меню навигации на CSS3 и jQuery в 4 простых этапа

Далее мы поместим иконки меню в левую часть, а иконку со знаком плюса – в правую.

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;
}

Теперь у вас должно получиться нечто следующее:

Разработка скользящего меню навигации на CSS3 и jQuery в 4 простых этапа

Наконец, нам нужно оформить подменю, но, по умолчанию, мы скрываем их и затем анимируем при помощи 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;
}

Вы получите то же, что видно на изображении ниже:

Разработка скользящего меню навигации на CSS3 и jQuery в 4 простых этапа

Эффект скольжения на 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');

});


В завершение

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

Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, jQuery
Опубликовал Design FactoRy   Прочитано (раз): 3633   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код




















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Январь 2017    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
3031