Создание выпадающего меню на CSS

Как создать выпадающее меню без применения JavaScript. Меню можно сделать на чистом CSS и вставить в любое место на сайте.

Понятие «выпадающее меню» подразумевает, что при наведении курсора на любой раздел в этом меню, будет появляться, то есть выпадать полный список включённых в этот раздел дочерних пунктов (подпунктов).

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

Выпадающее меню написанное на HTML с применением CSS стилей, имеет простую негромоздкую структуру разметки. Не использует Javascript, ID-классы и другие элементы, что облегчает его работу на сайте.

Меню имеет чистую структуру вложенных списков <ul> и элементов <li>

1	<ul id="nav">

<li>

3	<a href="#" title="Вернуться на главную страницу">Главная</a>

</li>

<li>

6	<a href="#" title="Информация ">о сайте</a>

<ul>

8	<li><a href="#">Тематика</a></li>

09	<li><a href="#">Категория</a></li>

</ul>

</li>

<li>

13	<a href="#" title="Подкатегория">Перечень</a>

<ul>

15	<li><a href="#">Один</a></li>

16	<li><a href="#">Два</a></li>

17	<li><a href="#">Три</a></li>

18	<li><a href="#">Четыре</a></li>

</ul>

</li>

<li>

22	<a href="#" title="Тема">Категория</a>

<ul>

24	<li><a href="#">Раздел (первый)</a></li>

25	<li><a href="#">Раздел (второй)</a></li>

26	<li><a href="#">Раздел (третий)</a></li>

27	<li><a href="#">Раздел (четвертый)</a></li>

28	<li><a href="#">Раздел (пятый)</a></li>

29	<li><a href="#">(шестой)</a></li>

30	<li><a href="#"> (седьмой)</a></li>

31	<li><a href="#"> (восьмой)</a></li>

32	<li><a href="#"> (девятый)</a></li>

33	<li><a href="#"> (десятый)</a></li>

34	<li><a href="#"> (одиннадцатый)</a></li>

</ul>

</li>

<li>

38	<a href="#" title="Связь">телефон</a>

<ul>

40	<li><a href="#">Примечание</a></li>

41	<li><a href="#">Место</a></li>

</ul>

</li>

</ul>

CSS выпадающего меню

Прописываем стили и трансформируем списки в меню <ul>

01	/------------------------------------\

Навигация

03	\------------------------------------/

#nav{

05	float:left;

06	width:100%;

07	list-style:none;

08	font-weight:bold;

09	margin-bottom:10px;

}

#nav li{

12	float:left;

13	margin-right:10px;

14	position:relative;

15	display:block;

}

17	#nav li a{

18	display:block;

19	padding:5px;

20	color:#fff;

21	background:#333;

22	text-decoration:none;

24	text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* добавитьтень текста*/

25	-moz-border-radius:2px;

26	-webkit-border-radius:2px;

27	border-radius:2px;

}

29	#nav li a:hover{

30	color:#fff;

31	background:#6b0c36;

32	background:rgba(107,12,54,0.75); /* сделать полупрозрачным */

33	text-decoration:underline;

}

36	/--- выподающие пункты ---/

#nav ul{

38	list-style:none;

39	position:absolute;

40	left:-9999px; /* выводим за экран */

41	opacity:0; /* Установка начальной прозрачности */

42	-webkit-transition:0.25s linear opacity; /* В Webkit выпадающие разделы будут проявляться */

}

44	#nav ul li{

45	padding-top:1px; /* отступ li */

46	float:none;

47	background: url('/dot.gif');

}

49	#nav ul a{

50	white-space:nowrap; /* Остановка переноса текста, создание выпадающего пункта */

51	display:block;

}

53	#nav li:hover ul{ /* вывод пункта при наведении */

54	left:0; /* вывод на экран */

55	opacity:1; /* непрозрачность */

}

57	#nav li:hover a{ /* стиль верхнего меню, при выпадении */

58	background:#6b0c36;

59	background:rgba(107,12,54,0.75); /* Вид полупрозрачности */

60	text-decoration:underline;

}

62	#nav li:hover ul a{ /* Изменяем немного стили верхнего меню */

63	text-decoration:none;

64	-webkit-transition:-webkit-transform 0.075s linear;

}

66	#nav li:hover ul li a:hover{ /* Стили для выпадения пунктов */

67	background:#333;

68	background:rgba(51,51,51,0.75); /* Будет полупрозрачным */

69	text-decoration:underline;

70	-moz-transform:scale(1.05);

71	-webkit-transform:scale(1.05);

}

Вложенные списки выпадающего меню

Этим кодом установятся стили списков <ul> в пунктах верхнего уровня. В коде используется \position:absolute;\ для выпадающих подпунктов.

Часто в меню применяется свойство \display:none;\, когда пункт не используется и его следует скрыть. В этом коде применяется перемещение <ul> в абсолютную позицию \-9999\, таким образом вынося его за рамки экрана. Свойства \opacity:0;\ - для скрытия <ul>, \Webkit\ - для плавного вывода пункта <ul>

#nav ul{

2	list-style:none;

3	position:absolute;

4	left:-9999px; /* за экран, когда не нужно (лучше чем display:none;) */

5	opacity:0; /* Начальная прозрачность */

6	-webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты меню- проявятся */

}

Установка стилей для пунктов и ссылок

01	#nav ul li{

02	padding-top:1px; /Отступ li /

03	float:none;

04	background: url('/dot.gif');

}

06	#nav ul a{

07	white-space:nowrap; /* Стоп переноса текста, создание выпадающий пункта */

08	display:block;

}

10	#nav li:hover ul{ /* Выпадающий пункт при наведении курсора */

11	left:0; /* Вывод обратно на экран */

12	opacity:1; /* станет непрозрачным */

}

Код определяет в состоянии \hover\ ссылки пункта верхнего уровня

1	#nav li:hover a{ /* Cтили верхнего раздела, когда открывается выпадающий */

2	background:#6b0c36;

3	background:rgba(107,12,54,0.75); /* вид полупрозрачный */

4	text-decoration:underline;

}

***

Как установить выпадающее меню в Joomla

Когда нет подключения к интернету

Как установить фавикон на сайт

Как вставить изображение на сайт Joomla

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