Регистрация Войти
Вход на сайт
» » Вертикальное меню на css (раздвигающееся)

Вертикальное меню на css (раздвигающееся)

Просмотров: 28808
Комментариев: 15
Версия для печати

В примере данного вертикального меню, подменю плавно открываются (раздвигается) при клике мышкой на главный пункт меню. Реализовано все достаточно просто с помощью простейшего html кода, содержащего неупорядоченный список с одним уровнем вложенности, файла стилей css и четырех картинок. Вот, собственно, как выглядит само меню.

На html коде останавливаться смысла нет, все чрезвычайно просто. Как я уже и говорил выше, само вертикальное меню представляет собой список с идентификатором nav. Подменю также построены на неупорядоченном списке. Вертикальное меню помещено в контейнер (название класса container). Определяющий последовательность перехода между ссылками атрибут tabindex прописанный в родительском меню, используется для того, чтобы Chrome понимал правило a:focus. Chrome не добавляет стиль для селектора a, и чтобы заставить его понимать правило a:focus, нужно просто добавить к тегу атрибут tabindex. Заодно попробуйте и посмотрите что получится при нажатии на кнопку клавиатуры "Tab". Код страницы index.html размещен ниже:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Простое раздвигающееся вертикальное меню</title>
	<link rel="stylesheet" href="css/menu.css" type="text/css">
	</head>
	<body>
	<div class="container">
	  <ul id="nav">
	    <li><a href="#"><img src="images/big.png">Главная</a></li>
	       <li><a href="#" class="sub" tabindex="1"><img src="images/big.png">Программы</a><img src="images/up.gif">
	           <ul>
	               <li><a href="#"><img src="images/small.png">Система</a></li>
	               <li><a href="#"><img src="images/small.png">Интернет</a></li>
	               <li><a href="#"><img src="images/small.png">Антивирусы</a></li>
	           </ul>
	    </li>
	       <li><a href="#" class="sub" tabindex="1"><img src="images/big.png">Графика, дизайн</a><img src="images/up.gif">
	           <ul>
	               <li><a href="#"><img src="images/small.png">Уроки Photoshop</a></li>
	               <li><a href="#"><img src="images/small.png">Фильтры</a></li>
	               <li><a href="#"><img src="images/small.png">Шрифты</a></li>
	               <li><a href="#"><img src="images/small.png">Клипарты</a></li>
	           </ul>
	    </li>
	                <li><a href="#"><img src="images/big.png">SEO</a></li>
	                <li><a href="#"><img src="images/big.png">HTML/CSS</a></li>
	                <li><a href="#" class="sub" tabindex="1"><img src="images/big.png">CMS для сайтов</a><img src="images/up.gif">
	<ul>
	                <li><a href="#"><img src="images/small.png">OpenCart</a></li>
	                <li><a href="#"><img src="images/small.png">DataLife Engine</a></li>
	                <li><a href="#"><img src="images/small.png">Joomla</a></li>
	                <li><a href="#"><img src="images/small.png">Drupal</a></li>
	                <li><a href="#"><img src="images/small.png">WordPress</a></li>
	            </ul>
	</li>
	  </ul>
	</div>
	</body>
	</html>

Используемые в примере картинки это два квадратика для стилизации пунктов и подпунктов нашего меню. Для пунктов (их обозначения) я выбрал большой квадратик (big.png), для подпунктов — маленький квадратик (small.png). Разумеется можно назначать для каждого элемента меню свои картинки, а не ограничиваться этими двумя. Еще две картинки это стрелочки ввех-вниз, обозначающие закрытие-открытие главного пункта меню (у которого содержатся подменю). Файлы со стрелочками называются up.gif и down.gif соответственно. Картинки есть в архиве с данным примере.

За красоту (если это можно так сказать про данный пример winked ) и за работу меню отвечает файл со стилями style.css, хранящийся в папке css. Таблицы со стилями я всегда вывожу в отдельный файл, для подключения которого в странице index.html используется строчка

<link rel="stylesheet" href="css/menu.css" type="text/css">

В комментариях к стилям я написал подсказки — "что, зачем и почему", поэтому подробно останавливаться на них не буду. Благодаря свойству transition можно сделать раскрытие списка подменю (переход) более замедленным. Попробуйте поиграться со стилями в данном файлике и посмотрите на результаты. Так гораздо легче и понятнее понять что и как работает, что и за что отвечает, да заодно и меню под себя подправите и сделаете его более интересным и функциональным. Итак вот содержание файла style.css:

