Создание выпадающего меню на CSS
Как создать выпадающее меню без применения JavaScript. Меню можно сделать на чистом CSS и вставить в любое место на сайте.
Понятие «выпадающее меню» подразумевает, что при наведении курсора на любой раздел в этом меню, будет появляться, то есть выпадать полный список включённых в этот раздел дочерних пунктов (подпунктов).
Пройдя курсором по разделам меню, не открывая дополнительных вкладок и страниц на сайте, пользователь быстро и наглядно получает общее представление о темах и всех материалах содержащихся на ресурсе.
Выпадающее меню написанное на HTML с применением CSS стилей, имеет простую негромоздкую структуру разметки. Не использует Javascript, ID-классы и другие элементы, что облегчает его работу на сайте.
Меню имеет чистую структуру вложенных списков <ul> и элементов <li>
|
3
|
<a href="#" title="Вернуться на главную страницу">Главная</a>
|
|
6
|
<a href="#" title="Информация ">о сайте</a>
|
|
8
|
<li><a href="#">Тематика</a></li>
|
|
09
|
<li><a href="#">Категория</a></li>
|
|
13
|
<a href="#" title="Подкатегория">Перечень</a>
|
|
15
|
<li><a href="#">Один</a></li>
|
|
16
|
<li><a href="#">Два</a></li>
|
|
17
|
<li><a href="#">Три</a></li>
|
|
18
|
<li><a href="#">Четыре</a></li>
|
|
22
|
<a href="#" title="Тема">Категория</a>
|
|
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>
|
|
38
|
<a href="#" title="Связь">телефон</a>
|
|
40
|
<li><a href="#">Примечание</a></li>
|
|
41
|
<li><a href="#">Место</a></li>
|
|
CSS выпадающего меню
Прописываем стили и трансформируем списки в меню <ul>
|
01
|
/*------------------------------------*\
|
|
03
|
\*------------------------------------*/
|
|
24
|
text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* добавитьтень текста*/
|
|
25
|
-moz-border-radius:2px;
|
|
26
|
-webkit-border-radius:2px;
|
|
32
|
background:rgba(107,12,54,0.75); /* сделать полупрозрачным */
|
|
33
|
text-decoration:underline;
|
|
36
|
/*--- выподающие пункты ---*/
|
|
40
|
left:-9999px; /* выводим за экран */
|
|
41
|
opacity:0; /* Установка начальной прозрачности */
|
|
42
|
-webkit-transition:0.25s linear opacity; /* В Webkit
выпадающие разделы будут проявляться */
|
|
45
|
padding-top:1px; /* отступ li */
|
|
47
|
background: url('/dot.gif');
|
|
50
|
white-space:nowrap; /* Остановка переноса текста, создание выпадающего пункта */
|
|
53
|
#nav li:hover ul{ /* вывод пункта при наведении */
|
|
54
|
left:0; /* вывод на экран */
|
|
55
|
opacity:1; /* непрозрачность */
|
|
57
|
#nav li:hover a{ /* стиль верхнего меню, при выпадении */
|
|
59
|
background:rgba(107,12,54,0.75); /* Вид полупрозрачности */
|
|
60
|
text-decoration:underline;
|
|
62
|
#nav li:hover ul a{ /* Изменяем немного стили верхнего меню */
|
|
64
|
-webkit-transition:-webkit-transform 0.075s linear;
|
|
66
|
#nav li:hover ul li a:hover{ /* Стили для выпадения пунктов */
|
|
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>
|
4
|
left:-9999px; /* за экран, когда не нужно (лучше чем display:none;) */
|
|
5
|
opacity:0; /* Начальная прозрачность */
|
|
6
|
-webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты меню- проявятся */
|
|
Установка стилей для пунктов и ссылок
|
02
|
padding-top:1px; /*Отступ li */
|
|
04
|
background: url('/dot.gif');
|
|
07
|
white-space:nowrap; /* Стоп переноса текста, создание выпадающий пункта */
|
|
10
|
#nav li:hover ul{ /* Выпадающий пункт при наведении курсора */
|
|
11
|
left:0; /* Вывод обратно на экран */
|
|
12
|
opacity:1; /* станет непрозрачным */
|
|
Код определяет в состоянии \hover\ ссылки пункта верхнего уровня
|
1
|
#nav li:hover a{ /* Cтили верхнего раздела, когда открывается выпадающий */
|
|
3
|
background:rgba(107,12,54,0.75); /* вид полупрозрачный */
|
|
4
|
text-decoration:underline;
|
|
|
***
Как установить выпадающее меню в Joomla
Когда нет подключения к интернету
Как установить фавикон на сайт
Как вставить изображение на сайт Joomla