Выпадающее меню без js

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

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

На выходе должно получиться меню навигации с выпадающими при наведении подпунктами. Особенностью данного вида меню будет отсутствие js, нам не понадобится ничего, только html и css. Итак приступим:

Для создания нашего меню будем использовать списки html, которые идеально подходят для подобных задач. Присвоим идентификатор нашему ul контейнеру, например id=nav, и создадим 5 пунктов, после чего начальный код html будет выглядеть так:

<ul id="nav">
  <li><a href="/">Главная</a></li>
  <li><a href="/">Услуги</a></li>
  <li><a href="/">Витрина</a></li>
  <li><a href="/">Стол заказов</a></li>
  <li><a href="/about">О нас</a></li>
</ul>

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

Окажу помощь в разработках или сайты под ключ, пишите запросы в комменты или контакты. Большое количество готовых сайтов, контент на разные тематики: интересно, качественно, недорого.

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

<ul id="nav">
  <li><a href="/">Главная</a></li>
  <li><a href="/">Услуги</a>
     <ul>
		<li><a href="#">Подпункт первый</a></li>
		<li><a href="#">Подпункт второй</a></li>
		<li><a href="#">Подпункт третий</a></li>
		<li><a href="#">Подпункт четвертый</a></li>
		<li><a href="#">Подпункт пятый</a></li>
	</ul>
  </li>
  <li><a href="/">Витрина</a>
    <ul>
		<li><a href="#">Подпункт первый</a></li>
		<li><a href="#">Подпункт второй</a></li>
		<li><a href="#">Подпункт третий</a></li>
		<li><a href="#">Подпункт четвертый</a></li>
		<li><a href="#">Подпункт пятый</a></li>
	</ul>
  </li>
  <li><a href="/">Стол заказов</a>
      <ul>
		<li><a href="#">Подпункт первый</a></li>
		<li><a href="#">Подпункт второй</a></li>
		<li><a href="#">Подпункт третий</a></li>
		<li><a href="#">Подпункт четвертый</a></li>
		<li><a href="#">Подпункт пятый</a></li>
	</ul>
  </li>
  <li><a href="/about">О нас</a></li>
</ul>

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

Поэтому давайте добавим юзабилити в само html меню, например, разместив закрашенный треугольник, показывающий выпадающие подпункты. Чтобы не использовать лишнее обращение к изображению, выведем треугольник в меню навигации с помощью символьного кода ▼ и заключим его в контейнер span.

Так как выше было указано, что пунктов с выпадающим меню будет всего три, значит в них и добавим наш span. В итоге конечный вариант html меню навигации по сайту будет выглядеть так:

<ul id="nav">
  <li><a href="/">Главная</a></li>
  <li><a href="/">Услуги<span>&#9660;</span></a>
     <ul>
		<li><a href="#">Подпункт первый</a></li>
		<li><a href="#">Подпункт второй</a></li>
		<li><a href="#">Подпункт третий</a></li>
		<li><a href="#">Подпункт четвертый</a></li>
		<li><a href="#">Подпункт пятый</a></li>
	</ul>
  </li>
  <li><a href="/">Витрина<span>&#9660;</span></a>
    <ul>
		<li><a href="#">Подпункт первый</a></li>
		<li><a href="#">Подпункт второй</a></li>
		<li><a href="#">Подпункт третий</a></li>
		<li><a href="#">Подпункт четвертый</a></li>
		<li><a href="#">Подпункт пятый</a></li>
	</ul>
  </li>
  <li><a href="/">Стол заказов<span>&#9660;</span></a>
      <ul>
		<li><a href="#">Подпункт первый</a></li>
		<li><a href="#">Подпункт второй</a></li>
		<li><a href="#">Подпункт третий</a></li>
		<li><a href="#">Подпункт четвертый</a></li>
		<li><a href="#">Подпункт пятый</a></li>
	</ul>
  </li>
  <li><a href="/about">О нас</a></li>
</ul>

Меню готово, но пока работать не будет. Нужно еще в css стили соответствующие создать, поэтому можно сказать что навигация сайта готова на 50%, а еще точнее можно сказать что меню на стадии разработки.

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