/* обнуляем отступы */
	*{
	  margin:0;
	  padding:0;
	}
	
	body {
	      background-color:#fff; /* задаем цвет фона (белый) */
	      color:#fff; /* задаем цвет текста (белый) */
	  font-size:14px; /* задаем размер шрифта на странице */
	  font-style:normal; /* начертание шрифта (нормальное) */
	  font-family:Arial, Helvetica, sans-serif; /* устанавливаем шрифт */
	     }
	.container {
	            width:400px; /* ширина контейнера */
	            height:400px; /* высота контейнера */
	        position:relative; /* устанавливаем положение контейнера */
	            margin:40px auto; /* задаем отступы верх-низ и располагаем контейнер по центру */
	            padding:10px; /* задаем внутренние отступы */
	           }
	#nav {
	      margin:0 auto; /* выравниваем по центру */
	  border:2px solid #666666; /* рамка меню - линия толщиной в 2px серого цвета */
	  border-radius:2px; /* радиус скругления уголков рамки */
	      -moz-border-radius:2px; /* для Firefox */
	      -webkit-border-radius:2px; /* для Chrome */
	  box-shadow:1px 1px 4px #666666; /* тень рамки */
	      }
	#nav, #nav ul {
	               list-style:none; /* убираем маркер списка */
	               padding:0; /* обнуляем внутренние отступы */
	               width:200px; /* задаем ширину */
	               }
	#nav ul {
	         position:relative; /* относительное позиционирование (для работы z-index) */
	         z-index:-1; /* используем отрицательное значение чтобы подменю не отображались поверх основных пунктов*/
	        }
	#nav li {
	         position:relative; /* относительное позиционирование (для работы z-index) */
	         z-index:100; /* располагаем выше элементы списка (подменю) */
	        }
	
	/* раскрытые пункты подменю плавно сворачиваются */
	#nav ul li {
	            margin-top:-23px; /* устанавливаем отрицательный отступ от верхнего края для скрытия подменю */
	            -moz-transition:  0.4s linear 0.4s; /* для Firefox 4 */
	            -ms-transition: 0.4s linear 0.4s; /* для IE */
	            -o-transition: 0.4s linear 0.4s; /* для Опера */
	            -webkit-transition: 0.4s linear 0.4s; /* для Chrome и Safari */
	            transition: 0.4s linear 0.4s; /* указываем параметры анимированного перехода */
	            }
	#nav li a {
	           background-color:#000; /* цвет фона для нашего меню (черный) */
	           color:#fff; /* цвет шрифта (белый) */
	           display:block; /* отображаем как блок */
	           font-size:12px; /* размер шрифта */
	           font-weight:bold; /* делаем шрифт жирным */
	           line-height:28px; /* межстрочный интервал */
	           outline:0; /* убираем внешней границы */
	           padding-left:15px; /* назначаем левый отступ */
	           text-decoration:none; /* убираем подчеркивание у ссылок меню */
	          }
	  
	/* стрелочка вниз */
	#nav li a.sub {
	               background:#000 url("../images/down.gif") no-repeat;
	               }
	
	/* оформление пунктов меню (стрелочка вверх при раскрытии) */			   
	#nav li a + img {
	                 cursor:pointer; /* вид курсора */
	                 display:none; /* скрывает отображение (устраняет накладку) */
	 width:200px; /* ширина */
	                 height:28px; /* высота */
	                 left:0; /* положение от левого края */
	                 position:absolute; /* позиционируем */
	                 top:0; /* положение от верха */
	                }
	
	/* оформление пунктов меню (картинка большого квадратика) */
	#nav li a img {
	               border-width:0px; /* убираем толщину границ */
	   width:24px; /* ширина */
	               height:24px; /* высота */
	               line-height:28px; /* межстрочный интервал */
	               margin-right:8px; /* отступа от правого края */
	               vertical-align:middle; /* выравнивание */
	              }
	  
	/* параметры основных пунктов меню */				  
	#nav li a:hover {
	                 background-color:#bcbdc1; /* цвет фона */
	                }
	
	/* параметры для подменю */
	#nav ul li a {
	              background-color:#eee; /* цвет фона */
	              border-bottom:1px solid #ccc; /* линия толщиной в 1px серого цвета внизу подменю */
	              color:#000; /* шрифт (белый) */
	              font-size:11px; /* размер шрифта */
	              line-height:22px; /* задаем межстрочный интервал */
	              }
	  
	/* параметры при наведении указателя на пункты (ссылки) подменю */
	#nav ul li a:hover {
	                    background-color:#ddd; /* цвет фона */
	                    color: #993300; /* цвет ссылок при наведении курсора */
	                   }
	#nav ul li a img {
	                  background: url("../images/small.png") no-repeat; /* рисунок "маленький квадратик" для подпунктов меню */
	  width:16px; /* ширина рисунка */
	                  height:16px; /* высота рисунка */
	  border-width:0px; /* обнуляем толщину границы для всех сторон  */
	                  line-height:22px; /* задаем межстрочный интервал */
	                  margin-right:5px; /* отступа от правого края */
	                  vertical-align:middle; /* выравниваем по вертикали */
	                  }
	  
	/* при клике мышкой на раскрывающееся меню */
	#nav a.sub:focus {
	                  background:#bcbdc1; /* фон, который закрывает стрелочку "вниз" */
	                  outline:0; /* убираем внешней границы */
	                  }
	  
	/* делаем раскрытие пунктов меню более плавным */
	/* посмотрите как будет раскрываться список подменю, изменив время к примеру с 0.4s до 33.4s */
	#nav a:focus ~ ul li {
	                      margin-top:0;
	                     -moz-transition:  0.4s linear; /* для Firefox 4 */
	                     -ms-transition: 0.4s linear; /* для IE */
	                     -o-transition: 0.4s linears; /* для Опера */
	                     -webkit-transition: 0.4s linears; /* для Chrome и Safari */
	                     transition: 0.4s linear; /* указываем параметры анимированного перехода */
	                     }
	 
	/* для показа стрелочки "вверх" после клика */
	#nav a:focus + img, #nav a:active + img {
	                                         display:block; /* показываем как блочные элементы */
	                                         }

