Как создать красивое меню на jQuery?

jQuery

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

Чтобы наша библиотека работала нужно её добавить на страничку сайта. Существует два способа добавления данной библиотеки:

  1. Скачиваем одну из версий jQuery с официального сайта и вставляем следующий код в шапку документа (между head):
    <script type="text/javascript" src="путь_к_файлу/jquery.js">
    </script>
  2. Не скачивая файл удаленно подключаем библиотеку:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

После того как наша библиотека jQuery подключена можно приступать к написанию кода для нашего меню, но перед немного познакомимся с jQuery.

Код jQuery состоит из последовательных команд. Общий синтаксис написания команд имеет следующий вид:

$(селектор).метод();

В принципе ничего сложного здесь нет: знак $ указывает что символы идущие после него являются кодом jQuery; селектор указывает элемент, к которому будем применен тот или иной метод; метод указывает действие, которое будет совершаться над указанным элементом.

Следует отметить, что некоторые библиотеки JavaScript для обозначения кода также используют символ $. Чтобы избежать конфликта между библиотеками можно поменять этот символ на любой другой с помощью команды noConflict():
//Изменим стандартный символ $ на jQ   
var jQ=jQuery.noConflict();
//Изменим цвет текста используя jQ вместо $
jQ(document).ready(function(){

   jQ("p").css("color","red");

});    
Пример использования можно посмотреть здесь

Ну а теперь приступим к самому главному, сделаем красивое меню с помощью jQuery.

Создание меню


Для создания нашего меню мы будем использовать следующий код:

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset=utf-8>
  <title>Меню на jQuery</title>
  <style>
nav{margin:20px 20px}
nav p,ul li{width:150px;
    padding:10px;    
}
ul{display:none;}
ul>li{
    position:relative;    
    background:#e6cf5c;
    border-bottom:1px #000 solid;
}
a{display:block;
    width:150px;
    text-decoration:none}​
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
$("nav").click(function(){$("ul").slideToggle(1500)});                         
$("nav p").mouseover(function(){$("nav p").css("background-color","#8a9fb5")});
$("nav p").mouseout(function(){$("nav p").css("background-color","#9db8d4")});
$("li").hover(function(){$(this).animate({left:"10px"}, "300");
}, 
function(){       
$(this).animate({left:"0px"}, "300");
                        });                     
});
</script> 
 </head>
     <body>
 <nav><p>Раздел меню <span>▽</span></p>
    <ul>
        <li><a href="#">Пункт №1</a></li>
        <li><a href="#">Пункт №2</a></li>
        <li><a href="#">Пункт №3</a></li>
        <li><a href="#">Пункт №4</a></li>
        <li><a href="#">Пункт №5</a></li>        
     </ul> 
</nav>
    </body>
  </html>

Результат можно увидеть здесь. А теперь подробнее разберем наш пример. А точнее код jQuery.

Первая строчка нашего кода:

$(document).ready(function(){

предотвращает преждевременное выполнение кода т.е код будет выполнен после загрузки документа. Строчка:

$("nav").click(function(){$("ul").slideToggle(1500)});


говорит нам о том что, при событии click (клик) на данный элемент будет выполняться функция, при которой используется метод slideToggle. Этот метод позволяет при первом клике плавно отобразить элемент списка ul, который изначально был скрыт с помощью CSS, а при втором клике он его скрывает.

Обработчики событий mouseover и mouseout
в коде
$("nav p").mouseover(function(){$("nav p").css("background-color","#8a9fb5")});
$("nav p").mouseout(function(){$("nav p").css("background-color","#9db8d4")});
используются для того, чтобы выполнить действия над элементом после того, как курсор мыши будет наведен на элемент и наоборот соответственно. В данном случае мы меняем цвет элемента.

И наконец последняя часть кода:

$("li").hover(function(){$(this).animate({left:"10px"}, "300");
}, 
function(){       
$(this).animate({left:"0px"}, "300");
                        });    


Здесь я использовал два метода hover и animate.

Причем надо сказать, что метод hover задает две функции. Первая функция выполняет действие над элементом когда курсор мыши будет наведен на элемент, а вторая после того как курсор мыши будет убран от элемента. В данном случае это элемент списка li.

P/s: хотелось бы сказать на последок, может быть у меня получилось и не классное меню, но цель данной статьи познакомить посетителей с возможностями использования библиотеки jQuery. Я думаю вы без труда сможете сделать что-то своё родное, намного лучше чем получилось у меня!

8 комментариев

avatar
  • BaNru
Как нельзя актуальная статья, во времена CSS3
avatar
Пока браузеры используют префиксы для CSS3, а код для анимации и для всего остального занимает много места, можно использовать jQuery. Тем более, что с ней очень удобно работать.
avatar
Ну да, CSS кода настолько много, что либа jQ и рядом не стоит.
avatar
«Уж сколько раз твердили миру… <что меню не должно функционировать независимо от javascript> да все не в прок...».
Очень тонкое это дело — новичков учить. Для человека незнающего будет больше вопросов, чем ответов. Знающий и так все это знает (простите за тавтологию).
Получилась статья — ни черту кочерга, ни Богу свечка.
Остается одно — жать клавиши строго так, как автор написал. Это, извините, махровая поповщина.
avatar
Ты имеешь в виду, что меню должно функционировать без javascript?
avatar
Да, именно это я и имею в виду. Прятать список меню стилями — неправильно. Если уже делать такое, то прятать этот список скриптом. Тогда большинство насладится красивым интерфейсом, а для остальных будет обычный список ссылок, но, тем не менее, будет. Правда ведь, несложно?
avatar
Остается одно — жать клавиши строго так, как автор написал. Это, извините, махровая поповщина.
— это ты к чему написал? Я же не говорю что так надо делать, или ты название темы воспринял как очередная статья поповщины?
avatar
Это я к тому написал, что нельзя объять необъятное, и в полусотне строк рассказать о jQuery. Естественно, у вас не разъяснены даже ключевые моменты. Кто в курсе дела, создаст такое меню и без вашей статьи. А кто не в курсе, чтобы получить результат вынужден бездумно копировать приведенный код. Вряд ли он от этого поумнеет. По такому же принципу построены поповские видеоуроки.