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

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

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

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

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

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

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

 

1

<ul id="nav">

2

    <li>

3

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

4

    </li>

5

    <li>

6

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

7

        <ul>

8

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

09

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

10

        </ul>

11

    </li>

12

    <li>

13

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

14

        <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>

19

        </ul>

20

    </li>

21

    <li>

22

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

23

        <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>

35

        </ul>

36

    </li>

37

    <li>

38

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

39

        <ul>

40

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

41

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

42

        </ul>

43

    </li>

44

</ul>

 

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

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

 


01

/*------------------------------------*\

02

    Навигация

03

\*------------------------------------*/

04

#nav{

05

    float:left;

06

    width:100%;

07

    list-style:none;

08

    font-weight:bold;

09

    margin-bottom:10px;

10

}

11

#nav li{

12

    float:left;

13

    margin-right:10px;

14

    position:relative;

15

    display:block;

16

}

17

#nav li a{

18

    display:block;

19

    padding:5px;

20

    color:#fff;

21

    background:#333;

22

    text-decoration:none;

23

     

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;

28

}

29

#nav li a:hover{

30

    color:#fff;

31

    background:#6b0c36;

32

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

33

    text-decoration:underline;

34

}

35

 

36

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

37

#nav ul{

38

    list-style:none;

39

    position:absolute;

40

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

41

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

42

    -webkit-transition:0.25s linear opacity; /* В Webkit

выпадающие разделы будут проявляться */

43

}

44

#nav ul li{

45

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

46

    float:none;

47

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

48

}

49

#nav ul a{

50

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

51

    display:block;

52

}

53

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

54

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

55

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

56

}

57

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

58

    background:#6b0c36;

59

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

60

    text-decoration:underline;

61

}

62

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

63

    text-decoration:none;

64

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

65

}

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);

72

}

 

 

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

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

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

 

1

#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 выпадающие пункты меню- проявятся */

7

}

 

 

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

 

01

#nav ul li{

02

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

03

    float:none;

04

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

05

}

06

#nav ul a{

07

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

08

    display:block;

09

}

10

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

11

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

12

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

13

}

 
  

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

 


1

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

2

    background:#6b0c36;

3

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

4

    text-decoration:underline;

5

}

 

 

 

***

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

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

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

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