Поясняющее jQuery меню

Опубликовано: 22 Октябрь 2010Автор ratemir

jQuery менюНа данный момент появляются всё новые и новые возможности для улучшения внешнего вида сайта и добавления некоторых интересных эффектов. В настоящее время многие сайты всё чаще используют технологии jQuery. Только несколько лет назад, если что-то было анимировано, то это сразу присваивалось Flash. Но только не сегодня.

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

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

Из каких элементов всё это состоит?

Во первых, HTML разметка:

<div class="explain">
     <ul class="menu" >
         <li>
              <a href="#">Главная</a>
              <em>Список рубрик, новые статьи и т.д.</em>
         </li>
         <li>
              <a href="#">Карта сайта</a>
              <em>Ссылки на все посты сайта</em>
         </li>
         <li>
              <a href="#">Контакты</a>
              <em>Здесь Вы можете оставить нам сообщение</em>
         </li>
     </ul>
</div>

Как видите ничего сложного и легко интегрируется в различные CMS.

Разметка jQuery меню

Во вторых, стили CSS:

.explain {
    margin: 10px auto;
    width: 570px;
    font: 75%/120% Arial, Helvetica, sans-serif;
}
.menu {
    margin: 100px 0 0;
    padding: 0;
    list-style: none;
}
.menu li {
    padding: 0;
    margin: 0 2px;
    float: left;
    position: relative;
    text-align: center;
}
.menu a {
    padding: 14px 10px;
    display: block;
    color: #fff;
    width: 144px;
    text-decoration: none;
    font-weight: bold;
    background: #1c1259;
}
.menu li em {
    background: yellow;
    width: 180px;
    height: 45px;
    position: absolute;
    top: -85px;
    left: -20px;
    text-align: center;
    padding: 20px 12px 10px;
    font-style: normal;
    z-index: 2;
    display: none;
}

Создайте файл в шаблоне Вашего сайта, например, style-menu.css и пропишите пути к нему между <head>...</head>, следующим образом:

<link rel='stylesheet' href='style-menu.css' type='text/css'/>

Главное указать правильный путь!

Третьим шагом будет добавление нескольких строк кода JavaScript, которые задействуют приложение jQuery и наше меню заработает как надо.

$(document).ready(function(){
    $(".menu a").hover(function() {
        $(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
        }, function() {
        $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
   });
});

Данные строки нужно положить в созданный Вами файл, к примеру, script-menu.js и прописать правильные пути в <head>...</head>.

<script type='text/javascript' src='script-menu.js'></script>

И ,обязательно, подключаем библиотеку jQuery. Загружаем её с серверов гугла или скачиваем последнюю версию в интеренет. Вот примеры первого и второго способов:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>

или

<script type="text/javascript" src="jquery-1.4.3.min.js"></script>

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

Если возникнут вопросы, смело задавайте их в комментариях.

Для сравнения: Создание поясняющего горизонтального меню на основе CSS и HTML

Метки: , Рубрика: Технологии jQuery


Опубликовать в twitter.comПоделиться ВКонтактеПоделиться в FacebookПоделиться В Моем МиреОпубликовать в своем блоге livejournal.com
Если Вам понравилась статья, Вы можете получать новые материалы Ratemir.ru по: RSS или можете просто получать обновления блога на e-mail:

Оставить комментарий

Наверх