Artinblog logo
  • DLE
    • Шаблоны
    • Модули
  • SEO
    • SEO для начинающих
  • Общество
  • jQuery
  • Дизайн
  • Услуги
Главная » jQuery » Выпадающее меню на jQuery RSS
июл 25 2012 photo

Выпадающее меню на jQuery

admin 20 616
  • 60
  • 1
  • 2
  • 3
  • 4
  • 5

Выпадающее меню на jQuery

 

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

 

<!DOCTYPE HTML>
<html>
<head>
    <link media="screen" href="styles.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="myscript.js"></script>
    <title>Навигация</title>
</head>
<body>
<h1>Navigation</h1>
<ul id="menu">
  <li class="menu"><a href="#">Sub 1<span></span></a>
    <ul>
      <li><a href="#">test 1</a></li>
      <li><a href="#">test 2</a></li>
      <li><a href="#">test 3</a></li>
      <li><a href="#">test 4</a></li>
    </ul>
  </li>
  <li class="menu"><a href="#">Sub 2<span></span></a>
    <ul>
      <li><a href="#">test 1</a></li>
      <li><a href="#">test 2</a></li>
      <li><a href="#">test 3</a></li>
      <li><a href="#">test 4</a></li>
    </ul>
  </li>
  <li class="menu"><a href="#">Sub 3<span></span></a>
    <ul>
      <li><a href="#">test 1</a></li>
      <li><a href="#">test 2</a></li>
      <li><a href="#">test 3</a></li>
      <li><a href="#">test 4</a></li>
    </ul>
  </li>
  <li class="menu"><a href="#">Sub 4<span></span></a>
    <ul>
      <li><a href="#">test 1</a></li>
      <li><a href="#">test 2</a></li>
      <li><a href="#">test 3</a></li>
      <li><a href="#">test 4</a></li>
    </ul>
  </li>
  <li class="menu"><a href="#">Sub 5<span></span></a>
    <ul>
      <li><a href="#">test 1</a></li>
      <li><a href="#">test 2</a></li>
      <li><a href="#">test 3</a></li>
      <li><a href="#">test 4</a></li>
    </ul>
  </li>
</ul>
</body>
</html>



Как вы уже догадались, наше выпадающее меню построено на базе маркированных списков. При наведении курсора мыши на тег <li class="menu"><a href="#">Sub 1<span></span></a>…</li> раскрываться будет все, что в него заключено, а именно:

<ul>
      <li><a href="#">test 1</a></li>
      <li><a href="#">test 2</a></li>
      <li><a href="#">test 3</a></li>
      <li><a href="#">test 4</a></li>
    </ul>



Но как, спросите вы? Да все на самом деле очень просто. Для начала давайте разберемся с таблицей стилей нашего списка навигации, выглядеть она будет следующим образом:


