ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΌΠ΅Π½Ρ ΡΠ°ΠΉΡΠ° html css
CSS ΠΌΠ΅Π½Ρ
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΠ΅ΡΠ²ΡΠΌ ΡΠ°Π³ΠΎΠΌ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΌΠ°ΡΠΊΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΡΠΏΠΈΡΠΊΠ°. Π’Π°ΠΊΠΆΠ΅ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΏΠΈΡΠΎΠΊ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΊ Π½Π΅ΠΌΡ Π°ΡΡΠΈΠ±ΡΡ id Ρ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠΌ «navbar». ΠΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π°ΡΠ΅Π³ΠΎ ΡΠΏΠΈΡΠΊΠ° Π±ΡΠ΄Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠ»ΠΊΠ΅:
ΠΠ°ΡΠ° ΡΠ»Π΅Π΄ΡΡΡΠ°Ρ Π·Π°Π΄Π°ΡΠ° Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠ±ΡΠΎΡΠ΅ ΡΡΠΈΠ»Π΅ΠΉ ΡΠΏΠΈΡΠΊΠ°, ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ±ΡΠ°ΡΡ Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ Ρ ΡΠ°ΠΌΠΎΠ³ΠΎ ΡΠΏΠΈΡΠΊΠ° ΠΈ ΠΌΠ°ΡΠΊΠ΅ΡΡ Ρ ΠΏΡΠ½ΠΊΡΠΎΠ² ΡΠΏΠΈΡΠΊΠ°. ΠΠ°ΡΠ΅ΠΌ Π·Π°Π΄Π°Π΄ΠΈΠΌ Π½ΡΠΆΠ½ΡΡ ΡΠΈΡΠΈΠ½Ρ:
Π’Π΅ΠΏΠ΅ΡΡ ΠΏΡΠΈΡΠ»ΠΎ Π²ΡΠ΅ΠΌΡ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΠ°ΠΌΠΈ ΡΡΡΠ»ΠΊΠΈ. ΠΡ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΊ Π½ΠΈΠΌ ΡΠΎΠ½ΠΎΠ²ΡΠΉ ΡΠ²Π΅Ρ, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΡΠ΅ΠΊΡΡΠ°: ΡΠ²Π΅Ρ, ΡΠ°Π·ΠΌΠ΅Ρ ΠΈ Π½Π°ΡΡΡΠ΅Π½Π½ΠΎΡΡΡ ΡΡΠΈΡΡΠ°, ΡΠ±Π΅ΡΠ΅ΠΌ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅, Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ ΠΈ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΠΌ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΎ ΡΡΡΠΎΡΠ½ΠΎΠ³ΠΎ Π½Π° Π±Π»ΠΎΡΠ½ΡΠΉ. ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±ΡΠ»ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ Π»Π΅Π²Π°Ρ ΠΈ Π½ΠΈΠΆΠ½ΡΡ ΡΠ°ΠΌΠΊΠΈ ΠΊ ΠΏΡΠ½ΠΊΡΠ°ΠΌ ΡΠΏΠΈΡΠΊΠ°.
Π‘Π°ΠΌΠΎΠΉ Π²Π°ΠΆΠ½ΠΎΠΉ ΡΠ°ΡΡΡΡ Π½Π°ΡΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΡΡΠΎΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° Π±Π»ΠΎΡΠ½ΡΠ΅. Π’Π΅ΠΏΠ΅ΡΡ Π½Π°ΡΠΈ ΡΡΡΠ»ΠΊΠΈ Π·Π°Π½ΠΈΠΌΠ°ΡΡ Π²ΡΠ΅ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΏΡΠ½ΠΊΡΠΎΠ² ΡΠΏΠΈΡΠΊΠ°, ΡΠΎ Π΅ΡΡΡ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅ Π½Π°ΠΌ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π½Π°Π²ΠΎΠ΄ΠΈΡΡ ΠΊΡΡΡΠΎΡ ΡΠΎΡΠ½ΠΎ Π½Π° ΡΠ΅ΠΊΡΡ.
ΠΡ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΠ»ΠΈ Π²Π΅ΡΡ ΠΊΠΎΠ΄, ΠΎΠΏΠΈΡΠ°Π½Π½ΡΠΉ Π²ΡΡΠ΅, Π² ΠΎΠ΄ΠΈΠ½ ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ΅ΠΏΠ΅ΡΡ, Π½Π°ΠΆΠ°Π² Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ ΠΈ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ:
ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ Π½Π° ΠΏΡΠ½ΠΊΡ ΠΌΠ΅Π½Ρ Π΅Π³ΠΎ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΡΡ, ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°Ρ ΠΊ ΡΠ΅Π±Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ. Π‘ΠΎΠ·Π΄Π°ΡΡ ΡΠ°ΠΊΠΎΠΉ ΡΡΡΠ΅ΠΊΡ ΠΌΠΎΠΆΠ½ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠ΅Π²Π΄ΠΎ-ΠΊΠ»Π°ΡΡΠ° :hover.
ΠΠ΅ΡΠ½Π΅ΠΌΡΡ ΠΊ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½Π½ΠΎΠΌΡ ΡΠ°Π½Π΅Π΅ ΠΏΡΠΈΠΌΠ΅ΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π² ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ:
ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
Π ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΡ ΡΠ°ΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡΡΠ΅ΡΠΈΡΡ Π½Π° ΡΠ°ΠΉΡΠ°Ρ ΡΠ»Π΅Π²Π° ΠΈΠ»ΠΈ ΡΠΏΡΠ°Π²Π° ΠΎΡ ΠΎΠ±Π»Π°ΡΡΠΈ Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ. ΠΠ΄Π½Π°ΠΊΠΎ ΠΌΠ΅Π½Ρ Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠΌΠΈ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ ΡΠ°ΠΊΠΆΠ΅ ΡΠ°ΡΡΠΎ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ ΠΈ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ Π² Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠ»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΡΠ½ΠΊΡΠΎΠ² ΠΌΠ΅Π½Ρ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, ΡΠ½Π°ΡΠ°Π»Π° ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΠΌΠ°ΡΠΊΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ Ρ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ:
ΠΠ°ΠΏΠΈΡΠ΅ΠΌ Π΄Π»Ρ Π½Π°ΡΠ΅Π³ΠΎ ΡΠΏΠΈΡΠΊΠ° ΠΏΠ°ΡΡ ΠΏΡΠ°Π²ΠΈΠ», ΡΠ±ΡΠ°ΡΡΠ²Π°ΡΡΠΈΡ ΡΡΠΈΠ»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ Π΄Π»Ρ ΡΠΏΠΈΡΠΊΠΎΠ² ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΈ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΠΌ ΠΏΡΠ½ΠΊΡΡ ΡΠΏΠΈΡΠΊΠ° Ρ Π±Π»ΠΎΡΠ½ΡΡ Π½Π° ΡΡΡΠΎΡΠ½ΡΠ΅:
Π’Π΅ΠΏΠ΅ΡΡ Π½Π°ΠΌ ΠΎΡΡΠ°Π»ΠΎΡΡ Π»ΠΈΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅Π²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ Π΄Π»Ρ Π½Π°ΡΠ΅Π³ΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ:
ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ
ΠΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ, Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ Π² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΠΈ ΠΏΠΎΠ΄ΠΏΡΠ½ΠΊΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠ»Π΅ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ Π½Π° ΡΠΎΡ ΠΏΡΠ½ΠΊΡ ΠΌΠ΅Π½Ρ, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΡΡΠΈ ΠΏΠΎΠ΄ΠΏΡΠ½ΠΊΡΡ ΠΎΡΠ½ΠΎΡΡΡΡΡ.
Π‘Π½Π°ΡΠ°Π»Π° Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ HTML-ΡΡΡΡΠΊΡΡΡΡ Π½Π°ΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ. ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ ΠΌΡ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠΌ Π² ΠΌΠ°ΡΠΊΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ:
Π£Π±ΠΈΡΠ°Π΅ΠΌ Ρ ΠΎΠ±ΠΎΠΈΡ ΡΠΏΠΈΡΠΊΠΎΠ² ΠΎΡΡΡΡΠΏΡ ΠΈ ΠΌΠ°ΡΠΊΠ΅ΡΡ, ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΠΈΡΠΊΠ° Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠΌΠΈ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ Π΄Π΅Π»Π°Π΅ΠΌ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΌΠΈ, ΡΠΎΡΠΌΠΈΡΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ, Π½ΠΎ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΏΠΈΡΠΊΠ°, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΡ ΠΏΠΎΠ΄ΠΏΡΠ½ΠΊΡΡ Π·Π°Π΄Π°Π΅ΠΌ float: none;, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»ΠΈΡΡ Π΄ΡΡΠ³ ΠΏΠΎΠ΄ Π΄ΡΡΠ³ΠΎΠΌ.
ΠΠ°ΡΠ΅ΠΌ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ Π½Π°ΡΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ Π½Π΅ ΡΠΌΠ΅ΡΠ°Π»ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠΉ ΠΏΠΎΠ΄ ΠΏΠ°Π½Π΅Π»ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, Π²Π½ΠΈΠ·. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΌΡ Π·Π°Π΄Π°Π΄ΠΈΠΌ ΠΏΡΠ½ΠΊΡΠ°ΠΌ ΡΠΏΠΈΡΠΊΠ° position: relative;, Π° ΡΠΏΠΈΡΠΊΡ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅ΠΌΡ ΠΏΠΎΠ΄ΠΏΡΠ½ΠΊΡΡ position: absolute; ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ top ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ 100%, ΡΡΠΎΠ±Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»ΠΎΡΡ ΡΠΎΡΠ½ΠΎ ΠΏΠΎΠ΄ ΡΡΡΠ»ΠΊΠΎΠΉ.
ΠΡΡΠΎΡΠ° Π΄Π»Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠΏΠΈΡΠΊΠ° Π±ΡΠ»Π° Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π° ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π½Π΅ ΡΡΠΈΡΡΠ²Π°ΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, ΡΠΎ Π±Π΅Π· Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π²ΡΡΠΎΡΡ Π½Π°Ρ ΡΠΏΠΈΡΠΎΠΊ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΠΈΠ³Π½ΠΎΡΠΈΡΠΎΠ²Π°Π½ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ ΠΈ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ Π·Π° ΡΠΏΠΈΡΠΊΠΎΠΌ, Π±ΡΠ΄Π΅Ρ ΠΎΠ±ΡΠ΅ΠΊΠ°ΡΡ Π½Π°ΡΠ΅ ΠΌΠ΅Π½Ρ.
Π’Π΅ΠΏΠ΅ΡΡ Π½Π°ΠΌ ΠΎΡΡΠ°Π»ΠΎΡΡ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΎΠ±Π° Π½Π°ΡΠΈΡ ΡΠΏΠΈΡΠΊΠ° ΠΈ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ Π³ΠΎΡΠΎΠ²ΠΎ:
CSS ΠΌΠ΅Π½Ρ Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ
Π€ΠΎΠ½ Π΄Π»Ρ ΠΌΠ΅Π½Ρ
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ background, Ρ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ Π½Π΅ ΠΌΠ°ΡΡΠ΅Ρ PhotoShop’a, Π½ΠΎ Π²ΠΎΡ ΡΡΠΎ Ρ ΠΌΠ΅Π½Ρ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΎΡΡ Π·Π° ΠΏΠ°ΡΡ ΠΌΠΈΠ½ΡΡ:
ΠΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΡΠΊΠΈ
Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊΠΎΡΠΎΡΡΠ΅ Ρ Π½Π°Ρ Π±ΡΠ΄ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ ΡΡΡΠ»ΠΊΠΈ Π² ΠΌΠ΅Π½Ρ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ PhotoShop’ΠΎΠΌ:
HTML ΠΊΠΎΠ΄
CSS ΠΊΠΎΠ΄
#menu
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° ΡΠ±ΠΈΡΠ°Π΅ΠΌ padding ΠΈ margin Ρ ΠΌΠ΅Π½Ρ, list-style Π²ΡΡΡΠ°Π²Π»ΡΠ΅ΠΌ Π² none, position ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ ΠΊΠ°ΠΊ relative. Π£ΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ Π²ΡΡΠΎΡΡ ΠΈ ΡΠΈΡΠΈΠ½Ρ ΠΌΠ΅Π½Ρ (ΡΠΌ. ΡΠ°Π·ΠΌΠ΅ΡΡ menu-bg.jpg). ΠΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
#menu <
list-style: none;
padding: 0;
margin: 0;
width: 774px;
height: 210px;
background: url(images/menu-bg.jpg) no-repeat;
position: relative;
>
#menu span
ΠΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² span ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ display Π²ΡΡΡΠ°Π²Π»ΡΠ΅ΠΌ Π² none (ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π½Π΅ Π±ΡΠ΄ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ). Π’Π°ΠΊ ΠΆΠ΅ Π²ΡΡΡΠ°Π²Π»ΡΠ΅ΠΌ position ΠΊΠ°ΠΊ absolute.
#menu a
ΠΠ»Ρ ΡΡΡΠ»ΠΎΠΊ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΏΡΡΡΠ°ΡΡ ΡΠ΅ΠΊΡΡ, Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ text-indent ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°Π΅ΠΌ Π½Π΅Π³Π°ΡΠΈΠ²Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ (-900%), ΠΈ ΡΠ΅ΠΊΡΡ Π±ΡΠ΄Π΅Ρ ΡΠΊΡΡΡ.
#menu a:hover
Π’Π΅ΠΏΠ΅ΡΡ ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΡΠ΄Π²ΠΈΠ½ΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π½Π° Π»ΠΈΠ½ΠΊΠ΅ ΠΏΠΎ ΡΠΎΠ±ΡΡΠΈΡ mouseover, Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π² CSS ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄:
#menu a:hover span
Π’Π°ΠΊ ΠΆΠ΅ ΠΏΠΎ ΡΠΎΠ±ΡΡΠΈΡ mouseover Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΡ
Π’Π΅ΠΏΠ΅ΡΡ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΡΠ°ΡΡΡΠ°Π²ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠ΅Π½Ρ. ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° ΡΠΊΠ°ΠΆΠ΅ΠΌ ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΈ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π° Π·Π°ΡΠ΅ΠΌ Π·Π°ΠΉΠΌΠ΅ΠΌΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ, Π±ΡΠ΄Π΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ left ΠΈ top ΠΏΠΎΠΊΠ° Π½Π΅ ΠΏΠΎΡΡΠ²ΡΡΠ²ΡΠ΅ΠΌ ΠΌΠΎΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ΄ΠΎΠ²Π»Π΅ΡΠ²ΠΎΡΠ΅Π½ΠΈΡ ΠΎΡ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π²ΠΈΠ΄Π° ΠΌΠ΅Π½Ρ:
Π’Π΅ΠΏΠ΅ΡΡ ΠΏΡΠΎΠ²Π΅Π΄Π΅ΠΌ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΡ Π΄Π»Ρ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅ΠΉ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ
ΠΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ
ΠΡΠΎ Π²ΡΡ, ΠΏΡΠΎΡΠ΅ΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡ, Π° ΡΠΊΠ°ΡΠ°ΡΡ ΠΏΡΠΈΠΌΠ΅Ρ ΡΡΡ.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΈ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΌΠ΅Π½Ρ
ΠΡΠ½ΠΎΠ²Ρ Π²Π΅ΡΡΡΠΊΠΈ
ΠΠΎΠ΄ ΠΏΡΠΎΡΡΠ΅ΠΉΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ:
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅
— ΠΡΠ΄Π°?
— Π css-ΡΠ°ΠΉΠ»!
— Π ΠΊΠ°ΠΊΠΎΠΉ?
Π₯ΠΎΡΠΎΡΠΈΠΌ ΡΠΎΠ½ΠΎΠΌ ΡΡΠΈΡΠ°Π΅ΡΡΡ Π²ΡΠ΅ ΡΡΠΈΠ»ΠΈ ΡΠ°ΠΉΡΠ° ΠΎΡΠΎΡΠΌΠ»ΡΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΡΠΆΠ°ΡΡΠΌ ΡΠ°ΠΉΠ»ΠΎΠΌ. ΠΠΎ Π½Π° Π²ΡΠ΅ΠΌΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Π³ΠΎΡΠ°Π·Π΄ΠΎ ΡΠ΄ΠΎΠ±Π½Π΅Π΅ ΠΈΠΌΠ΅ΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΡΠ°ΠΉΠ»Ρ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΡΠ°Π½ΠΈΡΡ, Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π΄Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ.
ΠΠΎΠ·ΠΆΠ΅ ΠΊΠΎΠ΄ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΠ΅ΡΠ΅Π½Π΅ΡΡΠΈ Π² ΠΎΠ±ΡΠΈΠΉ ΡΠ°ΠΉΠ», Π° ΡΡΠΎΡ ΡΠ΄Π°Π»ΠΈΡΡ (ΠΈΠ»ΠΈ ΠΎΡΠΊΠ»ΡΡΠΈΡΡ).
ΠΠ°ΠΊ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°ΡΡΡΡ ΡΡΠΈΠ»Π΅Π²ΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π° Π΄Π»Ρ ΠΌΠ΅Π½Ρ
ΠΠ΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΠ»Π°ΡΡΡ, ΠΈ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°ΡΡ ΡΡΠΈΠ»ΠΈ ΡΠΆΠ΅ Π΄Π»Ρ Π½ΠΈΡ . ΠΠΎΡΠΎΠΌΡ ΡΡΠΎ Π΅ΡΠ»ΠΈ Π·Π°Π΄Π°Π²Π°ΡΡ ΡΡΠΈΠ»ΠΈ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ Π΄Π»Ρ ΡΠ΅Π³ΠΎΠ², Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ:
ΡΠΎ ΡΡΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΡΡΡΡ ΠΈ Π½Π° Π²ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ, Π²ΠΊΠ»ΡΡΠ΅Π½Π½ΡΠ΅ Π² ΡΠΏΠΈΡΠΊΠΈ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΠΌΠ΅Π½Ρ! ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π½Π° ΡΠ°ΠΉΡΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅Π½Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΠΎΠ³ΠΎ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ.
ΠΠ°ΠΊΠΈΠΌ ΡΠ΅Π³Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°ΡΡ ΠΊΠ»Π°ΡΡΡ
Π₯ΠΎΡΠΎΡΠΈΠΉ Π²ΠΎΠΏΡΠΎΡ. ΠΠ»Ρ Π½Π°ΡΠ°Π»Π°, Π½Π΅ΠΏΠ»ΠΎΡ ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ-ΠΎΠ±Π΅ΡΡΠΊΡ ΠΈ ΠΏΡΠΈΡΠ²ΠΎΠΈΡΡ ΠΊΠ»Π°ΡΡ Π΅ΠΌΡ.
ΠΡΠΈ ΡΡΠΎΠΌ Π²ΡΠ΅Π³Π΄Π° Π½Π°Π΄ΠΎ Π΄Π΅ΡΠΆΠ°ΡΡ Π² ΡΠΌΠ΅, ΡΡΠΎ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠΉ Π±Π»ΠΎΠΊ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ Π²Π½Π΅ΡΠ½Π΅ΠΌ Π±Π»ΠΎΠΊΠ΅ ΡΠ°ΠΉΡΠ° ΠΈ Π΅Π³ΠΎ ΠΌΠ΅ΡΡΠΎΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ Ρ Π²Π½Π΅ΡΠ½ΠΈΠΌΠΈ ΠΎΡΡΡΡΠΏΠ°ΠΌΠΈ ΠΈΠ»ΠΈ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ Π²ΡΠΏΠ°Π΄Π΅Π½ΠΈΡ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ (ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎΠ± ΡΡΠΎΠΌ Π² ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π΅ «ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ») Π·Π°Π²ΠΈΡΡΡ ΠΎΡ Π²Π½Π΅ΡΠ½ΠΈΡ ΠΊΠ»Π°ΡΡΠΎΠ² Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ ΡΠ°ΠΉΡΠ°.
ΠΠ°ΠΊΠΈΠ΅ ΠΈΠΌΠ΅Π½Π° Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ Ρ ΠΊΠ»Π°ΡΡΠΎΠ²
ΠΠ΅ΡΠ²ΡΠΉ ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π·Π° ΡΠ²Π΅ΡΠΎΠ²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ Π²ΡΠ΅Ρ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ, Π² ΡΠΎΠΆΠ΅ Π²ΡΠ΅ΠΌΡ, Π΄Π°Π΅Ρ ΠΏΠΎΠ½ΡΡΡ ΡΡΠΎ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΠΊ ΠΌΠ΅Π½Ρ.
ΠΡΠΎΡΠΎΠΉ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΡΠΈΡΡΠ΅Ρ ΡΠΏΠΈΡΠΎΠΊ ΠΊΠ°ΠΊ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎ ΠΌΠ΅Π½Ρ.
ΠΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅!
Π‘ΡΠ°ΡΠ°ΠΉΡΠ΅ΡΡ Π²ΡΠ±ΠΈΡΠ°ΡΡ ΠΈΠΌΠ΅Π½Π° Π΄Π»Ρ ΠΊΠ»Π°ΡΡΠΎΠ² Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π²Π½ΡΡΠ½ΡΠ΅, Π½ΠΎ ΠΈ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅. Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡΡ ΠΊΠΎΠ½ΡΠ»ΠΈΠΊΡΠΎΠ²Π°ΡΡ Ρ ΡΠΆΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠΌΠΈ ΠΊΠ»Π°ΡΡΠ°ΠΌΠΈ.
ΠΡΡΠΏΠΏΠΈΡΠΎΠ²ΠΊΠ° ΡΡΠΈΠ»Π΅ΠΉ ΠΏΠΎ ΠΊΠ»Π°ΡΡΠ°ΠΌ
ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅, Π²ΡΠ΅ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ. ΠΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ, Π½Π° ΡΡΠ°ΠΏΠ΅ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π½ΡΠΆΠ½ΠΎ Π³ΡΡΠΏΠΏΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠΈΠ»ΠΈ ΡΠ΅ΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈ Π²ΠΊΠ»ΡΡΠ°ΡΡ ΠΈΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ ΠΊΠ»Π°ΡΡΡ.
ΠΡΠΎΡΡΠΎΠ΅ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΡΡ ΠΎΠ΄Π½ΡΠΉ html-ΠΊΠΎΠ΄ ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ:
ΠΡΠΎΠΌΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΠΊΠ»Π°ΡΡΠΎΠ², ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½Π½ΡΡ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π΅, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ ΠΊΠ»Π°ΡΡ li.active Π΄Π»Ρ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΏΡΠ½ΠΊΡΠ° (ΡΡΡΠ»ΠΊΠ° Π½Π° ΡΠ΅ΠΊΡΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ).
Π‘Π±ΡΠΎΡ ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΡΠΈΠ»Π΅ΠΉ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ
ΠΠ·Π±Π°Π²Π»ΡΠ΅ΠΌΡΡ ΠΎΡ ΡΡΠΈΠ»Π΅ΠΉ Π΄Π»Ρ ΡΠΏΠΈΡΠΊΠΎΠ², Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ (ΠΈΠ»ΠΈ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠΌ) ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
ΠΠ΄Π΅ΡΡ ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΡΠΈΡΡΠ°, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ ΠΎΡ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ .
Π¦Π²Π΅ΡΠΎΠ²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅
ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°ΡΡ ΡΡΠΈΠ»ΠΈ, ΡΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌ ΡΠΏΠΈΡΠΎΠΊ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² ΠΊ ΠΊΠΎΡΠΎΡΡΠΌ ΠΎΠ±ΡΡΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠ²Π΅ΡΠΎΠ²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅:
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅
ΠΠ° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅ Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π²ΡΠ΅ ΡΡΠΈΠ»ΠΈ, Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π»ΠΈΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈΠ½ΠΎΠ³Π΄Π° Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ²Π΅ΡΠ° ΡΡΡΠ»ΠΊΠΈ ΠΈΠ»ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅.
ΠΠ°ΠΌΠ΅ΡΠ°Π½ΠΈΠ΅
Π¦Π²Π΅Ρ ΡΠΎΠ½Π° ΠΌΠ΅Π½Ρ Π·Π°Π΄Π°Π²Π°ΡΡ Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ, Π΅ΡΠ»ΠΈ ΠΎΠ½ Π½Π°ΡΠ»Π΅Π΄ΡΠ΅ΡΡΡ ΠΎΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.
Π Π°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»ΠΈ ΠΏΡΠ½ΠΊΡΠΎΠ²
ΠΡΠΎ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ΅ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ΅ΠΌΠ½ΠΎΠ³ΠΎ Π±ΡΠΊΠ³ΡΠ°ΡΠ½Π΄Π°. ΠΡΠ»ΠΈ Π²Ρ ΡΠ΅ΡΠΈΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΡΠΎΠ½Π°, ΡΠΎ ΡΠ²Π΅Ρ ΡΠ°ΠΌΠΊΠΈ ΠΈ ΡΠ΅Π½ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ!
ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ (ΠΌΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΠΎΠ΅)
ΠΠΎ ΡΡΠΎΠ³ΠΎ ΠΌΠΎΠΌΠ΅Π½ΡΠ° ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π»ΠΎΡΡ ΠΏΡΠΎΡΡΠΎΠ΅ ΠΎΠ΄Π½ΠΎΡΡΠΎΠ²Π½Π΅Π²ΠΎΠ΅ ΠΌΠ΅Π½Ρ. ΠΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΠΏΡΠ°ΠΊΡΠΈΠΊΠ°, ΠΎΡΠ΅Π½Ρ ΡΠ°ΡΡΠΎ, ΡΠ΅ΡΠ΅Π· ΠΊΠ°ΠΊΠΎΠ΅-ΡΠΎ Π²ΡΠ΅ΠΌΡ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΡ ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌ ΠΏΡΠ½ΠΊΡΠ°ΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΏΠΎΠ΄ΠΏΡΠ½ΠΊΡΡ. ΠΠΎΡΡΠΎΠΌΡ:
ΠΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Π»ΡΠ±ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π½ΡΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΠ°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΠΎΠ΅!
Π ΠΌΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΠΎΠΌ ΠΌΠ΅Π½Ρ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠ½ΠΊΡΠΎΠ² ΠΌΠΎΠ³ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠ΄ΠΏΡΠ½ΠΊΡΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ ΡΠΊΡΡΡΠΎ (Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ, Π½ΠΎ Π±ΡΠ΄Π΅ΠΌ ΡΠ°ΡΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΡΠΎΡ Π²Π°ΡΠΈΠ°Π½Ρ). ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΏΡΠ½ΠΊΡ ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΠ΅ΡΡΡ Π²ΡΠ²ΠΎΠ΄ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ.
ΠΠ° ΠΎΡΠ½ΠΎΠ²Ρ Π²Π·ΡΡ ΠΊΠΎΠ΄ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ°. Π ΠΎΠ΄Π½ΠΎΠΌΡ ΠΈΠ· ΠΏΡΠ½ΡΠΊΠΎΠ² Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ Π²ΡΠΎΡΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ.
HTML-ΠΊΠΎΠ΄ 2-Ρ ΡΡΠΎΠ²Π½Π΅Π²ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ:
Π Π°Π·Π±ΠΈΠ²Π°Π΅ΠΌ Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠ°ΠΏΠΎΠ²:
Π¦Π²Π΅ΡΠΎΠ²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅
Π§ΡΠΎΠ±Ρ Π½Π΅ ΡΡΠ»ΠΎΠΆΠ½ΡΡΡ ΠΊΠΎΠ΄, ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΈ ΠΎΡΡΡΡΠΏΡ ΠΎΡΡΠ°Π²Π»Π΅Π½Ρ ΡΠ΅ ΠΆΠ΅, ΡΡΠΎ ΠΈ Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΠΌΠ΅Π½Ρ.
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΡΠΊΡΡΡΠΈΠ΅
ΠΡΠ²ΠΎΠ΄
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ
ΠΠΎΠ΄ΠΌΠ΅Π½Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅Π΅ Π²Π»Π΅Π²ΠΎ
ΠΡΠ»ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΎ Π² ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ΅, ΡΠΎ Π±ΡΠ΄Π΅Ρ Π»ΠΎΠ³ΠΈΡΠ½ΠΎ Π΅ΡΠ»ΠΈ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ Π²ΡΠΏΠ°Π΄Π°Π΅Ρ ΡΠ»Π΅Π²Π°. Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅Π΅ ΠΎΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΎΠΊΠ°Π·Π°ΡΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ ΡΠΊΡΠ°Π½Π°.
ΠΡΠΎΡΡΠ°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ
Π§ΡΠΎ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ. Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, ΡΡΡΠ΅ΠΊΡΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΡΠ΅:
Π― Π½Π΅ ΡΡΠ°Π» Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠΉ ΠΊΠ»Π°ΡΡ Π΄Π»Ρ ΡΡΡΠ΅ΠΊΡΠΎΠ² Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ, ΠΊΠ°ΠΊ Π²Ρ Π½ΠΈΠΆΠ΅ ΡΠ°ΠΌΠΈ ΡΠ²ΠΈΠ΄ΠΈΡΠ΅, Π²ΡΠ΅ Π΄Π΅Π»Π°Π΅ΡΡΡ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ ΠΏΡΡΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΡΡΠΎΡΠ΅ΠΊ ΠΊΠΎΠ΄Π° css ΠΊ ΡΠΆΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠΌ ΠΊΠ»Π°ΡΡΠ°ΠΌ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ ΡΠΏΡΠΎΡΠ΅Π½Π½ΡΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ. Π’Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ Π½Π΅ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π΄Π»Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠΈΠΏΠΎΠ² Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ².
ΠΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ:
Π‘ΠΊΡΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ. ΠΠ°ΡΠΈΠ°Π½Ρ 2
ΠΠ»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΌ ΡΠΏΠΎΡΠΎΠ±ΠΎΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΌΠ΅Π½Ρ Π² ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠΊΡΠ°Π½Π° + ΠΏΠΎΠ»Π½Π°Ρ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ.
Π Π°Π·Π΄Π²ΠΈΠΆΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ-Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½
ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ»ΠΎΠ² Π²ΡΡΡΠΏΠ»Π΅Π½ΠΈΡ
ΠΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ ΡΠΎΠ·Π΄Π°ΡΡ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½-ΠΌΠ΅Π½Ρ ΠΈΠ· ΠΏΡΠΎΡΡΠΎΠ³ΠΎ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ, Π²Π½Π΅ΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² ΠΊΠΎΠ΄ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ ΠΈ ΡΡΠΈΠ»ΠΈ.
ΠΡΡΠΏΠΏΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π³ΡΡΠΏΠΏΡ ΡΠ²ΠΎΠΉΡΡΠ² ΡΡΠ°Π·Ρ Π΄Π»Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² ΠΈ ΠΊΠ»Π°ΡΡΠΎΠ², ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ ΠΊΠΎΠ΄ Π±ΠΎΠ»Π΅Π΅ ΡΠΈΡΠ°Π±Π΅Π»ΡΠ½ΡΠΌ.
ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΡΡΠΈΠ»ΠΈ, Π΄Π»Ρ Π·Π°ΠΊΡΡΡΠΎΠ³ΠΎ ΠΈ ΡΠ°ΡΠΊΡΡΡΠΎΠ³ΠΎ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π°:
ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΠΎ ΡΡΡΡΠΊΡΡΡΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π½ΠΈ ΡΠ΅ΠΌ Π½Π΅ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ, html-ΠΊΠΎΠ΄ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΉ. Π’Π΅ΠΎΡΠ΅ΡΠΈΡΠ΅ΡΠΊΠΈ, ΠΏΠΎΠ»ΡΡΠΈΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ ΠΈΠ· Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΌΠ΅Π½ΠΎΠΉ/Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ ΠΊΠ»Π°ΡΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°.
Π§ΡΠΎΠ±Ρ Π½Π΅ ΡΡΠ»ΠΎΠΆΠ½ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ ΠΈ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅, ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Ρ Π½ΡΠ»Ρ, ΡΠΎ ΡΠ²ΠΎΠΈΠΌΠΈ ΠΊΠ»Π°ΡΡΠ°ΠΌΠΈ.
Π ΠΈΡΠΎΠ³Π΅ Π½Π°ΡΠ΅ ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ:
ΠΠ° ΠΎΡΠ½ΠΎΠ²Ρ Π²ΠΎΠ·ΡΠΌΠ΅ΠΌ ΠΊΠΎΠ΄ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ ΠΈ Π·Π°ΠΌΠ΅Π½ΠΈΠΌ ΠΊΠ»Π°ΡΡΡ:
Π Π°Π·ΠΌΠ΅ΡΠΊΠ°
Π§ΡΠΎ Π±ΡΠ»ΠΎ ΡΠ΄Π΅Π»Π°Π½ΠΎ:
ΠΠΎΡΡΠ½Π΅Π½ΠΈΡ:
Π Π°Π·ΠΌΠ΅ΡΠΊΠ° Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ:
ΠΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅
ΠΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ ΠΊΠ°ΠΊ Π·Π°Π½ΡΡΡΡΡ ΡΠ²Π΅ΡΠΎΠ²ΡΠΌ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΅ΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠΈΠ»Π΅Π²ΡΡ ΠΏΡΠ°Π²ΠΈΠ» ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ. Π― ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ ΠΏΠ΅ΡΠ΅Π½Π΅Ρ ΠΈΡ Π² ΠΎΡΠΎΠΌΠ»Π΅Π½ΠΈΠ΅, ΡΡΠΎΠ±Ρ Π±ΡΠ» ΠΏΠΎΠ½ΡΡΠ½Π΅Π΅ ΡΠΌΡΡΠ».
ΠΡΠ»ΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ Π½Π°Π·Π°Π½ΡΠΈΡΡ ΡΠ²Π΅Ρ ΡΠΎΠ½Π°, ΡΠΎ ΠΌΡ Π΅Π³ΠΎ Π½Π΅ ΡΠ²ΠΈΠ΄ΠΈΠΌ ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΡΠΈΠ½Π΅:
Π’Π΅ΠΏΠ΅ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π±ΡΠ΄Π΅Ρ Π²Π΅ΡΡΠΈ ΡΠ΅Π±Ρ Π±ΠΎΠ»Π΅Π΅ Π΄ΡΡΠΆΠ΅Π»ΡΠ±Π½ΠΎ ΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π΅Π³ΠΎ ΠΎΡΠΎΡΠΌΠ»ΡΡΡ
ΠΠ»Ρ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΡ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΏΡΠ½ΠΊΡΠ° ΠΌΠ΅Π½Ρ Π±ΡΠ»Π° ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½Π° ΡΠ΅Π½Ρ.
ΠΠ° ΡΡΠΎΠΌ ΡΠ²Π΅ΡΠΎΠ²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠΈΡΠ°ΡΡ Π·Π°Π²Π΅ΡΡΠ΅Π½Π½ΡΠΌ. Π’Π΅ΠΏΠ΅ΡΡ Ρ Π»Π΅Π³ΠΊΠΎΡΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠΎΡΡΠ΅ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ²Π΅ΡΠΎΠ²ΡΡ Π³Π°ΠΌΠΌΡ, ΠΈΠ»ΠΈ ΡΠΎΠ·Π΄Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΠ»Π°ΡΡΠΎΠ² Π΄Π»Ρ ΡΠ°Π·Π½ΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ.
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ
Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ CSS
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° ΠΌΡ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π±Π°Π·ΠΎΠ²ΡΡ ΡΡΡΡΠΊΡΡΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ, ΡΠΎΡΡΠΎΡΡΠ΅Π³ΠΎ ΠΈΠ· ΡΠ΅ΡΡΠΈ ΠΏΡΠ½ΠΊΡΠΎΠ²:
ΠΠ°Π»Π΅Π΅ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π±Π°Π·ΠΎΠ²ΡΠ΅ CSS-ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ HTML Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ. Π― ΠΎΡΡΠ°Π²ΠΈΠ» ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ Π±Π»ΠΎΠΊΡ ΠΊΠΎΠ΄Π°:
ΠΠΎΡΠ»Π΅ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ Ρ Π½Π°Ρ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡΡΡ Π½Π΅ΡΡΠΎ Π²ΡΠΎΠ΄Π΅ ΡΡΠΎΠ³ΠΎ:
ΠΡΠ»ΠΈ Π΄ΠΎ ΡΡΠΎΠ³ΠΎ ΠΌΠΎΠΌΠ΅Π½ΡΠ° Π²Ρ Π²ΡΠ΅ Π΄Π΅Π»Π°Π»ΠΈ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ, ΡΠΎ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΠΏΡΠ½ΠΊΡ ΠΌΠ΅Π½Ρ Β« WordPress Β» Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠΉ ΡΠΏΠΈΡΠΎΠΊ Ρ ΡΡΠ΅ΠΌΡ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΏΡΠ½ΠΊΡΠ°ΠΌΠΈ (Β« Themes Β», Β« Plugins Β», Β« Tutorials Β»):
Π§ΡΠΎΠ±Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ HTML ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»ΠΎΡΡ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ, Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΅ΡΠ΅ ΠΏΠ°ΡΡ ΡΡΡΠΎΠΊ CSS ΠΊΠΎΠ΄Π° :
ΠΡΠ»ΠΈ Π²ΡΠ΅ ΡΠ΄Π΅Π»Π°Π½ΠΎ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ, Ρ Π²Π°Ρ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡΡΡ Π½Π΅ΡΡΠΎ Π²ΡΠΎΠ΄Π΅ ΡΡΠΎΠ³ΠΎ:
ΠΡΠΎΡ ΠΏΡΠΎΡΠ΅ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ²ΡΠΎΡΡΡΡ, ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π½ΠΎΠ²ΡΠ΅ ΡΡΠΎΠ²Π½ΠΈ. ΠΠΎ Π½Π΅ ΡΠ»Π΅Π΄ΡΠ΅Ρ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΈΡ ΠΊ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΡΠΏΠΈΡΠΊΠ°, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Ρ ΡΠ΄Π΅Π»Π°Π» ΡΡΠΎ Π»ΠΈΡΡ Π΄Π»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ°.
ΠΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΡΠΏΠΈΡΠΊΠ°
ΠΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Π² HTML Π΄ΠΎ ΠΊΠΎΠ½ΡΠ°, ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌΡΡ Ρ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½Π° Π½Π°Π»ΠΈΡΠΈΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΡΠΏΠΈΡΠΊΠ°, ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΊ ΡΠΎΠΌΡ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΌΡ ΠΏΡΠ½ΠΊΡΡ ΠΌΠ΅Π½Ρ (Π·Π½Π°ΠΊ Β«+Β» ):
ΠΠ½Π°ΡΠΈΡ, Π²Ρ Π²ΡΠ΅ ΡΠ΄Π΅Π»Π°Π»ΠΈ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ.
Π Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΈΠ΅
ΠΠ½ΠΎΠ³ΠΈΠ΅ Π΄Π»Ρ Π΄ΠΎΡΡΠΈΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ jQuery ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ. Π― ΡΡΠΈΡΠ°Ρ, ΡΡΠΎ Π² ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ ΡΠ°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΠΈ Π»Π΅Π³ΠΊΠΈΠΉ Π²Π°ΡΠΈΠ°Π½Ρ. ΠΠΎ Π²ΡΠ±ΠΎΡ Π·Π° Π²Π°ΠΌΠΈ.
ΠΠ°ΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΡΠΎΠ·Π΄Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
ΠΠ· ΡΡΠΎΠ³ΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π° Π²Ρ ΡΠ·Π½Π°Π΅ΡΠ΅, ΠΊΠ°ΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΡΠΎΠ·Π΄Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΌΡ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ CSS flexbox ΠΈ Ρ Π°ΠΊΠΎΠΌ Ρ ΡΠ΅ΠΊ-Π±ΠΎΠΊΡΠ°ΠΌΠΈ.
ΠΠ΅ΡΡ Π½ΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΊΡΠ°ΠΉΠ½Π΅ Π²Π°ΠΆΠ½Π° Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ°. Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΎΠΏΠΈΡΠ°Π½Π° ΠΎΠ΄Π½Π° ΠΈΠ· ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΠ°Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½Π°. Π ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ JavaScript Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΡΠΏΠΈΡΠΊΠ° Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ .
ΠΠ°ΡΡΡΠΎΠΉΠΊΠ°
Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΠΏΡΡΡΠΎΠΉ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ ΠΈ Π½Π°Π·ΠΎΠ²ΠΈΡΠ΅ Π΅Π³ΠΎ index.html. ΠΠΎΠ±Π°Π²ΡΡΠ΅ Π² Π½Π΅Π³ΠΎ Π±Π°Π·ΠΎΠ²ΡΠΉ HTML-ΠΊΠΎΠ΄.
Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΡΠ°ΠΉΠ» styles.css ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΠ΅ Π΅Π³ΠΎ Π² HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅:
Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ° ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ΅ Π½ΠΈΠΆΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²ΠΎΠ΅ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ HTML-ΠΊΠΎΠ΄ Π² ΡΠ΅Π³
ΠΠ»Π΅ΠΌΠ΅Π½Ρ header ΡΠΎΡΠΌΠΈΡΡΠ΅Ρ ΡΠ΅ΠΌΠ½ΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡΡ Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅. Π’Π°ΠΊΠΆΠ΅ Ρ Π½Π°Ρ Π΅ΡΡΡ div menu-wrap, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ Π΄Π»Ρ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ°, ΡΡΡΠ»ΠΎΠΊ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΈ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΌΠ΅Π½Ρ.
Π ΡΠ°ΠΉΠ» styles.css Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠΈΠ»Π΅ΠΉ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²:
ΠΠ°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΠ΅ ΡΡΠΈ ΡΡΠΈΠ»ΠΈ ΠΊ header.
Π’Π΅ΠΏΠ΅ΡΡ ΡΠ΅ΠΌΠ½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Π΅ΡΡΡ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠ΅ Π½ΠΈΠΆΠ΅ ΡΡΠΈΠ»ΠΈ ΠΊ ΠΊΠ»Π°ΡΡΡ menu-wrap:
ΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ display:flex, ΡΡΠΎΠ±Ρ Π²ΡΠ΅ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π·Π°Π½ΠΈΠΌΠ°Π»ΠΈ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ. Π‘Π²ΠΎΠΉΡΡΠ²Ρ justify-content ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ space-between, ΡΡΠΎΠ±Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ ΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π΄Π°Π»ΡΡΠ΅ Π΄ΡΡΠ³ ΠΎΡ Π΄ΡΡΠ³Π°.
Π‘ΡΠΈΠ»ΠΈΠ·ΡΠ΅ΠΌ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΡΡΠΈΡ Π΄ΠΎΡΠ΅ΡΠ½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΎΠ΄ΠΈΠ½ Π·Π° Π΄ΡΡΠ³ΠΈΠΌ.
Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΌΡ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΈ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π»ΠΎΠ³ΠΎΡΠΈΠΏ ΠΈ ΠΈΠΊΠΎΠ½ΠΊΡ Π½ΡΠΆΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°. Π’Π΅ΠΏΠ΅ΡΡ Π½ΡΠΆΠ½ΠΎ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ Π²ΡΠ΅ ΠΏΡΠ½ΠΊΡΡ ΠΌΠ΅Π½Ρ Π½ΠΈΠΆΠ΅ ΠΏΠ°Π½Π΅Π»ΠΈ. Π‘Π½Π°ΡΠ°Π»Π° Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄:
Π’Π΅ΠΏΠ΅ΡΡ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΡΠΈΠ»ΠΈ ΡΠΏΠΈΡΠΊΠ° ΠΈ ΡΡΡΠ»ΠΎΠΊ:
Π’Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π΄Π»Ρ ΡΡΡΠ»ΠΎΠΊ ΡΡΠΈΠ»ΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈ ΡΠΎΠΊΡΡΠ°:
Π’Π΅ΠΏΠ΅ΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅:
ΠΠ΅Π½Ρ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ ΡΠ½Π°ΡΠ°Π»Π° ΡΠΊΡΡΡΠΎ ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° ΠΈΠΊΠΎΠ½ΠΊΡ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ nav ul Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈ max-height, overflow, Π° ΡΠ°ΠΊΠΆΠ΅ transition:
ΠΡΠΎΡ ΠΊΠΎΠ΄ ΡΠΊΡΠΎΠ΅Ρ Π²ΡΠ΅ ΠΌΠ΅Π½Ρ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° max-height Π·Π°Π΄Π°Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ 0, Π° Π΄Π»Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° overflow:hidden. ΠΡ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ Π΄Π»Ρ ΡΠΊΡΡΡΠΈΡ ΠΌΠ΅Π½Ρ display:none, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π½Π°ΠΌ Π½ΡΠΆΠ΅Π½ ΡΡΡΠ΅ΠΊΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΡΠΊΠΎΠ»ΡΠΆΠ΅Π½ΠΈΡ ΠΌΠ΅Π½Ρ Π²Π½ΠΈΠ·. ΠΠ½ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π΄ΠΎΡΡΠΈΠ³Π½ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° max-height.
Π₯Π°ΠΊ Ρ ΡΠ΅ΠΊΠ±ΠΎΠΊΡΠΎΠΌ
ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠΈΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠ΅Π½Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΎΠ»ΡΠΊΠΎ CSS. ΠΡΡΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ β ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΊΡΡΡΡΠΉ ΡΠ΅ΠΊΠ±ΠΎΠΊΡΠ°.
ΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΠΈΠΊΠΎΠ½ΠΊΡ Π³Π°ΠΌΠ±ΡΡΠ³Π΅ΡΠ° Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΌΠ΅ΡΠΊΠΈ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ΅ΠΊΠ±ΠΎΠΊΡΠ°. ΠΠΎΡΠ»Π΅ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΌΠ΅ΡΠΊΠΈ ΡΠ΅ΠΊΠ±ΠΎΠΊΡ Π±ΡΠ΄Π΅Ρ Π²ΡΠ±ΡΠ°Π½. ΠΠΎΡΡΠΎΠΌΡ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΠ° :checked, ΡΡΠΎΠ±Ρ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΠΌΠ΅Π½Ρ!
Π ΡΠ°ΠΉΠ»Π΅ index.html Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ checkbox ΠΏΠ΅ΡΠ΅Π΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ nav:
Π ΡΡΠΎΠΌ ΠΊΠΎΠ΄Π΅ for=βcheckboxβ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ, ΡΡΠΎΠ±Ρ ΡΠ΅ΠΊΠ±ΠΎΠΊΡ Π±ΡΠ» ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ / ΡΠ½ΡΡ ΠΏΡΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° ΡΡΡ ΠΌΠ΅ΡΠΊΡ.
Π‘Π½Π°ΡΠ°Π»Π° Π½ΡΠΆΠ½ΠΎ ΡΠΊΡΡΡΡ ΡΠ΅ΠΊΠ±ΠΎΠΊΡ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π² ΡΠ°ΠΉΠ» styles.css Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄:
ΠΠ»Ρ Π±ΠΎΠ»ΡΡΠΈΡ ΡΠΊΡΠ°Π½ΠΎΠ²
ΠΠΊΠΎΠ½ΠΊΠ° Π³Π°ΠΌΠ±ΡΡΠ³Π΅ΡΠ° Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π½Π° Π±ΠΎΠ»ΡΡΠΈΡ ΡΠΊΡΠ°Π½Π°Ρ , Π½Π° ΠΊΠΎΡΠΎΡΡΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΌΠ΅ΡΡΠ° Π΄Π»Ρ Π²ΡΠ²ΠΎΠ΄Π° ΡΡΡΠ»ΠΎΠΊ.
ΠΠΎΡΡΠΎΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅Π΄ΠΈΠ°Π·Π°ΠΏΡΠΎΡΠΎΠ² Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΊΡΠ°Π½Π° ΠΏΠ»Π°Π½ΡΠ΅ΡΠ° ΠΈ Π±ΠΎΠ»ΡΡΠ΅, ΡΡΠΎΠ±Ρ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΡΡΡΠ»ΠΊΠΈ Π²ΠΌΠ΅ΡΡΠΎ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΌΠ΅Π½Ρ. Π ΡΠ°ΠΉΠ» styles.css Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π½ΠΈΠΆΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡ.
Π Π½Π΅ΠΌ ΡΠ½Π°ΡΠ°Π»Π° ΡΠΏΡΡΡΡΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΡ ΠΌΠ΅Π½Ρ.
ΠΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²Π΅Π»ΠΈΡΡΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° Π΄ΠΎ ΡΠΈΡΠΈΠ½Ρ, ΠΏΡΠ΅Π²ΡΡΠ°ΡΡΠ΅ΠΉ 768 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ.
Π’Π΅ΠΏΠ΅ΡΡ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΡΠΈΠ»ΠΈ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ nav ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ Π΅Π³ΠΎ ΡΠΎΠ½Π°. ΠΠ°ΡΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ display:inline-flex Π΄Π»Ρ nav ul li, ΡΡΠΎΠ±Ρ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΡΡΡΠ»ΠΊΠΈ ΡΡΠ΄ΠΎΠΌ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ.
Π’Π΅ΠΏΠ΅ΡΡ Π²Ρ Π·Π½Π°Π΅ΡΠ΅, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΠΏΡΠ½ΠΊΡΡ Π½Π° Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΡ ΡΠΊΡΠ°Π½ΠΎΠ². ΠΠΎ ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΠΈΠΊΠΎΠ½ΠΊΡ Π³Π°ΠΌΠ±ΡΡΠ³Π΅ΡΠ° Π΄Π»Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ ΡΠΊΡΠ°Π½ΠΎΠ².
Π‘ΠΠΠ§ΠΠ’Π¬ ΠΠ‘Π₯ΠΠΠΠ«Π ΠΠΠ
ΠΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, ΠΎΡΡΠ°Π²Π»ΡΠΉΡΠ΅ ΡΠ²ΠΎΠΈ ΠΎΡΠ·ΡΠ²Ρ ΠΏΠΎ ΡΠ΅ΠΊΡΡΠ΅ΠΉ ΡΠ΅ΠΌΠ΅ ΡΡΠ°ΡΡΠΈ. ΠΠ° ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ, Π»Π°ΠΉΠΊΠΈ, ΠΎΡΠΊΠ»ΠΈΠΊΠΈ, ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΠΈ, Π΄ΠΈΠ·Π»Π°ΠΉΠΊΠΈ ΠΎΠ³ΡΠΎΠΌΠ½ΠΎΠ΅ Π²Π°ΠΌ ΡΠΏΠ°ΡΠΈΠ±ΠΎ!