Π Π°Π·Π½ΠΎΠ΅

Html Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ мСню: Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ мСню Π½Π° CSS

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ мСню для сайта Π½Π° CSS

Π’ Π΄Π°Π½Π½ΠΎΠΌ ΡƒΡ€ΠΎΠΊΠ΅ ΠΌΡ‹ рассмотрим процСсс создания вСсьма интСрСсного ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ‚Π° мСню, ΠΌΡ‹ создадим Π΅Π³ΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ Π΅Ρ‰Π΅ и минималистичСским. Данная навигация Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Ρ‹, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΌΡ‹ создадим ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΡŽ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΡ… Π²ΠΊΠ»Π°Π΄ΠΎΠΊ для Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. ΠšΡ€ΠΎΠΌΠ΅ этого Π±ΡƒΠ΄Π΅Ρ‚ установлСна анимация ΠΏΡ€ΠΈ Π²Ρ‹Π±ΠΎΡ€Π΅ ΠΏΡƒΠ½ΠΊΡ‚Π° ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ‹ ΠΈΠΊΠΎΠ½ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ сущСствСнно ΡƒΠΊΡ€Π°ΡˆΠ°Ρ‚ΡŒ Π½Π°ΡˆΡƒ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ. ΠœΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Ρ€Π°Π·Π²ΠΈΠ²Π°Ρ‚ΡŒ Π΄Π°Π½Π½ΡƒΡŽ Ρ‚Π΅Π½Π΄Π΅Π½Ρ†ΠΈΡŽ Π² сайтостроСнии ΠΈ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Ρ‚ΡŒ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Π΄Π°Π½Π½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.

ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²ΠΎ Π΄Π°Π½Π½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ состоит Π² Π΅Π³ΠΎ компактности, ΠΊΡ€ΠΎΠΌΠ΅ этого мСню являСтся ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ, Ρ‡Ρ‚ΠΎ ΠΈΠ³Ρ€Π°Π΅Ρ‚ Π²Π°ΠΆΠ½ΡƒΡŽ Ρ€ΠΎΠ»ΡŒ Π² соврСмСнном вопросС сайтостроСния. Π˜Ρ‚Π°ΠΊ, Π΄Π°Π²Π°ΠΉΡ‚Π΅ приступим.

Много Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌ бСсплатных шаблонов Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ Π½Π° сайтС Π½Π°ΡˆΠΈΡ… ΠΏΠ°Ρ€Ρ‚Π½Π΅Ρ€ΠΎΠ², Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅ΡŽΡ‚ΡΡ ΠΈ ΠΏΡ€Π΅ΠΌΠΈΡƒΠΌ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ с круглосуточной Ρ‚Π΅Ρ…ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π² настройкС:

Π¨Π°Π³ 1. HTML

Π£ нас Π±ΡƒΠ΄Π΅Ρ‚ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒΡΡ вся иСрархия мСню, Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΡ‹ Π·Π°ΠΊΠ»ΡŽΡ‡ΠΈΠΌ Π² классы ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Ρ‹:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

<nav>

<ul>

<li>

<a href=»»>

<i></i>

<strong>Главная</strong>

<small>Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ Π΄ΠΎΠΌΠΎΠΉ</small>

</a>

</li>

<li>

<a href=»»>

<i></i>

<strong>О нас</strong>

<small>краткая информация</small>

</a>

</li>

<li>

<a href=»»>

<i></i>

<strong>Π˜Π·Π±Ρ€Π°Π½Π½ΠΎΠ΅</strong>

<small>Π»ΡŽΠ±ΠΈΠΌΡ‹Π΅ сайты</small>

</a>

</li>

<li>

<a href=»»>

<i></i>

<strong>Новости</strong>

<small>Ρ‚ΠΎΠ»ΡŒΠΊΠΎ самыС интСрСсныС</small>

</a>

</li>

БозданиС мСню html / css







ΠžΡΠ½ΠΎΠ²Ρ‹ вСрстки

Π§Π°Ρ‰Π΅ всСго мСню создаСтся Π½Π° основС Π½Π΅ упорядочСнных списков ul. Π’ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚ li вкладываСтся гипСрссылка a.

МоТно ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ мСню ΠΈ Π½Π° основС Π±Π»ΠΎΠΊΠΎΠ² div, Ρ‚Π°Π±Π»ΠΈΡ† table ΠΈΠ»ΠΈ списков ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΉ dl.
Но Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½ΠΎΠΉ являСтся конструкция ul.

Код ΠΏΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΠ΅Π³ΠΎ мСню Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

<ul>
  <li><a href="#/">ΠΏΡƒΠ½ΠΊΡ‚ 1</a></li>
  <li><a href="#/">ΠΏΡƒΠ½ΠΊΡ‚ 2</a></li>
  <li><a href="#/">ΠΏΡƒΠ½ΠΊΡ‚ 3</a></li>
  <li><a href="#/">ΠΏΡƒΠ½ΠΊΡ‚ 4</a></li>
  <li><a href="#/">ΠΏΡƒΠ½ΠΊΡ‚ 5</a></li>
</ul>


Γ—

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅

Π’ процСссС Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΡƒΠ΄ΠΎΠ±Π½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ адрСс гипСрссылки —Β #/. Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, ΠΎΠ½Π° Π½ΠΈΠΊΡƒΠ΄Π° Π½Π΅ Π²Π΅Π΄Π΅Ρ‚, Π° Π²ΠΎ-Π²Ρ‚ΠΎΡ€Ρ‹Ρ… — Π½Π΅ происходит ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° ΠΊ Π½Π°Ρ‡Π°Π»Ρƒ страницы.

ЦСлью гипСрссылки Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π°Ρ страница вашСго сайта ΠΈΠ»ΠΈ внСшняя ссылка. АдрСс Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅ΠΉ страницы ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΊΠ°ΠΊ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΌ, Ρ‚Π°ΠΊ ΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ. Π’Π½Π΅ΡˆΠ½Π΅ΠΉ ссылки — Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΉ. (Если Π·Π°Π±Ρ‹Π»ΠΈ — смотритС ΠΠ±ΡΠΎΠ±ΡŽΡ‚Π½Ρ‹Π΅ ΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ссылки).


Π₯ΠΎΡ€ΠΎΡˆΠΈΠΌ Ρ‚ΠΎΠ½ΠΎΠΌ считаСтся всС стили сайта ΠΎΡ„ΠΎΡ€ΠΌΠ»ΡΡ‚ΡŒ ΠΎΠ΄Π½ΠΈΠΌ сТатым Ρ„Π°ΠΉΠ»ΠΎΠΌ. Но Π½Π° врСмя Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π³ΠΎΡ€Π°Π·Π΄ΠΎ ΡƒΠ΄ΠΎΠ±Π½Π΅Π΅ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹ для ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… элСмСнтов страницы, Π² Π΄Π°Π½Π½ΠΎΠΌ случаС для Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ мСню.

ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ», Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ my-menu.css, ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π΅Π³ΠΎ.Β 

<!-- ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй -->
Β 
<!DOCTYPE html>
<html>
<head>
     ...
     <title>БозданиС мСню</title>
     <link rel="stylesheet" href="css/MAIN.css" type="text/css" />
     <link rel="stylesheet" href="css/my-menu.css" type="text/css" />
     ...
</head>
<body>
...
</body>
</html>

ПозТС ΠΊΠΎΠ΄ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ пСрСнСсти Π² ΠΎΠ±Ρ‰ΠΈΠΉ Ρ„Π°ΠΉΠ», Π° этот ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ (ΠΈΠ»ΠΈ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ).

Как ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ΡΡ стилСвыС ΠΏΡ€Π°Π²ΠΈΠ»Π° для мСню

НСобходимо ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ классы, ΠΈ ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ стили ΡƒΠΆΠ΅ для Π½ΠΈΡ…. ΠŸΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Ссли Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ стили нСпосрСдствСнно для Ρ‚Π΅Π³ΠΎΠ², Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

