[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Модератор форума: FeRz1k  
Форум » Вэбмастерам » Скрипты для uCoz » Анимированное выпадающее меню на jQuery (Модуль: разное)
Анимированное выпадающее меню на jQuery
Goodik39Дата: Вторник, 18.08.2009, 01:35 | Сообщение # 1
Ph0en1x aka Good'1k
Постов на форуме: 1449
Репутация:
[ 218 ]
Подарки:
[ 81 ]
Не в сети
Здравствуйте. В этом уроке Вы узнаете как быстро и просто с помощью jQuery сделать аниммированное выпадающее меню. Появляться оно будет по нажатию на кнопку. В данном случае это - "Навигация". Также хотелось бы сказать, что при наведении на каждый пункт этого меню будет происходить интересный эффект. Ниже вы можете просмотреть демонстрацию получившегося меню и скачать исходные файлы урока:

Вот пример скрипта: http://ruseller.com/lessons/les274/example/index.html

Шаг 1. HTML-каркас меню.

Ну, в общем-то, как и всегда, начнем с создания каркаса нашего меню. Выглядеть оно очень просто, примерно так, как построил его я ниже:

HTML:

Code
<div class="container">  
<img src="navigate.png" width="184" height="32" class="menu_head" />  
<ul class="menu_body">  
<li><a href="ссылка">Главная</a></li>  
<li><a href="ссылка">Блог</a></li>  
<li><a href="ссылка">Форум поддержки</a></li>  
<li><a href="ссылка">О нас/Контакты</a></li>  
</ul>  
</div>

Шаг 2. Дизайн меню

Следующим шагом работы нашего выпадающего меню будет его стилизация. Стилей будет не очень-то и много. Ниже я привожу примерный css-код, который я использовал для дизайна меню:

CSS:

Code
<style type="text/css">   
body{background:#534741;font-family:Arial, Helvetica, sans-serif; font-size:12px;  
}  
ul, li{margin:0; padding:0; list-style:none;  
}  
.menu_head{border:1px solid #998675;  
}  
.menu_body {display:none; width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;  
}  
.menu_body li{background:#493e3b;  
}  
.menu_body li.alt{background:#362f2d;  
}  
.menu_body li a{color:#FFFFFF; text-decoration:none; padding:10px; display:block;  
}  
.menu_body li a:hover{padding:15px 10px; font-weight:bold;  
}    
</style>

Шаг 3. "Прикрутка" основного фреймворка jQuery

Конечно же, как и в любом уроке по jQuery, мы не обойдемся без основного фреймворка. Этот файл я выложил также в исходниках. "Прикручивать" его к нашему документу с выпадающим меню будем следующим образом, между тегами и :

Code
<script src="jquery.js" type="text/javascript"></script>

Шаг 4. jQuery - доработки.

Теперь мы будем делать специальный эффект для нашего меню, чтобы при наведении на каждый пункт, его текст сдвигался немного в сторону и увеличивался. Этот эффект можно получить скопировав нижеприведенный jQuery-код и прописав его между тегами и :

Code
<script type="text/javascript">  
$(document).ready(function () {   
$("ul.menu_body li:even").addClass("alt");    $('img.menu_head').click(function () {   
$('ul.menu_body').slideToggle('medium');    });   
$('ul.menu_body li a').mouseover(function () {   
$(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );    });   
$('ul.menu_body li a').mouseout(function () {   
$(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );    });});  
</script>


Команда - это капитан и игроки сплоченные вместе и чем больше вы будете помогать друг другу не только в игре но и в реальной жизни, тем приятнее и выше будет подъем к вершинам киберспортивного олимпа.
 
W1nBorisДата: Среда, 24.03.2010, 17:37 | Сообщение # 2
Звание: Ефрейтор
Постов на форуме: 90
Репутация:
[ 0 ]
Подарки:
[ 0 ]
Не в сети
Если честно, то не очень
 
Форум » Вэбмастерам » Скрипты для uCoz » Анимированное выпадающее меню на jQuery (Модуль: разное)
  • Страница 1 из 1
  • 1
Поиск:
Статистика сайта
Последние новости Самые отвечаемые темы Последние статьи
EA раскрыла подробно... 18.04.2013
Bethesda прекращает ... 18.04.2013
Создатели World of T... 18.04.2013
Battlefield 4 не буд... 18.04.2013
Авторы Silent Hill: ... 18.04.2013
Курилка! 103
Общая тема для обсуждений 67
Изготовление аваторов 50
Новости сервера 37
Команда сайта 35
История Starcraft: Н... 10.02.2013
Почему в Valve решил... 20.08.2012
Танки рвутся в кибер... 15.08.2012
Лучшие финалы в исто... 17.06.2012
Киберспорт - спорт? ... 14.04.2012
Новые пользователи Активные пользователи Лучшие комментаторы
lamagames 12.07.2023
PiterRScaks 03.04.2022
guterNAvis 08.12.2021
cuperNAvis 20.11.2021
gIRONAvis 29.09.2021
Goodik39 1449
FeRz1k 319
WedMacK 200
warcraf 200
Rolex 156
Goodik39 56
FeRz1k 56
koJIxo3Huk 19
Die 13
scool 9