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');

});



В завершение

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

СКАЧАТЬ

Вес файла
34.22 Kb

Реклама

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

  • acuteaggressiveair_kissangel
    badbbbeachbeee
    biggrinbig_bossblumblush
    boastbombboredombye
    clappingcraycrazycurtsey
    dancedashdeclarediablo
    diroldon-t_mentiondownloaddrinks
    first_moveflirtfocusfool
    friendsgive_heartgive_rosegood
    hangheartheathelp
    hihunterhystericireful
    kingkisslaughlazy
    lolmail1mambaman_in_love
    mdamega_shokmoilmosking
    musicneanegativenew_russian
    okon_the_quietpardonparting
    partypilotpioneerpleasantry
    popcormpranksterprevedpunish
    roflrtfmrussiansad
    sarcasticscarescratchsearch
    secretsensoredshokshout
    slowsmilesmokesoldier
    soldier_girlsorryspitefulspruce_up
    stinkersuicidesunsuperstition
    swoonteasetenderthanks
    thisto_pick_ones_noseto_take_umbragetreaten
    umnikunknwvampirevava
    victorywackowhistlewink
    wizardyahooyesyu
    e101e102e103e104
    e105e106e107e108
    e109e110e111e112
    e113e114e115e116
    e117e118e119e120
    e121e122e123e124
    e125e126e127e128
    e129e130e131e132
    e133e134e135e136
    e137e138e139e140
    e141e142e143e144
    e145e146e147e148
    e149e150e151e152
    e153e154e155e156
    e157e158e159e160
    e161e162e163e164
    e165e166e167e168
    e169e170e171e172
    e173e174e175e176
    e177e178e179e180
    e181e182e183e184
    e185e186e187e188
    e189e190e191e192
    e193e194e195e196
    e197e198e199e200
    e201e202e203e204