Выпадающее вертикальное меню с помощью CSS, JQuery

jquery меню

От автора: Сегодня мы сделаем простое, но привлекательное меню с помощью CSS, JQuery.

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

Также скачайте исходники себе на компьютер!

автор

Автор: Михаил Влащенко

Здравствуйте! Меня зовут Михаил. Мне 22 года. Я — верстальщик-самоучка.

Интересуюсь интернет технологиями. Хобби — кулинария. Свободное время провожу с любимой девушкой и друзьями. Больше всего в мире люблю погонять круглый мячик в хорошей компании (с раннего детства играю в футбол). Постараюсь до Вас донести те знания, которыми уже владею. Как говорится, помоги ближнему своему.

Шаг 1.

Для начала создайте папку, например folder. В нее поместите файл index.html со следующим кодом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Colorful Content Accordion | Tutorialzine demo</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="main">
  <ul class="container">
<li class="menu">
<ul>
<li class="button"><a href="#" class="box1">ГЛАВНАЯ</a></li>
           		 <li class="dropdown">
               		 <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>
                		</ul>
		</li>
          </ul>
      </li>
      <li class="menu">
          <ul>
		<li class="button"><a href="#" class="box2">ФОТО</a></li>
            	<li class="dropdown">
               		 <ul>
                    <li><a href="#">Пункт1</a></li>
                    <li><a href="#">Пункт2</a></li>
                    <li><a href="#">Пункт3</a></li>
               		 </ul>
		</li>
          </ul>
      </li>
      <li class="menu">
          	<ul>
		<li class="button"><a href="#" class="box3">ВИДЕО</a></li>
           		<li class="dropdown">
               		<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>
                		</ul>
		</li>
          </ul>
      </li>
      <li class="menu">
          <ul>
		<li class="button"><a href="#" class="box4">БЛОГИ</a></li>
            	<li class="dropdown">
                		<ul>
                    		        <li><a href="#">Пункт1</a></li>
                    		        <li><a href="#">Пункт2</a></li>
                    		        <li><a href="#">Пункт3</a></li>
                		</ul>
		</li>
          </ul>
      </li>
      <li class="menu">
          <ul>
		<li class="button"><a href="#" class="box5">ИГРЫ</a></li>
            	<li class="dropdown">
                		<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>
                    <li><a href="#">Пункт6</a></li>
                		</ul>
		</li>
          </ul>
      </li>
      <li class="menu">
          <ul>
		<li class="button"><a href="#" class="box6">КОНТАКТЫ</a></li>
            	<li class="dropdown">
                		<ul>
                    <li><a href="#">Пункт1</a></li>
                    <li><a href="#">Пункт2</a></li>
                    <li><a href="#">Пункт3</a></li>
                		</ul>
		</li>
          </ul>
      </li>
  </ul>
</div>
</body>
</html>

Затем в папке folder создайте папку style и поместите в нее файл style.css. Файл style.css должен содержать этот код:

body{
	background: #000;
	margin: 0;
	padding: 0;
}

ul{
	margin: 0;
	padding: 0;
}
li{
	list-style :none;
	text-align: left;
}
a{
	color: #000;
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}
#main{
	width: 100%;
	height: 620px;	
	background: url(../img/font.jpg);
	margin: 0;
}
ul.container{
	width: 240px;
	margin: 0 auto;
	padding: 0;
}
li.menu{
	width: 240px;
	padding: 5px 0;
}

li.button a{
	width: 200px;
	height: 34px;
	display: block;
	overflow: hidden;
	position: relative;
	font-family: Arial,Helvetica,sans-serif;
	font-size: 21px;	
	padding: 10px 20px 0 20px;
}
li.button a:hover{
	text-decoration: none;
}
li.button a span{
	/* This span acts as the right part of the section's background */
	height:44px;
	position:absolute;
	right:0;
	top:0;
	width:4px;
	display:block;
}
li.button a.box1, li.button a.box2, li.button a.box3, li.button a.box4, li.button a.box5, li.button a.box6{
	background: url(../img/point.png); 
	color :#ccc;
	border: solid 1px #ccc;
}
.dropdown{
	width: 242px;
	display: none;
}
.dropdown li{
	background: url(../img/point.png);
	border: 1px solid #ccc;
	margin: 5px 0;
	padding: 4px 18px;
}

