Мар
7
2011

Красивое меню на jQuery

В этой статье я рассскажу как сделать Главное Меню на вашем сайте более привлекательнее. Для этого нам нужна библиотека jQuery и немного фантазии =).
Итак, начнем я уже сделал это здесь. И я возьму исходный код сайта для этого урока.
Сначала подключаем библиотеку jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Далее смотрим исходный код сайта и находим там меню:

1
2
3
4
5
6
7
8
<h3>Главное Меню</h3> 
<ul class="menu">
<li id="current" class="active item1"><a href="http://mksite.com.ua/"><span>Главная</span></a></li>
<li class="item58"><a href="http://blog.mksite.com.ua"><span>Блог</span></a></li>
<li class="item62"><a href="/ru/how-take-domain"><span>Регистрация домена</span></a></li>
<li class="item71"><a href="/ru/regdomain"><span>Цены на домены</span></a></li>
<li class="item72"><a href="/ru/hosting"><span>Цены на хостинг</span></a></li>
</ul>

Смотрим что ul у нас класа «menu» и тогда пишем код, лучше подключить его отдельным файлом .js чтоб не было много кода на странице. Создаем файл «.js» — у меня он называется slide.js
Подключаем к странице:

<script src="путь к файлу/slide.js" type="text/javascript"></script>

И в нем пишем:

1
2
3
4
5
6
7
8
9
$(document).ready(function() {
//  Действие при наведении курсора
   $('.menu a').hover(function() {
        $(this).stop().animate({ marginLeft: "25px" }, 200);
        },function(){
// Действие при уходе курсора
        $(this).stop().animate({ marginLeft: "15px" }, 300);
   });
});

MarginLeft — отступ слева. Перед тем как задавать нужно просмотреть ваши стили css! При наведении мы плавно его увеличиваем.
Пример здесь:

То же самое можно сделать на css но на jQuery меню выглядит намного привлекательнее посмотрите сами:

Кому понравилось меню на css я выложил код:

1
2
3
4
5
6
7
8
9
.menu2 a {
margin-left:0px;
font-weight: bold;
}
.menu2 a:hover {
margin-left:15px;
font-weight: bold;
text-decoration: none;
}
Вот это все если что-то не получается пишите =).

Вам будет интересно прочитать и это:

Об авторе: Петро Бородатий

Создаю веб-сайты, пишу скрипты для популярных CMS, веду блог. Программист портала AdvertsMarket.net.

Оставить комментарий

Услуги

Веб-студия "MKSITE"

Реклама от Google

Социальные сети

Партнеры

Система Orphus