body {
    background: rgb(244, 244, 244);font-family: Verdana;font-weight: 100;
}
/*---Навигация---*/
#menu {
    width: 200px;
    margin: 0;
    padding: 2px;
}
#menu li {
    list-style-type: none;
}
.menu {
    position: relative;
    background: chocolate;
    background: -moz-linear-gradient(top, rgb(198, 255, 242), #2AC4B3);
    background: -webkit-linear-gradient(top, rgb(198, 255, 242), #2AC4B3);
    background: -o-linear-gradient(top, rgb(198, 255, 242), #2AC4B3);
    border: 1px solid #2AC4B3;
}
.menu:hover {
    background: #00c;
    background: -moz-linear-gradient(top, rgb(230, 230, 230), #0CBFAB);
    background: -webkit-linear-gradient(top, rgb(230, 230, 230), #0CBFAB);
    background: -o-linear-gradient(top, rgb(230, 230, 230), #0CBFAB);
}
.menu span {
    width: 11px;
    height: 11px;
    display: block;
    position: absolute;
    top: 8px;
    right: 10px;
    cursor: pointer;
}
.menu ul {
    width: 150px;
    margin: 0;
    padding: 1px;
    position: absolute;
    top: -1px;
    left: 198px;
}
.menu ul li {
    background: chocolate;
    background: -moz-linear-gradient(top, rgb(198, 255, 242), #2AC4B3);
    background: -webkit-linear-gradient(top, rgb(198, 255, 242), #2AC4B3);
    background: -o-linear-gradient(top, rgb(198, 255, 242), #2AC4B3);
    border: 1px solid #fff;
}
.menu ul li:hover {
    background: #00c;
    background: -moz-linear-gradient(top, rgb(230, 230, 230), #0CBFAB);
    background: -webkit-linear-gradient(top, rgb(230, 230, 230), #0CBFAB);
    background: -o-linear-gradient(top, rgb(230, 230, 230), #0CBFAB);
}
.menu a {
    padding: 5px;
    display: block;
    text-decoration: none;
    color: white;
}
.menu a:hover {
    color: white;
}
/*---END---*/



Из таблицы стилей видно, что изначально выпадающий список не скрыт, но этот момент мы и будем исправлять при помощи jQuery:

$(document).ready(function(){
    $('.menu ul').hide();
    $('.menu span').css('background', 'url("down.png")');
    $('#menu li').hover(function(){
        $(this).children("ul").show(); /*Эквивалент $('ul', this).show();*/
        $(this).find("span").css('background', 'url("right.png")'); /*Эквивалент $('span', this).css('background', 'url("right.png")');*/
        },function(){
        $(this).children("ul").hide(); /*Эквивалент $('ul', this).hide();*/
        $(this).find("span").css('background', 'url("down.png")'); /*$('span', this).css('background', 'url("down.png")');*/
        }
    )
})



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

$(document).ready(function(){
})



В ней прописываются команды, которые необходимо выполнять после полной загрузки страницы. Сделано это для того, чтобы не появлялись разного рода ошибки, при невозможности найти какой-либо объект из-за того, что он банально ещё не загрузился.

Далее идет:

$('.menu ul').hide();



Что означает эта запись? Конструкция «$()» позволяет произвести выборку элементов. Следовательно в самом начале нам необходимо скрыть наш выпадающий список. Мы берем конструкцию «$()» и пишем в ней интересующий нас объект. В нашем случае этим объектом будет маркированный список с классом «menu». Далее прописываем метод «hide()», позволяющий скрыть интересующий нас объект.

Далее идет следующая конструкция:

$('.menu span').css('background', 'url("down.png")');



Что она делает? Она ищет тег <span></span> родительскому элементу которого присвоен класс «menu» и, при помощи метода "css('background', 'url("down.png")')”, происходит присваивание свойству стиля «background» значения «url("down.png")». "down.png" – это иконка, показывающая, что список может раскрываться.

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

$('#menu li').hover(function(){
        $(this).children("ul").show();
        $(this).find("span").css('background', 'url("right.png")');
        },function(){
        $(this).children("ul").hide();
        $(this).find("span").css('background', 'url("down.png")');
        }



Мы ищем тег <li></li> родительскому элементу которого присвоен id="menu”. Далее идет метод "hover” и в скобках две функции. Первая функция будет выполняться при наведении курсора мыши, а вторая выполниться, если курсор мыши покинет интересующий нас элемент.

В первой функции прописано:

$(this).children("ul").show();
$(this).find("span").css('background', 'url("right.png")');



Конструкция "$(this)” означает, что нас интересует тот элемент, на который мы в данный момент навели (this от англ. этот). А навели мы на тег <li class="menu"><a href="#">Sub 1<span></span></a>….</li>. Далее у тега <li></li> при помощи метода «children("ul")» мы ищем вложенный тег <ul></ul> и методом «show()» отображаем его.

После этого у тега <li></li> мы ищем потомков, а именно: тег <span></span> и у него меняем фон на другую иконку.

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

function(){
        $(this).children("ul").hide();
        $(this).find(«span»).css('background', 'url("down.png")');
        }



Чтобы написанный код на jQuery заработал и наше выпадающее меню работало корректно, необходимо скачать с сайта jquery.com библиотеку и подключить её, прописав после открывающего тега <head> строку <script type="text/javascript" src="js/jquery.js"></script>.

Ну вот и все! В заключении хочу отметить, что если ваш сайт довольно увесист, то возможно, скрипт будет запускаться слишком поздно (сайт будет долго грузиться) и пользователи будут видеть, как навигация сначала раскрывается полностью, а только потом скрывается, что, согласитесь, очень некрасиво. Следовательно, необходимо вынести все jQuery команды за эту конструкцию: «$(document).ready(function(){})». Выглядеть это будет следующим образом:

$(document).ready(function(){  
})
    $('.menu ul').hide();
    $('.menu span').css('background', 'url("down.png")');
    $('#menu li').hover(function(){
        $(this).children("ul").show();
        $(this).find(«span»).css('background', 'url("right.png")');
        },function(){
        $(this).children("ul").hide();
        $(this).find(«span»).css('background', 'url("down.png")');
        }
    )

 

Подключение нашего скрипта <script type="text/javascript" src="js/myscript.js"></script> необходимо  перенести из тега <head></head> в самый конец, перед закрывающим тегом </body>, либо можно подключить скрипт сразу после маркированного списка.

 

 

 Демо easy_jquery_menu.zip [35,18 Kb] (cкачиваний: 363)

Теги: jQuery Навигация меню

HashFlare
Другие новости по теме:
  • Плавная прокрутка страницы сайта
  • Мобильное меню для сайта
  • JQuery горизонтальное выпадающее меню
  • Горизонтальное меню на CSS
  • jQuery. Что это и для чего нужен?

Комментарии к: Выпадающее меню на jQuery (3)

    1. №1  dimaII 19-01-2013 Цитировать
      Добавили бы демо для наглядности, а то лень загружать ))
    1. №2  admin 19-01-2013 Цитировать
      Цитата: dimaII
      Добавили бы демо для наглядности, а то лень загружать ))

      Добавил демонстрационную страницу, теперь данный пример можно наглядно "пощупать". Так же, при написании кода в блокноте, следует внимательно отнестись к вопросу кодировки. Все файлы следует сохранять в кодировке utf-8 или windows-1251 (ANSI), иначе jquery код может банально не работать и потом очень сложно понять в чем ошибка.
    1. №3  Владимир 01-10-2013 Цитировать
      Спасибо! Очень помогло!
Имя:*
Комментарий:
Сервис не доступен
Похожие статьи:
  • Плавная прокрутка страницы сайта
  • Мобильное меню для сайта
  • JQuery горизонтальное выпадающее меню
  • Горизонтальное меню на CSS
  • jQuery. Что это и для чего нужен?
  • Популярное
  • Авторизация
Войти
Забыли? Регистрация
HashFlare
  • Обратная связь
  • Карта сайта
При копировании материалов ссылка на источник Artinblog.ru обязательна. Copyright © 2012 - 2015