—»     —»   Стильное меню навигации на jQuery
  Раздел: Меню и Навигация   Нет комментариев  

Стильное меню навигации на jQuery

Стильное меню навигации на jQuery

Введение

Как вы уже, наверное, знаете, первых 20 секунд на сайте, вполне достаточно, чтобы посетитель смог определить – интересен ли ему сайт, или же он больше никогда сюда не придет. Это означает, что вам следовало бы руководствоваться всеми пройденными тропинками в создании интерфейса сайта, и разместить на странице все именно там, где это ожидает увидеть посетитель. Ключевым моментом можно посчитать процесс расстановки и разработки навигационного меню.

В данной статье мы расскажем вам о том, как создать стильное навигационное меню на CSS+XHTML с применением библиотеки jQuery.

Так что, скачайте файлы, предложенные ниже, и продолжите читать…

Этап 1 – XHTML

XHTML код очень простой, к тому же, он дружит с поисковыми системами.

index.html
<div id="menu-container">
<ul id="navigationMenu">
<li><a href="#" class="normalMenu">Home</a></li>
<li><a href="#" class="normalMenu">Services</a></li>
<li><a href="#" class="selectedMenu">Our clients</a></li>
<li><a href="#" class="normalMenu">The team</a></li>
<li><a href="#" class="normalMenu">About us</a></li>
<li><a href="#" class="normalMenu">Contact us</a></li>
</ul>
</div>

В общем—то, само меню навигации представляет собой один неупорядоченный список. Вы сможете добавлять новые пункты в меню посредством простого внесения нового пункта LI, указывая в них нужный текст ссылки и её адрес.

Здесь важно отметить то, что вы можете пометить пункт меню выбранным по умолчанию (активным) – просто определите его классом selectedMenu (5 строка). Например, в данном случае мы подсвечиваем страницу «Наши клиенты». Вы можете установить его для статического сайта вручную, или же использовать PHP для того, чтобы установка происходила динамически.

Стильное меню навигации на jQuery

Само меню мы объяснили

Этап 2 – jQuery

Как вы можете видеть на изображении, предоставленном выше, мы собираемся клонировать ссылки, указанные в нашем коде XHTML (темные) и присваивать им класс CSS hoverMenu, что будет размещать их над стандартным пунктом.

У данного метода достаточно плюсов – код XHTML остается более чистым, потому что вам не придется вручную добавлять ссылки на страницу. К тому же, это гарантирует то, что навигация будет работать правильно, независимо от поддержки javascript на компьютере посетителя – что хорошо как для удобства, так и для СЕО.

Теперь давайте рассмотрим, что же происходит в нашем script.js.

script.js
$(document).ready(function(){
// executed after the page has finished loading

    $('#navigationMenu li .normalMenu').each(function(){    // for each menu item

        // create a duplicate hyperlink and position it above the current one
        $(this).before($(this).clone().removeClass().addClass('hoverMenu'));

    });

    $('#navigationMenu li').hover(function(){   // using the hover method..

        // we assign an action on mouse over
        $(this).find('.hoverMenu').stop().animate({marginTop:'0px'},200);
        // the animate method provides countless possibilities

    },

    function(){
        // and an action on mouse out
        $(this).find('.hoverMenu').stop().animate({marginTop:'-25px'},200);

    });

});

Отлично, только что же это такое мы только что сделали? Для начала мы использовали метод $(’document’).ready дабы удостовериться в том, что код выполняется только после того, как страница полностью загружена.

Затем мы прошлись по всем ссылкам, клонировали их, присвоив им новый CSS—класс – hoverMenu.

Затем мы применили метод hover() для того, чтобы можно было намного легче обрабатывать события mouseover и mouseout.

Далее мы применили метод анимации (на самом деле мощная утилита из арсенала jQuery). Таким образом, мы снабдили его значением marginTop, а также значением длительности эффекта. jQuery будет управлять анимацией.

Обратите внимание на применения функции stop() – она останавливает всю активную анимацию, тем самым предотвращая наложение элементов друг на друга.

Этап 3 – CSS

Давайте посмотрим на наши каскадные таблицы стилей.

demo.css
/* Page styles */

body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{   /* resetting some elements for better browser compatibility */
    margin:0px;
    padding:0px;
}

body{   /* styling the body */
    margin-top:20px;
    font-family:Arial, Helvetica, sans-serif;
    color:#51555C;
    height:100%;
    font-size:12px;
}

/* Navigation menu styles */

ul{ /* the unordered list */
    height:25px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}

ul li{
    border:1px solid #444444;
    display:inline-block;   /* changing the display property */
    float:left; /* floating the list items to the left */
    height:25px;
    list-style-type:none;   /* disabling the list icon */
    overflow:hidden;    /* hiding the overflowing content */
}

ul li a, ul li a:hover,
ul li a:visited{
    text-decoration:none;   /* removing the underline text-decoration */
}

/* styling the links */
.normalMenu, .normalMenu:visited,
.hoverMenu, .hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {/* these properties are shared between the classes */
    outline:none;
    padding:5px 10px;
    display:block;
}

/* styles that are assigned individually */

.hoverMenu,.hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {
    margin-top:-25px;
    background:url(img/grey_bg.gif) repeat-x #eeeeee;
    color:#444444;
}

.selectedMenu,.selectedMenu:visited {
    margin:0;
}

.normalMenu, .normalMenu:visited{
    color:white;
    background:url(img/dark_bg.gif) repeat-x #444444;
}

Как видим, у нас имеется три основных класса, которые определяют вид нашего навигационного меню. normalMenu – обычное состояние меню, hoverMenu – подсвеченная ссылка, которая отображается при наведении курсора, selectedMenu – активное положение пункта меню.

Этим и завершается наше стильное меню навигации.

Заключение

В данной статье было рассказано и показано то, как можно реализовать стильное навигационное меню. Теперь вы с легкостью можете применять данные способы реализации меню на вашем собственном сайте!

Скачать рабочий пример и исходный код:
demo.zip [2,37 Kb] (cкачиваний: 632)
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

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

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

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


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Май 2020    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031