Также не забываем про наши скрипты. В папке folder создаем папку js и помещаем в нее скрипт jquery-1.4.2.js, jquery.easing.1.3.js и script.js.

Чтобы наша страничка была не такой унылой, я создал для нее красочный фон. Для этого в папке folder необходимо создать папку img и поместить в нее файл font.jpg. Делать это необязательно. Просто в этом случае фон страницы будет черного цвета.

После того как Вы выполнили вышеуказанные действия, в окне Вашего браузера появится вот такая вот страничка:

вертикальное меню jquery

Таким образом, мы создали вертикальное меню с помощью CSS, JQuery с выпадающими подпунктами. Для того чтобы увидеть подпункты меню, необходимо кликнуть на соответствующий пункт меню. Повторный клик по соответствующему пункту меню вернет его в исходное состояние.

Шаг 2.

Для того чтобы понять, как устроена работа данного меню, рассмотрим исходные коды файлов index.html, style.css и script.js.

Итак, рассмотрим файл index.html. А именно вот эту часть кода:

<li class="menu">
          <ul>
<li class="button"><a href="#" class="box1">ГЛАВНАЯ</a></li>
           		 <li class="dropdown">
               		 <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>
                		</ul>
		</li>
          </ul>
      </li>

Она представляет собой в браузере пункт меню "ГЛАВНАЯ" с раскрывающимися подпунктами меню "Пункт1", "Пункт2", "Пункт3", "Пункт4".

Подпункты меню "Пункт1", "Пункт2", "Пункт3", "Пункт4" скрыты за счет свойства display: none;. Для того чтобы увидеть второй уровень меню Вам необходимо сделать один клик по пункту меню "ГЛАВНАЯ". После этого наше меню плавно раздвигается.

Данный эффект реализован при помощи ява-скрипта script.js.

Пункты меню "ФОТО", "ВИДЕО", "БЛОГИ", "ИГРЫ", "КОНТАКТЫ" реализованы аналогичным образом. Отличие друг от друга заключается в количестве подпунктов меню, поэтому их рассматривать мы не будем.

Также стоит обратить внимание на корректное подключение стилей и скриптов. Т.к. если неправильно подключить хотя бы один из скриптов, то наше меню работать будет не так, как нам нужно.

Файл style.css.

В этом файле я хочу обратить Ваше внимание на стили классов button и dropdown (стили для пунктов меню и их подпунктов, соответственно). Рассмотрим их:

li.button a{
	width: 200px; - ширина блока;
	height: 34px; - высота блока;
	display: block; - блочное расположение блоков;
	font-family: Arial,Helvetica,sans-serif; - шрифт текста блока;
	font-size: 21px; - размер шрифта текста блока; 
	padding: 10px 20px 0 20px; - внутренние отступы блока;
}
.dropdown{
	width: 242px; - ширина блока;
	display: none; - скрытое отображение блока; 
}
.dropdown li{
	background: url(../img/point.png); - фон блока, представленный картинкой;
	border: 1px solid #ccc; - рамка блока цвета #ccc в 1 пиксель; 
	margin: 5px 0; - внешний отступ блока;
	padding: 4px 18px; - внутренний отступ блока;
}

В свою очередь, все меню заключено в блок container. За счет свойств данного блока наше меню расположено по центру экрана.

ul.container{
	width: 240px; - ширина блока;
	margin: 0 auto; -  внешние отступы блока(слева и справа задано auto – блок находится по середине экрана);
	padding: 0; - внутренние отступы блока;
}

Файл script.js. Наши пункты меню второго уровня плавно открываются и закрываются именно за счет этого скрипта.

Рассмотрим его код более детально:

