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; }
Π§ΡΠΎ Π±ΡΠ»ΠΎ ΡΠ΄Π΅Π»Π°Π½ΠΎ:
- Π‘Π±ΡΠΎΡ ΡΡΠΈΠ»Π΅ΠΉ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ ΡΠ΅Π³Π°
ul
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ, ΠΏΡΡΠ΅ΠΌ ΠΏΡΠΈΡΠ²ΠΎΠ΅Π½ΠΈΡ ΡΠ΅Π³Π°ΠΌ
li
, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΌ ΠΏΡΠ½ΡΠΊΡ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ, ΡΠ²ΠΎΠΉΡΡΠ²Π°float: left
- Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΠΎΡΡΡΡΠΏΠΎΠ² Π΄Π»Ρ ΠΏΡΠ½ΠΊΡΠΎΠ² ΠΌΠ΅Π½Ρ
ΠΠΎΡΡΠ½Π΅Π½ΠΈΡ:
ΠΠΎΠ½ΡΡΡΡΠΊΡΠΈΡ .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 ΡΠ°ΠΉΠ» ΠΈ Π³ΠΎΡΠΎΠ²ΠΎ. ΠΠ΅ΡΠΌΠΎΡΡΡ Π½Π° ΠΏΡΠΎΡΡΠΎΡΡ ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΡΠΌ. Π‘ΡΠΈΠ»ΠΈ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΈΡΡ ΠΏΠΎΠ΄ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ»ΡΠ½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΡΠΎΠ²Π½Π΅ΠΉ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΡΡΠΈ. Π₯ΠΎΡΡ Π΄Π²Π° Ρ
ΠΎΡΡ Π΄Π΅ΡΡΡΡ ΡΡΠΎΠ²Π½Π΅ΠΉ. ΠΠΎΠ΄ ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΎΡΡΠ°ΡΡΡΡ ΡΠ΅ΠΌ ΠΆΠ΅. Π ΡΡΠ°ΡΡΠ΅ ΠΎΠΏΠΈΡΠ°Π½Ρ ΡΡΠΈ Π²ΠΈΠ΄Π° ΠΌΠ΅Π½Ρ, Π½ΠΎ Π΅ΡΠ»ΠΈ Π²Ρ ΡΠΎΠ»ΡΠΊΠΎ Π½Π°ΡΠΈΠ½Π°Π΅ΡΠ΅ ΡΠ°Π·Π±ΠΈΡΠ°ΡΡΡΡ Π² Π²ΡΡΡΡΠΊΠ΅ ΡΠΎΠ²Π΅ΡΡΡ ΡΠΈΡΠ°ΡΡ ΡΠ½Π°ΡΠ°Π»Π°. Π’Π°ΠΊ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΡΠ΅ ΠΏΠΎΠ½ΡΡΡ.
- ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ
- ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Ρ ΠΎΠ΄Π½ΠΈΠΌ ΡΡΠΎΠ²Π½Π΅ΠΌ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΡΡΠΈ
- ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΡΠΎΠ²Π½ΡΠΌΠΈ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΡΡΠΈ
Π‘Π½Π°ΡΠ°Π»Π° ΡΠ΄Π΅Π»Π°Π΅ΠΌ 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 ΠΌΠ΅Π½Ρ:
- ΠΠ»Π°Π²Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ. ΠΡΠΎ ΡΠΏΠΈΡΠΎΠΊ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΡ ΡΡΡΠ»ΠΎΠΊ Π½Π° ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ°Π·Π΄Π΅Π»Ρ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°.
- ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ. Π’Π°ΠΊΠΎΠ΅ ΠΌΠ΅Π½Ρ ΠΈΠΌΠ΅Π΅Ρ ΠΈΠ΅ΡΠ°ΡΡ
ΠΈΡΠ΅ΡΠΊΡΡ ΡΡΡΡΠΊΡΡΡΡ ΠΈ Π±ΡΠ²Π°Π΅Ρ ΡΡΡΡ
ΡΠΈΠΏΠΎΠ²:
- ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ. Π Π°ΡΠΊΡΡΠ²Π°Π΅ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ Π½Π° ΠΏΡΠ½ΠΊΡ;
- ΠΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ ΡΠ°ΠΉΡΠ°. Π Π°ΡΠΊΡΡΠ²Π°Π΅ΡΡΡ ΠΏΡΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΠΎΠΌ ΠΏΡΠ½ΠΊΡΠ΅;
- Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π΄Π»Ρ 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 ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
Π§ΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ
Π²Π½ΡΡΡΠΈ ΡΠΏΠΈΡΠΊΠ°, ΠΏΠΎΠΌΠΈΠΌΠΎ ΠΊΠΎΠ΄Π° Ρ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ:
ΠΠ±ΡΡΡΠ½Π΅Π½ΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ°:
-
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π±Π»ΠΎΠΊ;
— ΠΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΡΡΠ»ΠΎΠΊ ΠΊΠ°ΠΊ Π±Π»ΠΎΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠ΅Π»ΠΎΠ΅
ΠΎΠ±Π»Π°ΡΡΡ ΡΡΡΠ»ΠΊΠΈ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½Π° (Π° Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΠΊΡΡ), ΠΈ ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ ΡΠΊΠ°Π·Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ
(Π° ΡΠ°ΠΊΠΆΠ΅ ΠΎΡΡΡΡΠΏΡ, ΠΏΠΎΠ»Ρ, Π²ΡΡΠΎΡΠ° ΠΈ Ρ. Π΄.Π΅ΡΠ»ΠΈ Ρ ΠΎΡΠΈΡΠ΅) -
ΡΠΈΡΠΈΠ½Π°: 60 ββΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
— ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±Π»ΠΎΠΊΠ° Π·Π°Π½ΠΈΠΌΠ°ΡΡ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ, Π΄ΠΎΡΡΡΠΏΠ½ΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΡ Ρ ΠΎΡΠΈΠΌ ΡΠΊΠ°Π·Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ 60 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ
ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠΈΡΠΈΠ½Ρ
- ΠΈ ΡΠ΄Π°Π»ΠΈΡΡ ΡΠΈΡΠΈΠ½Ρ ,
- ΠΈΠ»ΠΈ Π΄Π»Ρ ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΡΡΠ»ΠΎΠΊ.
ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ
border
Π²- , ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ Π²ΠΎΠΊΡΡΠ³ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ. ΠΡΠ»ΠΈ ΡΡ ΡΠΎΠΆΠ΅ Ρ
ΠΎΡΠ΅ΡΡ
- , ΠΊΡΠΎΠΌΠ΅
ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ:ΠΡΠΈΠΌΠ΅Ρ
ul {
border: 1px solid # 555;
}li {
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: ΠΏΠΎ ΡΠ΅Π½ΡΡΡ;Π½ΠΈΠΆΠ½ΡΡ Π³ΡΠ°Π½ΠΈΡΠ°: ΡΠ²Π΅ΡΠ΄ΠΎΠ΅ ΡΠ΅Π»ΠΎ 1px # 555;
}li: ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΡΠ΅Π±Π΅Π½ΠΎΠΊ {
Π½ΠΈΠΆΠ½ΡΡ Π³ΡΠ°Π½ΠΈΡΠ°: Π½Π΅Ρ;
}ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΠ°ΠΌ »
ΠΠΎΠ»Π½ΠΎΡΠΎΡΡΠΎΠ²Π°Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
Π‘ΠΎΠ·Π΄Π°ΡΡ ΠΏΠΎΠ»Π½ΠΎΡΠ°Π·ΠΌΠ΅ΡΠ½ΡΡ «Π»ΠΈΠΏΠΊΡΡ» Π±ΠΎΠΊΠΎΠ²ΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ:
ΠΡΠΈΠΌΠ΅Ρ
ul {
list-style-type: none;
ΠΌΠ°ΡΠΆΠ°: 0;
ΠΎΡΡΡΡΠΏ: 0;
ΡΠΈΡΠΈΠ½Π°:
25%;
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: # f1f1f1;
Π²ΡΡΠΎΡΠ°: 100%; / * ΠΠΎΠ»Π½Π°Ρ Π²ΡΡΠΎΡΠ° * /
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅; / *
Π‘Π΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΎΠ½ ΠΏΡΠΈΠ»ΠΈΠΏΠ°Π», Π΄Π°ΠΆΠ΅ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ * /
ΠΏΠ΅ΡΠ΅Π»ΠΈΠ²: Π°Π²ΡΠΎ; / * ΠΠΊΠ»ΡΡΠΈΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ, Π΅ΡΠ»ΠΈ Π² Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° * /
}ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΠ°ΠΌ »
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΡΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΠΌΠΎΠΆΠ΅Ρ Π½Π΅ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ .
135 CSS Menu
ΠΠΎΠ»Π»Π΅ΠΊΡΠΈΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ HTML ΠΈ CSS ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΊΠΎΠ΄Π°. ΠΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ Π°ΠΏΡΠ΅Π»ΡΡΠΊΠΎΠΉ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ 2019 Π³ΠΎΠ΄Π°. 25 Π½ΠΎΠ²ΠΈΠ½ΠΎΠΊ.
- ΠΠ΅Π³Π° ΠΠ΅Π½Ρ
- CSS ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
- ΠΡΡΠ³ΠΎΠ²ΡΠ΅ ΠΌΠ΅Π½Ρ CSS
- ΠΡΠΏΠ°Π΄Π°ΡΡΠΈΠ΅ ΠΌΠ΅Π½Ρ CSS
- ΠΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΠΌΠ΅Π½Ρ CSS
- ΠΠΎΠΊΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ CSS
- ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠ΅ ΠΌΠ΅Π½Ρ CSS
- ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠ΅ ΠΌΠ΅Π½Ρ CSS
- CSS Π‘ΠΊΠΎΠ»ΡΠ·ΡΡΠΈΠ΅ ΠΌΠ΅Π½Ρ
- CSS ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠΈΡΡ ΠΌΠ΅Π½Ρ
- CSS Off-Canvas ΠΌΠ΅Π½Ρ
- ΠΠ΅Π½Ρ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ
Π ΠΊΠΎΠ΄Π΅
ΠΠ°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°
ΠΠ°Π»ΠΈΠ²ΠΊΠ° ΡΠ΅ΠΊΡΡΠ° Π΄ΡΡΠ³ΠΈΠΌ ΡΠ²Π΅ΡΠΎΠΌ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° — ΡΠ²ΠΎΡΡΠ΅ΡΠΊΠΈΠΉ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΉ ΡΡΡΠ΅ΠΊΡ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- ΠΡΠ½ ΠΠ΅Π½ΠΌΠΎΡ
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ³ΠΎΠ²ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- ΠΠ°ΡΡΠ°Π½Π΄ΡΠ°
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ»Π½ΠΎΡΡΡΠ°Π½ΠΈΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ CSS
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- ΠΠ°ΡΡΠ°Π½Π΄ΡΠ°
Π ΠΊΠΎΠ΄Π΅
ΠΠ΄Π½ΠΎΡΡΡΠ°Π½ΠΈΡΠ½ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: font-awesome.css
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·
- HTML (ΠΌΠΎΠΏΡ) / CSS (ΡΡΠΈΠ»ΡΡ)
Π ΠΊΠΎΠ΄Π΅
Π‘Π»ΡΡΠ°ΠΉΠ½ΠΎ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ blobby-Π½Π°Π²ΠΈΠ³Π°ΡΠΎΡ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS. ΠΠΌΠ΅Π΅Ρ ΠΏΠ»Π°Π²Π½ΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠΎΠ½ΠΎΠ²ΡΠΉ ΡΠΈΠ»ΡΡΡ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- Π Π°ΠΉΠ°Π½ ΠΠ°Π»Π»ΠΈΠ³Π°Π½
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ»Π½ΠΎΡΡΡΠ°Π½ΠΈΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- ΠΠ»Π΅ΠΊΡ Π₯Π°ΡΡ
Π ΠΊΠΎΠ΄Π΅
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox (ΡΠ°ΡΡΠΈΡΠ½ΠΎ), Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- Π’Π°ΠΊΠ°Π½Π΅ ΠΡΠΈΠ½ΠΎΡΠ΅
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ½ΡΠ΅ΠΏΡΡΠ°Π»ΡΠ½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΠ»Π½ΠΎΡΡΡΠ°Π½ΠΈΡΠ½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΠΏΠΎΠ»Π½ΠΎΠΉ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΠΈ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π·Π½Π°ΡΠΊΠΎΠ² Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π±ΠΎΠ»ΡΡΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- Cyd Stumpel
Π ΠΊΠΎΠ΄Π΅
Π Π°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
CSS ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- alphardex
Π ΠΊΠΎΠ΄Π΅
Π’Π΅ΠΊΡΡ Π΄Π»Ρ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΌΠ΅Π½Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°
Π’Π΅ΠΊΡΡ Π΄Π»Ρ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΌΠ΅Π½Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° (
ΡΠ²Π΅Ρ
+ΡΠΎΠ½ΠΎΠ²ΡΠΉ ΠΊΠ»ΠΈΠΏ
).Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ
ΠΠ»Π°Π²Π½ΠΎΠ΅ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- Swarup Kumar Kuila
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅Π½Ρ Ρ Awesome Hover
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: bootstrap.css, bootstrap-social.css, font-awesome.css
ΠΠ²ΡΠΎΡ
- alphardex
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ΄ΡΠ΅ΡΠΊΠ½ΡΡΡΠΉ ΠΏΡΠ½ΠΊΡ ΠΌΠ΅Π½Ρ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- ΠΠ°ΠΉΠ» ΠΠ°Π²Π΅ΡΠΈ
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ ΠΌΠ΅Π½Ρ Apple TV
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Opera, Safari
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
Π‘Π΄Π΅Π»Π°Π» ΡΡΡΠ°Π½Π½ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ.Π’ΠΎΠ»ΡΠΊΠΎ CSS. Π©Π΅Π»ΠΊΠ½Π΅ΠΌ!
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- ΠΡΡΡΠΈΠ΄ΠΈ Π£ΠΈΠ»ΡΡΠΌΡ
Π ΠΊΠΎΠ΄Π΅
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ Ρ ΡΡΠ±-Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠ΅ΠΉ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- Π Π°ΠΉΠ°Π½ ΠΠ°Π»Π»ΠΈΠ³Π°Π½
Π ΠΊΠΎΠ΄Π΅
CSS-Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
Π©Π΅Π»ΠΊΠ½ΠΈΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ, ΡΡΠΎΠ±Ρ ΠΎΡΠΊΡΡΡΡ ΠΌΠ΅Π½Ρ ΠΈ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π²ΠΎΠ»ΡΠ΅Π±ΡΡΠ²ΠΎ.Π ΡΡΠΎΠΌ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΉ CSS Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ, Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- ΠΡΠ΄ΠΌΠΈΠ»Π° Π’ΡΠ΅ΡΡΡΠΊΠΎΠ²Π°
Π ΠΊΠΎΠ΄Π΅
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: font-awesome.css
ΠΠ²ΡΠΎΡ
- ΠΠΈΠΌΠ°Π»Π°ΠΈ Π‘ΠΈΠ½Π³Ρ
Π ΠΊΠΎΠ΄Π΅
ΠΠ·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΡΡ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- ΠΠ°ΡΠ΅Ρ ΠΠ°ΠΊΠΠΈΠ½Π»ΠΈ
Π ΠΊΠΎΠ΄Π΅
ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- ΠΠΈΠΊΠ°ΡΠ»Ρ ΠΠΉΠ½Π°Π»Π΅ΠΌ
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ³Π»ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅
border-radius
ΠΈ ΠΎΠ±ΡΡΠ°Π²ΠΎΡΠ½ΡΡ ΠΊΠΎΠ½ΡΡΡΠΎΠ² Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΡΡΠ³Π»ΠΎΠ³ΠΎ Π²Π΅Π΅ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ.Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅Π½Ρ Π²Π½Π΅ Ρ ΠΎΠ»ΡΡΠ° Π§ΠΈΡΡΡΠΉ CSS
ΠΠ΅Π½Ρ Π²Π½Π΅ Ρ ΠΎΠ»ΡΡΠ° Π½Π° ΡΠΈΡΡΠΎΠΌ CSS Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΎΠ»ΡΠΊΠΎ CSS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
Π‘ΡΡΠΎΠΊΠ° ΠΌΠ΅Π½Ρ CSS
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- ΠΠ»ΡΠ±Π΅ΡΡΠΎ ΠΠ΅ΠΎΠ½
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ΅ΠΌΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ CSS
ΠΡΠΎΡΡΠΎΠ΅ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ΅ΠΌΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ CSS ΠΈ Π·Π½Π°ΡΠΊΠ°ΠΌΠΈ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: font-awesome.css
ΠΠ²ΡΠΎΡ
- ΠΠΈΠΊΠ°ΡΠ»Ρ ΠΠΉΠ½Π°Π»Π΅ΠΌ
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅Π½Ρ «ΠΡΠ΅»
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅
clip-path
ΡΠΌΠ½ΠΎΠΆΠΈΡΡ Π½Π° Π΄Π²Π°, ΡΡΠΎΠ±Ρ Π·Π°ΡΡΠ°Π²ΠΈΡΡ ΠΎΠ±ΡΠ΅ΠΊΡ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠΉ ΡΠΎΡΠΌΡ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ Π²ΡΡΠ΅Π·Π°Π½Π½ΡΡ ΡΠΎΡΠΌΡ Π² ΡΡΡΠ΅ΠΊΡΠ΅ ΡΠ°ΡΠΊΡΡΡΠΈΡ ΠΎΡΠΊΡΡΡΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ.Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- ΠΠ½Π΄ΡΠ΅ΠΉ Π¨Π°ΡΠ°ΠΏΠΎΠ²
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅Π½Ρ Π²Π½Π΅ Ρ ΠΎΠ»ΡΡΠ°
ΠΠ΅Π½Ρ Π²Π½Π΅ Ρ ΠΎΠ»ΡΡΠ° Π½Π° ΡΠΈΡΡΠΎΠΌ CSS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- ΠΠ΅Π½Π½Π΅Ρ Π€ΠΈΠ»ΠΈ
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·
- HTML (ΡΠΎΠ½ΠΊΠΈΠΉ) / CSS (SCSS) / JS
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ΄Π²ΠΈΠΆΠ½ΠΎΠ΅ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Firefox, Opera, Safari
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- ΠΠ½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΡΠ²ΠΎΡΡΠ΅ΡΡΠ²ΠΎ
Π ΠΊΠΎΠ΄Π΅
Π‘ΠΊΠ»Π°Π΄Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ CSS
ΠΡΠΎΡΡΠΎΠ΅, Π½ΠΎ ΠΊΡΠ°ΡΠΈΠ²ΠΎΠ΅ ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ Π½Π° CSS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- Π‘ΠΊΠΎΡΡ ΠΠ΅Π½Π½Π΅Π΄ΠΈ
Π ΠΊΠΎΠ΄Π΅
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ Fun Hover
ΠΠ°Π±Π°Π²Π½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΠΊΠ°Π΄ΡΠΎΠ² CSS. ΠΡΡΡΡΡΠΉ ΠΏΡΡΠΆΠΎΠΊ Π² ΡΡΠ°ΡΡΡ ΡΠΊΠΎΠ»Ρ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΡΠΎ ΡΠΈΡΡΡΠΉ CSS. Π§ΡΠΎΠ±Ρ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π»ΠΎ, Π²ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ. ΠΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ°ΠΌΠΈ Π½Π°ΡΡΡΠΎΠΈΡΡ Π²ΡΠ΅, ΡΡΠΎΠ±Ρ ΡΠΎΠΎΠ±ΡΠ°ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΠ΅, ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΠΊΡΠ΄Π° Π΄ΠΎΠ»ΠΆΠ½Π° ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ
.line
Π²ΡΡΠΊΠΈΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° ΠΎΠ΄Π½Π° ΠΈΠ· ΡΡΡΠ»ΠΎΠΊ Π·Π°Π²ΠΈΡΠ°Π΅Ρ.Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge (ΡΠ°ΡΡΠΈΡΠ½ΠΎ), Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- ΠΡΠΈΠ½ ΠΠ°ΠΊΠΠΈΠ½Π½ΠΈ
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ³Π»ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΊΡΠ°ΡΠΈΠ²ΠΎΠ΅ ΠΊΡΡΠ³ΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: font-awesome.css
ΠΠ²ΡΠΎΡ
- Π’ΡΠΈΡ Π’ΠΈΠΌΠ±
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π»ΠΈΠΏΠ°ΡΡΠ΅ΠΉ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ
ΠΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½Π°Ρ ΠΏΠΎΠ΄Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ
ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ ΡΠΎΠ»ΡΠΊΠΎ CSS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- ΠΡΠ°Π½ ΠΠ°ΡΡΠ΅Π»Ρ
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
ΠΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ, ΠΌΠ΅Π½Ρ ΠΈΠ»ΠΈ ΡΡΡΠ΅ΠΊΡ. ΠΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ CSS ΠΈ ΠΏΠ΅ΡΡΠΏΠ΅ΠΊΡΠΈΠ²Ρ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ Π³ΠΎΠ»ΠΎΠ»Π΅Π½ΡΠ°ΠΌ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
3D ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
3D ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π² HTML ΠΈ CSS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- ΠΡ ΠΈΠ» Π‘Π°ΠΉ Π Π°ΠΌ
Π ΠΊΠΎΠ΄Π΅
ΠΡΠ΅ ΠΎΠ΄Π½ΠΎ ΠΌΠ΅Π½Ρ
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΠ»Π°Π²Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ: Π½Π΅Ρ
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅Π½Ρ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS
ΠΠ°Π½Π΅Π»Ρ ΠΌΠ΅Π½Ρ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS Π±Π΅Π· ΡΠ΅Π»ΡΠΊΠ°.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- ΠΠ΅ΡΡ ΠΠ°Π»ΠΎΡ
Π ΠΊΠΎΠ΄Π΅
CSS Menu Feat.ΠΠΌΠΎΠ΄Π·ΠΈ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅Π½Ρ
ΠΠ΅Π½Ρ ΡΡΠΈΠ»Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ°Π±Π»ΠΈΡΡ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ³Π»ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΡΡΠ³ΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: font-awesome.css
ΠΠ²ΡΠΎΡ
- ΠΠ΅Ρ ΠΌΠ΅Ρ ΠΡΡΠ°ΠΊ ΠΡΠΌΠ°Π½
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·
- HTML (ΠΌΠΎΠΏΡ) / CSS (ΡΡΠΈΠ»ΡΡ)
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅ΡΡΠΏΠ΅ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
CSS ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠ΅ΡΡΠΏΠ΅ΠΊΡΠΈΠ²Π½ΡΠ΅ ΠΌΠ΅Π½Ρ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ΅ΠΊΡ ΠΌΠ΅Π½Ρ
ΠΡΡΠ΅ΠΊΡΡ ΠΌΠ΅Π½Ρ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ° ΡΠ΅ΠΊΡΡΠ°.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- Π‘ΡΠ°Ρ ΠΠ΅Π»ΡΠ½ΠΈΠΊΠΎΠ²
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ΅ΠΊΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π»Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ
ΠΡΡΠ΅Π·Π°Π΅Ρ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS Π΄Π»Ρ ΠΏΡΠ½ΠΊΡΠΎΠ² ΠΌΠ΅Π½Ρ Π±ΡΠ°ΡΡΠ΅Π² ΠΈ ΡΠ΅ΡΡΠ΅Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: —
ΠΠ²ΡΠΎΡ
- ΠΠ°Π±ΡΠΈΡΠ»Ρ ΠΠΈ
Π ΠΊΠΎΠ΄Π΅
ΠΠ»ΠΎΠΆΠ΅Π½Π½Π°Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ CSS
CSS ΡΠΎΠ»ΡΠΊΠΎ Π²Π»ΠΎΠΆΠ΅Π½Π½Π°Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Ρ ARIA.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΏΠΎΠ»Π½ΠΎΡΡΡΠ°Π½ΠΈΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Π²Π½Π΅ Ρ ΠΎΠ»ΡΡΠ°
ΠΠΎΠ»Π½ΠΎΡΡΡΠ°Π½ΠΈΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Π²Π½Π΅ Ρ ΠΎΠ»ΡΡΠ°
ΠΡΠΈΠΌΠ΅Ρ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΡΡΡΠΎΠΈΡΡ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ Ρ ΠΎΠ»ΡΡΠ° ΡΠΊΡΠ°Π½Π°, ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ Π² ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° ΠΎΠΏΡΠΈΡ ΠΌΠ΅Π½Ρ.ΠΠΎΠ±Π°Π²Π»Π΅Π½Π° ββΡΠΏΠ΅ΡΠΈΡ Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π° Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ°Π»Π΅Π±ΠΎΠΌ ΠΠ°ΡΠΎΠ³ΠΎΠΉ
17 ΠΈΡΠ½Ρ 2016 Π³.ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΡΠΎΡΡΠΎΠ΅ ΠΊΡΡΠ³ΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΡΠΎΡΡΠΎΠ΅ ΠΊΡΡΠ³ΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ
HTML, CSS, JavaScript ΠΏΡΠΎΡΡΠΎΠ΅ ΠΊΡΡΠ³ΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΠΌΠΈ Π·Π½Π°ΡΠΊΠ°ΠΌΠΈ.
Π‘Π΄Π΅Π»Π°Π» ΠΠΈΠΊΠΎΠ»Π°ΠΉ Π’Π°Π»Π°Π½ΠΎΠ²
13 ΠΈΡΠ½Ρ 2016 Π³.ΠΠ΅ΠΌΠΎ-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΡΠΎΡΡΠΎΠ΅ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ HTML, CSS ΠΈ JavaScript.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠΆΡΠ»ΠΈΠ΅ΠΉ Π ΠΈΡΠ²Π΅Π»ΡΠ΄
8 ΠΈΡΠ½Ρ 2016 Π³.ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠ΅Π½Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΡΠΈΠ»ΡΡΡΠ°
ΠΠ΅Π½Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΡΠΈΠ»ΡΡΡΠ°
ΠΠ΅Π½Ρ ΡΠΈΠ»ΡΡΡΠΎΠ², ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠ΅ ΠΠ½ΡΠΎΠ½ΠΎΠΌ ΠΡ Π΅ΠΉΡΠ°Π½ΠΊΠΎΠΉ, ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π² Π²Π΅Π±-Π²Π΅ΡΡΠΈΡ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΡΠ΄ΠΆΡΠ½ΠΎΠΌ ΠΠΌΠ³Π°ΠΉΠ½ΠΎΠΌ
1 ΠΈΡΠ½Ρ 2016 Π³.Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·
- HTML / ΡΠΎΠ½ΠΊΠΈΠΉ
- CSS / SCSS
- JavaScript (jquery.js)
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π² ΡΡΠΈΠ»Π΅ Flexbox
Chrome ΠΈ Firefox Ρ ΠΎΡΠΎΡΠΎ … IE ΠΏΠ»ΠΎΡ ΠΎ, Π½Π΅Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° flex.
ΠΠ²ΡΠΎΡ
- ΠΡΠ½ΠΈ Π‘Π°Π½ΡΠΎΡ
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ
ΠΡΠ°ΡΠΈΠ²ΠΎΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ.
ΠΠ²ΡΠΎΡ
- ΠΠ°ΡΠ»ΠΎ ΠΠΈΠ΄Π΅ΠΊ
Π ΠΊΠΎΠ΄Π΅
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
ΠΠΎΠ±ΠΈΠ»ΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ: Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΎΡΠΊΡΡΡΠΈΡ ΠΈ Π·Π°ΠΊΡΡΡΠΈΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ GSAP TweenMax ΠΈ TimelineMax. ΠΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΠ°Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠ° ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° …
ΠΠ²ΡΠΎΡ
- ΠΠ΅ΡΠΌΡΠΊΠΎΠ² ΠΠ»Π΅ΠΊΡΠ΅ΠΉ
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° SVG
Π’ΠΎΠ»ΡΠΊΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ SVG ΠΈ CSS3, Π±Π΅Π· Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
ΠΠ²ΡΠΎΡ
- ΠΠ°ΠΉΠ» ΠΠ°Π²Π΅ΡΠΈ
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·
- HTML / ΠΠΎΠΏΡ
- CSS / SCSS
- JavaScript (jquery.js)
Π ΠΊΠΎΠ΄Π΅
Π Π°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ
ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠΌ jQuery.
ΠΠ²ΡΠΎΡ
- ΠΡΠΈΠ°Π½Π° ΠΠΈΠ½Π½
Π ΠΊΠΎΠ΄Π΅
ΠΡΠΏΠ°Π΄Π°ΡΡΠΈΠΉ
ΠΡΠ°ΡΠΈΠ²ΠΎΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ.
ΠΠ²ΡΠΎΡ
- ΠΠ°ΠΉΠΊΠ» ΠΠ΅ΠΎΠ½Π°ΡΠ΄
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·
- HTML
- CSS
- JavaScript (jquery.js)
Π ΠΊΠΎΠ΄Π΅
SVG Gooey Hover Menu ΠΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ SVG-ΠΌΠ°Π½ΠΈΠΏΡΠ»ΡΡΠΈΠΈ Ρ ΠΏΡΡΡΠΌΠΈ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΌΡΡΠΈ, ΡΡΠΎΠ±Ρ Β«ΠΏΡΠ΅ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡΒ» ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·
- HTML
- CSS / SCSS (font-awesome.css)
- JavaScript (jquery.js)
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠΊΠΎΠ²Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
ΠΠΎΠΊΠΎΠ²Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Ρ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠΌΠΈ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠ°ΠΌΠΈ.
ΠΠ²ΡΠΎΡ
- Π ΠΎΠ± ΠΠ°ΠΊΡΠ°Π΄Π·ΠΈΠ½
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·
- HTML
- CSS / SCSS
- JavaScript (jquery.js)
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
ΠΠΊΠ»ΡΡΠ°Π΅Ρ Π±ΡΡΠ³Π΅Ρ Ρ ΡΠΈΡΡΠΎΠΉ CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ, fadeIn-Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΈΠ· animate.css, ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΌ JS.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΏΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΡ
ΠΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΏΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΡ
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Ρ HTML, CSS ΠΈ jQuery.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ°ΠΉΠ» ΠΠ°Π²Π΅ΡΠΈ
4 ΡΠ΅Π²ΡΠ°Π»Ρ 2016 Π³.ΠΠ²ΡΠΎΡ
- Π€Π΅Π»ΠΈΠΏΠ΅ ΠΡΠΏΠΈΠ½ΠΎΠ·Π°
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·
- HTML
- CSS / SCSS
- JavaScript (jquery.js)
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΠ΅Π½Ρ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΆΠΈΠΌΠ° CSS.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½Π°Ρ ΠΎΠ²Π΅ΡΠ»Π΅ΠΉΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Flexbox
ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½Π°Ρ ΠΎΠ²Π΅ΡΠ»Π΅ΠΉΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Flexbox
ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½Π°Ρ ΠΎΠ²Π΅ΡΠ»Π΅ΠΉΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Flexbox Π² HTML, CSS ΠΈ jQuery.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠΈΡΠΊΠΎ ΠΠΎΡΠΈΡΠ΅ΠΌ
8 ΡΠ½Π²Π°ΡΡ 2016 Π³.ΠΠ²ΡΠΎΡ
- ΠΠΎΡ Π°Π½ Π₯Π°Π΄ΠΊΠ°
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅ΡΠ°Π»ΠΈ ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ jQuery, CSS ΠΈ HTML.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ CSS3 + jQuery
CSS3 + ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ jQuery
ΠΡΠΎΡΡΠΎΠ΅, Π±Π°Π·ΠΎΠ²ΠΎΠ΅ ΠΈ ΡΠ»Π΅Π³Π°Π½ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ CSS3 ΠΈ jQuery.
Π‘Π΄Π΅Π»Π°Π» ΠΠ½ΡΠΎΠ½ ΠΠ΅ΡΡΠΎΠ²
5 Π΄Π΅ΠΊΠ°Π±ΡΡ 2015 Π³.Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·
- HTML
- CSS / SCSS
- JavaScript (jQuery.js)
Π ΠΊΠΎΠ΄Π΅
ΠΠ°ΠΊΠ»Π°Π΄ΠΊΠ° Π΄Π»Ρ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
ΠΡΠΈΠΌΠ΅Ρ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ flexbox.
ΠΠ²ΡΠΎΡ
- Π‘Π°ΠΉΠΌΠΎΠ½ ΠΡΠ΄Π΅Ρ
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·
- HTML
- CSS / SCSS
- JavaScript (jquery.js)
Π ΠΊΠΎΠ΄Π΅
Π¦ΠΈΡΠΊΡΠ»ΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ²
ΠΠ΅ΠΎΠ±ΡΡΠ½ΠΎΠ΅ ΠΊΡΡΠ³Π»ΠΎΠ΅ ΠΌΠ΅Π½Ρ.
ΠΠ΅ΠΌΠΎ-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΏΠΎΠ»ΡΠΊΡΡΠ³Π»ΠΎΠ΅ Π»ΠΈΠΏΠΊΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΠΎΠ»ΡΠΊΡΡΠ³Π»ΠΎΠ΅ Π»ΠΈΠΏΠΊΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΠ»Π΅ΠΉΠΊΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ ΡΠΈΠ»ΡΡΡΠ°ΠΌΠΈ CSS ΠΈ SVG.ΠΠ΅ΡΡΠΈΡ 1.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΡΠΊΠ°ΡΠΎΠΌ ΠΠ΅Π±Π±Π΅ΡΠΎΠΌ
22 ΠΎΠΊΡΡΠ±ΡΡ 2015 Π³.ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Π‘ΠΊΠΎΠ»ΡΠ·ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
Π‘ΠΊΠΎΠ»ΡΠ·ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
Π‘ΠΊΠΎΠ»ΡΠ·ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠΊΡΡΡΠΎ.
ΠΠ·Π³ΠΎΡΠΎΠ²ΠΈΠ» ΠΠ»Π΅Π³ ΠΡΠ°ΠΊΠΎΠ²
4 ΠΎΠΊΡΡΠ±ΡΡ 2015 Π³.ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
4 ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
4 ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ HTML, CSS ΠΈ jQuery.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ari
13 ΡΠ΅Π½ΡΡΠ±ΡΡ 2015 Π³.ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π³Π°ΠΌΠ±ΡΡΠ³Π΅ΡΠ° Π²Π·ΡΡΠ° ΠΈΠ· http: // codepen.io / designcouch / ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ / Atyop /
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ°ΡΠΊΡΡΠΎΠΌ ΠΠΈΠ·Π°Π»ΠΎΠΌ
3 ΡΠ΅Π½ΡΡΠ±ΡΡ 2015 Π³.ΠΠ²ΡΠΎΡ
- ΠΡΡΠΌ Π£ΠΈΠ»ΡΠ΄ΠΎΠ½
Π ΠΊΠΎΠ΄Π΅
HTML, CSS ΠΈ jQuery ΡΡΡΠ΅ΠΊΡ ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠ½Π°ΡΠΎΠΊ Π³Π°ΠΌΠ±ΡΡΠ³Π΅ΡΠ° Ρ ΠΌΠΎΡΡΠΈΠ½Π³-ΠΌΠ΅Π½Ρ
ΠΠ½Π°ΡΠΎΠΊ Π³Π°ΠΌΠ±ΡΡΠ³Π΅ΡΠ° Ρ ΠΌΠΎΡΡΠΈΠ½Π³-ΠΌΠ΅Π½Ρ
Π’Π²ΠΎΡΡΠ΅ΡΠΊΠΎΠ΅ ΠΌΠ΅Π½Ρ, ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ HTML, SASS / CSS3 ΠΈ JQuery.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π‘Π΅ΡΠ΄ΠΆΠΈΠΎ
15 ΠΈΡΠ»Ρ 2015 Π³.ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Π²ΡΠΏΠ°Π΄Π°ΡΡΠ°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
Π Π°ΡΠΊΡΡΠ²Π°ΡΡΠ°ΡΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
ΠΡΠΏΠ°Π΄Π°ΡΡΠ°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Ρ HTML, CSS ΠΈ JavaScript
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π Π°ΠΉΠ°Π½ΠΎΠΌ ΠΠΎΡΡΠΎΠΌ
7 ΠΈΡΠ»Ρ 2015 Π³.ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ SVG
ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ SVG
ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ SVG, HTML, CSS ΠΈ jQuery.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ½Π°ΡΠΎΠΌ ΠΡΡΠ°ΡΠΎΠΌ
2 ΠΈΡΠ»Ρ 2015 Π³.ΠΠ²ΡΠΎΡ
- BjurhagerStudios
Π ΠΊΠΎΠ΄Π΅
Gooey ΠΠΎΠ±ΠΈΠ»ΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
ΠΠ»Π°ΡΡΠ½ΡΠΉ Π»ΠΈΠΏΠΊΠΈΠΉ ΡΡΡΠ΅ΠΊΡ, ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½Π½ΡΠΉ ΠΊ ΠΌΠ΅Π½Ρ Π² ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΌ ΡΡΠΈΠ»Π΅.jQuery ΠΈ CSS ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
ΠΠ²ΡΠΎΡ
- ΠΠ°ΡΠΊΡΡ ΠΠΈΠ·Π°Π»
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·
- HTML
- CSS / SCSS
- JavaScript (jquery.js)
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Ρ HTML, CSS ΠΈ JS.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΊΡΠ°ΡΠΎΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
ΠΡΠ°ΡΠΎΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΊΡΠ°ΡΠΎΡΠ½ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ ΡΠΎΡΠΊΠ° ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π° Π²Π°ΡΠΈΠΌ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΊ ΡΠ΅ΠΊΡΡΠ΅ΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΠΎΠ³Π΄Π° Π²Ρ Π²ΡΡ ΠΎΠ΄ΠΈΡΠ΅, ΠΎΠ½ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΡΡΡ ΠΊ Π°ΠΊΡΠΈΠ²Π½ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΡΡΠΈ Π₯Π°ΡΡΠΈ
4 ΠΈΡΠ½Ρ 2015 Π³.ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΡΠΎΡΡΠ°Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Π½Π° JS
ΠΡΠΎΡΡΠ°Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Π½Π° JS
ΠΡΠΎΡΡΠ°Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Π½Π° JS Ρ HTML ΠΈ CSS.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠΈΡΠ°Π½ΠΎΠΌ Π₯Π°Π½ΡΠ΅ΡΠΎΠΌ
26 ΠΌΠ°Ρ 2015 Π³.ΠΠ²ΡΠΎΡ
- Π―Π½Π½ΠΈΠΊ ΠΠ°ΡΠ°Π½ΡΠΈΠΊ
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·
- HTML
- CSS / SCSS
- JavaScript / Babel (jquery.js)
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΡΠΎΡΡΠΎΠ΅ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ.
ΠΠ΅ΠΌΠΎ-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Explosive Menu
Explosive Menu
Π, Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π²Π·ΡΡΠ²ΠΎΠΎΠΏΠ°ΡΠ½ΠΎΠ΅, ΠΌΠ΅Π½Ρ Π½Π° ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠ»ΠΈΠΊΠ°. ΠΡΠ΅, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, ΡΡΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΠΎΠ³ΠΎΠ½Ρ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π₯Π°ΡΡΠΈΡΠΎΠΌ ΠΠ°ΡΠ½ΠΈ
17 ΠΌΠ°Ρ 2015 Π³.ΠΠ²ΡΠΎΡ
- Π’Π°ΠΉΠ»Π΅Ρ Π€Π°ΡΠ»
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·
- HTML / Haml
- CSS / SCSS
- JavaScript (jquery.js)
Π ΠΊΠΎΠ΄Π΅
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ Π²Π½Π΅ Ρ ΠΎΠ»ΡΡΠ° Sass.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π΄Π»ΠΈΠ½Π½ΡΡ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
Π Π΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π΄Π»ΠΈΠ½Π½ΡΡ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
ΠΡΠΎΠ±Π»Π΅ΠΌΠ° Ρ Π΄Π»ΠΈΠ½Π½ΡΠΌΠΈ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΌΠΈΡΡ ΠΌΠ΅Π½Ρ? Π§ΡΠΎ ΠΆ, ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΡΠΎ ΠΏΡΠΎΡΡΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ JavaScript ΠΈ jQuery.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ°ΡΡΠΈ ΠΠΈΠΌΡΠΎΠΌ ΠΠ°ΡΠ°Π½Π³Π°Π½ΠΎΠΌ
13 ΠΌΠ°ΡΡΠ° 2015 Π³.ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠ°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ
ΠΠ°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ
ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ, Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΡΡΠ΅Π΅ Π²Π°Ρ Π±ΡΠ΅Π½Π΄ ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΏΠΎ ΡΠ°ΠΉΡΡ.Π‘ΠΎΠ·Π΄Π°Π½ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ SCSS ΠΈ Π²Π°Π½ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ JS.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Ettrics
12 ΠΌΠ°ΡΡΠ° 2015 Π³.Π ΠΊΠΎΠ΄Π΅
ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ CSS
ΠΠΎΠ»Π½Π°Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ CSS. ΠΠΏΡΡΠΊΠ°Π΅ΡΡΡ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΊΡΡΡΠΎΠ³ΠΎ ΡΠ»Π°ΠΆΠΊΠ°.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ HTML, CSS ΠΈ jQuery.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠΎΠ»ΠΎΠΌ Π²Π°Π½ ΠΠΉΠ΅Π½ΠΎΠΌ
6 ΠΌΠ°ΡΡΠ° 2015 Π³.ΠΠ²ΡΠΎΡ
- ΠΠΈΡΠ΄ΠΆΠΈΠ» ΠΠ°Π½Π°
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
HTML, CSS ΠΈ jQuery ΡΡΡΠ΅ΠΊΡ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ.
ΠΠ²ΡΠΎΡ
- Π Π°Π·ΠΈΠ’Π°Π·ΠΈ
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·
- HTML
- CSS
- JavaScript (jquery.js)
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΠΎΠ²Π΅ΡΠ»Π΅ΠΉΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΠΎΠ²Π΅ΡΠ»Π΅ΠΉΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ, ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ jQuery ΠΈ CSS.
ΠΠ²ΡΠΎΡ
- ΠΡΠΈΠ΄ΠΆΠΈ ΠΠ°Π½Π½ΠΎΠ½ΠΈ
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·
- HTML
- CSS / SCSS
- JavaScript (jquery.js)
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΡΡΠΎΠ΅ ΠΈ ΡΠ΄ΠΎΠ±Π½ΠΎΠ΅ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
Π‘ΠΎΠ·Π΄Π°Π½ ΠΈ ΠΎΡΠ»Π°ΠΆΠ΅Π½ Π·Π° 5 ΠΌΠΈΠ½ΡΡ, ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌ Ρ IE10 +. ΠΠΎΠΆΠ΅Ρ Π±ΡΡΡ, Π½Π΅ ΠΈΠ΄Π΅Π°Π»Π΅Π½ Π΄Π»Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΡΡΠ²Π°, Π½ΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ, Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΡΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡΠ΅Π΅, Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΠΈ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ.
ΠΠ²ΡΠΎΡ
- ΠΠ°Π»Π΅Π± ΠΠ°ΡΠΎΠ³Π°
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·
- HTML
- CSS
- JavaScript (jquery.js)
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ»Π½ΠΎΡΡΡΠ°Π½ΠΈΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Π²Π½Π΅ Ρ ΠΎΠ»ΡΡΠ°
ΠΡΠΈΠΌΠ΅Ρ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΡΡΡΠΎΠΈΡΡ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ Ρ ΠΎΠ»ΡΡΠ° ΡΠΊΡΠ°Π½Π°, ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ Π² ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° ΠΎΠΏΡΠΈΡ ΠΌΠ΅Π½Ρ. ΠΠΎΠ±Π°Π²Π»Π΅Π½Π° ββΡΠΏΠ΅ΡΠΈΡ Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π° Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ.
ΠΠ΅ΠΌΠΎ-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠ΅Π½Ρ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Offcanvas Ρ ΠΏΠΎΠ²ΠΎΡΠΎΡΠΎΠΌ
ΠΠ΅Π½Ρ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Offcanvas Ρ ΠΏΠΎΠ²ΠΎΡΠΎΡΠΎΠΌ
HTML, CSS ΠΈ jQuery Π²Π½Π΅ΠΊΠ°Π½Π°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Ρ ΠΈΠ·ΡΠΌΠΈΠ½ΠΊΠΎΠΉ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π΄ΡΡΠ²ΠΎΠ»ΡΡΠΊΠΈΠΌ Π°Π»Ρ ΠΈΠΌΠΈΠΊΠΎΠΌ
13 ΡΠ½Π²Π°ΡΡ 2015 Π³.ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠ΅Π½Ρ Π²Π½Π΅ Ρ ΠΎΠ»ΡΡΠ°
ΠΠ΅Π½Ρ Π²Π½Π΅ Ρ ΠΎΠ»ΡΡΠ°
ΠΠ΅Π±ΠΎΠ»ΡΡΠΎΠ΅ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π²Π½Π΅ Ρ ΠΎΠ»ΡΡΠ°.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ°ΡΠΊΠΎΠΌ ΠΡΡΡΠ΅Π΅ΠΌ
28 Π½ΠΎΡΠ±ΡΡ 2014 Π³.ΠΠ΅ΠΌΠΎ-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Π Π°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ Β«ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Β»
Π Π°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ Β«ΠΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Β»
HTML, CSS Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ jQuery. ΠΠΈΠΊΠ°ΠΊΠΈΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ².
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ³ΡΡΡΠΈΠ½ΠΎΠΌ ΠΡΡΠΈΡΠΎΠΌ
18 Π½ΠΎΡΠ±ΡΡ 2014 Π³.ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΏΠ»ΠΎΡΠΊΠ°Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
ΠΠ»ΠΎΡΠΊΠ°Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
ΠΡΠΎΡΡΠ°Ρ ΠΏΠ»ΠΎΡΠΊΠ°Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Ρ ΠΌΡΠ»ΡΡΠΈ-Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠΌ ΠΌΠ΅Π½Ρ.Π’Π°ΠΊΠΆΠ΅ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Font Awesome ΠΈ Animate.css.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ½Π΄ΠΈ Π’ΡΠ°Π½ΠΎΠΌ
18 Π½ΠΎΡΠ±ΡΡ 2014 Π³.ΠΠ²ΡΠΎΡ
- ΠΠ°ΠΉΠΊ Π ΠΎΡ Π°Ρ
Π ΠΊΠΎΠ΄Π΅
ΠΡΠΎΡΡΠΎΠ΅ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ
ΠΡΠΎΡΡΠΎΠ΅ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ HTML ΠΈ CSS.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΏΠΎ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎΠΌΡ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΏΠΎ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎΠΌΡ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ
Π‘ΡΡΠ°Π½ΠΈΡΠ° ΡΠ΄Π²ΠΈΠ³Π°Π΅ΡΡΡ, ΠΎΡΠΊΡΡΠ²Π°Ρ ΠΏΡΠΎΡΡΡΡ ΠΈ ΠΏΠΎΠ½ΡΡΠ½ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΡΡΠΈ Π₯Π°ΡΡΠΈ
30 ΠΎΠΊΡΡΠ±ΡΡ 2014 Π³.ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Π’ΡΠ΅ΡΠ³ΠΎΠ»ΡΠ½ΡΠΉ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΉ Toggle Navigation
Π’ΡΠ΅ΡΠ³ΠΎΠ»ΡΠ½Π°Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½Π°Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°Π΅ΠΌΠ°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ HTML ΠΈ CSS.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π² MoKev
12 ΠΎΠΊΡΡΠ±ΡΡ 2014 Π³.ΠΠ΅ΠΌΠΎ-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: CSS3 ΠΠ°Π±Π°Π²Π½ΠΎΠ΅ Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ
CSS3 ΠΠ°Π±Π°Π²Π½ΠΎΠ΅ Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΠ°Π±Π°Π²Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ CSS3.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Wagner Moschini
1 ΡΠ΅Π½ΡΡΠ±ΡΡ 2014 Π³.ΠΠ²ΡΠΎΡ
- ΠΠ½Π΄ΠΈ Π’ΡΠ°Π½
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·
- HTML / Haml
- CSS / ΠΠ΅Π½Π΅Π΅
- JavaScript (jquery.js)
Π ΠΊΠΎΠ΄Π΅
ΠΠ»ΠΎΡΠΊΠ°Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
ΠΠ»ΠΎΡΠΊΠ°Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ jQuery Π΄Π»Ρ ΡΠΈΡΡΠΎΠ³ΠΎ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π³ΠΎΡΡ ΠΌΠ΅Π½Ρ Π²ΠΌΠ΅ΡΡΠ΅ Ρ animate.css Π΄Π»Ρ ΡΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ²ΠΎΡΠΎΡΠ° Π² Π½Π°ΡΠ°Π»Π΅.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΏΠ»ΠΎΡΠΊΠ°Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
ΠΠ»ΠΎΡΠΊΠ°Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
ΠΡΠΎΡΡΠ°Ρ ΠΏΠ»ΠΎΡΠΊΠ°Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Ρ ΠΏΡΠΎΡΡΡΠΌ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΌΡΡ ΠΌΠ΅Π½Ρ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ½Π΄ΠΈ Π’ΡΠ°Π½ΠΎΠΌ
1 ΡΠ΅Π½ΡΡΠ±ΡΡ 2014 Π³.ΠΠ²ΡΠΎΡ
- ΠΠ΅ΡΡ Π°ΡΠ΄ ΠΠ»Π΅Π΄ΡΠ½Π³
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·
- HTML
- CSS / SCSS
- JavaScript (jquery.js)
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ Π³Π°ΠΌΠ±ΡΡΠ³Π΅Ρ-ΠΌΠ΅Π½Ρ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·
- HTML
- CSS
- JavaScript (bounce.js,
snap.svg)
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ΅ΠΊΡΡ ΠΌΠ΅Π½Ρ Π²Π½Π΅ Ρ ΠΎΠ»ΡΡΠ°
ΠΠ΅ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²Π΄ΠΎΡ Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΈ ΡΡΠΈΠ»Π΅ΠΉ ΠΌΠ΅Π½Ρ Π²Π½Π΅ Ρ ΠΎΠ»ΡΡΠ° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ² CSS ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΡΡΠΈ SVG.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·
- HTML
- CSS / SCSS
- JavaScript (jquery.js)
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ³ΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΊΡΡΠ³ΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ.
ΠΠ΅ΠΌΠΎ-ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: Toggle Menu
Toggle Menu
ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΌΠ΅Π½Ρ Ρ HTML, CSS ΠΈ jQuery.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Yoann
16 ΠΈΡΠ»Ρ 2014 Π³.ΠΠ²ΡΠΎΡ
- Thomas Wilthil
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ΅ΠΊΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° Π½Π° ΡΠΈΡΡΠΎΠΌ CSS Π΄Π»Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠΉ Π²Π½Π΅ Ρ ΠΎΠ»ΡΡΠ°
ΠΡ, Π½Π°Π²Π΅ΡΠ½ΠΎΠ΅, Π²ΡΠ΅ Π²ΠΈΠ΄Π΅Π»ΠΈ ΡΡΠΈΠ»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Β«Π²ΡΠ΄Π²ΠΈΠΆΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ / Π²Π½Π΅ Ρ ΠΎΠ»ΡΡΠ°Β», ΡΡΠ°Π²ΡΠΈΠΉ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΌ Π² Facebook Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π»Π΅Ρ Π½Π°Π·Π°Π΄.ΠΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡΠ»ΠΈΡΠ½ΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² javascript, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅Π΄Π»Π°Π³Π°ΡΡ ΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ, Π½ΠΎ Ρ ΠΏΠΎΠ΄ΡΠΌΠ°Π», ΡΡΠΎ Π±ΡΠ»ΠΎ Π±Ρ Π·Π΄ΠΎΡΠΎΠ²ΠΎ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ Ρ Π½ΠΎΠ²ΡΠΌΠΈ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌΠΈ ΡΡΠ½ΠΊΡΠΈΡΠΌΠΈ CSS. JavaScript Π½Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ. — Π’ΠΎΠΌΠ°Ρ Π£ΠΈΠ»ΡΠΈΠ»
ΠΠ²ΡΠΎΡ
- ΠΠΈΠΊΠΎΠ»Π°Ρ Π. Π‘ΠΌΠΈΡ
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·
- HTML
- CSS / SCSS
- JavaScript (jquery.js)
Π ΠΊΠΎΠ΄Π΅
CSS Off Canvas Menu
ΠΡΠ΅ ΠΎΠ΄Π½ΠΎ ΠΌΠ΅Π½Ρ Π²Π½Π΅ Ρ ΠΎΠ»ΡΡΠ° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ»Π°ΠΆΠΊΠ° Π΄Π»Ρ Π°ΠΊΡΠΈΠ²Π½ΠΎΠΉ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠΎΠΊΠΎΠ²ΠΎΠ΅ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΠΎΠΊΠΎΠ²ΠΎΠ΅ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
HTML, CSS, Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ jQuery.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠ΅Π½Π΄ΠΆΠ°ΠΌΠΈΠ½ΠΎΠΌ
18 Π°ΠΏΡΠ΅Π»Ρ 2014 Π³.ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ / Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Π²Π½Π΅ Ρ ΠΎΠ»ΡΡΠ°
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ / Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Π²Π½Π΅ Ρ ΠΎΠ»ΡΡΠ°
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΠ΅Π³Π΄Π° ΠΏΠΎΠ΄ ΡΡΠΊΠΎΠΉ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΠΎΠ»ΠΈΠ½ΠΎΠΌ
3 Π°ΠΏΡΠ΅Π»Ρ 2014 Π³.ΠΠ²ΡΠΎΡ
- ΠΡΠΈΠΊ Π‘Π°Π΄ΠΎΠ²ΡΠΊΠΈ
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·
- HTML
- CSS
- JavaScript (jquery.js)
Π ΠΊΠΎΠ΄Π΅
Π Π°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ
ΠΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ — ΡΡΠΎ ΡΠΈΡΡΡΠΉ CSS. Π ΠΌΠ΅Π½Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΎΠ±ΡΠ΅ΠΌ JavaScript, Π½ΠΎ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎ ΡΡ ΡΠ΄ΡΠ°ΡΡΡΡ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π² Π½Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ JavaScript Π΄Π»Ρ Π·Π°ΠΊΡΡΡΠΈΡ ΠΌΠ΅Π½Ρ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠ΅Π»ΠΊΠ°Π΅Ρ Π²Π½Π΅ ΠΌΠ΅Π½Ρ.
ΠΠ²ΡΠΎΡ
- ΠΠΈΠ»ΡΡ ΠΠ°Π½ ΠΠΈΠΌΠ±Π΅ΡΠ³Π΅Π½
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·
- HTML
- CSS / SCSS
- JavaScript (jquery.js)
Π ΠΊΠΎΠ΄Π΅
ΠΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π΅ ΠΎΠΊΠ½ΠΎ ΠΊΡΡΠ³ΠΎΠ²ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
ΠΠΎΠ»Π½Π°Ρ ΠΊΡΡΠ³ΠΎΠ²Π°Ρ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Π² CSS.ΠΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ². ΠΠ° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΊΡΡΠ³ΠΎΠ²ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ codrops.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΡΠΎΡΡΠΎΠ΅ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ Π£Π½ΠΎΠΉ ΠΡΠ°Π²Π΅Ρ
31 ΡΠ½Π²Π°ΡΡ 2014 Π³.Π ΠΊΠΎΠ΄Π΅
ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ UI
ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS.
ΠΠ²ΡΠΎΡ
- ΠΠ΅Π³ΠΎ Π³ΡΠΈΠ±
Π ΠΊΠΎΠ΄Π΅
Π‘Π΅Π½ΡΠΎΡΠ½ΠΎΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ Jelly Menu Concept
ΠΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ ΠΌΠ΅Π½Ρ ΠΆΠ΅Π»Π΅ ΡΠ΅Π½ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΡΡΡΡΠΎΠΉΡΡΠ²Π° Ρ HTML, CSS ΠΈ JavaScript.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅: ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ Π΄Π²ΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ Π΄Π²ΡΡ ΡΡΠΎΠ²Π½Π΅Π²ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ jQuery ΠΈ CSS3
ΠΠ»Π΅Π³Π°Π½ΡΠ½ΠΎΠ΅ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ-Π³Π°ΡΠΌΠΎΡΠΊΠ° Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° / ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. Π Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π·Π½Π°ΡΠΎΠΊ ΡΡΠΈΡΡΠ° Font Awesome. Π Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈΡΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΡ, ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ ΠΈ ΡΠ΅Π½ΠΈ CSS3 Π½Π°ΡΡΠ΄Ρ Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡΠΈΡΠ½ΡΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ jQuery Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠΏΠΈΡΠΊΠΎΠ² ΡΡΡΠ»ΠΎΠΊ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ thecodeplayerΠΠ²ΡΠΎΡ
- Π ΡΠΉΡΠ΅Π» Π‘ΠΌΠΈΡ
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅Π½Ρ ΠΊΡΡΠ³ΠΎΠ²ΡΡ ΡΡΡΠ»ΠΎΠΊ
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ ΠΊΡΡΠ³ΠΎΠ²ΡΡ ΡΡΡΠ»ΠΎΠΊ.
ΠΠ²ΡΠΎΡ
- ΠΠ°ΡΠ» Π ΠΎΡΠ΅Π»Π»
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ: Chrome, Edge, Firefox, Opera, Safari
ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ: Π΄Π°
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: font-awesome.css
ΠΠ²ΡΠΎΡ
- ΠΡΡΡ Π₯ΠΎΠΉΠ»Π°Π½Π΄
Π ΠΊΠΎΠ΄Π΅
ΠΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ ΠΎΡΠΊΠ°Π·ΠΎΠ²
ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΠΌΠ΅Π½Ρ Ρ HTML, CSS ΠΈ jQuery.
ΠΠ²ΡΠΎΡ
- Π‘Π°ΡΠ° Π‘ΡΠ΅ΠΉΠ΄Π°Π½
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·
- HTML
- CSS
- JavaScript (classie.js)
Π ΠΊΠΎΠ΄Π΅
ΠΡΡΠ³ΠΎΠ²Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Ρ CSS
Π£ΡΠ΅Π±Π½ΠΎΠ΅ ΠΏΠΎΡΠΎΠ±ΠΈΠ΅ ΠΏΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΡΡΠ³ΠΎΠ²ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠΉ CSS.
ΠΠ²ΡΠΎΡ
- ΠΠ»ΠΈΠ²Π΅Ρ ΠΠ½ΠΎΠ±Π»ΠΈΡ
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·
- HTML / Haml
- CSS / SCSS
- JavaScript (jquery.js)
Π ΠΊΠΎΠ΄Π΅
Flexbox Off Canvas Menu
ΠΠ΅Π³ΠΊΠΈΠΉ, ΠΏΡΠΎΡΡΠΎΠΉ, Π»Π΅Π³ΠΊΠΈΠΉ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·
- HTML
- CSS / ΠΠΠΠ¬Π¨Π
- JavaScript (jquery.js)
Π ΠΊΠΎΠ΄Π΅
Π Π°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ
ΠΡΠΎ ΠΏΡΠΎΡΡΠΎΠ΅ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ, ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠ΅ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π½Π΅ΡΠΎΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠΏΠΈΡΠΊΠΎΠ² ΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ² CSS3.
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅Π½Ρ Π²Π½Π΅ Ρ ΠΎΠ»ΡΡΠ° Ρ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ
ΠΡΠΎΡΡΠ°Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Π²Π½Π΅ Ρ ΠΎΠ»ΡΡΠ° Ρ ΠΎΡΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΡΡΡΠ»ΠΎΠΊ. Π‘ΡΡΠ»ΠΊΠΈ ΠΈΠΌΠ΅ΡΡ ΠΏΡΠΎΡΡΠΎΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π°: ΠΎΠ½ΠΈ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ ΡΠΏΡΠ°Π²Π° Π½Π°Π»Π΅Π²ΠΎ ΠΏΡΠΈ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ. ΠΠΎ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΏΠΎ ΡΠ΅ΠΏΠΎΡΠΊΠ΅, ΠΊΠΎΠ³Π΄Π° ΡΡΡΠ»ΠΊΠΈ Π°Π½ΠΈΠΌΠΈΡΡΡΡΡΡ ΠΎΠ΄Π½Π° Π·Π° Π΄ΡΡΠ³ΠΎΠΉ.ΠΡΠΎ Π΄Π΅Π»Π°Π΅ΡΡΡ ΠΏΡΡΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π·Π°Π΄Π΅ΡΠΆΠΊΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠ»ΠΊΠ΅.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·
- HTML
- CSS
- JavaScript (jquery.js,
jquery.menu-aim.js)
Π ΠΊΠΎΠ΄Π΅
ΠΠ΅Π³Π° ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΉΡΡ ΡΠΏΠΈΡΠΎΠΊ
ΠΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ ΠΈ ΠΏΡΠΎΡΡΠΎΠΉ Π² Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅ ΠΌΠ΅Π³Π°-ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΉΡΡ ΡΠΏΠΈΡΠΎΠΊ.
ΠΠ²ΡΠΎΡ
- Droidadda Inc
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·
- HTML
- CSS
- JavaScript (jquery.js)
Π ΠΊΠΎΠ΄Π΅
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΠΌΠ΅Π³Π° ΠΌΠ΅Π½Ρ
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΠΌΠ΅Π³Π° ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
ΠΠ²ΡΠΎΡ
- ΠΠ°Π»ΠΏΠ΅Ρ Π‘ΠΈΠ½Π³Ρ
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·
- HTML
- CSS
- JavaScript (jquery.js)
Π ΠΊΠΎΠ΄Π΅
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΠΌΠ΅Π³Π° ΠΌΠ΅Π½Ρ
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΠΌΠ΅Π³Π° ΠΌΠ΅Π½Ρ Ρ ΡΠ»Π΅ΠΊΡΠ±ΠΎΠΊΡΠΎΠΌ.
ΠΠ²ΡΠΎΡ
- ΠΠ°ΠΉΠΊ Π’ΠΎΡΠΎΡΡΠ½
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·
- HTML
- CSS
- JavaScript (jquery.js)
Π ΠΊΠΎΠ΄Π΅
Sexy Flexy Mega ΠΠ΅Π½Ρ
Π― ΡΠ²ΠΈΠ΄Π΅Π» Π³ΠΈΡΠΊΡ ΡΡΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ ΡΡΠΈΠ»Π΅ΠΉ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Scout Π½Π° Dribbble ΠΈ ΡΠ΅ΡΠΈΠ» ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ. Π― ΠΏΠΎΠ΄ΡΠΌΠ°Π», ΡΡΠΎ Π±ΡΠ»ΠΎ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΊΡΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠΎΠ½ΠΊΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π² Π°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ, ΠΈ Ρ ΡΠ°ΠΊΠΆΠ΅ Ρ ΠΎΡΠ΅Π» Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ flexbox, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΌΠΎΡΡ Π² ΡΠΊΠ»Π°Π΄ΠΊΠ΅. ΡΡΠΎ ΠΈΠ·.- ΠΠ°ΠΉΠΊ Π’ΠΎΡΠΎΡΡΠ½
ΠΠ²ΡΠΎΡ
- ΠΡΠ΄ΠΆΡΠ½ ΠΠΌΠ³Π°ΠΈΠ½
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·
- HTML
- CSS
- JavaScript (jquery.js)
Π ΠΊΠΎΠ΄Π΅
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΠΌΠ΅Π³Π° ΠΌΠ΅Π½Ρ
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΠΌΠ΅Π³Π°-ΠΌΠ΅Π½Ρ Ρ Π±Π»ΠΎΠ³ΠΎΠΌ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ ΠΈ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠΌ ΡΠΏΠΈΡΠΊΠΎΠΌ.
Π‘Π΄Π΅Π»Π°Π½ΠΎ ΠΈΠ·
- HTML
- CSS / SCSS (ΡΡΠ½Π΄Π°ΠΌΠ΅Π½Ρ.css)
- JavaScript (jquery.js, foundation.js)
Π ΠΊΠΎΠ΄Π΅
ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Mega Menu Ρ Foundation 5
ΠΠ΅Π³Π°-ΠΌΠ΅Π½Ρ (Π±ΠΎΠ»ΡΡΠ°Ρ Π΄Π²ΡΠΌΠ΅ΡΠ½Π°Ρ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ°ΡΡΡ ΠΏΠ°Π½Π΅Π»Ρ) Π³ΡΡΠΏΠΏΠΈΡΡΠ΅Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΡΡΠΎΠ±Ρ ΠΈΡΠΊΠ»ΡΡΠΈΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΡ, Π·Π½Π°ΡΠΊΠΈ ΠΈ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ Π΄Π»Ρ ΠΎΠ±ΡΡΡΠ½Π΅Π½ΠΈΡ Π²ΡΠ±ΠΎΡΠ° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ.
ΠΠ΅Π½Ρ, Π²ΠΈΠ΄ΠΆΠ΅ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° Webix Docs
Π‘ΡΡΠ»ΠΊΠ° API
ΠΠ±Π·ΠΎΡ
ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ, ΠΎΡΠ½ΠΎΡΡΡΠ΅Π΅ΡΡ ΠΊ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΡ ΠΠ΅Π½Ρ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ ΠΎΡ ΡΠΏΠΈΡΠΊΠ° ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ Π²ΡΠ±ΠΈΡΠ°ΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ· ΡΠΏΠΈΡΠΊΠ° ΡΠ³ΡΡΠΏΠΏΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² (ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ).ΠΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ Π·Π°ΠΏΡΡΠΊΠ°ΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ.
ΠΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ Π²ΠΈΠ΄ΠΈΠΌΡΠΌ, ΡΠΎΠ»ΡΠΊΠΎ ΠΊΠΎΠ³Π΄Π° Π²Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ (Π² ΡΠΎΠ±ΡΡΠΈΠΈ ‘onMouseOver’), ΠΈ ΡΠΊΡΡΠ²Π°Π΅ΡΡΡ, ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π²Ρ ΡΠ±ΠΈΡΠ°Π΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ (Β«onMouseOutΒ»).ΠΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·Π°ΡΠΈΡ
ΠΠ±ΡΠ΅ΠΊΡ ΠΌΠ΅Π½Ρ Ρ ΡΠ°Π½ΠΈΡΡΡ Π² ΡΠ²ΠΎΠΉΡΡΠ²Π΅ data .
webix.ui ({ view: "ΠΌΠ΅Π½Ρ", id: "my_menu", subMenuPos: "ΠΏΡΠ°Π²ΠΎ", layout: "y", data: [// Π΄Π°Π½Π½ΡΠ΅ ΠΌΠ΅Π½Ρ {value: "ΠΠ΅ΡΠ΅Π²Π΅ΡΡΠΈ... ", ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ: [" ΠΠ½Π³Π»ΠΈΠΉΡΠΊΠΈΠΉ "," Π‘Π»Π°Π²ΡΠ½ΡΠΊΠΈΠΉ ... "," ΠΠ΅ΠΌΠ΅ΡΠΊΠΈΠΉ "]}, {$ template: "Separator"}, {Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: Β«ΠΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°ΡΡ ...Β», ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ: [Β«FacebookΒ», Β«Google+Β», Β«TwitterΒ»]} ], ΡΠΈΠΏ:{ ΠΏΠΎΠ΄ΠΏΠΈΡΡ: ΠΈΡΡΠΈΠ½Π°, Π²ΡΡΠΎΡΠ°: 50 } });
Π‘Π²ΡΠ·Π°Π½Π½ΡΠΉ ΠΎΠ±ΡΠ°Π·Π΅Ρ: ΠΡΠ½ΠΎΠ²Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ Π²ΠΊΠ»ΡΡΠ°ΡΡ:
- subMenuPos (ΡΡΡΠΎΠΊΠ°) — ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΡ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ;
- submenuConfig (ΠΎΠ±ΡΠ΅ΠΊΡ) — Π·Π°Π΄Π°Π΅Ρ ΠΎΠ±ΡΡΡ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ Π΄Π»Ρ Π²ΡΠ΅Ρ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ Π² ΡΡΠΎΠΌ ΠΌΠ΅Π½Ρ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΡΠΎΠ²Π½Ρ ΠΈΡ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΡΡΠΈ;
- layout (string) — ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠ½ΠΊΡΠΎΠ² ΠΌΠ΅Π½Ρ: x (ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ) Π΄Π»Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ, y Π΄Π»Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ;
- $ template (ΡΡΡΠΎΠΊΠ°) — ΡΠ»Π°Π³, ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°ΡΡΠΈΠΉ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»Ρ ΠΌΠ΅ΠΆΠ΄Ρ Π³ΡΡΠΏΠΏΠ°ΠΌΠΈ ΠΏΡΠ½ΠΊΡΠΎΠ² ΠΌΠ΅Π½Ρ.ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ ΡΠΈΠΏΡ:
- Β«Π Π°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»ΡΒ» — ΡΠ΅ΡΠ°Ρ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»ΡΠ½Π°Ρ Π»ΠΈΠ½ΠΈΡ;
- Β«Π Π°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»ΡΒ» — ΠΏΡΡΡΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ Π±Π΅Π»ΡΠΌ ΡΠΎΠ½ΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π΅ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°.
- ΡΠΈΠΏ — ΠΎΠ±ΡΠ΅ΠΊΡ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π½Π°ΡΡΡΠΎΠΉΠΊΡ ΠΏΡΠ½ΠΊΡΠΎΠ² ΠΌΠ΅Π½Ρ, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ:
- subign (Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΠΉ) — ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΡΡΡΠ΅Π»ΠΊΡ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ;
- Π²ΡΡΠΎΡΠ° ΠΈ ΡΠΈΡΠΈΠ½Π° (ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ) ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°;
- openAction (ΡΡΡΠΎΠΊΠ°) — ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠΏΠΎΡΠΎΠ± ΠΎΡΠΊΡΡΡΠΈΡ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ — Β«ΡΠ΅Π»ΡΠΎΠΊΒ» .ΠΡΠ»ΠΈ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ, ΡΠ½Π°ΡΠ°Π»Π° Π½ΡΠΆΠ½ΠΎ ΡΠ΅Π»ΠΊΠ½ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠ΅Π½Ρ, ΡΡΠΎΠ±Ρ ΡΠ°Π·ΡΠ΅ΡΠΈΡΡ ΠΎΡΠΊΡΡΡΠΈΠ΅ ΠΈ ΡΠΊΡΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠΎΠ±ΡΡΠΈΠΉ Β«onMouseOverΒ» ΠΈ Β«onMouseOutΒ» .
Π§ΡΠΎΠ±Ρ ΡΠΊΡΡΡΡ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΅Π»ΠΊΠ½ΡΡΡ Π³Π΄Π΅-Π½ΠΈΠ±ΡΠ΄Ρ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΠΌΠ΅Π½Ρ; - ΡΠ°Π±Π»ΠΎΠ½ — (ΡΡΡΠΎΠΊΠ°, ΡΡΠ½ΠΊΡΠΈΡ) — ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ Π΄Π°Π½Π½ΡΡ . Π‘ΠΌ. ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ Π² ΡΡΠ°ΡΡΠ΅ ΠΎ ΡΠ°Π±Π»ΠΎΠ½Π°Ρ Π΄Π°Π½Π½ΡΡ ;
- Π΄Π°Π½Π½ΡΠ΅ (ΠΎΠ±ΡΠ΅ΠΊΡ) — ΠΆΠ΅Π»Π°Π΅ΠΌΡΠΉ ΡΠΎΡΠΌΠ°Ρ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ Π΄Π°Π½Π½ΡΡ . ΠΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΡΠΌ. Π‘ΡΠ°ΡΡΡ ΠΠ°Π³ΡΡΠ·ΠΊΠ° Π΄Π°Π½Π½ΡΡ
- autowidth — (Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅) ΡΠ΅Π³ΡΠ»ΠΈΡΡΠ΅Ρ ΡΠΈΡΠΈΠ½Ρ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΡ ΡΡ ΠΏΠΎΠ΄ΠΏΡΠ½ΠΊΡΠΎΠ² Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π΄Π»ΠΈΠ½ΠΎΠΉ ΠΈΡ ΡΠ΅ΠΊΡΡΠ°, ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ false
Π‘Π²ΡΠ·Π°Π½Π½ΡΠΉ ΠΎΠ±ΡΠ°Π·Π΅Ρ: ΠΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠ΅Π½Ρ ΠΏΡΠΈ ΡΠ΅Π»ΡΠΊΠ΅ ΠΌΡΡΡΡ (ΡΠ°ΡΠΊΡΡΡΠΈΠ΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΎΡΠΊΠ»ΡΡΠ΅Π½ΠΎ)
Π Π°Π±ΠΎΡΠ° Ρ ΠΏΡΠ½ΠΊΡΠ°ΠΌΠΈ ΠΌΠ΅Π½Ρ
ΠΠ°ΡΡΡΠΎΠΉΠΊΠ° ΠΏΡΠ½ΠΊΡΠΎΠ² ΠΌΠ΅Π½Ρ
ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠ΅Π½Ρ / ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ , Π²ΠΊΠ»ΡΡΠ°Ρ ΡΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π·Π°ΠΏΡΡΠΊΠ°Π΅Ρ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ ΠΈ Π»ΡΠ±ΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Webix , ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠΌ.
ΠΡΠ½ΠΊΡΡ ΠΌΠ΅Π½Ρ Ρ ΡΠ°Π½ΡΡΡΡ Π² ΠΌΠ°ΡΡΠΈΠ²Π΅ Π΄Π°Π½Π½ΡΡ , ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΏΡΠ½ΠΊΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠΌ. ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ Ρ ΡΠ°Π½ΡΡΡΡ Π² ΠΌΠ°ΡΡΠΈΠ²Π΅ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ ΠΈΠ»ΠΈ Π΄Π°Π½Π½ΡΡ . ΠΠ°ΠΆΠ΄ΡΠΉ ΠΏΡΠ½ΠΊΡ ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π°ΡΡΠΈΠ±ΡΡΡ:
- id — id ΡΠΎΠ²Π°ΡΠ°, Π΅ΡΠ»ΠΈ Π½Π΅ ΡΠΊΠ°Π·Π°Π½, ΡΠΎ Π΅ΠΌΡ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°Π΅ΡΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ;
- Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ — ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°;
- href — ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΡΡΠ»ΠΊΡ Π½Π° ΡΠΎΠ²Π°Ρ;
- config — ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π³ΠΎ ΠΎΠΊΠ½Π° Π΄ΠΎΡΠ΅ΡΠ½Π΅Π³ΠΎ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ (Π΅ΡΠ»ΠΈ Π΅ΡΡΡ).ΠΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ ΠΎΡΠΌΠ΅Π½ΡΠ΅Ρ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ Π² submenuConfig;
- Π·Π½Π°ΡΠΎΠΊ — ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΎΡΠ°Π½ΠΆΠ΅Π²ΡΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠΉ ΠΊΡΡΠΆΠΎΠΊ, ΡΠ²Π΅Π΄ΠΎΠΌΠ»ΡΡΡΠΈΠΉ ΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π΅ Π½ΠΎΠ²ΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΡΠ½ΠΊΡΠ° ΠΌΠ΅Π½Ρ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ).
Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΏΡΠ½ΠΊΡΡ ΠΌΠ΅Π½Ρ — ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ ΠΈΡ Π² Π²ΠΈΠ΄Π΅ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΠΌΠ°ΡΡΠΈΠ²Π°:
{view: "menu", data: ["Google", "Facebook", "Twitter"]}
ΠΠ»ΠΈ Π°ΡΡΠΎΡΠΈΠ°ΡΠΈΠ²Π½ΡΠΉ:
{Π²ΠΈΠ΄: "ΠΌΠ΅Π½Ρ", Π΄Π°Π½Π½ΡΠ΅: [ {id: 1, value: "Google"}, {id: 2, value: "Facebook"}, {id: 3, Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: "Twitter"} ]}
Π‘ΡΡΠ»ΠΊΠΈ Π² ΠΏΡΠ½ΠΊΡΠ°Ρ ΠΌΠ΅Π½Ρ
ΠΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠ΅Π½Ρ ΠΈ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ½Π°Π±ΠΆΠ΅Π½ ΡΡΡΠ»ΠΊΠΎΠΉ , ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ Π² ΠΎΠ±ΡΠ΅ΠΊΡΠ΅ Π΄Π°Π½Π½ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠ² href ΠΈ target (Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ):
Π²ΠΈΠ΄: "ΠΌΠ΅Π½Ρ", Π΄Π°Π½Π½ΡΠ΅:[ {id: "1", Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: "ΠΠΌΠΈΡΠ°ΡΠΈΡ Π‘ΠΏΠ΅Π½ΡΠ΅ΡΠ°", href: "# verse1", target: "_ blank"}, {id: "2", Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: "ΠΡΠ΅ΠΌΠ΅Π½Π° Π³ΠΎΠ΄Π°", href: "# verse2"} ]
ΠΡΠ»ΠΈ Π½Π΅ ΡΠΊΠ°Π·Π°Π½ΠΎ, ΡΠ΅Π»Ρ Π±ΡΠ΄Π΅Ρ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π° ββΠΊΠ°ΠΊ ΠΏΡΡΡΠ°Ρ ΡΡΡΠΎΠΊΠ°.
Π‘Π²ΡΠ·Π°Π½Π½ΡΠΉ ΠΎΠ±ΡΠ°Π·Π΅Ρ: ΠΠ΅Π½Ρ hrefs
ΠΠ½Π°ΡΠΊΠΈ Π² ΠΏΡΠ½ΠΊΡΠ°Ρ ΠΌΠ΅Π½Ρ
ΠΠ½Π°ΡΠΊΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΠΊΡΡΠ³ΠΈ ΠΊ ΠΏΡΠ½ΠΊΡΠ°ΠΌ ΠΌΠ΅Π½Ρ Ρ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ ΡΡΡΠ½ΠΎΡΡΠ΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ²ΡΠ·Π°ΡΡ Ρ ΡΠ΅ΠΌ ΠΈΠ»ΠΈ ΠΈΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡΠΌΠΈ):
Π²ΠΈΠ΄: "ΠΌΠ΅Π½Ρ", Π΄Π°Π½Π½ΡΠ΅:[ {id: "1", value: "Translations", badge: "1"}, {id: "2", Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: "Posts", Π·Π½Π°ΡΠΎΠΊ: "12"}, {id: "3", Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: "Info", Π·Π½Π°ΡΠΎΠΊ: "24"} ]
Π‘Π²ΡΠ·Π°Π½Π½ΡΠΉ ΠΎΠ±ΡΠ°Π·Π΅Ρ: ΠΠ΅Π½Ρ ΡΠΎ Π·Π½Π°ΡΠΊΠ°ΠΌΠΈ
Π Π°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»ΠΈ Π² ΠΌΠ΅Π½Ρ
Π§ΡΠΎΠ±Ρ ΠΎΡΠ΄Π΅Π»ΠΈΡΡ ΠΎΠ΄Π½Ρ Π³ΡΡΠΏΠΏΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΎΡ Π΄ΡΡΠ³ΠΎΠΉ Π² Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΌ ΠΌΠ΅Π½Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ $ template Ρ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ:
- Β«Π Π°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»ΡΒ» — Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» ΠΌΠ΅ΠΆΠ΄Ρ ΠΏΡΠ½ΠΊΡΠ°ΠΌΠΈ ΠΌΠ΅Π½Ρ;
- Β«Π Π°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»ΡΒ» — Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΡΠ΅ΡΡΡ Π»ΠΈΠ½ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΏΡΠ½ΠΊΡΠ°ΠΌΠΈ ΠΌΠ΅Π½Ρ.
Π Π°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»Ρ Π² Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΌ ΠΌΠ΅Π½Ρ
Π²ΠΈΠ΄: "ΠΌΠ΅Π½Ρ", layout: "y", Π΄Π°Π½Π½ΡΠ΅:[ {id: "1", Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: "ΠΠ΅ΡΠ΅Π²ΠΎΠ΄Ρ", Π·Π½Π°ΡΠΎΠΊ: "qrcode", Π·Π½Π°ΡΠΎΠΊ: 20}, {id: "2", Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: "Π‘ΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ", Π·Π½Π°ΡΠΎΠΊ: "file-word-o", Π·Π½Π°ΡΠΎΠΊ: 3}, {$ template: "Spacer"}, {id: "3", Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: "Help", icon: "support"}, ]
Π‘Π²ΡΠ·Π°Π½Π½ΡΠΉ ΠΎΠ±ΡΠ°Π·Π΅Ρ: Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
Π Π°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»Ρ Π² Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΌ ΠΌΠ΅Π½Ρ
Π²ΠΈΠ΄: "ΠΌΠ΅Π½Ρ", layout: "y", Π΄Π°Π½Π½ΡΠ΅:[ {value: "ΠΠ΅ΡΠ΅Π²Π΅ΡΡΠΈ... "}, {Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: Β«ΠΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°ΡΡ ...Β», ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ: [Β«FacebookΒ», Β«Google+Β», Β«TwitterΒ»]}, {$ template: "Separator"}, {Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: "ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ"} ]
Π‘Π²ΡΠ·Π°Π½Π½ΡΠΉ ΠΎΠ±ΡΠ°Π·Π΅Ρ: ΠΡΠ½ΠΎΠ²Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΠΎΠ΄ΠΌΠ΅Π½Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Ρ ΠΊΠ°ΠΊ ΠΌΠ°ΡΡΠΈΠ² Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ :
{id: "2", Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: "Translate ...", ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ: ["ΠΠ½Π³Π»ΠΈΠΉΡΠΊΠΈΠΉ", "Π‘Π»Π°Π²ΡΠ½ΡΠΊΠΈΠΉ", "ΠΠ΅ΠΌΠ΅ΡΠΊΠΈΠΉ"]},
ΠΠ»ΠΈ ΠΊΠ°ΠΊ ΠΌΠ°ΡΡΠΈΠ² ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² ΠΌΠ΅Π½Ρ :
{id: "1.2 Β», Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅:Β« Π‘Π»Π°Π²ΡΠ½ΡΠΊΠΈΠΉ ... Β», ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ: [ {id: "1.2.1", Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: "ΠΠ΅Π»ΠΎΡΡΡΡΠΊΠΈΠΉ"}, {id: "1.2.2", Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: "Russian"}, {id: "1.2.3", Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: "Ukrainian"} ]}
ΠΡΠ±ΠΎΠ΅ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ΅ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ (Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π΅ ΠΎΠΊΠ½ΠΎ) ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠ° config Π΅Π³ΠΎ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°:
Π²ΠΈΠ΄: "ΠΌΠ΅Π½Ρ", submenuConfig: { ΡΠΈΡΠΈΠ½Π°: 400 }, Π΄Π°Π½Π½ΡΠ΅:[ {id: "2", Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: "Custom ...", config: { ΡΠΈΡΠΈΠ½Π°: 500, Π½Π°:{ onItemClick: function (id) { webix.ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ (Β«Π©Π΅Π»ΡΠΎΠΊ ΠΏΠΎ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ:Β» + id); } } }, ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ: [Β«FacebookΒ», Β«Google+Β», Β«TwitterΒ»] } ]
ΠΡΠ° ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΎΠ±ΡΡΡ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ Π΄Π»Ρ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ Π² submenuConfig.
Π‘Π²ΡΠ·Π°Π½Π½ΡΠΉ ΠΎΠ±ΡΠ°Π·Π΅Ρ: ΠΠ΅Π½Ρ: ΠΠ°ΡΡΡΠΎΠΉΠΊΠ° ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ
ΠΠ²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΠΈΡΠΈΠ½Ρ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ
Π§ΡΠΎΠ±Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π΄Π»ΠΈΠ½ΠΎΠΉ ΠΈΡ ΠΌΠ΅ΡΠΎΠΊ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ autowidth Ρ ΠΈΡΡΠΈΠ½Π½ΡΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ Π² ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ ΠΌΠ΅Π½Ρ:
webix.ui ({ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ: "areaA", view: "ΠΌΠ΅Π½Ρ", autowidth: true, Π΄Π°Π½Π½ΡΠ΅:[ {id: "1", Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: "Short ...", ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ: ["FB", "G +", "TW"]}, {id: "2", Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: "Medium ...", ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ: [Β«FacebookΒ», Β«Google+Β», Β«TwitterΒ»]}, ... ] });
Π‘Π²ΡΠ·Π°Π½Π½ΡΠΉ ΠΎΠ±ΡΠ°Π·Π΅Ρ: ΠΠ²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρ ΡΠΈΡΠΈΠ½Π° Π΄Π»Ρ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π΄ΡΡΠ³ΠΈΡ Π²ΠΈΠ΄ΠΆΠ΅ΡΠΎΠ² Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΡΠ½ΠΊΡΠΎΠ² ΠΌΠ΅Π½Ρ
ΠΠ°ΡΠ°ΠΌΠ΅ΡΡ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ ΡΠ°ΠΊΠΆΠ΅ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ Π½Π° Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π΅ ΠΎΠΊΠ½ΠΎ, ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ, ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ ΠΈΠ»ΠΈ Π²ΠΈΠ΄ΠΆΠ΅Ρ ΠΎΠΊΠ½Π°, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ» ΠΈΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½ ΡΠ°Π½Π΅Π΅:
webix.ui ({ id: "Π΄Π΅ΡΠ°Π»ΠΈ1", Π²ΠΈΠ΄: "ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ", ΡΠΈΡΠΈΠ½Π°: 300, Π²ΡΡΠΎΡΠ°: 200, body: {content: "html1"} }); webix.ui ({ view: "ΠΌΠ΅Π½Ρ", Π΄Π°Π½Π½ΡΠ΅:[ {Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: "HTML 4", ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ: "ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ1"}, {Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: "HTML 5", ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ: "ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ2"} ] });
Π‘Π²ΡΠ·Π°Π½Π½ΡΠΉ ΠΎΠ±ΡΠ°Π·Π΅Ρ: HTML-ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΊΠ°ΠΊ ΠΏΡΠ½ΠΊΡΡ ΠΌΠ΅Π½Ρ
Π’Π°ΠΊΠΈΠΌ ΠΆΠ΅ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ Webix ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ, Π° Π·Π°ΡΠ΅ΠΌ ΡΠΊΠ°Π·Π°ΡΡ Π½Π° Π½Π΅Π³ΠΎ Π² ΡΠ²ΠΎΠΉΡΡΠ²Π΅ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ ΠΌΠ΅Π½Ρ:
webix.ui ({ view: "submenu", id: "test", data: [ {id: "1.1", Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: "English"}, {id: "1.3", Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: "German"} ] }); webix.ui ({ view: "ΠΌΠ΅Π½Ρ", Π΄Π°Π½Π½ΡΠ΅:[ {id: "1", Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: "Translate ...", ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ: "test"}, {id: "2", Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: "ΠΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°ΡΡ ..." ] });
ΠΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ.
MenuBar
ΠΠ΅Π½Ρ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΏΠ°Π½Π΅Π»Ρ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ², ΠΏΠΎΡΡΠΎΠΌΡ Π»ΡΡΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΡΠΎΠΊΡ ΠΌΠ΅Π½Ρ — ΡΡΠΎ ΠΈΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΠΌΠ΅Π½Ρ ΠΈ ΠΏΠ°Π½Π΅Π»Ρ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Π² ΡΠΎΡΠ΅Π΄Π½ΠΈΡ ΡΡΠΎΠ»Π±ΡΠ°Ρ :
webix.ui ({ cols: [ΠΌΠ΅Π½Ρ, ΠΏΠ°Π½Π΅Π»Ρ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ²] });
Π‘Π²ΡΠ·Π°Π½Π½ΡΠΉ ΠΎΠ±ΡΠ°Π·Π΅Ρ: ΠΠ΅Π½Ρ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ²
Π‘ΠΊΡΡΡΠΈΠ΅ ΠΈ ΠΎΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠ½ΠΊΡΠΎΠ² ΠΌΠ΅Π½Ρ
ΠΡΡΡΠ΅ΡΡΡ
Π§ΡΠΎΠ±Ρ ΡΠΊΡΡΡΡ ΠΈ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΌΠ΅Π½Ρ, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ hideItem () ΠΈ showItem () ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ ΠΌΠ΅Π½Ρ, ΡΠΊΠ°Π·Π°Π² ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ° ΡΡΠ½ΠΊΡΠΈΠΈ.
Π‘ΠΎΠ±ΡΡΠΈΠ΅ΠΌ, Π·Π°ΠΏΡΡΠΊΠ°ΡΡΠΈΠΌ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ, ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΡΠ»Π°ΠΆΠΊΠ° Π² Π΄Π΅ΡΠ΅Π²Π΅ Webix, Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π½ΠΎΠΌ ΡΠ΅ΠΌΠΈ ΠΆΠ΅ Π΄Π°Π½Π½ΡΠΌΠΈ, ΡΡΠΎ ΠΈ ΠΌΠ΅Π½Ρ, ΠΏΡΠΈ ΡΡΠ»ΠΎΠ²ΠΈΠΈ, ΡΡΠΎ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠ»Π°ΠΆΠΊΠ° = ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΌΠ΅Π½Ρ.
$$ ("tree1"). AttachEvent ("onItemCheck", function (id, state) { if (state) // Π΅ΡΠ»ΠΈ ΠΎΡΠΌΠ΅ΡΠ΅Π½ΠΎ $$ ("Π³Π»Π°Π²Π½ΠΎΠ΅_ΠΌΠ΅Π½Ρ"). hideItem (id); Π΅ΡΠ΅ $$ ("Π³Π»Π°Π²Π½ΠΎΠ΅_ΠΌΠ΅Π½Ρ"). showItem (id); });
Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Β«Π½Π΅ ΠΎΡΠΌΠ΅ΡΠ΅Π½Π½ΡΠ΅Β» ΠΏΡΠ½ΠΊΡΡ ΠΌΠ΅Π½Ρ.
Π‘Π²ΡΠ·Π°Π½Π½ΡΠΉ ΠΎΠ±ΡΠ°Π·Π΅Ρ: Π‘ΠΊΡΡΡΠΈΠ΅ ΠΏΡΠ½ΠΊΡΠΎΠ² ΠΌΠ΅Π½Ρ
ΠΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
ΠΠ»Ρ ΠΎΡΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΏΡΠ½ΠΊΡΠ° ΠΌΠ΅Π½Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊ ΠΌΠ΅Π½Ρ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ disableItem () ΠΈ enableItem (), ΠΏΠ΅ΡΠ΅Π΄Π°Π² Π² Π½ΠΈΡ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ Π½ΡΠΆΠ½ΠΎΠ³ΠΎ ΠΏΡΠ½ΠΊΡΠ°.ΠΠ΅ΡΠΎΠ΄Ρ ΠΌΠΎΠΆΠ½ΠΎ Π°ΠΊΡΠΈΠ²ΠΈΡΠΎΠ²Π°ΡΡ, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ ΡΠ»Π°ΠΆΠΊΠ°, ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠ°Π²Π΅Π½ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π³ΠΎ ΠΏΡΠ½ΠΊΡΠ° ΠΌΠ΅Π½Ρ.
$$ ("tree1"). AttachEvent ("onItemCheck", function (id, state) { if (state) // Π΅ΡΠ»ΠΈ ΠΎΡΠΌΠ΅ΡΠ΅Π½ΠΎ $$ ("Π³Π»Π°Π²Π½ΠΎΠ΅_ΠΌΠ΅Π½Ρ"). disableItem (id); Π΅ΡΠ΅ $$ ("Π³Π»Π°Π²Π½ΠΎΠ΅_ΠΌΠ΅Π½Ρ"). enableItem (id); });
ΠΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠ½ΠΊΡΠ° ΠΌΠ΅Π½Ρ ΠΈΠ· JSON
ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΊΠ°ΠΊ ΠΎΡΠΊΠ»ΡΡΠ΅Π½Π½ΡΠΉ Π² ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ ΠΌΠ΅Π½Ρ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π°ΡΡΠΈΠ±ΡΡ disabled: true Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅ΠΌ ΠΎΠ±ΡΠ΅ΠΊΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°:
webix.ui ({ view: "ΠΌΠ΅Π½Ρ", Π΄Π°Π½Π½ΡΠ΅:[ {id: "1", Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: "ΠΠ΅ΡΠ΅Π²Π΅ΡΡΠΈ ...", ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ: [ {id: "1.1", Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: "English"}, {id: "1.2", Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: "Slavic ...", ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ: [ {id: "1.2.1", Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: "ΠΠ΅Π»ΠΎΡΡΡΡΠΊΠΈΠΉ"}, {id: "1.2.2", Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: "Russian", disabled: true}, {id: "1.2.3", Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: "Ukrainian"} ]} ]} ] });
ΠΠΎ ΡΡΡΠΈ, ΠΎΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΈ Π²ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΡΠ΅ΡΠ΅Π· ΠΊΠ»Π°ΡΡΡ CSS , ΠΏΠΎΡΡΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠ΅Π½Ρ ΠΏΠΎΠ»ΡΡΠ°ΡΡ ΡΠ°Π±Π»ΠΎΠ½ , ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΈ ΠΎΡΠΊΠ»ΡΡΠ΅Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ:
Π²ΠΈΠ΄: "ΠΌΠ΅Π½Ρ", template: function (obj) { Π΅ΡΠ»ΠΈ (obj.ΠΎΡΠΊΠ»ΡΡΠ΅Π½) Π²Π΅ΡΠ½ΡΡΡ "" + obj.value + ""; return obj.value; }
Π‘Π²ΡΠ·Π°Π½Π½ΡΠΉ ΠΎΠ±ΡΠ°Π·Π΅Ρ: ΠΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠ½ΠΊΡΠΎΠ² ΠΌΠ΅Π½Ρ
ΠΠ±ΡΠ°Π±ΠΎΡΠΊΠ° ΡΠΎΠ±ΡΡΠΈΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠ½ΠΊΡΠΎΠ² ΠΌΠ΅Π½Ρ ΠΈ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ
ΠΠΎΡΡΡΠΏ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΠΏΡΠ½ΠΊΡΠ°ΠΌ ΠΌΠ΅Π½Ρ ΠΈ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΏΠΎ ΠΈΡ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠ°ΠΌ.
1. Π Π»ΡΠ±ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π΄ΠΎΡΡΡΠΏ Π½Π°ΠΏΡΡΠΌΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠ΅ΡΠΎΠ΄Π° getMenuItem (), ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ° ΠΈ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ ΠΎΠ±ΡΠ΅ΠΊΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°:
// ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΡΠ½ΠΊΡΠ° ΠΌΠ΅Π½Ρ ΠΏΠΎ Π΅Π³ΠΎ ID $$ ('ΠΌΠ΅Π½Ρ1').getMenuItem (id) .value;
Π‘Π²ΡΠ·Π°Π½Π½ΡΠΉ ΠΎΠ±ΡΠ°Π·Π΅Ρ: ΠΡΠ½ΠΎΠ²Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
2. Π ΡΠΎ ΠΆΠ΅ Π²ΡΠ΅ΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠ΅Π½Ρ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΠΎΠ»ΡΡΠ΅Π½Ρ ΡΠ΅ΡΠ΅Π· ΠΎΠ±ΡΠ΅ΠΊΡ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ, Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΠΌΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠΌ getSubMenu () Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΌ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠΌ.
ΠΡΠ»ΠΈ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π½Π΅Ρ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ — Π±ΡΠ΄Π΅Ρ Π²ΠΎΠ·Π²ΡΠ°ΡΠ΅Π½ ΠΎΠ±ΡΠ΅ΠΊΡ Π²ΡΠ·ΡΠ²Π°ΡΡΠ΅Π³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°.var menu = $$ ("menu1"). GetSubMenu (id); var item = menu.getItem (id) .value;
Π‘Π²ΡΠ·Π°Π½Π½ΡΠΉ ΠΎΠ±ΡΠ°Π·Π΅Ρ: HTML-ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΊΠ°ΠΊ ΠΏΡΠ½ΠΊΡΡ ΠΌΠ΅Π½Ρ
ΠΠ±Π° ΠΌΠ΅ΡΠΎΠ΄Π° ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π² Π»ΡΠ±ΠΎΠΌ ΠΈΠ· Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΡ ΡΠΎΠ±ΡΡΠΈΠΉ ΠΌΠ΅Π½Ρ , Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΎΠ±ΡΡΠΈΠΉ ΡΠ΅Π»ΡΠΊΠ°:
- onMenuItemClick — ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ ΠΏΡΠΈ ΡΠ΅Π»ΡΠΊΠ΅ ΠΏΠΎ Π²ΡΠ΅ΠΌ ΠΏΡΠ½ΠΊΡΠ°ΠΌ ΠΌΠ΅Π½Ρ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΡΠΎΠ²Π½Ρ ΠΈΠ΅ΡΠ°ΡΡ ΠΈΠΈ.ΠΠ³Π½ΠΎΡΠΈΡΡΠ΅Ρ ΠΎΡΠΊΠ»ΡΡΠ΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ;
- onItemClick — ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ΅ ΡΠΎΠ±ΡΡΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΎΠ³ΠΎ ΠΆΠ΅ ΡΡΠΎΠ²Π½Ρ ΠΈΠ΅ΡΠ°ΡΡ ΠΈΠΈ. Π’Π°ΠΊΠΆΠ΅ ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ Π΄Π»Ρ ΠΎΡΠΊΠ»ΡΡΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠ΅Π΄ΠΌΠ΅ΡΠ°.
ΠΠ±ΡΠΈΠΉ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ onMenuItemClick
Π²ΠΈΠ΄: "ΠΌΠ΅Π½Ρ", Π΄Π°Π½Π½ΡΠ΅:[...], Π½Π°:{ onMenuItemClick: function (id) { webix.message ("Π©Π΅Π»ΠΊΠ½ΠΈΡΠ΅:" + this.getMenuItem (id) .value); } }
Π‘Π²ΡΠ·Π°Π½Π½ΡΠΉ ΠΎΠ±ΡΠ°Π·Π΅Ρ: ΠΡΠ½ΠΎΠ²Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ onItemClick Π΄Π»Ρ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ
Π²ΠΈΠ΄: "ΠΌΠ΅Π½Ρ", Π΄Π°Π½Π½ΡΠ΅:[ {id: "1", Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅: "Custom... ", config: { ΡΠΈΡΠΈΠ½Π°: 250, on: {onItemClick: function (id) { webix.message (Β«Π©Π΅Π»ΡΠΎΠΊ ΠΏΠΎ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ:Β» + id); }} }, ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ: {...} } ]
Π‘Π²ΡΠ·Π°Π½Π½ΡΠΉ ΠΎΠ±ΡΠ°Π·Π΅Ρ: ΠΠ°ΡΡΡΠΎΠΉΠΊΠ° ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ
Π‘ΡΠ°ΡΡΠΈ ΠΏΠΎ ΡΠ΅ΠΌΠ΅
ΠΠ΅ΡΠ½ΡΡΡΡΡ Π½Π°Π²Π΅ΡΡ
— ΠΠ΅Π±-ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ²
ΠΠ»Π΅ΠΌΠ΅Π½Ρ HTML
ΡΡΠΈΠΊΠ΅ΡΠΊΠ°
- ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ ΠΌΠ΅Π½Ρ,ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΠΎΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π²ΠΎ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΡ
ΠΌΠ΅Π½Ρ,ΡΡΠΎΠ±Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ ΠΌΠ΅ΡΠΊΡ,ΡΠ΅ΡΠ΅Π· ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π΄ΠΎΡΡΡΠΏ ΠΊ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ.ΠΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΡΠΊΠ°Π·Π°Π½ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅,Π΅ΡΠ»ΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ-
Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ. ΡΠΈΠΏ
- ΠΡΠΎΡ Π°ΡΡΠΈΠ±ΡΡ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠΈΠΏ ΠΎΠ±ΡΡΠ²Π»ΡΠ΅ΠΌΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ ΠΈ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΠΎΠ΄Π½ΠΎ ΠΈΠ· Π΄Π²ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ.
ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡ
:ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ,ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ Π³ΡΡΠΏΠΏΡ ΠΊΠΎΠΌΠ°Π½Π΄,Π°ΠΊΡΠΈΠ²ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠ΅ΡΠ΅Π· Π΄ΡΡΠ³ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΊΠ°ΠΊ ΠΌΠ΅Π½Ρ ΠΊΠ½ΠΎΠΏΠΎΠΊ,Π½Π° ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΡΡΠ»Π°Π΅ΡΡΡ Π°ΡΡΠΈΠ±ΡΡmenu
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°,ΠΈΠ»ΠΈ ΠΊΠ°ΠΊ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ
contextmenu
.ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ,Π΅ΡΠ»ΠΈ Π°ΡΡΠΈΠ±ΡΡ ΠΎΡΡΡΡΡΡΠ²ΡΠ΅Ρ ΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°ΠΊΠΆΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ
.ΠΏΠ°Π½Π΅Π»Ρ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ²
:Π£ΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½Π° ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ²,ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΏΠ°Π½Π΅Π»Ρ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ²,ΡΠΎΡΡΠΎΡΡΡΡ ΠΈΠ· ΡΠ΅ΡΠΈΠΈ ΠΊΠΎΠΌΠ°Π½Π΄ Π΄Π»Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ.ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ΡΠΏΠΎΡΡΠ΄ΠΎΡΠ΅Π½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²ΠΈΠ»ΠΈ,Π΅ΡΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
,ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΏΠΎΡΠΎΠΊΠ°,ΠΎΠΏΠΈΡΡΠ²Π°ΡΡΠ΅Π΅ Π΄ΠΎΡΡΡΠΏΠ½ΡΠ΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρ.ΠΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ,Π΅ΡΠ»ΠΈ Π°ΡΡΠΈΠ±ΡΡ ΠΎΡΡΡΡΡΡΠ²ΡΠ΅Ρ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΡ ΠΏΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ
ΠΈ
ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΡΠΎΠ±ΠΎΠΉ Π½Π΅ΡΠΏΠΎΡΡΠ΄ΠΎΡΠ΅Π½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².ΠΠ»ΡΡΠ΅Π²ΠΎΠ΅ ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ,ΡΡΠΎ
Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ,ΡΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ
ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²,Ρ ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ.ΠΠ΅Π½Ρ HTML ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΡΡ ΠΌΠ΅Π½Ρ(ΠΎΠ±ΡΡΠ½ΠΎ Π°ΠΊΡΠΈΠ²ΠΈΡΡΠ΅ΠΌΡΡ ΡΠ΅Π»ΡΠΊΠΎΠΌ ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡΡΠΈ ΠΏΠΎ Π΄ΡΡΠ³ΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ)ΠΈΠ»ΠΈ ΠΏΠ°Π½Π΅Π»Π΅ΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ².
ΠΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΡΠ΅ ΠΌΠ΅Π½ΡΡΠΎΡΡΠΎΡΡ ΠΈΠ· ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
,ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π²ΡΠ±ΠΈΡΠ°Π΅ΠΌΠΎΠΉ ΠΎΠΏΡΠΈΠΈ Π² ΠΌΠ΅Π½Ρ,
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ Π² ΠΌΠ΅Π½Ρ ΠΈ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π»ΠΈΠ½ΠΈΠΈ Π΄Π»Ρ ΡΠ°Π·Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ Π½Π° ΡΠ°Π·Π΄Π΅Π»Ρ.ΠΠ°ΡΠ΅ΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΡΠ΅ ΠΌΠ΅Π½Ρ ΠΏΡΠΈΡΠΎΠ΅Π΄ΠΈΠ½ΡΡΡΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ,ΠΈΠ· ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΎΠ½ΠΈ Π°ΠΊΡΠΈΠ²ΠΈΡΡΡΡΡΡ,ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π»ΠΈΠ±ΠΎ Π°ΡΡΠΈΠ±ΡΡcontextmenu Π°ΡΡΠΎΡΠΈΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°,Π»ΠΈΠ±ΠΎ,Π΄Π»Ρ Π°ΠΊΡΠΈΠ²ΠΈΡΡΠ΅ΠΌΡΡ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ ΠΌΠ΅Π½Ρ,ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ,Π°ΡΡΠΈΠ±ΡΡ
menu
.ΠΠ΅Π½Ρ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ²ΡΠΎΡΡΠΎΡΡ ΠΈΠ· ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
,ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΎΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Π΄Π²ΡΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ²:Π»ΠΈΠ±ΠΎ ΠΊΠ°ΠΊ Π½Π΅ΡΠΏΠΎΡΡΠ΄ΠΎΡΠ΅Π½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²,ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ (ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΊΠΎΠΌΠ°Π½Π΄Ρ ΠΈΠ»ΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ,ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ)ΠΈΠ»ΠΈ(Π΅ΡΠ»ΠΈ Π½Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
)ΠΏΠΎΡΠΎΠΊ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ,ΠΎΠΏΠΈΡΡΠ²Π°ΡΡΠΈΠΉ Π΄ΠΎΡΡΡΠΏΠ½ΡΠ΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρ ΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ.
ΠΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΠ±ΡΡΠ²Π»Π΅Π½ ΡΡΡΠ°ΡΠ΅Π²ΡΠΈΠΌ Π² HTML4,Π½ΠΎ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ Π² HTML5.1 ΠΈ ΡΡΠ°Π½Π΄Π°ΡΡΠ΅ ΠΆΠΈΠ·Π½ΠΈ HTML.Π ΡΡΠΎΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅ ΠΎΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ ΡΠ΅ΠΊΡΡΠ°Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ Firefox.Π’ΠΈΠΏ Β«ΡΠΏΠΈΡΠΎΠΊΒ»,ΡΠΊΠΎΡΠ΅Π΅ Π²ΡΠ΅Π³ΠΎ,ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ Π½Π° Β«ΠΏΠ°Π½Π΅Π»Ρ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ²Β» Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ HTML5.1.
ΠΡΠΈΠΌΠ΅ΡΡ
HTML
Ρ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΡΠΌ ΠΌΠ΅Π½Ρ->
Π©Π΅Π»ΠΊΠ½ΠΈΡΠ΅ ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡΡΠΈ,ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π½Π°ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ<ΡΠ°Ρ/> CSS
div{ΡΠΈΡΠΈΠ½Π°:300 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;Π²ΡΡΠΎΡΠ°:80 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;ΡΠ²Π΅Ρ ΡΠΎΠ½Π°:ΡΠ²Π΅ΡΠ»ΠΎ-Π·Π΅Π»Π΅Π½ΡΠΉ;}
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ
ΠΠ½ΠΎΠΏΠΊΠΈ ΠΌΠ΅Π½Ρ Π΅ΡΠ΅ Π½Π΅ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Ρ Π½ΠΈ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ· ΠΈΠ·Π²Π΅ΡΡΠ½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ².ΠΡΡΠΈΠ±ΡΡ
ΡΠΈΠΏΠ°
Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅ΡΠ΅ΠΏΠ΅ΡΡ ΡΡΡΠ°ΡΠ΅Π». HTML
<ΡΠ°Ρ/> Π Π΅Π·ΡΠ»ΡΡΠ°Ρ
ΠΠ°Π½Π΅Π»Ρ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ²
ΠΠ΅Π½Ρ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Π΅ΡΠ΅ Π½Π΅ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ Π½ΠΈ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ· ΠΈΠ·Π²Π΅ΡΡΠ½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ².
HTML
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ
Π’Π΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΈΠ΅ Ρ Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠΈ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ
Π‘ΠΌ.
Π³ΡΠ°Π½ΠΈΡ Π²Π½ΡΡΡΠΈ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅border-bottom
ΠΊΠΎ Π²ΡΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ - , ΠΊΡΠΎΠΌΠ΅
ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΈ Π±ΡΠ΄ΡΡ Π·Π°Π½ΠΈΠΌΠ°ΡΡ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ, Π΄ΠΎΡΡΡΠΏΠ½ΡΡ ΠΏΡΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ ΠΊΠ°ΠΊ Π±Π»ΠΎΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ Π±ΡΠ΄Π΅Ρ ΡΠΎΡ ΠΆΠ΅, ΡΡΠΎ ΠΈ Π² Π½Π°ΡΠ΅ΠΌ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅:
ΠΡΠΈΠΌΠ΅Ρ
ΡΠ»
{
ΡΠΈΠΏ-ΡΡΠΈΠ»Ρ-ΡΠΏΠΈΡΠΎΠΊ: Π½Π΅Ρ;
ΠΌΠ°ΡΠΆΠ°: 0;
ΠΎΡΡΡΡΠΏ: 0;
ΡΠΈΡΠΈΠ½Π°: 60 ββΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
Π»ΠΈ
Π°
{
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π±Π»ΠΎΠΊ;
}
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΠ°ΠΌ »
ΠΡΠΈΠΌΠ΅ΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π±Π°Π·ΠΎΠ²ΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Ρ ΡΠ΅ΡΡΠΌ ΡΠ²Π΅ΡΠΎΠΌ ΡΠΎΠ½Π° ΠΈ
ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΡΡΡΠ»ΠΎΠΊ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π°
ΠΈΡ
:
ΠΡΠΈΠΌΠ΅Ρ
ul {
list-style-type: none;
ΠΌΠ°ΡΠΆΠ°: 0;
ΠΎΡΡΡΡΠΏ: 0;
ΡΠΈΡΠΈΠ½Π°:
200 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: # f1f1f1;
}
li a {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ:
Π±Π»ΠΎΠΊ;
ΡΠ²Π΅Ρ: # 000;
ΠΎΡΡΡΡΠΏ: 8 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ 16 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ΅ΠΊΡΡ-ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅: Π½Π΅Ρ;
}
/ *
ΠΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΡΡΡΠ»ΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ * /
li a: hover {
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: # 555;
ΡΠ²Π΅Ρ: Π±Π΅Π»ΡΠΉ;
}
ΠΠΎΠΏΡΠΎΠ±ΡΠΉ ΡΠ°ΠΌ »
ΠΠΊΡΠΈΠ²Π½Π°Ρ / ΡΠ΅ΠΊΡΡΠ°Ρ ΡΡΡΠ»ΠΊΠ° Π΄Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
ΠΠΎΠ±Π°Π²ΡΡΠ΅ Β«Π°ΠΊΡΠΈΠ²Π½ΡΠΉΒ» ΠΊΠ»Π°ΡΡ ΠΊ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΡΡΡΠ»ΠΊΠ΅, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π·Π½Π°Π», Π½Π° ΠΊΠ°ΠΊΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΎΠ½ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ:
Π¦Π΅Π½ΡΡΠ°Π»ΡΠ½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π³ΡΠ°Π½ΠΈΡΡ
ΠΠΎΠ±Π°Π²ΡΡΠ΅ text-align: center
ΠΊ