Главная | Регистрация | Вход Приветствую Вас Гость | RSS
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » Все для Ucoz » Скрипты » Анимированное меню (Скрипт)
Анимированное меню
cska7777777Дата: Пятница, 01.01.2010, 01:39 | Сообщение # 1
Генералиссимус
Группа: Администраторы
Сообщений: 474
Статус: Offline

Шаг 1.

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

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

   <script type="text/javascript">  

   $(document).ready(function() {  

$("#topnav li").prepend("<span></span>"); //Вставляем пустой тег <span> до каждого элемента списка.  

$("#topnav li").each(function() { //Для каждого элемента списка...  

var linkText = $(this).find("a").html(); //Находим текст внутри тега  

$(this).find("span").show().html(linkText); //Добавляем текст в тег <span>  

});   

$("#topnav li").hover(function() { //При наведении мыши  

$(this).find("span").stop().animate({   

marginTop: "-40" //Находим тег <span> и перемещаем его вверх на 40px  

}, 250);  

} , function() { //После того, как курсор убран с элемента...  

$(this).find("span").stop().animate({  

marginTop: "0" //Возвращаем тег <span> к исходному местоположению (0px)  

}, 250);  

});  

});  

</script>

Шаг 2.

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

Для меню без фоновой картинки списку придаем только идентификатор topnav
<ul id="topnav">

<li><a href="ВАША ССЫЛКА">ОПИСАНИЕ</a></li>

<li><a href="ВАША ССЫЛКА">ОПИСАНИЕ</a></li>

<li><a href="ВАША ССЫЛКА">ОПИСАНИЕ</a></li>

<li><a href="ВАША ССЫЛКА">ОПИСАНИЕ</a></li>

<li><a href="ВАША ССЫЛКА">ОПИСАНИЕ</a></li>

<li><a href="ВАША ССЫЛКА">ОПИСАНИЕ</a></li>

</ul>

а варианту с фоновой картинкой присваиваем еще класс, в данном случае v2:

Code
<ul id="topnav" class="v2">  

   <li><a href="ВАША ССЫЛКА">ОПИСАНИЕ</a></li>  

<li><a href="ВАША ССЫЛКА">ОПИСАНИЕ</a></li>  

<li><a href="ВАША ССЫЛКА">ОПИСАНИЕ</a></li>  

<li><a href="ВАША ССЫЛКА">ОПИСАНИЕ</a></li>  

<li><a href="ВАША ССЫЛКА">ОПИСАНИЕ</a></li>  

<li><a href="ВАША ССЫЛКА">ОПИСАНИЕ</a></li>  

</ul>

Шаг 3.

Самая важная часть этого меню - это CSS-стили.

Текстовый вариант без фоновой картинки:

Code
</style>  
ul#topnav {  

margin: 10px 0 20px;   

padding: 0;   

list-style: none;   

font-size: 1.1em;  

clear: both;  

float: left;  

width: 100%;  

}  

ul#topnav li{  

margin: 0;   

padding: 0;   

overflow: hidden;   

float: left;   

height:40px;  

}  

ul#topnav a, ul#topnav span {  

padding: 10px 20px;   

float: left;   

text-decoration: none;   

color: #fff;  

text-transform: uppercase;  

clear: both;  

height: 20px;  

line-height: 20px;  

background: #1d1d1d;   

}  

ul#topnav a { color: #7bc441; }  

ul#topnav span {  

display: none;  

}  
</style>

для варианта с фоновой картинкой допишем еще правила для стиля v2:
Code
<style>  
ul#topnav.v2 span{  

background: url(a_bg.gif) repeat-x left top;  

}  

ul#topnav.v2 a{  

color: #555;  

background: url(a_bg.gif) repeat-x left bottom;  

}  
</style>

Соответственно здесь Вам нужно изменить путь к файлу фоновой картинки, если он лежит не в корне сайта.
Думаю меню вам понравиться , напоминаю при копировании новости указывайте источник!
Скачать
Источник: http://lifeisgame.servegame.org/
 
Форум » Все для Ucoz » Скрипты » Анимированное меню (Скрипт)
  • Страница 1 из 1
  • 1
Поиск:

Copyright MyCorp © 2018
Футбол на Soccer.ru: Новости футбола России и Европы онлайн, Евро кубки и чемпионаты Live Каталог Казахстанских ресурсов TABU SmartTop.info