Техно-мир

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

       Create a Sliding Navigation using CSS3 and Jquery



    

HTML-структура для нашего меню будет представлять собой ненумерованный список, где родительский элемент меню будет отформатирован тэгом H3. Тэг H3 состоит из span-элемента для иконки меню, обернутого в div-тэг. Родительский элемент меню будет обозначен иконкой со знаком + или – (при включенном/выключенном состоянии), если у данного пункта меню будут иметься подменю. Учтите, что Font Awesome использует тэг icon (i) для отображения иконок. Здесь вы можете ознакомиться с базой данных кодов классов для Font Awesome.

• HOME

• ABOUT US

  • OUR TEAM
  • OUR SERVICES

• PORTFOLIO

  • WEB DESIGN
  • GRAPHIC DESIGN

• CONTACT

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

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

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

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

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

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

});

В завершение

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

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