Реализованное таким образом раскрывающееся вертикальное меню работает во всех современных браузерах. В старых версиях браузеров, типа IE6, IE7, Safari меню либо не работает, либо отображается не корректно, поэтому кроссбраузерным его назвать нельзя, что конечно прискорбно. Для корректной работы такого меню в в старых браузерах без поддержки javascript, как я думаю, не обойтись. Заморачиваться этим не стал, т.к. нет времени да и особого желания подгонять работу меню под каждый древний браузер. Нормальные люди ими уже не пользуются. Если кому-то интересно, то в интернете можно достаточно легко найти кроссбраузерные примеры реализации раскрывающегося вертикального меню (в т.ч. и при наведении указателя мышки), выполненные с использованием jQuery.

Файлы, используемые в данном примере, можно скачать в архиве vertmenu.zip [6,28 Kb]


Рейтинг статьи:
  
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.
Комментарии (15)
Игорь 22 января 2013 22:28
Спасибо!Очень помогло!
Цитировать          1
meruert 27 февраля 2013 18:48
у меня получилось, только подпункты меню не все закрываюся когда их сварачиваешь, 3 подпункта когда сворачиваешь один последний торчит
Цитировать          2
Пользователь offline Офлайн Alexxey 27 февраля 2013 21:10
Цитата: meruert
у меня получилось, только подпункты меню не все закрываюся когда их сварачиваешь, 3 подпункта когда сворачиваешь один последний торчит

Попробуйте кэш браузера очистить. К сожалению, данное меню не отличается абсолютной кроссбраузерностью - поэтому возможно его неккоректное отображение.
Цитировать          3
xenkook 27 февраля 2013 22:36
При открывании html в дримвивере, тот ругался 60 раз, исправил не закрытые теги img как недопустимую разметку. А так вообще классная вещь! Мне очень помогло! Долго искал. Спасибо огромное!
Цитировать          4
xenkook 27 февраля 2013 23:31
У меня страница большая, пунктов меню много, в браузере полоса прокрутки. Если нажимаю пункт меню, меня выбрасывает на самый верх страницы. Возможно из-за этого a href="#", но это ужасно неудобно. Чтоб посмотреть подменю, мне каждый раз надо крутить полосу прокрутки.
Цитировать          5
xenkook 28 февраля 2013 00:15
Разобрался. Если неактивную ссылку сделать якорем, то на верх страницы не выбрасывает. Можно так например a href="#anchor"
Цитировать          6
xenkook 2 марта 2013 17:45
В IE ссылки подменю не срабатывают! Замучался уже с этим! Помогите, пожалуйста!
Цитировать          7
Пользователь offline Офлайн Alexxey 3 марта 2013 08:00
Цитата: xenkook
В IE ссылки подменю не срабатывают! Замучался уже с этим! Помогите, пожалуйста!

Данное меню, к сожалению, не является кроссбраузерным и в некоторых версиях IE может отображаться не корректно.
Цитировать          8
Valentin 9 января 2014 21:31
кг/ам!не работает!!!!скрипт рулит!!)под-меню не скрывается до конца
Цитировать          9
Сергей 11 сентября 2014 10:59
Цитата: meruert
у меня получилось, только подпункты меню не все закрываюся когда их сварачиваешь, 3 подпункта когда сворачиваешь один последний торчит

сделай немного пошире #nav, #nav ul {
list-style:none; /* убираем маркер списка */
padding:0; /* обнуляем внутренние отступы */
width:??????px; /* задаем ширину */
мне помогло
Цитировать          10
Сергей 11 сентября 2014 11:00
Доброго времени суток!!!
мне необходимо что бы при нажатии на подпункты меню оно не сворачивалось обратно, эксперементировал весь день так и не получилось
Цитировать          11
Дмитрий 20 ноября 2015 09:02
такая же проблема, когда нажимаю на подпункты то они обратно сворачиваются и даже по ссылке не переходят
Цитировать          12
Константин 7 апреля 2016 15:55
Здравствуйте, как вообще убрать изображения? То есть моя проблема в том, что они мне не нужны и когда тег img убираю, то при клике по ссылке перекидывает на верх страницы...Как проблему исправить?
Цитировать          13
Инкея 4 января 2017 00:00
Спасибо вам за проделанный труд!
Цитировать          14
инкея 4 января 2017 01:40
Цитата: Инкея
Спасибо вам за проделанный труд!

подскажите как сделать чтобы меню стало обтекаемым.Не получается разместить текст рядом.
Цитировать          15
Оставить комментарий
Ваше имя: *
Ваш e-mail: *
Текст комментария:
Полужирный Наклонный текст Подчёркнутый текст Зачёркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Введите проверочный код (защита от спама):
код: ----