17.06.14, 18:40
0 комментарий
  Уроки

Разработка скользящего меню навигации на 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');

});



В завершение

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

Напишите своё мнение