Далее стилизуем видимую часть меню, выпадающие подпункты, смещаем за пределы экрана ту часть, которая должна выводиться только при наведении, и делаем ее прозрачной полностью, то есть невидимой.

Окажу помощь в разработках или сайты под ключ, пишите запросы в комменты или контакты. Большое количество готовых сайтов, контент на разные тематики: интересно, качественно, недорого.

В результате этих действий, видимая часть меню будет состоять из пяти пунктов, а подпункты в трех из пяти будут выводиться при наведении. В коде приведены подробные объяснения некоторых ключевых селекторов в виде комментария. Готовый css код будет выглядеть так:

/*Сбросим отступы*/	
ul,ol,li{margin:0;padding:0}
/*Стили меню*/ 
#nav{
	float:left;
	width:100%;
	font-weight:bold;
	box-shadow:0 0 4px #222;
	border:3px ridge #fff
}
/*Стили пунктов меню*/
#nav li{
	float:left;
	margin-right:10px;
	position:relative;
	display:block;
}
#nav li a{
	display:block;
	padding:5px;
	color:#fff;
	text-decoration:none;	
	text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Тень текста, чтобы приподнять его на немного */
}
/*Стили треугольника для пунктов с выпадающим списком*/
#nav li a span{font-size:10px;margin-left:3px}

/*//////////// ВЫПАДАЮЩИЕ ПОДПУНКТЫ //////////////*/
#nav ul{
	list-style:none;
	position:absolute;
	left:-9999px; /* Выводим за пределы экрана */
	opacity:0; /* Прозрачность полная */
	 -webkit-transition:0.35s linear opacity;
     -moz-transition:0.35s linear opacity;
     -o-transition:0.35s linear opacity;
	transition:0.35s linear opacity; /* Украшаем, пункты будут проявляться */
}
#nav ul li{
	border-top:1px solid #fff; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */
	float:none;
}
#nav ul a{
	white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
	display:block;
}
#nav li:hover ul{ /*Выпадающий пункт при наведении курсора */
	left:0; /* Приносим его обратно на экран, когда нужно */
	opacity:1; /* Делаем непрозрачным */
}
#nav li:hover a{ /*Стили для верхнего уровня, когда выводится выпадающий список */
background:#f00;
}
#nav li:hover ul a{ /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */
	text-decoration:none;
	-webkit-transition:-webkit-transform 0.075s linear;
}
#nav li:hover ul li a:hover{ /* Стили для выпадающих пунктов, когда курсор находится на пункт*/
	background:rgba(255,0,0,0.75); /* Будет красным полупрозрачным */	
}
/*Градиент и фон для меню*/
#nav,#nav li:hover ul li a{background:#060078;background-image: linear-gradient(bottom, #060078 22%, #1026A3 61%, #165CAB 81%);
background-image: -o-linear-gradient(bottom, #060078 22%, #1026A3 61%, #165CAB 81%);
background-image: -moz-linear-gradient(bottom, #060078 22%, #1026A3 61%, #165CAB 81%);
background-image: -webkit-linear-gradient(bottom, #060078 22%, #1026A3 61%, #165CAB 81%);
background-image: -ms-linear-gradient(bottom, #060078 22%, #1026A3 61%, #165CAB 81%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.22, #060078),
	color-stop(0.61, #1026A3),
	color-stop(0.81, #165CAB)
);}

Теперь меню навигации по сайту можно считать готовым на 100%. Наша задача была создать меню средствами html css, что и было сделано. Дальше уже каждый может под свои нужды модернизировать его так как захочет.

Навигационное меню не использует js, не использует изображений. Фон меню и подпунктов выводится через стили обыкновенным фоновым цветом, поверх него накладывается градиент.

Изменить их можно в любой момент, подобрать градиент можно в нашем онлайн генераторе градиентов. Каждый может настроить меню под себя.

Окажу помощь в разработках или сайты под ключ, пишите запросы в комменты или контакты. Большое количество готовых сайтов, контент на разные тематики: интересно, качественно, недорого.