Основное меню

jQuery. Меню с эффектом затухания

Создайте HTML-документ и между тегами <>body</body> вставьте вот эту структуру ссылок:

<ul class="pageList">
<li><a href="" title="Главная">Главная</a></li>
<li><a href="" title="Музыка">Музыка</a></li>
<li><a href="" title="Книги">Книги</a></li>
<li><a href="" title="Игры">Игры</a></li>
<li><a href="" title="Программы">Программы</a></li>
 </ul>

Теперь предадим немного цвета нашему меню за счет подключения стилей, создайте файл style.css и вставьте туда вот эти стили:

body {
background:#ffffff;
}
.pageList {
list-style:none;
font:100% Arial, sans-serif;
 /* обнуляем отступы */
margin:0;
padding:0;
}
.pageList li {
line-height:20px;
width:200px;
margin-left:5px;
margin-top:5px;

}
.pageList a {
display:block;
font-size:13px;
font-weight:bold;
text-transform:uppercase;
color:#FFF;
padding:5px 10px;
background:#E58C00;
/* Закругляем углы ссылок */
-moz-border-radius:10px;
-khtml-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
.pageList a:hover {
text-decoration:none;
}

Не забудьте подключить файл стилей к HTML-документу, прописав между тегами <head></head> этот код:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

Следующий шаг - это добавление эффекта прозрачного перехода, подключаем библиотеки jQuery:

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

После подключения библиотек зададим необходимые параметры для изменения прозрачности элементов меню, при наведении на них курсора:

<script type="text/javascript">
$(document).ready(function(){
$('.pageList a').animate({'opacity':.3}); // opacity - значение начальной прозрачности
$('.pageList a').hover(
function(){
$(this).stop().animate({'opacity':1}) // opacity - значение прозрачности при наведении курсора
},
function(){
$(this).stop().animate({'opacity':.3}) // opacity - значение прозрачности при отведении курсора
}
);
});
</script>

Создание меню с эффектом затухания закончено, исходные файлы можно скачать ниже.

Скачать файл
размер файла: 55,59 Kb
cкачиваний: 92

Раздел: Статьи для веб-мастера




Дополнительно Популярное
Дизайнерский веб-ресурс: Дле, Вордпресс, Джумла, фотошоп, плагины, иконки, шаблоны, текстуры, смайлики, логотипы.