/* НС ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ! */
ul li a {color: #f00;}

Ρ‚ΠΎ это ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°ΡΠΏΡ€ΠΎΡΡ‚Ρ€Π°Π½ΡΡ‚ΡŒΡΡ ΠΈ Π½Π° всС ссылки, Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹Π΅ Π² списки Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ мСню! ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π½Π° сайтС ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ нСсколько мСню Ρ€Π°Π·Π»ΠΈΡ‡Π½ΠΎΠ³ΠΎ оформлСния.

Вторая ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с классами, Π° Π½Π΅ с Ρ‚Π΅Π³Π°ΠΌΠΈ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ — Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ€Π°Π·Π±ΠΈΡ‚ΡŒ стили ΠΏΠΎ Π³Ρ€ΡƒΠΏΠΏΠ°ΠΌ. Π—Π° ΠΊΠ°ΠΆΠ΄ΡƒΡŽ Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ Π³Ρ€ΡƒΠΏΠΏΡƒ стилСй Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚Π²Π΅Ρ‡Π°Ρ‚ΡŒ свой класс.

НапримСр, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ класс .menu_color, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚Π²Π΅Ρ‡Π°Ρ‚ΡŒ Π·Π° Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠ΅ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅. Π’ дальнСйшСм это Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ упростит Ρ€Π°Π±ΠΎΡ‚Ρƒ ΠΏΠΎ измСнСнию Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠ³ΠΎ оформлСния мСню.

Каким Ρ‚Π΅Π³Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΈΡΠ²Π°ΠΈΠ²Π°Ρ‚ΡŒ классы

Π₯ΠΎΡ€ΠΎΡˆΠΈΠΉ вопрос. Для Π½Π°Ρ‡Π°Π»Π°, Π½Π΅ΠΏΠ»ΠΎΡ…ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€-ΠΎΠ±Π΅Ρ€Ρ‚ΠΊΡƒ ΠΈ ΠΏΡ€ΠΈΡΠ²ΠΎΠΈΡ‚ΡŒ класс Π΅ΠΌΡƒ.

Π”Π°, это Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°, Π½ΠΎ ΠΎΡ„ΠΎΡ€ΠΌΠ»ΡΡ‚ΡŒ мСню Π±ΡƒΠ΄Π΅Ρ‚ Π³ΠΎΡ€Π°Π·Π΄ΠΎ ΡƒΠ΄ΠΎΠ±Π½Π΅Π΅. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Ссли Π² качСствС ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅ div, Π° nav, Ρ‚ΠΎ вСрстка Π±ΡƒΠ΄Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ сСмантичСской (осмыслСнной) ΠΈ ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΉ для поисковых систСм (ПБ), Ρ‡Ρ‚ΠΎ являСтся нСсомнСнным плюсом. Π’Ρ‚ΠΎΡ€ΠΎΠΉ класс присваиваСм Ρ‚Π΅Π³Ρƒ ul.

<nav>
  <ul>
    <li><a href="#/">ΠΏΡƒΠ½ΠΊΡ‚ 1</a></li>
    <li><a href="#/">ΠΏΡƒΠ½ΠΊΡ‚ 2</a></li>
    <li><a href="#/">ΠΏΡƒΠ½ΠΊΡ‚ 3</a></li>
    <li><a href="#/">ΠΏΡƒΠ½ΠΊΡ‚ 4</a></li>
    <li><a href="#/">ΠΏΡƒΠ½ΠΊΡ‚ 5</a></li>
  </ul>
</nav>

ΠŸΠΎΡ‡Π΅ΠΌΡƒ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊ?

ΠŸΡ€ΠΈΡΠ²ΠΎΠ΅Π½ΠΈΠ΅ класса .menu_colorΒ Ρ‚Π΅Π³Ρƒ nav Π΄Π°Π΅Ρ‚ большС возмоТности для оформлСния, Ρ‡Π΅ΠΌ присовСниС Π΅Π³ΠΎ Ρ‚Π΅Π³Ρƒ ul, Π° класс .my_menu ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π·Π° Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ мСню ΠΈ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡ ΠΊ содСрТащСму ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρƒ ΠΈΠΌΠ΅Ρ‚ΡŒ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½.

ΠŸΡ€ΠΈ этом всСгда Π½Π°Π΄ΠΎ Π΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Π² ΡƒΠΌΠ΅, Ρ‡Ρ‚ΠΎ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ Π±Π»ΠΎΠΊ находится Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ внСшнСм Π±Π»ΠΎΠΊΠ΅ сайта ΠΈ Π΅Π³ΠΎ мСстополоТСниС ΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ свойства, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ связанныС с внСшними отступами ΠΈΠ»ΠΈ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ выпадСния подмСню (ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎΠ± этом Π² ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π΅ «Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню») зависят ΠΎΡ‚ Π²Π½Π΅ΡˆΠ½ΠΈΡ… классов глобальной Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ сайта.

КакиС ΠΈΠΌΠ΅Π½Π° Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Ρƒ классов

ΠžΡΠΌΡ‹ΡΠ»Π΅Π½Π½Ρ‹Π΅. Π’ ΠΈΠ΄Π΅Π°Π»Π΅, любоС имя класса Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π΄Π°Π²Π°Ρ‚ΡŒ прСдставлСниС ΠΎΠ± ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π΅ ΠΈ Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΈ. Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ классы nav.menu_colorΒ ΠΈ ul.my_menu.

ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π·Π° Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠ΅ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ всСх элСмСнтов ΠΈ, Π² Ρ‚ΠΎΠΆΠ΅ врСмя, Π΄Π°Π΅Ρ‚ ΠΏΠΎΠ½ΡΡ‚ΡŒ Ρ‡Ρ‚ΠΎ относится ΠΊ мСню.
Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΡ†ΠΈΡ€ΡƒΠ΅Ρ‚ список ΠΊΠ°ΠΊ собствСнно мСню.


Γ—

Π’Π½ΠΈΠΌΠ°Π½ΠΈΠ΅!

Π‘Ρ‚Π°Ρ€Π°ΠΉΡ‚Π΅ΡΡŒ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ ΠΈΠΌΠ΅Π½Π° для классов Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ внятныС, Π½ΠΎ ΠΈ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅. Π’ ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΊΠΎΠ½Ρ„Π»ΠΈΠΊΡ‚ΠΎΠ²Π°Ρ‚ΡŒ с ΡƒΠΆΠ΅ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌΠΈ классами.

ИмССно ΠΏΠΎ-этому я Π²Ρ‹Π±Ρ€Π°Π» класс .my_menu, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π½Π° сайтС ΡƒΠΆΠ΅ Π΅ΡΡ‚ΡŒ класс .menu со своими стилями.Β 


Π­Ρ‚ΠΎ Ρ‚ΠΎ, Ρ‡Π΅ΠΌ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΎΠ·Π°Π΄Π°Ρ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΠ΅ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΈ, Π° ΠΎΠΏΡ‹Ρ‚Π½Ρ‹Π΅ часто ΠΏΡ€Π΅Π½Π΅Π±Ρ€Π΅Π³Π°ΡŽΡ‚ … А ΠΏΠΎΡ‚ΠΎΠΌ, ΠΊΠΎΠ³Π΄Π° Π½ΡƒΠΆΠ½ΠΎ внСсти измСнСния Π² ΡƒΠΆΠ΅ созданноС мСню Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ для Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ сайта, ΠΈΠ»ΠΈ вывСсти Π² Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ — Π΄ΠΎΠ»Π³ΠΎ ΠΈ Π½ΡƒΠ΄Π½ΠΎ ΠΏΠ΅Ρ€Π΅Π΄Π΅Π»Ρ‹Π²Π°ΡŽΡ‚.

На самом Π΄Π΅Π»Π΅, всС ΠΎΡ‡Π΅Π½ΡŒ просто. Π˜Π·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ, Π½Π° этапС создания Π½ΡƒΠΆΠ½ΠΎ Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ стили тСматичСски ΠΈ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ ΠΈΡ… Π² ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ классы.

НапримСр, Π·Π° Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠ΅ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ Ρƒ нас ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ класс .menu_color

/* === Π“Ρ€ΡƒΠΏΠΏΠ° Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠ³ΠΎ оформлСния === */
Β 
/* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΌΠ΅Π½Π΄ */
.menu_color {
  background: gray;
}
/* ΠžΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΏΡƒΠ½ΠΊΡ‚Π° мСню */
.menu_color > ul > li > a {
  background: transparent;
  color: #f5f5f5;
}
...
/* === Π“Ρ€ΡƒΠΏΠΏΠ° Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ основного мСню === */ 
Β 
/* Бброс ΠΈ установка стилСй ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ */
.my_menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° для ΠΏΡƒΠ½ΠΊΡ‚Π° мСню */
.my_menu li a {
  display: block;
  margin: 0;
  padding: 12px 20px;
  text-decoration: none;  
}

Π’.Π΅. всС стили, ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‰ΠΈΠ΅ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠ΅ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ Ρ‚ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠ³ΠΎ элСмСнта мСню, Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ привязаны ΠΊ классу .menu_color, Π° стили ΠΎΡ‚Π²Π΅Ρ‡Π°ΡŽΡ‰ΠΈΠ΅ Π·Π° Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ — соотвСтствСнно .my_menu.

ΠŸΡ€ΠΈ нСобходимости, для Ρ‚Π΅Π³Π° nav Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ класс, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ Π·Π°Π»Π΅Π·Π°Ρ‚ΡŒ Π½Π° Ρ‚Π΅Ρ€Ρ€ΠΈΡ‚ΠΎΡ€ΠΈΡŽ «Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠ³ΠΎ оформлСния» . ..

ΠžΠ±Ρ‹Ρ‡Π½ΠΎ выводится Π² ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· Π±ΠΎΠΊΠΎΠ²Ρ‹Ρ… ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ сайта. Π§Π°Ρ‰Π΅ выполняСт Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, Ρ€Π΅ΠΆΠ΅ — Π³Π»Π°Π²Π½ΠΎΠ΅ мСню сайта.

ΠŸΡ€ΠΎΡΡ‚ΠΎΠ΅ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ мСню

Π˜ΡΡ…ΠΎΠ΄Π½Ρ‹ΠΉ html-ΠΊΠΎΠ΄ мСню Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

<nav>
  <ul>
    <li><a href="#/">ΠΏΡƒΠ½ΠΊΡ‚ 1</a></li>
    <li><a href="#/">ΠΏΡƒΠ½Ρ‚ΠΊ 2</a></li>
    <li><a href="#/">ΠΏΡƒΠ½ΠΊΡ‚ 3</a></li>
    <li><a href="#/">ΠΏΡƒΠ½ΠΊΡ‚ 4</a></li>
    <li><a href="#/">ΠΏΡƒΠ½ΠΊΡ‚ 5</a></li>
  </ul>
</nav>

ΠšΡ€ΠΎΠΌΠ΅ основных классов, рассмотрСнных Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π΅, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ класс li.active для Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΏΡƒΠ½ΠΊΡ‚Π° (ссылка Π½Π° Ρ‚Π΅ΠΊΡƒΡ‰ΡƒΡŽ страницу).

Бброс ΠΈ установка стилСй ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ


Π€Π°ΠΉΠ» my-menu.css

/* Π£Π±ΠΈΡ€Π°Π΅ΠΌ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ ΠΈ отступы */
.my_menu {
  list-style:none;
  margin:0;
  padding:0;
}
.my_menu li {
  margin:0;
  padding:0;
  position:relative;
}
/* ΠžΠ±Ρ‰ΠΈΠ΅ ΠΏΡ€Π°Π²ΠΈΠ»Π° для ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню */
. my_menu li a {
  display:block;
  margin:0;
  padding:12px 20px;
  text-decoration: none;
}
/*НавСдСниС Π½Π° Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚ мСню - курсор ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ */
.my_menu li.active > a:hover {
  cursor: default;
}

Π¦Π²Π΅Ρ‚ΠΎΠ²ΠΎΠ΅ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅



Γ—

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅

На ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅ Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ всС стили, достаточно лишь Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅. НапримСр ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈΠ½ΠΎΠ³Π΄Π° достаточно ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ†Π²Π΅Ρ‚Π° ссылки ΠΈΠ»ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅.

/* === Π¦Π²Π΅Ρ‚ΠΎΠ²ΠΎΠ΅ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ menu_color === */
.menu_color {
  background:#555;
}
/* ΠžΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΏΡƒΠ½ΠΊΡ‚Π° */
.menu_color > ul > li > a {
  color:#999;
  background: rgba(0, 0, 0, 0);
}
/* ΠŸΠΎΠ΄ΡΠ²Π΅Ρ‚ΠΊΠ° ΠΏΡƒΠ½ΠΊΡ‚Π° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
.menu_color > ul > li > a:hover {
  color: #bbb;
  background: rgba(0, 0, 0, 0.1);
}
/* Активный ΠΏΡƒΠ½ΠΊΡ‚ */
.menu_color > ul > li.active > a,
.menu_color > ul > li.active > a:hover {
  color:#fff;
  background:rgba(0, 0, 0, 0.4);
}

ПояснСния:

  • Если Π²ΠΎΠ·Π½ΠΈΠΊΠ½Π΅Ρ‚ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌ мСню Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Ρ‹, Ρ‚. Π΅. ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ мСню ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹ΠΌ, Ρ‚ΠΎ конструкция .menu_color > ul > li > a ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ стилСй Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌ мСню ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ уровня. Для подмСню ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ стили оформлСния.
  • ИспользованиС прозрачности ΠΏΡ€ΠΈ Π·Π°Π΄Π°Π½ΠΈΠΈ Ρ†Π²Π΅Ρ‚Π° Ρ„ΠΎΠ½Π° — background: rgba(0, 0, 0, 0.1). Π­Ρ‚ΠΎ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ΅ Ρ€Π΅ΠΆΠ΅Π½ΠΈΠ΅ для любого Ρ‚Π΅ΠΌΠ½ΠΎΠ³ΠΎ бэкграунда. Если Π²Ρ‹ Ρ€Π΅ΡˆΠΈΡ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° мСню, Ρ„ΠΎΠ½ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΏΡƒΠ½ΠΊΡ‚Π° ΠΈ подсвСтка ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ измСнятся автоматичСски. Π’ΠΏΡ€ΠΎΡ‡Π΅ΠΌ, Π½ΠΈΡ‡Ρ‚ΠΎ Π½Π΅ ΠΌΠ΅ΡˆΠ°Π΅Ρ‚ Π²Π°ΠΌ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ²ΡˆΠΈΠ΅ΡΡ Ρ†Π²Π΅Ρ‚Π° явно.Β 

Γ—

Π—Π°ΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅

Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° мСню Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Ссли ΠΎΠ½ наслСдуСтся ΠΎΡ‚ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.

Π Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΠΈ ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ²


/* Π Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΡŒ ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню */
.menu_color > ul > li + li > a {
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
}

ΠŸΠΎΠ²Ρ‚ΠΎΡ€ΡΠ΅ΠΌ Ρ‚ΠΎΡ‚ ΠΆΠ΅ Ρ‚Ρ€ΡŽΠΊ с использованиСм rgba. Π¦Π²Π΅Ρ‚Π° для Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΈ Ρ‚Π΅Π½ΠΈ Π·Π°Π΄Π°Π½Ρ‹ ΠΏΠΎΠ»ΡƒΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΌΠΈ — Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ 15% прозрачности ΠΈ Π±Π΅Π»Ρ‹ΠΉ 10% соотвСтствСнно.

Π­Ρ‚ΠΎ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ΅ Ρ€Π΅ΠΆΠ΅Π½ΠΈΠ΅ для любого Ρ‚Π΅ΠΌΠ½ΠΎΠ³ΠΎ бэкграунда. Если Π²Ρ‹ Ρ€Π΅ΡˆΠΈΡ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°, Ρ‚ΠΎ Ρ†Π²Π΅Ρ‚ Ρ€Π°ΠΌΠΊΠΈ ΠΈ Ρ‚Π΅Π½ΠΈ измСнится автоматичСски!


Π”ΠΎ этого ΠΌΠΎΠΌΠ΅Π½Ρ‚Π° Ρ€Π°ΡΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Π»ΠΎΡΡŒ простоС ΠΎΠ΄Π½ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ΅ мСню. Как ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ°, ΠΎΡ‡Π΅Π½ΡŒ часто, Ρ‡Π΅Ρ€Π΅Π· ΠΊΠ°ΠΊΠΎΠ΅-Ρ‚ΠΎ врСмя Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡƒ ΠΈΠ»ΠΈ нСскольким основным ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Ρ‹. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ:

Π˜Π·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ любоС мСню Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ΅!

Π’ послСдниС Π³ΠΎΠ΄Ρ‹ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎ-ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹Π΅ мСню уходят Π² ΠΏΡ€ΠΎΡˆΠ»ΠΎΠ΅. Π”Π²ΡƒΡ… ΡƒΡ€ΠΎΠ²Π½Π΅ΠΉ, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ, Π²ΠΏΠΎΠ»Π½Π΅ достаточно, ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ — ΠΎΡ„ΠΎΡ€ΠΌΠ»ΡΡŽΡ‚ΡΡ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΌ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ мСню.


HTML-ΠΊΠΎΠ΄ 2-Ρ… ΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ³ΠΎ мСню:

<nav>
    <ul>
        <li><a href="#/">ΠΏΡƒΠ½ΠΊΡ‚ 1</a></li>
        <li><a href="#/">Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚ 2</a>
            <ul>
                <li><a href="#/">Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ 1</a></li>
                <li><a href="#/">Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ 2</a></li>
            </ul>
        </li>
        <li><a href="#/">ΠΏΡƒΠ½ΠΊΡ‚ 3</a></li>
        <li><a href="#/">ΠΏΡƒΠ½ΠΊΡ‚ 4</a></li>
        <li><a href="#/">ΠΏΡƒΠ½ΠΊΡ‚ 5</a></li>
    </ul>
</nav>

Π”ΠΎΠ±Π°Π²Π»Π΅Π½Ρ‹ классы li. parent — Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ Ρ‚Π΅Π³, содСрТащий подмСню, ΠΈ ul.sub-menu — Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню.


Π¦Π²Π΅Ρ‚ΠΎΠ²ΠΎΠ΅ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅

/* ΠžΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ sub-menu */
.menu_color .sub-menu {
  background: #f5f5f5;
  border: 1px solid #f5f5f5;
}
/* ΠžΡ„Ρ€Ρ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² */
.menu_color .sub-menu li a{
  color: #555;
  background: rgba(0, 0, 0, 0);
}
/* ΠžΡ„Ρ€Ρ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
.menu_color .sub-menu li a:hover{
  color: #fff;
  background: #555;
}
/* Π Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΡŒ для ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² sub-menu */
.menu_color .sub-menu > li + li > a {
  border-top: 1px solid #fff;
  box-shadow: 0 -1px 0 #ddd;
  padding-left: 40px  /* ДобавляСм отступ для ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² */
}

Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ ΡƒΡΠ»ΠΎΠΆΠ½ΡΡ‚ΡŒ ΠΊΠΎΠ΄, Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΈ отступы оставлСны Ρ‚Π΅ ΠΆΠ΅, Ρ‡Ρ‚ΠΎ ΠΈ Π² основном мСню.Β 

ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ скрытиС

ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ осущСствляСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ li.parent. (ИмСнно для этого ΠΏΡ€ΠΈ сбросС ΠΈ установкС для Π½Π΅Π³ΠΎ Π±Ρ‹Π»ΠΎ Π·Π°Π΄Π°Π½ΠΎ position: relative;)

/*ΠžΠ±Ρ‰ΠΈΠ΅*/
. my_menu .sub-menu {
  display: none;
  position: absolute;
  top: 0;
  min-width: 200px;
  z-index: 9999;
} 

Π’Ρ‹Π²ΠΎΠ΄

Π’ зависимости ΠΎΡ‚ располоТСния основного мСню (лСвая/правая боковая ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°), подмСню ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹ΠΏΠ°Π΄Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ Π²ΠΏΡ€Π°Π²ΠΎ, Ρ‚Π°ΠΊ ΠΈ Π²Π»Π΅Π²ΠΎ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ для опрСдСлСния стилСвых ΠΏΡ€Π°Π²ΠΈΠ» ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ класс Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°Β .sidebar_leftΒ (Π’ исходном html-ΠΊΠΎΠ΄Π΅ класс Π½Π΅ ΡƒΠΊΠ°Π·Π°Π½, Ρ‚.ΠΊ. ΠΊ ΠΊΠΎΠ΄Ρƒ мСню ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚).Β 

/* Π’Ρ‹Π²ΠΎΠ΄ */
.my_menu .parent:hover .sub-menu {
  display: block;
  top: 4px;
}
/* со смСщСниСм Π²ΠΏΡ€Π°Π²ΠΎ */
.sidebar_left .my_menu .parent:hover .sub-menu {
  left: 100%;
  margin-left: -10px;
}


Γ—

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ

Если Ρƒ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° Π½Π΅Ρ‚ класса, ΠΈΠ»ΠΈ ΠΎΠ½ примСняСтся ΠΊΠ°ΠΊ ΠΊ ΠΏΡ€Π°Π²ΠΎΠΉ Ρ‚Π°ΠΊ ΠΈ ΠΊ Π»Π΅Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌ — Π½ΡƒΠΆΠ½ΠΎ этот класс Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊ Ρ‚Π΅Π³Ρƒ nav.menu_color.sidebar_left.


Если Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ΅ мСню располоТСно Π² ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ΅, Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ Ссли подмСню Π²Ρ‹ΠΏΠ°Π΄Π°Π΅Ρ‚ слСва. Π’ ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаСС ΠΎΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ экрана.


/* Π‘ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Π²Π»Π΅Π²ΠΎ */
.sidebar_right .my_menu .parent:hover .sub-menu {
  right: 100%;
  left: auto;
  margin-right: -5px;
}

ΠŸΡ€ΠΎΡΡ‚Π°Ρ анимация

Π§Ρ‚ΠΎ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС, эффСкты довольно простыС:


ΠŸΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… стилСй:

/* ΠžΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΏΡƒΠ½ΠΊΡ‚Π° */
.menu_color >  ul >  li >  a {
  color: #999;  
  background: rgba(0, 0, 0, 0);
Β 
  /* добавляСм код */
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
Β 
/* ΠžΡ„Ρ€Ρ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² */
.menu_color .sub-menu li a{
   color: #555;
   background: rgba(0, 0, 0, 0);
Β 
  /* добавляСм код */
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
Β 

А Π²ΠΎΡ‚ с ΠΏΠ»Π°Π²Π½Ρ‹ΠΌ появлСнСм подмСню ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° …

Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ display: none; для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ подмСню нСльзя — анимация Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ рассмотрим Π΄Ρ€ΡƒΠ³ΠΎΠΉ способ.

Π‘ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ подмСню. Π’Π°Ρ€ΠΈΠ°Π½Ρ‚ 2

ΠΠ»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌ способом являСтся смСщСниС мСню Π² исходном состоянии Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ экрана + полная ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ.

/* ΠŸΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ sub-menu*/
.my_menu .sub-menu {
  display: block; /* ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ */
  position: absolute;
  top: 0;
  width: 200px;
  z-index: 9999;
Β 
  /* Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ */
  opacity: 0;
  -webkit-transition: opacity .5s, top .7s;
  -moz-transition: opacity .5s, top .7s;
  -o-transition: opacity .5s, top .7s;
  transition: opacity .5s, top .7s;
}
/* Π‘ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Π·Π° экран */
.my_menu .sub-menu {
  left: -3000px;
}
/* ΠŸΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅ΠΌ эффСкт отобраТСния ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ*/
.my_menu .parent:hover > .sub-menu {
  display: block;
  top: 4px;
Β 
  /* Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ */
  opacity: 1;
}

Π Π°Π·Π΄Π²ΠΈΠΆΠ½ΠΎΠ΅ мСню-Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Β 


Γ—

НСсколько слов вступлСния

Π’ Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ рассмотрСна тСхнология создания Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½-мСню, Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ ΠΏΠΎΒ hover.

Π― Π±Ρ‹ Π½Π΅ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π» Π±Π΅Π· нСобходимости ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠ΅ мСню Π½Π° сайтС. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ страницы Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΆΠΈΡ‚ΡŒ своСй Тизнью (Ρ…Π»ΠΎΠΏΠ°ΡŽΡ‰ΠΈΠ΅ ΠΊΠ°ΠΊ простыни Π½Π° Π²Π΅Ρ‚Ρ€Ρƒ подмСню, Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ΡΡ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Ρ‹, Ссли Π΅Π³ΠΎ Π½Π΅Β Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½ΠΎ Π·Π°Π΄Π΅Ρ‚ΡŒ ΠΌΡ‹ΡˆΠΊΠΎΠΉ …

АккордСон Π΄ΠΎΠ»ΠΆΠ΅Π½ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒΡΡ ΠΏΠΎΒ click, Π° это ΡƒΠΆΠ΅ JS. А рассмотрСниС javascript Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ Π·Π° Ρ€Π°ΠΌΠΊΠΈ Ρ€Π°Π·Π΄Π΅Π»Π° HTML/CSS…

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½-мСню ΠΈΠ· простого Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню, внСся ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹Π΅ измСнСния Π² ΠΊΠΎΠ΄ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ ΠΈ стили.

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ класс my_accordion ΠΊ классу Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, Π° класс .sub-menu Π·Π°ΠΌΠ΅Π½Π΅Π½ Π½Π° .sub-accordion-menu. МоТно Π±Ρ‹Π»ΠΎ Π±Ρ‹ Π½Π΅ Π·Π°ΠΌΠ΅Π½ΡΡ‚ΡŒ, Π° просто ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, Π½ΠΎ это услоТнит ΠΏΡ€ΠΈΠΌΠ΅Ρ€ для понимания.

<nav>
    <ul>
        <li><a href="#/">ΠΏΡƒΠ½ΠΊΡ‚ 1</a></li>
        <li><a href="#/">Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚ 2</a>
            <ul#/">Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ 1</a></li>
                <li><a href="#/">Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ 2</a></li>
            </ul>
        </li>
        <li><a href="#/">ΠΏΡƒΠ½ΠΊΡ‚ 3</a></li>
        <li><a href="#/">ΠΏΡƒΠ½ΠΊΡ‚ 4</a></li>
        <li><a href="#/">ΠΏΡƒΠ½ΠΊΡ‚ 5</a></li>
    </ul>
</nav>


/* === Π“Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠ° классов === */
Β 
/* Π£Π±ΠΈΡ€Π°Π΅ΠΌ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ ΠΈ отступы */
. my_menu, .sub-menu, 
.sub-accordion-menu {
  list-style:none;
  margin:0;
  padding:0;
}
/* ΠŸΠΎΠ΄ΡΠ²Π΅Ρ‚ΠΊΠ° ΠΏΡƒΠ½ΠΊΡ‚Π° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
.menu_color > ul > li > a:hover,
.my_menu .parent .sub-accordion-menu li a:hover {
  color: #bbb;
  background: rgba(0, 0, 0, 0.1);
}
/* Π Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΡŒ ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню */
.menu_color > ul > li + li > a,
.menu_color .sub-accordion-menu li > a {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
}
Β 
Β 

ПослС этого Π΄ΠΎΠ±Π°Π²ΠΈΠΌ стили, для Π·Π°ΠΊΡ€Ρ‹Ρ‚ΠΎΠ³ΠΎ ΠΈ раскрытого Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°:

/* === Π—Π°ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΉ ===*/
.sub-accordion-menu {
  display: block;
  position: static;
  width: auto;
  overflow: hidden;
  border: none;
  margin: 0!important; 
  max-height: 0;   /* Π‘ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ подмСню */
  transition: max-height 1s;  /* Π—Π°Π΄Π΅Ρ€ΠΆΠΊΠ° раскрытия */
}
/* === ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΉ ===*/
.sub-accordion-menu {
  max-height: 1000px;
}
.sub-accordion-menu > li > a {
  padding-left: 40px;  /* ДобавляСм отступ для ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² */
}

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅.
ΠŸΠΎΡ‡Π΅ΠΌΡƒ Π±Ρ‹Π»ΠΎ использовано свойство max-height, Π° Π½Π΅ height? ΠŸΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π½Π΅ Π·Π½Π°Π΅ΠΌ высоту Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ подмСню, Π° ΠΏΡ€ΠΈ использовании значСния height: auto — анимация Π½Π΅ срабатываСт.

Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ мСню

По структурС Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ мСню Π½ΠΈ Ρ‡Π΅ΠΌ Π½Π΅ отличаСтся ΠΎΡ‚ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ, html-ΠΊΠΎΠ΄ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΉ. ВСорСтичСски, ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ мСню ΠΈΠ· Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΌΠ΅Π½ΠΎΠΉ/Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ класса содСрТащСго ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ ΡƒΡΠ»ΠΎΠΆΠ½ΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ ΠΈ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅, ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ создадим Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню с нуля, со своими классами.

Π’ ΠΈΡ‚ΠΎΠ³Π΅ нашС мСню Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:


Π—Π° основу возьмСм ΠΊΠΎΠ΄ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню ΠΈ Π·Π°ΠΌΠ΅Π½ΠΈΠΌ классы:

<nav>
  <ul>
    <li><a href="#/">punkt 1</a></li>
    <li><a href="#/">dropdown</a>
      <div>
        <ul>
          <li><a href="#/">sub punkt 1</a></li>
          <li><a href="#/">sub punkt 2</a></li>
        </ul>
      <div>
    </li>
    <li><a href="#/">punkt 3</a></li>
    <li><a href="#/">active</a></li>
    <li><a href="#/">punkt 5</a></li>
  </ul>
</nav>

Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°

/* === Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° основного мСню === */
. hz-bar ul {
 list-style: none;
 margin:0;
 padding:0;
}
.hz_menu > li {
 float: left;
 margin:0;
 padding:0;
 position:relative;
}
.hz_menu li a {
 display:block;
 margin:0;
 padding:15px 20px;
 text-decoration: none;
}

Π§Ρ‚ΠΎ Π±Ρ‹Π»ΠΎ сдСлано:

  1. Бброс стилСй ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для Ρ‚Π΅Π³Π° ul
  2. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню, ΠΏΡƒΡ‚Π΅ΠΌ присвоСния Ρ‚Π΅Π³Π°ΠΌ li, содСрТащим ΠΏΡƒΠ½Ρ‚ΠΊΡ‹ основного мСню, свойства float: left
  3. Установка отступов для ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню
ПояснСния:

ΠšΠΎΠ½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΡ .hz_menu > li распространяСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ основного мСню ΠΈ Π½Π΅ Π·Π°Ρ‚Ρ€Π°Π³ΠΈΠ²Π°Π΅Ρ‚ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ .hz_menu li a задаСтся для всСх ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ². НСкоторыС свойства, спСцифичныС для подмСню, Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Ρ‹ Π² дальнСйшСм.

Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню

/* === Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ подмСню === */
.dropdown_menu {
 display: block;
 position: absolute;
 left: -3000px;
 top: 100%;
}
. dropdown_menu > ul {
 border: 1px solid;
 margin-top: 10px;  /* отступ ΠΎΡ‚ основного мСню */
 padding: 10px 1px;
 min-width: 140px;
 opacity: 0;
 transition: opacity .5s; /* анимация прозрачности */
}
.dropdown_menu li a {
 white-space: nowrap; /* Ссли Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ Π΄Π»ΠΈΠ½Π½Ρ‹Π΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ */
 z-index: 9999;
 padding: 10px 20px;
}
.parent_dropdown:hover .dropdown_menu {
 left: 0px;
}
.parent_dropdown:hover .dropdown_menu ul {
 opacity: 1;
}

Рассмотрим Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ особСнности:

  • Как Π±Ρ‹Π»ΠΎ Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· html-ΠΊΠΎΠ΄Π°, Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню ΠΎΠ±Π΅Ρ€Π½ΡƒΡ‚ΠΎ Π² Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ div.dropdown_menu. Для Ρ‡Π΅Π³ΠΎ? Π’ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ΅, ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΏΠΎΠ»Π½Π΅ ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ ΠΈ Π±Π΅Π· Π½Π΅Π³ΠΎ, Π½ΠΎ эта ΠΎΠ±Π΅Ρ€Ρ‚ΠΊΠ° Π΄Π°Π΅Ρ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ возмоТности оформлСния.Β Π’ частности, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π·Π°Π΄Π°Ρ‚ΡŒ отступ ΠΎΡ‚ основного мСню.
    Если Π·Π°Π΄Π°Ρ‚ΡŒ отступ нСпосрСдствСнно для Ρ‚Π΅Π³Π° ul Π±Π΅Π· ΠΎΠ±Π΅Ρ€Ρ‚ΠΊΠΈ, ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠΈ курсора ΠΎΡ‚ основного ΠΏΡƒΠ½ΠΊΡ‚Π° ΠΊ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Ρƒ hover-эффСкт прСрвСтся ΠΈ подмСню ΠΏΡ€ΠΎΠΏΠ°Π΄Π΅Ρ‚ … Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ обСспСчиваСт, Π² Π΄Π°Π½Π½ΠΎΠΌ случаС, отсутствиС Ρ€Π°Π·Ρ€Ρ‹Π²Π°.
  • Для ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ white-space: nowrap. Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ Ρ‡Ρ‚ΠΎ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ подмСню ΠΈΠΌΠ΅Π΅Ρ‚ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΏΡƒΠ½ΠΊΡ‚Π°, ΠΈ, соотвСтствСнно, тСкст ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅Π½ΠΎΡΠΈΡ‚ΡŒΡΡ Π½Π° Π½ΠΎΠ²ΡƒΡŽ строку. Π­Ρ‚ΠΎ Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ΄ΠΎΠ±Π½ΠΎ ΠΏΡ€ΠΈ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΡ… названиях основных ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ².
    Π”Π°Π½Π½ΠΎΠ΅ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ пСрСнос. Как Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π° (Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅), минимальная ΡˆΠΈΡ€ΠΈΠ½Π° подмСню Π±Ρ‹Π»Π° Π·Π°Π΄Π°Π½Π° явно.

ΠžΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅

ΠŸΠ΅Ρ€Π΅Π΄ Ρ‚Π΅ΠΌ ΠΊΠ°ΠΊ Π·Π°Π½ΡΡ‚ΡŒΡΡ Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹ΠΌ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΅Ρ‰Π΅ нСсколько стилСвых ΠΏΡ€Π°Π²ΠΈΠ» Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ. Π― ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ пСрСнСс ΠΈΡ… Π² ΠΎΡ„ΠΎΠΌΠ»Π΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Π» понятнСС смысл.

Если основному ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρƒ Π½Π°Π·Π°Π½Ρ‡ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°, Ρ‚ΠΎ ΠΌΡ‹ Π΅Π³ΠΎ Π½Π΅ ΡƒΠ²ΠΈΠ΄ΠΈΠΌ ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΉ простой ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π΅:

Π’Π΅Π³ΠΈ li, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ присвоСно float: left, Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‚ ΠΈΠ· основного ΠΏΠΎΡ‚ΠΎΠΊΠ°, ΠΈΡ… для основного ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ΠΊΠ°ΠΊ-Π±Ρ‹ Π½Π΅ сущСствуСт, поэтому ΠΎΠ½ «ΡΡ…лопываСтся» ΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ высоту 0. БоотвСтствСнно, Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠ³ΠΎ оформлСния ΠΌΡ‹ Π½Π΅ ΡƒΠ²ΠΈΠ΄ΠΈΠΌ.

РСшСниС

/* ΠŸΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‰Π°Π΅ΠΌ схлопываниС */
.hz-bar:after {
 content: '';
 display: table;
 clear: both;
}

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ Π±ΡƒΠ΄Π΅Ρ‚ вСсти сСбя Π±ΠΎΠ»Π΅Π΅ Π΄Ρ€ΡƒΠΆΠ΅Π»ΡŽΠ±Π½ΠΎ ΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π΅Π³ΠΎ ΠΎΡ„ΠΎΡ€ΠΌΠ»ΡΡ‚ΡŒ

/* === ΠžΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ мСню === */
.menu_bordo {
 background: #7D0000;
}
.menu_bordo .hz_menu > li > a {
 color: #DBE6B7;
}
.menu_bordo .hz_menu > li > a:hover {
 color: #fff;
}
.menu_bordo .hz_menu .active a{
 box-shadow: inset 0 15px 15px rgba(0, 0, 0, 0.2);
 color: #fff;
 cursor: default;
}

Π—Π΄Π΅ΡΡŒ всС достаточно ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ. ЕдинствСнноС,Β cursor: default, слСдовало Π±Ρ‹ пСрСнСсти Π² Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ ΠΏΡ€ΠΈΠ²ΡΠ·Ρ‹Π²Π°Ρ‚ΡŒ ΠΊ классу Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠ³ΠΎ оформлСния.

Для выдСлСния Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΏΡƒΠ½ΠΊΡ‚Π° мСню Π±Ρ‹Π»Π° ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Π° Ρ‚Π΅Π½ΡŒ.

/* === ΠžΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ подмСню === */
.menu_bordo .dropdown_menu > ul {
 background: #fff;
 border-color: #ddd;
}
.menu_bordo .dropdown_menu > ul > li > a {
 color: #555;
}
.menu_bordo .dropdown_menu > ul > li > a:hover {
 background: #7D0000;
 color: #fff;
}

На этом Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠ΅ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½Π½Ρ‹ΠΌ. Π’Π΅ΠΏΠ΅Ρ€ΡŒ с Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΡƒΡŽ Π³Π°ΠΌΠΌΡƒ, ΠΈΠ»ΠΈ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ нСсколько классов для Ρ€Π°Π·Π½Ρ‹Ρ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² оформлСния.

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ

ΠΠ΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ стилиСвыС ΠΏΡ€Π°Π²ΠΈΠ»Π°. ΠŸΠ΅Ρ€Π²ΠΎΠ΅ Π·Π°Π΄Π°Π΅Ρ‚ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌΠΈ (Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΌΡƒ мСню), Π²Ρ‚ΠΎΡ€ΠΎΠ΅ — Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ для Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΏΡƒΠ½ΠΊΡ‚Π°.

/* Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ. Π Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΠΈ ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² + ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ */
.hz_menu > li + li > a {
 border-left: 1px solid rgba(255, 255, 255, 0.1);
 box-shadow: -1px 0 0 rgba(0, 0, 0, 0.15);
}
.parent_dropdown > a:after {
 display: inline-block;
 padding: 1px 0 0 3px;
 content: "\25BC ";
 font-size: 10px;
 vertical-align: top;
}

Π—Π΄Π΅ΡΡŒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒΒ ΠšΠΎΠ΄ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню



Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Π½Π° HTML ΠΈ CSS

Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π½Π° CSS Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ скрипты ΠΈ ΠΌΠΎΠ΄ΡƒΠ»ΠΈ. ΠŸΡ€ΠΎΡΡ‚ΠΎ дописываСм нСсколько строк Π² CSS Ρ„Π°ΠΉΠ» ΠΈ Π³ΠΎΡ‚ΠΎΠ²ΠΎ. НСсмотря Π½Π° простоту мСню Π±ΡƒΠ΄Π΅Ρ‚ достаточно ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΌ. Π‘Ρ‚ΠΈΠ»ΠΈ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΠΎΠ΅ количСство ΡƒΡ€ΠΎΠ²Π½Π΅ΠΉ влоТСнности. Π₯ΠΎΡ‚ΡŒ Π΄Π²Π° Ρ…ΠΎΡ‚ΡŒ Π΄Π΅ΡΡΡ‚ΡŒ ΡƒΡ€ΠΎΠ²Π½Π΅ΠΉ. Код ΠΏΡ€ΠΈ этом остаётся Ρ‚Π΅ΠΌ ΠΆΠ΅. Π’ ΡΡ‚Π°Ρ‚ΡŒΠ΅ описаны Ρ‚Ρ€ΠΈ Π²ΠΈΠ΄Π° мСню, Π½ΠΎ Ссли Π²Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚Π΅ Ρ€Π°Π·Π±ΠΈΡ€Π°Ρ‚ΡŒΡΡ Π² вёрсткС ΡΠΎΠ²Π΅Ρ‚ΡƒΡŽ Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ сначала. Π’Π°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΡ‰Π΅ ΠΏΠΎΠ½ΡΡ‚ΡŒ.

  1. Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню
  2. Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню с ΠΎΠ΄Π½ΠΈΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅ΠΌ влоТСнности
  3. Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ мСню с нСсколькими уровнями влоТСнности

Π‘Π½Π°Ρ‡Π°Π»Π° сдСлаСм HTML Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ для мСню. ΠŸΡ€ΠΈΠ½ΡΡ‚ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ мСню списком. Π­Ρ‚ΠΎ Π½Π΅ стандарт просто Ρ‚Π°ΠΊ слоТилось.

<ul>
  <li><a href="#">ΠΏΡƒΠ½ΠΊΡ‚ 1</a>
    <ul>
      <li><a href="#">ΠΏΡƒΠ½ΠΊΡ‚ 1.1</a></li>
      <li><a href="#">ΠΏΡƒΠ½ΠΊΡ‚ 1.2</a></li>
    </ul>
  </li>
  <li><a href="#">ΠΏΡƒΠ½ΠΊΡ‚ 2</a>
    <ul>
      <li><a href="#">ΠΏΡƒΠ½ΠΊΡ‚ 2.1 ΠΌΠ½ΠΎΠ³Π° Π±ΡƒΠΊΠ°Ρ„</a></li>
      <li><a href="#">ΠΏΡƒΠ½ΠΊΡ‚ 2.2</a>
        <ul>
          <li><a href="#">ΠΏΡƒΠ½ΠΊΡ‚ 2. 2.1</a></li>
          <li><a href="#">ΠΏΡƒΠ½ΠΊΡ‚ 2.2.2</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">ΠΏΡƒΠ½ΠΊΡ‚ 3</a></li>
  <li><a href="#">ΠΏΡƒΠ½ΠΊΡ‚ 4</a></li>
  <li><a href="#">ΠΏΡƒΠ½ΠΊΡ‚ 5</a></li>
</ul>

HTML Ρ„Π°ΠΉΠ» ΠΌΡ‹ большС Ρ‚Ρ€ΠΎΠ³Π°Ρ‚ΡŒ Π½Π΅ Π±ΡƒΠ΄Π΅ΠΌ. ВсС дальнСйшиС измСнСния производятся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π·Π° счёт CSS. ΠŸΠ΅Ρ€Π²ΠΎΠ΅ Ρ‡Ρ‚ΠΎ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ — ΡΠΊΡ€Ρ‹Ρ‚ΡŒ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹.

ul.nav li ul {display: none;}

Π•Ρ‰Ρ‘ Π½ΡƒΠΆΠ½ΠΎ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ Π½ΠΎ это Π΄Π΅Π»ΠΎ вкуса.

ul.nav li {list-style: none;}

Π§Ρ‚ΠΎΠ±Ρ‹ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ появлялись ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ псСвдокласс :hover, ΠΏΡ€ΠΈ этом Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π±Ρ‹ появлялись Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ уровня влоТСнности. Для этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Π·Π½Π°ΠΊ >

ul.nav li:hover > ul {display: block;} 

Π’ этой строчкС Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ вся магия нашСго Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню, поэтому Ρ€Π°Π·Π±Π΅Ρ€Ρ‘ΠΌ Π΅Ρ‘ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅. Благодаря псСвдоклассу :hover, ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° ΠΏΡƒΠ½ΠΊΡ‚ мСню, ΠΎΠ½ ΠΆΠ΅ элСмСнт списка li, для ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ списка ul Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ display станСт block. Π’Π°ΠΊ открываСтся ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ влоТСнности. Если Π½Π° этом ΡƒΡ€ΠΎΠ²Π½Π΅ Π΅ΡΡ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ содСрТащиС ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Ρ‹, Ρ‚ΠΎ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΠΈΡ… Ρ‚Π°ΠΊΠΆΠ΅ откроСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ.

Π‘ основной ΠΌΠ΅Ρ…Π°Π½ΠΈΠΊΠΎΠΉ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ. ΠžΡΡ‚Π°Π»ΠΎΡΡŒ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ мСсто Π³Π΄Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠΎΡΠ²Π»ΡΡ‚ΡŒΡΡ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹. Для этого Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡΡ свойством position: absolute. ΠŸΡ€ΠΈ Ρ‚Π°ΠΊΠΎΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ отсчёт ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ вСдётся ΠΎΡ‚ края ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Ссли Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта Π½Π΅ Π·Π°Π΄Π°Π½ΠΎ свойство position с Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ fixed, relative ΠΈΠ»ΠΈ absolute. Π’ этом случаС отсчёт вСдётся ΠΎΡ‚ края Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ свойство position ΠΌΡ‹ пСрСмСстим Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ Π² ΠΏΡ€Π°Π²ΠΎ Π½Π° расстояниС Ρ€Π°Π²Π½ΠΎΠ΅ ΡˆΠΈΡ€ΠΈΠ½Π΅ мСню. Π’ рассматриваСмом способС Π΅ΡΡ‚ΡŒ ΠΎΠ΄Π½ΠΎ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅. ΠŸΡ€ΠΈ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ Π½Π°ΠΌ придётся Тёстко Π·Π°Π΄Π°Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ. Π‘ Π΄Ρ€ΡƒΠ³ΠΎΠΉ стороны Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ мСню размСщаСтся Π² сайдбарС ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π·Π°Ρ€Π°Π½Π΅Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π°, поэтому привязка ΠΊ ΡˆΠΈΡ€ΠΈΠ½Π΅ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Π° Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ.

/* Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню*/
body{
  background: #DCDCDC;
}
/*блок мСню*/
ul{
  margin: 0;
  padding: 0;
}
ul.nav li {
  background: #B3B3FF;
  border: 1px solid #FFFFFF;
  list-style: none;
  width: 150px;         /*ΡˆΠΈΡ€ΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° мСню*/
}
ul.nav li a {
  text-decoration: none;
  display: block;
  padding: 5px 5px 5px 15px;
}
ul.nav li ul {
  display: none;	/*скрываСм Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹*/
}

/*Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню*/

ul.nav li:hover {
  /* ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… элСмСнтов
   * Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°ΡΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒΡ‚ΡŒΡΡ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ
   * Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта
   */
  position: relative;
  background: yellow;
}
ul.nav li:hover > ul {
  display: block;
}
ul.nav li:hover ul{
  position: absolute;
  top: 0;       /*Π—Π°Π΄Π°Ρ‘ΠΌ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ для Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ²*/
  left: 150px; /*мСню раскрываСтся Π²ΠΏΡ€Π°Π²ΠΎ*/
}

Π’ΠΎΡ‚ Ρ‡Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅. Π΄Π΅ΠΌΠΊΠ°

Для Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π½ΠΎ Π΅ΡΡ‚ΡŒ нСсколько нюансов. Π§Ρ‚ΠΎ Π±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ мСню Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ свойство float. МСню Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒΡΡ Π²Π½ΠΈΠ· Π·Π½Π°Ρ‡ΠΈΡ‚ ΠΏΡ€ΠΈ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ Π½ΡƒΠΆΠ½ΠΎ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ высоту. Для Π½Π°Ρ‡Π°Π»Π° сдСлаСм мСню с ΠΎΠ΄Π½ΠΈΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅ΠΌ влоТСнности. Π’Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ΅ мСню Ρ‚Π°ΠΊΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ. Для этого Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ΅ мСню ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΠ΅ΠΌ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ списка Π° Π½Π΅ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΏΡƒΠ½ΠΊΡ‚Π° ΠΈ Π·Π°Π΄Π°Ρ‘ΠΌ для Π½Π΅Π³ΠΎ ΡˆΠΈΡ€ΠΈΠ½Ρƒ.

/*Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню с ΠΎΠ΄Π½ΠΈΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅ΠΌ влоТСнности*/

body{
  background: #DCDCDC;
}

/* Π‘Π»ΠΎΠΊ мСню*/

ul{
  margin: 0;
  padding: 0;
}
ul.nav li {
  background: #B3B3FF;
  border-right: 1px solid #FFFFFF;
  float: left; /*Π΄Π΅Π»Π°Π΅ΠΌ мСню Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ*/
  height: 30px;
  list-style: none;
}
ul.nav li a {
  text-decoration: none;
  display: block;
  padding: 5px 5px 5px 15px;
}
ul.nav li ul {
  display: none;	/*скрываСм Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹*/
}
ul.nav li:hover {
  background: yellow;
}
/*Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню*/
ul.nav {
  position: relative;
  background: #B3B3FF;
  height: 30px;
  width: 600px;
}
ul.nav li:hover > ul {
  background: #D0E0FF;
  border-top: 1px solid white;
  display: block;
  width: 600px;
  position: absolute;
  top: 30px;
  left: 0;
}

Π’ΠΎΡ‚ Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ Π² ΠΈΡ‚ΠΎΠ³Π΅ Π΄Π΅ΠΌΠΊΠ°.

Π‘ΠΎΠ·Π΄Π°Π½Π½ΠΎΠ΅ Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ ΠΏΡƒΠ½ΠΊΡ‚Π΅ мСню Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹ΠΌ Π½ΠΎ выглядит ΠΎΠ½ΠΎ ΠΏΡ€ΠΈ этом Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ. На ΠΌΠΎΠΉ взгляд ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ΅ мСню Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ — ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ Π²Π½ΠΈΠ· ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Π²ΠΏΡ€Π°Π²ΠΎ. Π—Π΄Π΅ΡΡŒ, Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠΈ ΠΎΡ‚ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅Π³ΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню, Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΠ΅ΠΌ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΏΡƒΠ½ΠΊΡ‚Π° ΠΈ Π·Π°Π΄Π°Ρ‘ΠΌ для Π½ΠΈΡ… ΡˆΠΈΡ€ΠΈΠ½Ρƒ. Π¨ΠΈΡ€ΠΈΠ½Π° Π½Π°ΠΌ Π½ΡƒΠΆΠ½Π° для Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΈ ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… ΡƒΡ€ΠΎΠ²Π½Π΅ΠΉ влоТСнности. Π’ этом мСню ΠΌΡ‹ Π²ΠΎΠ·ΡŒΠΌΡ‘ΠΌ ΠΏΠΎΠ½Π΅ΠΌΠ½ΠΎΠ³Ρƒ ΠΎΡ‚ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… ΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π½ΠΎΠ²ΠΎΠ³ΠΎ.

/*Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню a*/

body{
  background: #DCDCDC;
}

/* Π‘Π»ΠΎΠΊ мСню*/
ul{
  margin: 0;
  padding: 0;
}
ul.nav li {
  background: #B3B3FF;
  border-right: 1px solid #FFFFFF;
  float: left; /*Π΄Π΅Π»Π°Π΅ΠΌ мСню Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ*/
  height: 30px;
  list-style: none;
}
ul.nav li a {
  text-decoration: none;
  display: block;
  padding: 5px 5px 5px 15px;
}
ul.nav li ul {
  display: none;	/*скрываСм Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹*/
}
ul.nav { /*Π·Π°Π΄Π°Ρ‘ΠΌ высоту ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρƒ мСню*/
  background: #B3B3FF;
  height: 30px;
  width: 600px;
}

/*Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню*/

ul. nav li:hover {
  background: yellow;
  position: relative;
}
ul.nav li:hover > ul {
  border-top: 1px solid white;
  display: block;
  position: absolute;
  top: 30px; /*ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ мСню раскрываСтся Π²Π½ΠΈΠ·*/
  left: 0;
}
/*Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΈ ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΡƒΡ€ΠΎΠ²Π½ΠΈ влоТСнности*/
ul.nav li ul li{
  border-bottom: 1px solid white;
  height: auto;
  width: 150px;
}
ul.nav li:hover ul li ul{
  position: absolute;
  top: 0;
  left: 150px; /*Π²Ρ‚ΠΎΡ€ΠΎΠΉ ΠΈ ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΡƒΡ€ΠΎΠ²Π½ΠΈ Ρ€Π°ΡΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π²ΠΏΡ€Π°Π²ΠΎ*/
}

Π’ΠΎΡ‚ Ρ‚Π°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ нашС ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ΅ мСню Π΄Π΅ΠΌΠΊΠ°.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ мСню Π½Π° CSS – руководство для Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ²

ΠŸΡ€ΠΎΡΡ‚ΠΎΡ€Ρ‹ всСмирной сСти ΡΡ‚Ρ€Π΅ΠΌΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ растут, размСщая ΠΎΠ³Ρ€ΠΎΠΌΠ½ΠΎΠ΅ мноТСство Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π²Π΅Π±-сайтов, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… стрСмится ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ посСтитСлСй ΠΈ Π·Π°ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ….

Бпособы покорСния Π»ΡŽΠ΄ΡΠΊΠΈΡ… сСрдСц Π²Ρ‹Π±ΠΈΡ€Π°ΡŽΡ‚ΡΡ Ρ€Π°Π·Π½Ρ‹Π΅ β€” ΠΎΡ‚ примСнСния Flash Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, использования Π±Π°Π½Π½Π΅Ρ€ΠΎΠ² ΠΈ смСлых дизайнСрских Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ Π΄ΠΎ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π·Π²ΡƒΠΊΠΎΠ²Ρ‹Ρ… ΠΈ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… эффСктов.

Однако Π½Π΅ стоит Π·Π°Π±Ρ‹Π²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ сайт β€” это Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ источник ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, поэтому удобству прСдставлСния ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π½Π° сайтС Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡƒΠ΄Π΅Π»ΡΡ‚ΡŒ особоС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΈ ΠΈΠΌΠ΅Π½Π½ΠΎ поэтому навигация, понятная ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŽ Π½Π° ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅, Ρ‚Π°ΠΊ Π²Π°ΠΆΠ½Π°.

МСню являСтся самой распространённой систСмой Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π½Π° сайтС, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΡΡ€Π°Π²Π½ΠΈΡ‚ΡŒ с ΠΎΠ³Π»Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ Π² ΠΊΠ½ΠΈΠ³Π΅. МСню Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Π·Π°ΠΌΠ΅Ρ‚Π½ΠΎ Π½Π° любой страницС рСсурса, позволяя ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π½Π° ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΡƒΡŽΡ‰ΠΈΠΉ Ρ€Π°Π·Π΄Π΅Π».

На ΠΎΠ±ΡŠΡ‘ΠΌΠ½Ρ‹Ρ… сайтах, содСрТащих Π±ΠΎΠ»Π΅Π΅ 50 страниц, Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΏΠΎΠ»Π½ΠΎΠ΅ мСню для доступа ΠΊΠΎ всСм Ρ€Π°Π·Π΄Π΅Π»Π°ΠΌ.

Π’ Ρ‚Π°ΠΊΠΎΠΌ случаС слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Π½Π° CSS, ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ссылки Π½Π° ΠΏΠΎΠ΄Ρ€Π°Π·Π΄Π΅Π»Ρ‹.

Разновидности мСню Π² CSS

БущСствуСт сразу нСсколько Π²ΠΈΠ΄ΠΎΠ² ΠΈ Ρ‚ΠΈΠΏΠΎΠ² CSS мСню:

  1. Π“Π»Π°Π²Π½ΠΎΠ΅ мСню. Π­Ρ‚ΠΎ список ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½Ρ‹Ρ… ссылок Π½Π° ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ Ρ€Π°Π·Π΄Π΅Π»Ρ‹ Π²Π΅Π±-сайта.
  2. Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ мСню. Π’Π°ΠΊΠΎΠ΅ мСню ΠΈΠΌΠ΅Π΅Ρ‚ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ структуру ΠΈ Π±Ρ‹Π²Π°Π΅Ρ‚ Ρ‚Ρ€Ρ‘Ρ… Ρ‚ΠΈΠΏΠΎΠ²:
    • Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню. РаскрываСтся ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ Π½Π° ΠΏΡƒΠ½ΠΊΡ‚;
    • Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ мСню сайта. РаскрываСтся ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΠΎΠΌ ΠΏΡƒΠ½ΠΊΡ‚Π΅;
    • БтатичСскоС Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ мСню для CSS. ДрСвовидная структура, прСдставлСнная Π² ΡƒΠΆΠ΅ раскрытом Π²ΠΈΠ΄Π΅.

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ мСню Π² CSS?

ΠŸΡ€ΠΈΠ²Π΅Π΄Ρ‘ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ создания простого Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню Π½Π° CSS с пояснСниями.

Код Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню прописываСтся ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

<head>
<title>Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ мСню сайта</title>

<style type="text/css">
.navigation {
   list-style: none; /* ΠžΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ отобраТСния ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ². */
}
.navigation li {
   float: left; /* ВыстраиваниС элСмСнтов списка Π² ΠΎΠ΄ΠΈΠ½ ряд. */
   margin-right: 1px; /* созданиС отступов для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ сливались ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню. */
   font-family: Verdana, Arial, Helvetica, sans-serif; /* Π£ΠΊΠ°Π·Π°Π½ΠΈΠ΅ Ρ‚ΠΈΠΏΠ° ΡˆΡ€ΠΈΡ„Ρ‚Π°. */
   font-size: 14px; /* Π Π°Π·ΠΌΠ΅Ρ€ тСкста Π² ссылках. */
}
.navigation li a {
   display: block; /* ИзмСнСниС отобраТСния Π½Π° Π±Π»ΠΎΡ‡Π½ΠΎΠ΅ для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π·Π°Π΄Π°Ρ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы. */
   padding: 15px 20px;  /* Π’Π½ΡƒΡ‚Ρ€ΠΈ Π±Π»ΠΎΡ‡Π½Ρ‹Π΅ отступы. */
   background: #0db5b5; /* Π¦Π²Π΅Ρ‚ Π±Π»ΠΎΠΊΠΎΠ² мСню. */
   color: #3f3f3f; /* Π¦Π²Π΅Ρ‚ тСкста Π² Π±Π»ΠΎΠΊΠ°Ρ… мСню. */
   text-decoration: none; /* УстранСниС подчёркивания ссылок.  */
   position: relative; /* Π­Ρ‚ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΈ использовании Internet Explorer 6 для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ссылка ΠΏΠΎ всСй своСй ΠΏΠ»ΠΎΡ‰Π°Π΄ΠΈ Π±Ρ‹Π»Π° «кликабСльной». */
}
.navigation li a:hover {
   background: #92d3d3; /* Π¦Π²Π΅Ρ‚ Π±Π»ΠΎΠΊΠ° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора. */
   color: #6b6b6b;  /* Π¦Π²Π΅Ρ‚ тСкста ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора. */
}
</style>
</head>
<body>
<ul> 
   <!-- ОписаниС ссылок Π² мСню ΠΈ сами ссылки. -->
   <li><a href="https://www.internet-technologies.ru/news" target="_blank">Новости</a></li>
   <li><a href="https://www.internet-technologies.ru/articles" target="_blank">Π‘Ρ‚Π°Ρ‚ΡŒΠΈ</a></li>
   <li><a href="https://www.internet-technologies.ru/templates/" target="_blank">Π¨Π°Π±Π»ΠΎΠ½Ρ‹</a></li>
   <li><a href="https://www.internet-technologies.ru/books" target="_blank">Книги</a></li>
   <li><a href="https://www.internet-technologies.ru/scripts" target="_blank">Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹</a></li>
   <li><a href="https://www. internet-technologies.ru/lessons" target="_blank">Π’ΠΈΠ΄Π΅ΠΎ</a></li>
   <li><a href="http://talk.internet-technologies.ru/" target="_blank">Π€ΠΎΡ€ΡƒΠΌ</a></li>
</ul>
<body>
</body>
</html>

Π’ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ ΠΈΡ‚ΠΎΠ³Π΅ получаСтся ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ мСню:

Код Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню записываСтся Ρ‚Π°ΠΊ:

<head>
<title>Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ мСню сайта</title>
<style type="text/css">
.navigation {
   list-style: none; /* ΠžΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ отобраТСния ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ². */
   width: 120px;  /* Π¨ΠΈΡ€ΠΈΠ½Π° мСню. */
}
.navigation li {
   margin-top: 5px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ ΠΌΠ΅ΠΆΠ΄Ρƒ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ ΠΏΠΎ высотС, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΉ для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню Π½Π΅ сливались */
   font-family: Verdana, Arial, Helvetica, sans-serif; /* Π’ΠΈΠΏ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню */
   font-size: 14px; /* Π Π°Π·ΠΌΠ΅Ρ€ тСкста мСню */
}
.navigation li a {
   display: block; /* ИзмСнСниС отобраТСния Π½Π° Π±Π»ΠΎΡ‡Π½ΠΎΠ΅ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π·Π°Π΄Π°Ρ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы.  */
   padding: 4px 15px;  /* ΠžΡ‚ΡΡ‚ΡƒΠΏΡ‹ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π±Π»ΠΎΠΊΠΎΠ².  */
   background: #0db5b5; /* Π¦Π²Π΅Ρ‚ Π±Π»ΠΎΠΊΠΎΠ² мСню. */
   color: #3f3f3f; /* Π¦Π²Π΅Ρ‚ тСкста Π² Π±Π»ΠΎΠΊΠ°Ρ… мСню. */
   text-decoration: none; /* УстранСниС подчёркивания ссылок. */
   position: relative; /* Π­Ρ‚ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΈ использовании Internet Explorer 6 для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ссылка ΠΏΠΎ всСй своСй ΠΏΠ»ΠΎΡ‰Π°Π΄ΠΈ Π±Ρ‹Π»Π° «кликабСльной». */
}
.navigation li a:hover {
   background: #92d3d3; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ */
   color: #6b6b6b;  /* Π¦Π²Π΅Ρ‚ тСкста ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ */
}
</style>
</head>
<body>
<!-- ОписаниС ссылок Π² мСню ΠΈ сами ссылки. -->
<ul> 
   <li><a href="https://www.internet-technologies.ru/news" target="_blank">Новости</a></li>
   <li><a href="https://www.internet-technologies.ru/articles" target="_blank">Π‘Ρ‚Π°Ρ‚ΡŒΠΈ</a></li>
   <li><a href="https://www.internet-technologies.ru/templates/" target="_blank">Π¨Π°Π±Π»ΠΎΠ½Ρ‹</a></li>
   <li><a href="https://www.internet-technologies. ru/books" target="_blank">Книги</a></li>
   <li><a href="https://www.internet-technologies.ru/scripts" target="_blank">Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹</a></li>
   <li><a href="https://www.internet-technologies.ru/lessons" target="_blank">Π’ΠΈΠ΄Π΅ΠΎ</a></li>
   <li><a href="http://talk.internet-technologies.ru/" target="_blank">Π€ΠΎΡ€ΡƒΠΌ</a></li>
</ul>
<body>
</body>
</html>

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ мСню, ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½ΠΎΠ΅ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°, выглядит Ρ‚Π°ΠΊ:

Π ΡƒΠΊΠΎΠ²ΠΎΠ΄ΡΡ‚Π²ΡƒΡΡΡŒ всСми Π²Ρ‹ΡˆΠ΅ΠΏΠ΅Ρ€Π΅Ρ‡ΠΈΡΠ»Π΅Π½Π½Ρ‹ΠΌΠΈ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ°ΠΌΠΈ, ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘ΠΌ ΠΊΠΎΠ΄ для простого Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню:

<ul>
  <li><a href="https://www.internet-technologies.ru/news">Новости</a></li>
  <li><a href="https://www.internet-technologies.ru/articles" target="_blank">Π‘Ρ‚Π°Ρ‚ΡŒΠΈ</a>
    <ul>
      <li><a href="#">Бсылка 1</a></li>
      <li><a href="#">Бсылка 2</a></li>
      <li><a href="#">Бсылка 3</a></li>
    </ul>
  </li>
  <li><a href="https://www. internet-technologies.ru/templates/">Π¨Π°Π±Π»ΠΎΠ½Ρ‹</a>
    <ul>
      <li><a href="#">Бсылка 1</a></li>
    </ul>
  </li>
  <li><a href="https://www.internet-technologies.ru/books">Книги</a></li>
  <li><a href="https://www.internet-technologies.ru/scripts">Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹</a></li>
  <li><a href="https://www.internet-technologies.ru/lessons">Π’ΠΈΠ΄Π΅ΠΎ</a></li>
  <li><a href="http://talk.internet-technologies.ru">Π€ΠΎΡ€ΡƒΠΌ</a></li>
</ul>

<style type="text/css">	

#menu {
  background: #0db5b5;
  width: 60%;
  padding:1;
  text-align: center;
  float:left;
  font-family: Verdana, Arial, Helvetica, sans-serif; 
}
#menu a {
  color: #3f3f3f;
  text-decoration: none;
}
#menu a:hover {
  color: #6b6b6b;
}
#menu ul {
  padding:0;
  margin:0;
}
#menu li {
  list-style: none;
  padding: 0 15px 0 0;
  width:100px;
  margin: 0 auto;
  float:left;
  line-height: 50px;
}
#menu li ul { 
  position:absolute;
  display: none;
} 
#menu li ul li {
  float: none;
  display: inline;
  width:100px;
  line-height:35px;
}
#menu li ul li:hover {
  background: #c392b;
}
#menu li:hover ul {
  display:block;
}
#menu li ul li { 
  display: block; 
  background:#92d3d3;
}
</style>

ΠŸΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ Ρ‚Π°ΠΊΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню:

Как Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅, достаточно простая HTML Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° ΠΈ всСго нСсколько строк CSS ΠΊΠΎΠ΄Π° ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ простоС, Π½ΠΎ ΡΡ‚ΠΈΠ»ΡŒΠ½ΠΎΠ΅ мСню, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π°ΠΉΠ΄Ρ‘Ρ‚ своС мСсто Π² ΠΊΠ°ΠΊΠΎΠΌ-Π»ΠΈΠ±ΠΎ Π²Π΅Π±-сайтС. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ.

Π–Π΅Π»Π°Π΅ΠΌ ΡƒΠ΄Π°Ρ‡ΠΈ!

Π’ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ 1. Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню для сайта с ΠΏΠΎΠΌΠΎΡ‰ΡŒ html ΠΈ css Π½Π° WordPress

НС Ρ‚Π°ΠΊ Π΄Π°Π²Π½ΠΎ, Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ· Ρ€Π°Π±ΠΎΡ‡ΠΈΡ… сайтов, ΠΌΠ½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню. Ну Π΄Π΅Π»ΠΎ Π²Ρ€ΠΎΠ΄Π΅ пустяковоС, Π΄ΡƒΠΌΠ°Π» ΠΏΠΎ быстрому сдСлаю ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Ρƒ ΠΎΠΏΠ»Π°Ρ‚Ρƒ, Π½ΠΎ Π½Π΅ Ρ‚ΡƒΡ‚ Ρ‚ΠΎ Π±Ρ‹Π»ΠΎ =) Π‘Π½Π°Ρ‡Π°Π»Π° я Ρ€Π΅ΡˆΠΈΠ» Π²Π·ΡΡ‚ΡŒ ΠΊΠΎΠ΄ html ΠΈ css ΠΈΠ· ΠΊΠ°ΠΊΠΈΡ… Π½ΠΈ Π±ΡƒΠ΄ΡŒ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Ρ… ΡƒΡ€ΠΎΠΊΠΎΠ² ΠΈ всС ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠΎ ΡˆΠ°Π±Π»ΠΎΠ½Ρƒ. Но послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ я ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ» Ρ‡Ρ‚ΠΎ Π½Π° ΠΌΠ½ΠΎΠ³ΠΈΡ… Π±Π»ΠΎΠ³Π°Ρ… ΠΊΠΎΠ΄ Π΄Π°ΡŽΡ‚ Π½Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ — Π½Π΅ Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ, я Ρ€Π΅ΡˆΠΈΠ» всС ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ сам… И всС оказалось достаточно просто ΠΈ быстро. ΠŸΠΎΠΊΠ°ΠΆΡƒ Π²Π°ΠΌ html ΠΈ cssΒ ΠΊΠΎΠ΄ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню — Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ πŸ™‚ Π’Π°ΠΊΠΆΠ΅ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ ΡƒΠ·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Π½Π° WordPress сайтС.