$(document).ready(function(){
	$.easing.def = &quot;easeInOutQuad&quot;;
	$('li.button a').click(function(e){
		var dropDown = $(this).parent().next();
		$('.dropdown').not(dropDown).slideUp('slow');
		dropDown.slideToggle('slow');
		e.preventDefault();
	})	
});

Строка $.easing.def = "easeInOutQuad"; задает эффект открытия/скрытия подпунктов меню. В данном случае указан эффект easeInOutQuad. На его место можно поставить другой эффект, например, easeOutBounce.

В строке $(‘li.button a’).click(function(e) описано то, что данный эффект (открытия/скрытия) применятся только для элементов класса button по клику, т.е. для пунктов меню "ГЛАВНАЯ", "ФОТО", "ВИДЕО", "БЛОГИ", "ИГРЫ", "КОНТАКТЫ".

Эти строки $(‘.dropdown’).not(dropDown).slideUp(‘slow’); dropDown.slideToggle(‘slow’); задают скорость открытия/скрытия подпунктов меню. В данный момент задана скорость открытия "slow". Она равна 1 секунде.

Спасибо за внимание. На этом урок окончен. Мы с Вами создали выпадающее вертикальное меню с помощью CSS, JQuery. Ваши отзывы и вопросы по статье жду в комментариях.

С уважением, Михаил Влащенко.

киберсант-вебмастер

Автор: Михаил Влащенко

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

E-mail: contact@webformyself.com

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Учебник по основам CSS для начинающих

Прямо сейчас изучи CSS с нуля!

Смотреть курс

Метки: , ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (84)

  1. Денис

    Спасибо Тебе большое Михаил!!!!
    Нет слов выразить благодарность!!!!
    Вроде данный способ подменю элементарен, а перекопал столько сайтов — а все не то. :)

  2. Виктор

    Огромное спасибо давно искал что нибудь похожие.
    Но есть один вопрос.
    Как сделать ещё один подпункт. Например,
    Главная, нажимаем и открывается »Пункт1», а как добавить в »Пункт1» ещё один подпункт?

  3. Виктор

    Друзья подскажите пожалуйста, где допускаю ошибку. Почему, когда делаю 3 уровень меню, то при нажатии на 2 уровень, меню просто закрывается, но если его опять открыть, то меню 3 уровня открыто.

    • Андрей Кудлай

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

      • Виктор

        Спасибо за совет, вот создал темку
        http://webformyself.com/forum/index.php/topic/757/

        • Андрей Кудлай

          Да, только было бы неплохо все же создавать тему в нужном разделе (в данном случае — это jQuery… тему я переместил). Кроме того, тот, кто Вам попытается помочь, совсем не поймет, как работает Ваше меню. Выложите еще код jQuery и CSS. В принципе, все это можно прикрепить архивом в сообщении.

  4. Татьяна

    Большое спасибо, единственное но у меня не встают ссылки а в основное меню — в выпадающее ноу проблем

  5. Lylliana

    Здравствуйте, создала папки, закинула файлы, всё сделала. А не открывается у меня. Судя по комментариям в Operа открывается отлично

    • Андрей Кудлай

      Здравствуйте.
      Попробуйте создать тему на нашем форуме, описать проблему подробнее (что именно не открывается, во всех браузерах или только в одном), выложить код, и мы постараемся помочь.

  6. Нина

    Отличный скрипт! Спасибо!! Лучший, который я нашла в интернет…
    Вообще Вы ребята молодцы, и курс который я у вас приобрела классный, работать одно удовольствие, всё толково и понятно!!!

  7. Нина

    У меня работает в браузерах: Опера, Firefox, Google, Сафари, Интернет Эксплойер начиная с 9-ой, в ранних версиях не работает.

  8. Дмитрий

    Очень хорошо все описано и разжёвано, спасибо!

    А хотелось бы добавить картинки «+» которая в раскрытом состояние меню будет меняться на «-».

  9. Сергей

    не плохая реализация меню, но можно было сделать на чистом хтмл и цсс, как тут например help-wp.ru/vertikalnoe-vypadayushhee-menu/

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree