01:58
Красивое CSS / jQuery меню для сайта | |
 Данное меню устанавливается в 4 этапа 1. Для начала нужно скачать архив и папку под названием main_menu закинуть в корень вашего сайта 2. Теперь нужно подключить css стили, для этого между <head> и </head> вставляем следующий код:
Code <link rel="stylesheet" href="main_menu/css/style.css" type="text/css" charset="utf-8"/> 3. Далее в нужное вам место ставим код самого меню:
Code <ul id="navigation"> <li class="home"><a href="Адрес ссылки"><span>Home</span></a></li> <li class="about"><a href="Адрес ссылки"><span>About</span></a></li> <li class="search"><a href="Адрес ссылки"><span>Search</span></a></li> <li class="photos"><a href="Адрес ссылки"><span>Photos</span></a></li> <li class="rssfeed"><a href="Адрес ссылки"><span>Rss Feed</span></a></li> <li class="podcasts"><a href="Адрес ссылки"><span>Podcasts</span></a></li> <li class="contact"><a href="Адрес ссылки"><span>Contact</span></a></li> </ul> <li class="home"><a href="Адрес ссылки"><span>Home</span></a></li> 4. Ну и напоследок для получения эффекта анимации вставляем немножко jQuery перед закрывающимся тегом </body> Code <script type="text/javascript" src="main_menu/jquery-1.3.2.js"></script> <script type="text/javascript"> $(function() { var d=300; $('#navigation a').each(function(){ $(this).stop().animate({ 'marginTop':'-80px' },d+=150); }); $('#navigation > li').hover( function () { $('a',$(this)).stop().animate({ 'marginTop':'-2px' },200); }, function () { $('a',$(this)).stop().animate({ 'marginTop':'-80px' },200); } ); }); </script>
Вы сможете скачать через 0 сек.
| |
|
| |
| Всего комментариев: 0 | |