html ΠΊΠΎΠ΄ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню — скилСт

html ΠΊΠΎΠ΄ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ², ΠΊΠ°ΠΊ для Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ, Ρ‚Π°ΠΊ ΠΈ для Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ количСство ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню, копируя Ρ‡Π°ΡΡ‚ΡŒ ΠΊΠΎΠ΄Π° ΠΈ вставляя Π² Π½ΡƒΠΆΠ½ΠΎΠ΅ мСсто.

<ul>
        <li><a href="/">ПодмСню 1</a>
Β Β  Β Β Β  Β Β Β  Β <ul>
Β Β  Β Β Β  Β Β Β  Β Β Β  Β <li><a href="/" >ΠŸΡƒΠ½ΠΊΡ‚ подмСню 1</a></li>
Β Β  Β Β Β  Β Β Β  Β Β Β  Β <li><a href="/">ΠŸΡƒΠ½ΠΊΡ‚ подмСню 2</a></li>
Β Β  Β Β Β  Β Β Β  Β Β Β  Β <li><a href="/">ΠŸΡƒΠ½ΠΊΡ‚ подмСню 3</a></li>
Β Β  Β Β Β  Β Β Β  Β </ul>
Β Β  Β Β Β  Β </li>

<li><a href="/">ПодмСню 2</a>
Β Β  Β Β Β  Β Β Β  Β Β Β  Β <ul>
Β Β  Β Β Β  Β Β Β  Β Β Β  Β Β Β  Β <li><a href="/">ΠŸΡƒΠ½ΠΊΡ‚ подмСню 1</a></li>
Β Β  Β Β Β  Β Β Β  Β Β Β  Β Β Β  Β <li><a href="/">ΠŸΡƒΠ½ΠΊΡ‚ подмСню 2</a></li>
Β Β  Β Β Β  Β Β Β  Β Β Β  Β Β Β  Β <li><a href="/">ΠŸΡƒΠ½ΠΊΡ‚ подмСню 3</a></li>
Β Β  Β Β Β  Β Β Β  Β Β Β  Β </ul>
Β Β  Β Β Β  Β Β Β  Β </li>
</ul>

CSS ΠΊΠΎΠ΄ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню

Π’ΠΎΡ‚ Ρ‚Π°ΠΊΠΎΠ΅ мСню ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΌΠΎΠΈΠΌ способом. ..

Π”Π°Π»Π΅Π΅, я ΠΏΡ€ΠΈΠ²ΠΎΠΆΡƒ Π²Π°ΠΌ css ΠΊΠΎΠ΄ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню. Π’Π½Π΅ΡˆΠ½ΠΈΠΉ Π²ΠΈΠ΄ мСню достаточно прост, Π½ΠΎ ΠΏΡ€ΠΈ Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹Ρ… знаниях css Π²Ρ‹ смоТСтС ΠΏΡ€ΠΈΠ΄Π°Ρ‚ΡŒ этому мСню Ρ‚ΠΎΡ‚ ΡΡ‚ΠΈΠ»ΡŒ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ‚ ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ вашСго сайта.

#mymenu {
Β Β  Β float: left;
Β Β  Β width: 100%;
Β Β  Β margin: 20px 10px;
Β Β  Β list-style: none;
}

#mymenu li {
Β Β  Β float: left;
Β Β  Β width: auto;
Β Β  Β padding: 0 10px;
Β Β  Β font-size: 18px;
}

#mymenu li ul {
Β Β  Β display: none;
Β Β  Β width: 200px;
}

