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

Создаем выпадающее вертикальное меню посредством jQuery



Сегодня мы научимся создавать выпадающее вертикальное меню с помощью CSS3 и платформы jQuery. Красивое навигационное меню поможет вашему сайту выделиться среди других. Именно поэтому, сегодня мы покажем вам, как разработать меню с красивым скользящим выпадением при наведении курсора мыши. Давайте начнем!

Создаем выпадающее вертикальное меню посредством jQuery

* Демо
* Скачать
Внимание! У вас нет прав для просмотра скрытого текста.


Файлы, которые нам потребуются

Платформа jQueryскачать
Плагин jQueryскачать

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

Этап 1: HTML

Создадим li-элементы для навигационного меню с описанием в тэге абзаца. Для пояснения, ознакомьтесь с кодом ниже.

<div id="vnav">
     <ul>
         <li><h1>Home</h1><p>Home page</p></li>
         <li><h1>About Us</h1><p>Know About our company</p></li>
         <li><h1>Portfolio</h1><p>Check our Portfolio</p></li>
         <li><h1>Contact Us</h1><p>Have a question?</p></li>
     </ul>
</div>

Этап 2: стили CSS

Здесь мы применим несколько параметров CSS3, чтобы получить крутой эффект UI (box-shadow и text-shadow).

Box-Shadow – Box shadow придаст эффект выпадения всему блоку (в данном случае li).

Box shadow требуется 3 параметра длины и атрибут цвета (смещение по горизонтали, вертикали, радиус размытия и цвет).

У Text-Shadow такие же параметры (смещение по горизонтали, вертикали, радиус размытия и цвет).

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

Примечание: Сделайте так, чтобы li покрывал весь абзац текста, и далее мы воспользуемся jQuery, чтобы отобразить текст.

li {
    height:20px;
    width:200px;
    overflow:hidden;  /* Important */
        color: #fff;
        text-decoration: none;
        font-weight: bold;
        line-height: 1;
                              /* Rounded Corners */
       -moz-border-radius: 5px;
       -webkit-border-radius: 5px;
                              /* Box Shadow */
       -moz-box-shadow: 0 1px 3px #999;
       -webkit-box-shadow: 0 1px 3px #999;
                              /* Text Shadow */
       text-shadow: 0 -1px 1px #222;
       border-bottom: 1px solid #222;
       padding: 7px 10px 6px;
       margin-top:5px;
       background-color:#a447cf;
}
li p {
    margin-top:10px;
    font-size:12px;
    color:#6CF;
}

Этап 3: добавляем jQuery и Easing Plugin

Теперь у нас есть jQuery и Easing Plugin, и теперь пришло время их подружить с нашим файлом HTML. А также с пустым файлом custom.js, в который мы позже добавим код.

<script src="jquery.min.js" type="text/javascript"></script>
<script src="custom.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>

Этап 4: jQuery

Здесь мы будем использовать параметры jQuery - mouseover и mouseout для того, чтобы получить финальный результат. Используя функцию анимации, мы изменим высоту элемента li так, чтобы возможно было отобразить абзац с текстом. А параметр mouseout изменить высоту так, чтобы все стало обратно в исходный вид.

$(document).ready(function(){
    //When Mouse rolls over li
    $("li").mouseover(function(){
        $(this).stop().animate({height:'60px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });
    //When Mouse cursor removed from li
    $("li").mouseout(function(){
        $(this).stop().animate({height:'20px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });
});
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, CSS
Опубликовал Mysterious Master   Прочитано (раз): 16840   |   Оставлено комментариев: 4
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 4 июля 2010 @ 20:48
Написал: player — группа: Читатели  
На сайте с: 16.04.2010   |   Публикаций: 0   |   Комментариев: 35
ICQ: --- не указано ---
Спасибо за статью.
Сделал все как написано.
Получилось, что заголовки в меню скрылись, т.е получились пусые четыре фиолетовых прямоугольника. При наведении мышки открываются только пункты Home, About us, Portfolio, Contact us.
Начал рыться в CSS скачаного исходника. Ответ был найден быстро-не хватало в моем SCC файле:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
И ещё, почему-то Opera 10.60(по ходу самая новая) и IE не хотят скруглять углы у менюшки. С мазилой и гуглом все ок.
SCC 3 конечно открывает много различных возможностей, но, я так понимаю, старые браузеры этих эффектов не воспринимают, да и опера последняя не хочет почему-то воспринимать.
Комментарий #2: 4 июля 2010 @ 21:32
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Будет работать только з Гугл Хромом, ФайерФоксом и с Сафари. Остальным пока не дано smile в особенности Эксплореру. Не понятно, будет ли ему это дано в будущем, исходя из политики Майкрософта.
Комментарий #3: 4 июля 2010 @ 22:21
Написал: player — группа: Читатели  
На сайте с: 16.04.2010   |   Публикаций: 0   |   Комментариев: 35
ICQ: --- не указано ---
Да, это не есть хорошо. По опыту работы, для заказчиков не первом месте среди браузеров стоит IE, потом только остальные-может только мне такие долбанутые попадаются lol .
Комментарий #4: 7 июня 2011 @ 01:39
Написал: Олег — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Неправда, У меня работает в IE
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

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

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


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930