#mymenu li:hover ul {
Β Β  Β display: block;
Β Β  Β position: absolute;
Β Β  Β list-style: none;
Β Β  Β margin: 0;
Β Β  Β padding: 0;
}

#mymenu li ul li {
Β Β  Β float: left;
Β Β  Β width: 200px;
Β Β  Β padding: 5px 0;
Β Β  Β font-size: 14px;
}

Β CSS ΠΊΠΎΠ΄ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню

А Π²ΠΎΡ‚ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню для вашСго сайта

#mymenu {
	float: left;
	width: 150px;
	height: auto;
	margin: 20px 10px;
	list-style: none;
}

#mymenu li {
	display: block !important;
	width: auto;
	padding: 0 10px;
	font-size: 18px;
}

#mymenu li ul {
	display: none;
	width: 200px;
}

#mymenu li:hover ul {
	display: block;
	list-style: none;
	margin: 0 0 0 0px;
	padding: 0;
}

#mymenu li ul li {
	float: left;
	width: 200px;
	padding: 5px 0;
	font-size: 14px;
}

Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС мСню Π²Ρ‹ΠΏΠ°Π΄Π°Π΅Ρ‚ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ Π²Π½ΠΈΠ·. Но Ссли Π² CSS стилях Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π²ΠΎΡ‚ этот ΠΊΠΎΠ΄, подмСню Π²Ρ‹ΠΏΠ°Π΄Π°Π΅Ρ‚ Π²ΠΏΡ€Π°Π²ΠΎ:

#mymenu li:hover ul {
	display: block;
	list-style: none;
	margin: 0 0 0px 100px;
	position: absolute;
	padding: 0;
}

Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню для сайта

Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌ для сайта, гдС планируСтся мСню с большим количСством Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΡ… ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ². ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²Π° Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню — это экономия мСста, удобство использования ΠΈ простота изготовлСния πŸ˜‰ Π’ Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ мСню я Π½Π΅ использовал Π½ΠΈΡ‡Π΅Π³ΠΎ, ΠΊΡ€ΠΎΠΌΠ΅ HTML ΠΈ CSS, Ρ‡Ρ‚ΠΎ Π΄Π°Π΅Ρ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ ΠΏΠ»ΡŽΡΡ‹. Π­Ρ‚ΠΎ мСню ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹ΠΌ — хотя, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π΅ Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½ΠΎ ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒΡΡ, Π½ΠΎ Π±Ρ‹Π²Π°ΡŽΡ‚ случаи, Ρ‡Ρ‚ΠΎ это просто Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ.

Если Ρƒ вас ΠΊΠΎΠ΄ откаТСтся Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ — ΠΏΠΈΡˆΠΈΡ‚Π΅ Π² ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ, ΠΏΠΎΠ΄ΠΏΡ€Π°Π²Π»ΡŽ Π²Π°ΠΌ Π»ΠΈΡ‡Π½ΠΎ πŸ™‚

Π£Π΄Π°Ρ‡Π½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹! πŸ˜‰

CSS мСню. Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню. Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ CSS мСню. Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ CSS мСню.

ЗдравствуйтС, ΡƒΠ²Π°ΠΆΠ°Π΅ΠΌΡ‹Π΅ посСтитСли ΠΌΠΎΠ΅Π³ΠΎ скромного Π±Π»ΠΎΠ³Π° для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… Π²Π΅Π±Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΈ web мастСров ZametkiNaPolyah. ru. Π― Ρ€Π΅ΡˆΠΈΠ» ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½ΠΎΠ²ΡƒΡŽ Ρ€ΡƒΠ±Ρ€ΠΈΠΊΡƒ Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΈ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ сайтов, Π² этой Ρ€ΡƒΠ±Ρ€ΠΈΠΊΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΌΠ½ΠΎΠ³ΠΎ вкусного ΠΈ интСрСсного. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ, здСсь я Π±ΡƒΠ΄Ρƒ ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΎ Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ…. Π’Π΅ΠΌΠ° сСгодняшнСй ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΈΒ β€” созданиС CSS мСню, которая находится Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ CSS мСню.

Π›ΡŽΠ±ΠΎΠ΅ CSS мСню Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΎΡ‚Π²Π΅Ρ‡Π°Ρ‚ΡŒ нСскольким трСбованиям: CSS мСню Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌ, ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½Ρ‹ΠΌ, доступным для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. Π§Ρ‚ΠΎΠ±Ρ‹ мСню сайта Π±Ρ‹Π»ΠΎ ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½Ρ‹ΠΌ ΠΈ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌ Π΅Π³ΠΎ слСдуСт Π΄Π΅Π»Π°Ρ‚ΡŒ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΌ. ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ CSS мСню Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² старых Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ IE6. Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню ΡƒΠ΄ΠΎΠ±Π½ΠΎ Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Π½Π΅ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ ΠΌΠ½ΠΎΠ³ΠΎ мСста Π½Π° Π²Π΅Π±-страницС. Π’ Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ JavaScript ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° JQueryΒ β€” Π° это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Π±ΡƒΠ΄Π΅Ρ‚ доступно для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, Ρƒ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π² настройках Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹ скрипты.

И Ρ‚Π°ΠΊ, сСгодня ΠΌΡ‹ создадим Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΡƒΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ ΠΏΠΎ сайту ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΡƒΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ, ΠΏΡ€ΠΈ этом ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ HTML ΠΈ CSS.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ CSS мСню. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню. Π¨Π°Π³ 1Β β€” создаСм Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ HTML мСню.

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ:

Для Π½Π°Ρ‡Π°Π»Π° ΠΌΡ‹ создаСм ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML список ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Ρ‚Π΅Π³Π° <ul> ΠΈ Ρ‚Π΅Π³Π° <li>:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>БозданиС CSS мСню</title>
</head>
<body>
<span><span><>
</span></span><ul>
<li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>
<li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡƒΠ½ΠΊΡ‚
<ul>
<li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</li>
<li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</li>
</ul>
</li>
<li>Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚
<ul>
<li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</li>
<li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</li>
<li>Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</li>
</ul>
</li>
<li>Π§Π΅Ρ‚Π²Π΅Ρ€Ρ‚Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>
</ul>
</body>

</html>


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

<title>БозданиС CSS мСню</title>

</head>

<body>

<span><span><>

</span></span><ul>

<li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>

<li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡƒΠ½ΠΊΡ‚

<ul>

<li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</li>

<li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</li>

</ul>

</li>

<li>Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚

<ul>

<li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</li>

<li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</li>

<li>Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</li>

</ul>

</li>

<li>Π§Π΅Ρ‚Π²Π΅Ρ€Ρ‚Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>

</ul>

</body>

Β 

</html>

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Ρ‚ΠΈΠΏΠ° Ρ‚Π°ΠΊΠΎΠ³ΠΎ списка:

  • ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚
  • Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡƒΠ½ΠΊΡ‚
    • ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚
    • Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚
  • Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚
    • ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚
    • Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚
    • Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚
  • Π§Π΅Ρ‚Π²Π΅Ρ€Ρ‚Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, это Π΅Ρ‰Π΅ Π½Π΅ мСню ΠΈ Π΄Π°ΠΆΠ΅ Π½Π΅ навигация, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π½ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² HTML списка Π½Π΅ являСтся ссылкой. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚ нашСго HTML списка ссылкой. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρƒ нас получится Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ HTML мСню, Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй (css) ΠΌΡ‹ Π΅Ρ‰Π΅ ΠΏΠΎΠΊΠ° Π½Π΅ Π±ΡƒΠ΄Π΅ΠΌ Ρ‚Ρ€ΠΎΠ³Π°Ρ‚ΡŒ ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ HTML списка стали ссылками, содСрТимоС ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ элСмСнта <li> Π²Π½ΡƒΡ‚Ρ€ΡŒ Ρ‚Π΅Π³Π° <a>:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>БозданиС CSS мСню</title>
</head>
<body>
div>
<ul>
<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>
</ul>
</li>
<li><a href=»#»>Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚</a>
<ul>
<li><a href=»#»>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li>
<li><a href=»#»>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li>
</ul>
</li>
<li><a href=»#»>Π§Π΅Ρ‚Π²Π΅Ρ€Ρ‚Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚</a></li>
</ul>
<div>
</body>

</html>


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

<title>БозданиС CSS мСню</title>

</head>

<body>

div>

<ul>

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

</ul>

</li>

<li><a href=»#»>Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚</a>

<ul>

<li><a href=»#»>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li>

<li><a href=»#»>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li>

</ul>

</li>

<li><a href=»#»>Π§Π΅Ρ‚Π²Π΅Ρ€Ρ‚Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚</a></li>

</ul>

<div>

</body>

Β 

</html>

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ HTML мСню. Π£ Ρ‚Π΅Π³Π° <a> Π΅ΡΡ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ href, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ слСдуСт ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ адрСс страницы, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ вСсти ссылка, Ρƒ мСня Π½Π΅Ρ‚ нСобходимости этого Π΄Π΅Π»Π°Ρ‚ΡŒ, поэтому Π² качСствС адрСса я ΡƒΠΊΠ°Π·Π°Π» символ # ΠΈΠ»ΠΈ Π·Π°Π±ΠΎΠΉ. Бсылки, Ρƒ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π² качСствС значСния Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° href ΡƒΠΊΠ°Π·Π°Π½ #, Π½ΠΈΠΊΡƒΠ΄Π° Π½Π΅ Π²Π΅Π΄ΡƒΡ‚. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅: Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ HTML мСню я помСстил Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ <div>, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π² спСцификации HTML 4 Π΅ΡΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ: Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнта <body> ΠΌΠΎΠ³ΡƒΡ‚ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π±Π»ΠΎΡ‡Π½Ρ‹Π΅ элСмСнты ΠΈ элСмСнты <ins> ΠΈ <del>. Π£ Ρ‚Π΅Π³Π° <div> Π΅ΡΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ id со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ Β«blockΒ». Π£ ΠΊΠΎΡ€Π½Π΅Π²ΠΎΠ³ΠΎ Ρ‚Π΅Π³Π° <ul> Π΅ΡΡ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ id со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ Β«hnavΒ», этот Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ потрСбуСтся Π½Π°ΠΌ для создания Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ CSS мСню.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ CSS мСню. Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню. Π¨Π°Π³ 2Β β€” создаСм Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ CSS мСню.

Π”Π°Π»Π΅Π΅ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ стили CSS для нашСго Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ мСню. Для Π½Π°Ρ‡Π°Π»Π°, Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π·Π°Π΄Π°Π΄ΠΈΠΌ ΡΡ‚ΠΈΠ»ΡŒ для ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° <ul> со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ hnav Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° id, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΎΠ±Ρ‰ΠΈΠΉ ΡΡ‚ΠΈΠ»ΡŒ для нашСго Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню:

#hnav {
list-style: none;
margin: 0;
padding: 0;
font-size: 1.2em;
float: right;
position: relative

}



#hnav {

list-style: none;

margin: 0;

padding: 0;

font-size: 1.2em;

float: right;

position: relative

Β 

}

Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΎ пройдСмся ΠΏΠΎ CSS свойствам ΠΈ посмотри для Ρ‡Π΅Π³ΠΎ ΠΎΠ½ΠΈ Π½ΡƒΠΆΠ½Ρ‹. ΠŸΠ΅Ρ€Π²ΠΎΠ΅ CSS свойство, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π±Ρ‹Π»ΠΎ Π·Π°Π΄Π°Π½ΠΎ list-style со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ none, Π΄Π°Π½Π½ΠΎΠ΅ свойство позволяСт ΠΈΠ·Π±Π°Π²ΠΈΡ‚ΡŒΡΡ ΠΎΡ‚ ΠΌΠ΅Ρ€Π·ΠΊΠΈΡ… ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ² HTML списка, Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΡ… ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню, Ρƒ Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… HTML элСмСнтов ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ останутся.

Бвойство margin Π΄Π΅Π»Π°Π΅Ρ‚ Π½ΡƒΠ»Π΅Π²Ρ‹ΠΌ отступ ΠΎΡ‚ края элСмСнта ul. Бвойство paddin ΡƒΠ±ΠΈΡ€Π°Π΅Ρ‚ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы HTML элСмСнта ul. Бвойство font-size Π·Π°Π΄Π°Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ тСкста ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² нашСго CSS мСню. Бвойство float позволяСт Π²Ρ‹Ρ€Π°Π²Π½ΡΡ‚ΡŒ CSS мСню, Π² нашСм случаС ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ. Бвойство position со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ relative ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ ul ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΅Π³ΠΎ исходного мСста.

ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΌΡ‹ Π·Π°Π΄Π°Π»ΠΈ ΠΎΠ±Ρ‰ΠΈΠΉ ΡΡ‚ΠΈΠ»ΡŒ для нашСго Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню, ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ стили для всСх Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΡ… ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ:

#hnav li {

float: left;

position: relative;

}



#hnav li {

Β 

float: left;

Β 

position: relative;

Β 

}

Для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ элСмСнта li, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ находятся Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ul ΠΌΡ‹ Π·Π°Π΄Π°Π΅ΠΌ Π΄Π²Π° свойства: float со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ left (Ρ‚Π΅ΠΌ самым ΠΌΡ‹ добиваСмся Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ нашС CSS мСню стало Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ) ΠΈ ΠΎΠΏΡΡ‚ΡŒ ΠΆΠ΅, Π·Π°Π΄Π°Π΅ΠΌ свойство position со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ relative, Ρ‡Ρ‚ΠΎΠ±Ρ‹ элСмСнты заняли своС мСсто.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π·Π°Π΄Π°Ρ‚ΡŒ стили, для содСрТимого ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ² li, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ стили для ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ CSS мСню:

#hnav li a{
float: left;
display: block;
padding: 4px;
text-decoration: none;
color: #666;
text-transform: uppercase;
margin-right: 10px;
}



#hnav li a{

float: left;

display: block;

padding: 4px;

text-decoration: none;

color: #666;

text-transform: uppercase;

margin-right: 10px;

}

Бвойство display ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ block, это Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ Π½Π°ΠΌ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ нашСго CSS мСню Π±ΡƒΠ΄ΡƒΡ‚ вСсти сСбя ΠΊΠ°ΠΊ Π±Π»ΠΎΡ‡Π½Ρ‹Π΅ (Π² Π΄Π°Π½Π½ΠΎΠΌ случаС ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ <a>, Ρ‚Π΅Π³ <a> сам ΠΏΠΎ сСбС строчный элСмСнт). Бвойство padding устанавливаСт Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌΠΈ мСню, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ‚Π΅ Π½Π΅ Π½Π°ΠΊΠ»Π°Π΄Ρ‹Π²Π°Π»ΠΈΡΡŒ Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π°. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ none свойства text-decoration позволяСт ΡƒΠ±Ρ€Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Ρƒ ссылок(мСню ΠΆΠ΅ ΠΈΠ· ссылок состоит). Бвойство color Π·Π°Π΄Π°Π΅Ρ‚ Ρ†Π²Π΅Ρ‚ тСкста Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° <a>. Бвойство text-transform: uppercase; Π·Π°Π΄Π°Π΅Ρ‚ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ тСкста нашСго CSS мСню, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ, вСсь тСкст Π±ΡƒΠ΄Π΅Ρ‚ написан прописными Π±ΡƒΠΊΠ²Π°ΠΌΠΈ.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ Ρ‚ΠΎ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄ΡƒΡ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π° Π½ΠΈΡ… курсора ΠΌΡ‹ΡˆΠΊΠΈ:

#hnav li:hover a,
#hnav li a:hover
{
background: #999;
color: #fff;
}



#hnav li:hover a,

#hnav li a:hover

{

background: #999;

color: #fff;

}

Бвойство color измСняСт Ρ†Π²Π΅Ρ‚ тСкста ΠΏΡƒΠ½ΠΊΡ‚Π° мСню ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π° Π½Π΅Π³ΠΎ курсора ΠΌΡ‹ΡˆΠΈ. Бвойство background Π·Π°Π΄Π°Π΅Ρ‚ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΏΡƒΠ½ΠΊΡ‚Π° CSS мСню ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ курсора Π½Π° ΠΏΡƒΠ½ΠΊΡ‚.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Β«ΡΠΏΡ€ΡΡ‚Π°Ρ‚ΡŒΒ» Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню:

#hnav ul {display: none;}



#hnav ul {display: none;}

ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΌΡ‹ «спрятали» ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню, Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ эти ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ Π²Ρ‹ΠΏΠ°Π΄Π°Π»ΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ курсора:

#hnav li:hover ul {display: block;}

#hnav ul
{
float: none;
position: absolute;
list-style: none;
margin: 0;
padding: 0;
top: 1.8em;
left: 0;
}

#hnav ul li
{
float: none;
clear: none;
margin: 0;
padding: 0;
width: auto;
color: #999;
}


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

#hnav li:hover ul {display: block;}

Β 

#hnav ul

{

float: none;

position: absolute;

list-style: none;

margin: 0;

padding: 0;

top: 1.8em;

left: 0;

}

Β 

#hnav ul li

{

float: none;

clear: none;

margin: 0;

padding: 0;

width: auto;

color: #999;

}

Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС ΠΌΡ‹ добились Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‚ ΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡ„ΠΎΡ€ΠΌΠΈΠ»ΠΈ нашС мСню, сдСлали Π΅Π³ΠΎ Π±ΠΎΠ»Π΅Π΅ Ρ‡ΠΈΡ‚Π°Π±Π΅Π»ΡŒΠ½Ρ‹ΠΌ.

ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΌΡ‹ Π·Π°Π΄Π°Π»ΠΈ стили для основных ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню, ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ стили ΠΈ для Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню, Π·Π°Π΄Π°Ρ‚ΡŒ Ρ‚ΠΎ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄ΡƒΡ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π° Π½ΠΈΡ… курсора ΠΌΡ‹ΡˆΠΈ ΠΈ Ρ‚ΠΎ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄ΡƒΡ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ посСщСнныС ΠΏΡƒΠ½ΠΊΡ‚Ρ‹:

#hnav li:hover ul li a,
#hnav ul li a
{
line-height: 200%;
display: block;
padding: 0 6px 0 0;
float: none;
text-transform: lowercase;
color: #999;
background: none;
}

#hnav li:hover ul li a:hover,
#hnav ul li a:hover
{
background: none;
color: #000;
}

<span>


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

#hnav li:hover ul li a,

#hnav ul li a

{

line-height: 200%;

display: block;

padding: 0 6px 0 0;

float: none;

text-transform: lowercase;

color: #999;

background: none;

}

Β 

#hnav li:hover ul li a:hover,

#hnav ul li a:hover

{

background: none;

color: #000;

}

Β 

<span>

Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, ΠΌΡ‹ создали Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ CSS мСню,Β ΠΏΡ€ΠΈ этом, Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ JavaScript. МоТно ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ созданию Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ CSS мСню.

Π’Π°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ CSS мСню:

Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ CSS мСню. Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ CSS мСню.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ CSS мСню. Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню. Π¨Π°Π³ 3Β β€” создаСм Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ CSS мСню.

ΠŸΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΠΌ ΠΊ созданию Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ CSS мСню. Для Π½Π°Ρ‡Π°Π»Π° создаСм ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML список, Ρ‚ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊΠΎΠΉ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ для Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>БозданиС CSS мСню</title>
</head>
<body>
div>
<ul>
<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>
</ul>
</li>
<li><a href=»#»>Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚</a>
<ul>
<li><a href=»#»>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li>
<li><a href=»#»>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li>
</ul>
</li>
<li><a href=»#»>Π§Π΅Ρ‚Π²Π΅Ρ€Ρ‚Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚</a></li>
</ul>
<div>
</body>

</html>

<span>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

<title>БозданиС CSS мСню</title>

</head>

<body>

div>

<ul>

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

</ul>

</li>

<li><a href=»#»>Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚</a>

<ul>

<li><a href=»#»>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li>

<li><a href=»#»>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li>

</ul>

</li>

<li>

CSS Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Π°Ρ панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ


Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Π°Ρ панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΡƒΡŽ панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ элСмСнты
Π²Π½ΡƒΡ‚Ρ€ΠΈ списка, ΠΏΠΎΠΌΠΈΠΌΠΎ ΠΊΠΎΠ΄Π° с ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΉ страницы:

ОбъяснСниС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