Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ | HTML/xHTML
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ ΡΠ°ΡΡΠΎ Π½Π°Π·ΡΠ²Π°ΡΡ Β«Π»ΠΈΠΏΠΊΠΈΠΌΒ» ΠΌΠ΅Π½Ρ, ΠΏΠΎΡΠΎΠΌΡ ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΡΡΡΡ, ΠΏΠΎΠΌΠΈΠΌΠΎ ΡΠ°ΠΌΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΎΠ½ΠΎ Π²ΡΠ΅Π³Π΄Π° ΠΎΡΡΠ°Π΅ΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅, Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.
ΠΡΠΎ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½Π°Ρ ΠΏΡΠ°ΠΊΡΠΈΠΊΠ°, ΠΊΠΎΠ³Π΄Π° Π² ΡΠ°Π±Π»ΠΎΠ½Π½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΏΠΎ ΡΠ°ΠΉΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ ΠΈΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΠΌΠ΅Π½Ρ, Π΄Π° ΠΈ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΌΠ΅Π½Ρ.
Π‘ΡΡΠΎΠΊΠ° ΠΏΠΎΠΈΡΠΊΠ°, ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΠ΅ΡΠ΅ΠΉ, Π²ΡΠ΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ ΡΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΡ. ΠΠΎΠ΄ΠΎΠ±Π½ΡΠΉ ΡΠ°Π±Π»ΠΎΠ½ Π³Π°ΡΠ°Π½ΡΠΈΡΡΠ΅Ρ, ΡΡΠΎ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°ΠΉΡΠ° Π±ΡΠ΄ΡΡ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΡ Π² Π»Π΅Π³ΠΊΠΎΠ΄ΠΎΡΡΡΠΏΠ½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΠΎΡ ΡΠΎΠ³ΠΎ, Π³Π΄Π΅ ΠΈΠΌΠ΅Π½Π½ΠΎ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π² Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ.
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Ρ ΠΏΠΎΠΊΠ°ΠΆΡ Π²Π°ΠΌ ΠΏΡΠΎΡΡΠΎΠΉ CSS-ΠΏΡΠΈΠ΅ΠΌ Π΄Π»Ρ Π²Π½Π΅Π΄ΡΠ΅Π½ΠΈΡ Π² ΡΠ°ΠΉΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Β«Π»ΠΈΠΏΠΊΠΎΠ³ΠΎΒ» Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ.
ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ Π½Π°ΡΠ°ΡΡ, ΠΌΡ Π²Π·Π³Π»ΡΠ½Π΅ΠΌ Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΉΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΠΏΠ°Π½Π΅Π»ΠΈ, ΠΏΡΠΎΡΡΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅.
ΠΠΈΠΆΠ΅ Ρ ΠΏΡΠΈΠ²ΠΎΠΆΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΡΠ»ΠΎΠΊ.
Π Niice ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π² ΡΠ΅Π±Π΅ ΠΎΠΊΠ½ΠΎ ΠΏΠΎΠΈΡΠΊΠ° ΠΈ ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΏΠΎ ΡΠ°ΠΉΡΡ. ΠΠΎ Π²ΡΠ΅ΠΌΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ², Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π±ΡΡΡΡΠΎ ΡΠΈΠ»ΡΡΡΠΎΠ²Π°ΡΡ ΠΈΡ , Π½Π΅ ΠΏΡΠ΅ΡΡΠ²Π°ΡΡΡ Π½Π° ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠ°ΠΉΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΎΠΊΠ½ΠΎ ΠΏΠΎΠΈΡΠΊΠ° Π² Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΠΊΡΠ°Π½Π°:
Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΎΡΠ° 99U Π²ΡΡΡΠΎΠΈΠ»ΠΈ Π² Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ ΠΏΠ°Π½Π΅Π»Ρ ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ. ΠΠΎ Π²ΡΠ΅ΠΌΡ ΡΡΠ΅Π½ΠΈΡ Π½ΠΎΠ²ΠΎΡΡΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΠ΅ΡΡΡΡΠ° ΠΈΠΌΠ΅Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΌΠΎΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π° Π² Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΡΠΉ Π΅ΠΌΡ ΡΠ°Π·Π΄Π΅Π» ΡΠ°ΠΉΡΠ°:
Π‘Π°ΠΉΡ Forbes.com ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΠ» ΠΌΠ΅Π½Ρ, ΡΠΈΡΡΠ΅ΠΌΡ ΠΏΠΎΠΈΡΠΊΠ° ΠΏΠΎ ΡΠ°ΠΉΡΡ ΠΈ Π²ΠΈΠ΄ΠΆΠ΅Ρ Π΄Π»Ρ Π°Π²ΡΠΎΡΠΈΠ·Π°ΡΠΈΠΈ Π½Π° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΠ² ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, ΡΠΈΡΠ°ΡΡΠ΅ΠΌΡ Π½ΠΎΠ²ΠΎΡΡΠΈ ΡΠ΄ΠΎΠ±ΡΡΠ²ΠΎ Π±ΡΡΡΡΠΎΠ³ΠΎ Π΄ΠΎΡΡΡΠΏΠ°.
ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ Π±ΡΡΡΡΠΎ ΠΏΡΡΠ³Π°ΡΡ ΠΊ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΡΠ°ΡΡΠ΅ ΠΏΠΎΡΠ»Π΅ ΠΏΡΠΎΡΡΠ΅Π½ΠΈΡ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΉ. Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅Ρ Π²ΡΠ΅ΠΌΡ Π½Π°Ρ ΠΎΠΆΠ΄Π΅Π½ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π° ΡΠ°ΠΉΡΠ΅, ΠΏΠΎΡΠΎΠΌΡ ΠΊΠ°ΠΊ ΡΠΈΡΠ°ΡΠ΅Π»ΠΈ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΌΠ΅Π½Ρ Π΄Π»Ρ Π²ΡΠ±ΠΎΡΠ° ΡΠ²Π΅ΠΆΠΈΡ Π½ΠΎΠ²ΠΎΡΡΠ΅ΠΉ:
Π, ΠΊΠ°ΠΊ Ρ
ΠΎΡΠΎΡΠΎ Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ°, Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ ΡΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ ΠΏΠΎΠ²ΡΡΠ°Π΅Ρ ΡΠ·Π°Π±ΠΈΠ»ΠΈΡΠΈ ΡΠ°ΠΉΡΠ° Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎΠΌ ΡΠ°Π·Π½ΠΎΠΎΠ±ΡΠ°Π·Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°.
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ ΡΡΠΎ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΠΏΠΎΡΠΎΠ±, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΠΉ ΡΠΎΠΊΡΠ°ΡΠΈΡΡ Π²ΡΠ΅ΠΌΡ, ΠΏΠΎΡΡΠ°ΡΠ΅Π½Π½ΠΎΠ΅ Π½Π° ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΎΡ ΠΎΠ΄Π½ΠΎΠΉ Π·Π°Π΄Π°ΡΠΈ ΠΊ Π΄ΡΡΠ³ΠΎΠΉ ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ ΡΠ°ΠΉΡΠΎΠΌ (ΠΏΠΎΠΈΡΠΊ, Π°Π²ΡΠΎΡΠΈΠ·Π°ΡΠΈΡ, ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΡΡΡΠΊΡΡΡΠ΅). ΠΠΎΠ²ΠΎΡΡ ΠΏΠΎ-ΡΡΡΠ΅ΡΡΠ²Ρ, ΡΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΏΠΎΠ²ΡΡΠ°Π΅Ρ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΡΡΡ ΡΠ°ΠΉΡΠ°, ΠΏΡΠΈΠΌΠ΅Π½ΡΡ Π·Π°ΠΊΠΎΠ½Ρ Π€ΠΈΡΡΡΠ°:
Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅Π»ΠΈ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΈ ΠΎΡΠΎΠ·Π½Π°Π»ΠΈ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ ΡΠΈΠΏΠ°, ΠΏΡΠΈΡΡΡΠΏΠΈΠΌ, Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ, ΠΊ ΠΏΠΎΠ²ΡΡΠ΅Π½ΠΈΡ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΡΡΠΈ ΡΠ°Π±ΠΎΡΡ Π½Π°ΡΠ΅Π³ΠΎ ΠΎΠ½Π»Π°ΠΉΠ½ β ΡΠ΅ΡΡΡΡΠ°.
ΠΠΈΠΆΠ΅ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅:
ΠΠ ΠΠ‘ΠΠΠ’Π ΠΠ’Π¬ ΠΠΠΠ
Π‘ΠΠΠ§ΠΠ’Π¬ ΠΠ‘Π₯ΠΠΠΠΠΠ Π‘ GITHUB
ΠΠ΅ΡΠ΅ΠΉΡΠΈ ΠΊ GitHub Repository
Π Π°Π·ΠΌΠ΅ΡΠΊΠ° ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ β ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±Π»ΠΎΡΠ½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠΈ, Π² ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ:
<nav> <!-- Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ --> </nav>
ΠΠ»Π΅ΠΌΠ΅Π½Ρ nav ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅. ΠΠ½ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΡΠΎΡΠΎΠ½Π½ΠΈΠΌ ΡΠ΅ΡΠ²ΠΈΡΠ°ΠΌ (ΡΠ°ΠΊΠΈΠΌ, ΠΊΠ°ΠΊ Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΎΠ±ΠΎΡΡ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡΡ ΡΠΈΡΡΠ΅ΠΌ) Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π±Π΅Π· ΠΏΡΠΎΠ±Π»Π΅ΠΌ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΡ ΡΡΡΡΠΊΡΡΡΡ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°. ΠΠ»Π΅ΠΌΠ΅Π½Ρ nav ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ Π±Π»ΠΎΡΠ½ΡΠΌ, ΡΠ°ΠΊ ΡΡΠΎ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΏΠΈΡΠ°ΡΡ Π»ΠΈΡΠ½ΡΡ ΡΡΡΠΎΡΠΊΡ CSS-ΠΊΠΎΠ΄Π°.
ΠΠΎ Π΅ΡΠ»ΠΈ Π²Ρ Π½Π΅ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ nav, ΡΠΎ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ Π»ΡΠ±ΠΎΠΉ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π±Π»ΠΎΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ div. Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ inline-ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΠ°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ span, Π½ΠΎ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ Π΅ΠΌΡ Π² CSS-ΠΊΠΎΠ΄Π΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ display: block.
ΠΠΎΡ CSS-ΠΊΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ Π½Π°ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ ΠΏΠ°Π½Π΅Π»Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅:
.fixed-nav-bar { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 50px; background-color: #00a087; }
Π Π°Π½Π΅Π΅, ΠΌΡ ΠΏΡΠΈΡΠ²ΠΎΠΈΠ»ΠΈ Π½Π°ΡΠ΅ΠΌΡ HTML-ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΊΠ»Π°ΡΡ fixed-nav-bar, ΠΏΠΎΡΡΠΎΠΌΡ ΡΠ΅ΠΉΡΠ°Ρ ΠΏΡΠΎΡΡΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠΌ ΠΊ Π΄Π°Π½Π½ΠΎΠΌΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ Π½ΡΠΆΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈ.
ΠΠ½Π°ΡΠ΅Π½ΠΈΡ ΡΡΠ΅Ρ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² (width, height ΠΈ background-color) ΠΌΠ΅Π½ΡΠΉΡΠ΅ Π½Π° ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΠ΅ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ΅ΠΏΠ΅ΡΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΡΡΠΈ ΡΠ΅ΡΡΡΠ΅ Π²ΠΎΠ»ΡΠ΅Π±Π½ΡΡ CSS-ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΡΡ Π·Π° ΠΌΠ°Π³ΠΈΡ:
ΠΠΎΠ³Π΄Π° ΠΌΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ position ΡΠ°Π²Π½ΡΠΌ fixed ΠΏΠ°Π½Π΅Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΡΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°. ΠΡΠΎ ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΎΡΡΠ°Π²Π°ΡΡΡΡ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅:
top: 0; left: 0; right: 0;
Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π° top, left ΠΈ right Π² 0, ΠΌΡ ΠΈΠ·Π±Π΅Π³Π°Π΅ΠΌ Π½Π΅ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΠΎΡΡΡΡΠΏΠΎΠ² ΠΏΠΎ ΡΡΠΎΡΠΎΠ½Π°ΠΌ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ.
ΠΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠ°: Π΅ΡΠ»ΠΈ Π½ΡΠΆΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π² Β«ΠΏΠΎΠ΄Π²Π°Π»Π΅Β» ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠΎ, Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ top: 0 Π½Π° bottom: 0:
Π’Π°ΠΊΠΎΠ΅ Π±ΠΎΠ»ΡΡΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ z-index ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ, ΡΡΠΎΠ±Ρ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° HTML-ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ ΠΏΠΎΠ²Π΅ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ (Π΅ΡΠ»ΠΈ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ Π½Π΅ ΠΏΠΎΡΠ²ΠΈΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ z-index Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ 9999).
ΠΠ° ΡΡΠΎΠΌ, ΠΏΠΎΠΆΠ°Π»ΡΠΉ, Π²ΡΠ΅.
Π Π΄Π΅ΠΌΠΎ-ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΡΡΠ°ΡΠ΅Π²ΡΠΈΠΉ Π²Π°ΡΠΈΠ°Π½Ρ ΡΠ΅ΡΠΏΠΎΠ½ΡΠΈΠ²Π½ΠΎΠ³ΠΎ, Π²ΡΠΏΠΎΠ»Π½Π΅Π½Π½ΠΎΠ³ΠΎ Π½Π° CSS, Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ. Π ΡΡΠΎΠΌ Π²ΠΈΠ΄Π΅ ΠΎΠ½ΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠ΅ΠΉ, Π½ΠΎ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ Π·Π°ΠΊΠΎΠ½ΡΠ΅Π½Π½ΠΎΠΉ ΡΠΎΡΠΌΡ. Π’Π°ΠΊ ΠΊΠ°ΠΊ Π² ΡΡΠΎΠΌ ΡΡΠΎΠΊΠ΅ Π½Π°ΡΠ΅ΠΉ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠ΅Π»ΡΡ ΡΡΠ°Π»Π° ΠΏΠΎΡΡΡΠΎΠΉΠΊΠ° ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΌΠΎΠΆΠ΅Ρ ΡΠ²Π»ΡΡΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ Π΄Π»Ρ Π»ΡΠ±ΡΡ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΡΠ°Π½ΠΈΡΡ, ΠΌΠ΅Π½Ρ Ρ ΠΎΠ±ΡΡΠΆΠ΄Π°ΡΡ Π½Π΅ ΡΡΠ°Π½Ρ.
ΠΡΡΠ»Π΅Π΄ΡΠΉΡΠ΅ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄, Π΅ΡΠ»ΠΈ Π²Π°ΠΌ ΡΡΠ°Π½Π΅Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΡΠ° ΡΠ°ΡΡΡ (Π΅ΡΠ»ΠΈ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡΡ Π½Π΅ΠΏΠΎΠ½ΡΡΠ½ΡΠ΅ ΠΌΠΎΠΌΠ΅Π½ΡΡ, ΠΏΡΠΎΡΡΠΎ Π΄Π΅Π»Π°ΠΉΡΠ΅ tweet ΠΈ Ρ Π±ΡΠ΄Ρ ΡΡΠ°ΡΡΠ»ΠΈΠ² ΠΏΠΎΠΌΠΎΡΡ Π²Π°ΠΌ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ).
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡΠ° Π² ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ. ΠΠ½Π° ΡΡΠ΅Π±ΡΠ΅Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ HTML-ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ ΠΈ Π²ΡΠ΅Π³ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ CSS-ΡΠ²ΠΎΠΉΡΡΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ Ρ Π²Π°ΠΌΠΈ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π»ΠΈ.
ΠΠ±ΡΡΠΆΠ΄Π°Π΅ΠΌΡΠΉ Π² ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄ ΠΈΠΌΠ΅Π΅Ρ ΠΎΡΠ»ΠΈΡΠ½ΡΡ ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΡΡ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ, ΠΏΠΎΡΠΎΠΌΡ ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΎΠ²Π΅ΡΠ΅Π½Π½ΡΠ΅ ΠΈ Π½Π°Π΄Π΅ΠΆΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS, ΠΈ, ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π΄ΠΎΠ»ΠΆΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π΄Π°ΠΆΠ΅ Π² ΡΠ°ΠΌΡΡ Π΄ΡΠ΅Π²Π½ΠΈΡ Π²Π΅Π±-Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ . Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π΅ΡΠ»ΠΈ ΠΎΠ±ΡΠ°ΡΠ½Π°Ρ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ ΡΠΈΠ»ΡΠ½ΠΎ Π²Π°ΠΆΠ½Π° Π΄Π»Ρ Π²Π°ΡΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ², Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΈΠ½ΡΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΎ Π·Π°ΠΌΠ΅Π½Π΅ nav (ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ ΠΊ HTML5) Π½Π° div.
Π Π½ΡΠΆΠ½ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΡΠΌΠΎΠΆΠ΅Ρ ΡΠ»ΡΡΡΠΈΡΡ ΡΠ΄ΠΎΠ±ΡΡΠ²ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π΅Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΌΠ΅Π½ΡΡΠ°Π΅Ρ Π·Π°Π΄Π΅ΡΠΆΠΊΡ ΠΏΡΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π΅ ΠΊ Π½ΠΎΠ²ΠΎΠΉ Π·Π°Π΄Π°ΡΠ΅, ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ ΡΡΠ°Π΄ΠΈΡΠΈΠΎΠ½Π½ΠΎΠΉ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΡΠ΅Π±ΡΠ΅Ρ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΎΠ±ΡΠ°ΡΠ½ΠΎ ΠΊ Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠ°Π½Π½Π°Ρ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ ΡΡΠ°ΡΡΠΈ Β«How to Create a Fixed Navigation BarΒ» , ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²Π»Π΅Π½Π½ΠΎΠΉ Π΄ΡΡΠΆΠ½ΠΎΠΉ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ.ΡΡ
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ Π½Π° CSS
ΠΠ΄Π΅ΡΡ ΡΠΎΠ·Π΄Π°Π΅ΠΌ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π½Π° ΡΠ°ΠΉΡΠ΅ ΠΈΠ»ΠΈ Π΅ΡΠ΅ Π½Π°Π·ΡΠ²Π°ΡΡ ΠΏΠ»Π°Π²Π°ΡΡΠ΅Π΅. ΠΡΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ΅ ΠΎΠ½ΠΎ ΠΎΡΡΠ°Π½Π΅ΡΡΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΠΌΠ΅ΡΡΠ΅ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅. ΠΠ½ΠΎΠ³ΠΈΠ΅ Π·Π°ΠΌΠ΅ΡΠ°Π»ΠΈ Π½Π° ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ ΡΠ΅ΡΡΡΡΠ°Ρ ΡΠ°ΠΊΡΡ ΡΠΈΠΊΡΠ°ΡΠΈΡ, Π³Π΄Π΅ Π²Ρ ΠΎΠΏΡΡΠΊΠ°Π΅ΡΠ΅ Π±Π»ΠΎΠΊΠΈ ΠΈΠ»ΠΈ ΠΏΡΠΎΠΌΠ°ΡΡΠ²Π°Π΅ΡΠ΅, ΡΠΎ Π²Π΅ΡΡ Π½Π΅Π΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΎΡΡΠ°Π΅ΡΡΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠ²Π½ΠΎ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ Π½Π° Π΄ΡΡΠ³ΡΡ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΡ Π½Π΅ ΠΏΠΎΠ΄Π½ΠΈΠΌΠ°Ρ, ΡΡΠΎΠ± ΠΏΠΎΡΠ²ΠΈΠ»ΠΎΡΡ. ΠΠ΄Π΅ΡΡ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΡΡΠΎΠΉ ΠΊΠΎΠ΄ ΠΈ Ρ Π½Π΅Π³ΠΎ ΠΏΠΎΠΉΠΌΠ΅ΡΠ΅ ΠΊΠ°ΠΊ Π²ΡΠ΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π΅Π³ΠΎ ΠΏΠΎΠ΄ΠΊΡΠ΅ΠΏΠΈΡΡ ΠΈ ΡΠΆΠ΅ Π΄Π°Π»Π΅Π΅ ΡΠ°ΠΌ Π²Π΅Π± ΠΌΠ°ΡΡΠ΅Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΡΡΠΈΠ»Π΅ΠΉ ΠΈ ΡΠΊΡΠ°ΡΠΈΡΡ ΠΈΠ»ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΡΠ΅ΠΊΡΠ°.ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΊΠ°ΠΊ Π²ΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ.
ΠΡΠ΅ Π±ΡΠ΄Π΅Ρ Π²ΡΡΡΠ°Π²Π»ΡΡΡΡΡ Ρ ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ CSS, Π²ΠΎΠ·ΡΠΌΠ΅ΠΌ Π·Π° ΠΎΡΠ½ΠΎΠ²Ρ ΡΠ°Π±ΠΎΡΠΈΠΉ.
ΠΠΎΠ΄
<div><ul>
<li><a href=»http://zornet.ru/news/»>ZORNET.RU</a></li>
<li><a href=»http://zornet.ru/load/81″>Π‘ΠΊΡΠΈΠΏΡΡ</a></li>
<li><a href=»http://zornet.ru/load/142″>Π¨Π°Π±Π»ΠΎΠ½Ρ</a></li>
<li><a href=»http://zornet.ru/load/145″>ΠΠΈΠ·Π°ΠΉΠ½ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°</a></li>
</ul>
</div>
ΠΡΡ ΡΡΡΡ Π΅Π³ΠΎ Π·Π°ΠΊΡΠ΅ΠΏΠ»Π΅Π½ΠΈΠ΅ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΡΠΎΠ³ΠΎ.
ΠΠΎΠ΄
.menuskived {position:fixed;top:0px;left:0px; width:100%;padding:5px 0;}
ΠΠ°ΡΡΡΠΎΠΉΠΊΠ°:
position:fixed; — ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π·Π° ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ²Π΅ΡΡ Ρ.
top:0px; — ΠΠ°Π΄Π°Π΅ΠΌ ΠΈΠ»ΠΈ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ, Π³Π΄Π΅ Π·Π°ΠΏΡΠΎΡΡ Π±ΡΠ΄Π΅Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ°ΠΌΠΎΠ³ΠΎ Π²Π²Π΅ΡΡ .
left:0px; — ΠΡΠΏΠΎΠ»Π½ΡΠ΅ΠΌ ΡΠ΄Π²ΠΈΠ³ ΠΏΠΎ Π»Π΅Π²ΡΡ ΡΡΠΎΡΠΎΠ½Ρ.
ΠΠΎΠ»Π½ΡΠΉ CSS:
ΠΠΎΠ΄
.menuskived {position:fixed;top:0px;left:0px;width:100%;padding:7px 0;text-transform: uppercase;text-align: left;line-height: 61px;background: #3c6d9e;}
.menuskived ul {padding:0; margin:0;}
.menuskived li{display: inline;}
.menuskived li a {padding: 5px 20px; color: #f1f1f1;text-decoration: none;}
ΠΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΡΠΌΠΎΡΡΠ΅ΡΡΡ:
ΠΠΎΡ ΡΠΆΠ΅ ΠΏΠΎΠ»Π½ΠΎΡΠ΅Π½Π½Π°Ρ ΡΡΠ½ΠΊΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π·Π°ΠΊΡΠ΅ΠΏΠ»Π΅Π½Π°, ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ ΡΡΠΈΡΡΠΎΠ²ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈΠ»ΠΈ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΌΠΈΠ½ΠΈ ΠΏΡΠΎΡΠΈΠ»Ρ, Π·Π΄Π΅ΡΡ ΠΏΡΠΎΡΠ°Π±ΠΎΡΠΎΠΊ ΠΌΠ½ΠΎΠ³ΠΎ.
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS3
/*====================
Β
Π¦Π²Π΅ΡΠΎΠ²Π°Ρ ΡΡ Π΅ΠΌΠ° ΠΌΠ΅Π½Ρ
===============================*/
body {
background: #000000 url(header.jpg) no-repeat center top;
color: #666;
font: 14px/18px ‘Lato’, Arial, sans-serif;
text-align: justify;
}
/* Π¦Π²Π΅Ρ ΡΡΡΠΎΠΊΠΈ ΠΌΠ΅Π½Ρ */
#navigation,
#nav li ul li,
#nav li ul li a{
background: #000;
}
Β
/* Π¦Π²Π΅Ρ ΠΏΡΠ½ΠΊΡΠ° ΠΌΠ΅Π½Ρ */
#nav li a,
#nav li a:hover,
#nav li ul li,
#nav li ul li a,
#nav li ul li a:hover {
color: #fff;
}
Β
/* Π¦Π²Π΅Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ*/
#nav li a:hover,
#nav li ul li a:hover {
background: #9ACD32;
}
Β
/* Π’Π΅Π½ΠΈ*/
#nav li a,
#nav li a:hover,
#nav li ul li a:hover {
text-shadow: 0 1px 1px #333;
}
Β
/* Π¦Π²Π΅ΡΠ° ΡΠΎΡΠΌΡ ΠΏΠΎΠΈΡΠΊΠ° */
.searchform input, .searchform input:not(:focus){
color:#B1B1B1; /*Π¦Π²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ*/
background: #fff; /*Π¦Π²Π΅Ρ ΡΠΎΠ½Π° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ*/
}
.searchfield:focus{
color: #000; /* Π¦Π²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ */
}
Β
/*=====================================================================
ΠΡΠ½ΠΊΡΡ ΠΎΡΠ²Π΅ΡΠ°ΡΡΠΈΠ΅ Π·Π° ΡΠΈΠΊΡΠ°ΡΠΈΡ ΠΌΠ΅Π½Ρ
====================*/
Β
#menu_div{
clear: both;
position: relative;
top: 0;
left: 0;
}
Β
#navigation {
position: fixed;
}
Β
#navigation, #menu_div {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
Β
#menu_div, #navigation, #menu, #nav{
height: 45px; /* ΠΡΡΠΎΡΠ° ΠΌΠ΅Π½Ρ */
}
Β
#menu_div:hover,
#navigation:hover,
#nav li a:hover, #nav li ul a
{
opacity: 0.95;/* ΠΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ ΠΌΠ΅Π½Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ*/
}
Β
#menu_div,
#navigation,
#nav li a,
#menu_div:not(:hover),
#navigation:not(:hover)
{
opacity: 0.8;/* ΠΠΎΠ³Π΄Π° ΡΠ±ΠΈΡΠ°Π΅ΠΌ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ */
}
Β
#menu {
width: 960px;
margin:0 auto; /*Π¦Π΅Π½ΡΡ ΠΌΠ΅Π½Ρ*/
padding:0;
position: relative;
}
Β
#nav{
width: 960px;
margin:0;
padding:0;
position: relative;
font-family: ‘Arial’, Helvetica, sans-serif;
}
Β
#nav li a,#nav li {
float:left;
}
Β
#nav li {
list-style:none;
position:relative;
}
Β
#nav li a {
line-height: 45px;
padding:0 15px;
text-decoration:none;
margin:0;
font-size:12px;
font-weight:700;
text-transform:uppercase;
}
Β
/*====================
ΠΠΎΠ΄ΠΌΠ΅Π½Ρ
=====================*/
#nav li ul {
display:none;
position:absolute;
left:0;
top:100%;
padding:0;
margin:0;
} /* Π‘ΠΏΡΡΡΠ°ΡΡ ΠΌΠ΅Π½Ρ*/
Β
#nav li:hover > ul {
display:block;
} /* ΠΠΎΠΊΠ°Π·Π°ΡΡ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */
Β
#nav li ul li,#nav li ul li a {
float:none;
height: 35px; /* ΠΡΡΠΎΡΠ° ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ*/
min-width: 150px; /* ΠΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π° */
line-height: 35px;
border-right: 0;
text-shadow: none;
display:block;
font-size:13px;
font-weight:400;
text-transform:inherit;
}
Β
#nav li ul li {
_display:inline; /* ΠΠ»Ρ IE */
}
Β
/* == 12. ΠΠΎΠ΄-ΠΏΠΎΠ΄ ΠΏΡΠ½ΠΊΡΡ == */
#nav li ul li ul {
display:none;
}
Β
#nav li ul li:hover ul {
left:100%;
top:0;
}
Β
/*====================
Π€ΠΎΡΠΌΠ° ΠΏΠΎΠΈΡΠΊΠ°
====================*/
Β
.searchform {
position: absolute;
right: 15px;
top: 6px;
display: inline-block;
zoom: 1;
*display: inline;
border: 0;
padding: 0;
}
.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform .searchfield {
height: 27px;
line-height: 27px;
padding-left: 10px;
padding-right: 10px;
width: 150px;
border: 2px solid #333;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 1px 1px 2px #A1A1A1;
-webkit-box-shadow: inset 1px 1px 2px #A1A1A1;
box-shadow: inner 1px 1px 2px #A1A1A1;
}
Β
.searchfield:focus{
font-weight: 700;
width: 220px;
}
Β
.searchfield:not(:focus){
width: 150px;
}
Β
/*========================
ΠΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ
========================*/
Β
#nav li a:hover,
#nav li ul li a:hover {
-webkit-transition-property:color, background;
-webkit-transition-duration: 0.5s, 0.5s;
-webkit-transition-timing-function: linear, ease-out;
}
Β
.searchfield:focus,
.searchfield:not(:focus){
-webkit-transition-property:width;
-webkit-transition-duration: 0.5s, 0.5s;
-webkit-transition-timing-function: linear, ease-out;
}
Β
#menu_div:hover,
#navigation:hover,
#nav li ul a,
#menu_div,
#navigation,
#nav li a,
#menu_div:not(:hover),
#navigation:not(:hover)
{
-webkit-transition-property:opacity;
-webkit-transition-duration: 0.5s, 0.5s;
-webkit-transition-timing-function: linear, ease-out;
}
6 jQuery ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ
Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌ ΠΎΠ± ΠΎΡΠ΅Π½Ρ ΡΠ°ΡΠΏΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΡ
, Π½Π° ΡΠ΅Π³ΠΎΠ΄Π½ΡΡΠ½ΠΈΠΉ Π΄Π΅Π½Ρ, jQuery ΠΏΠ»Π°Π³ΠΈΠ½Π°Ρ
ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΡΡΡΠ΅ΡΠ°ΡΡΡΡ Π²ΡΠ΅ ΡΠ°ΡΠ΅ ΠΈ ΡΠ°ΡΠ΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ°Ρ
Π±Π»ΠΎΠ³ΠΎΠ² ΠΈ ΠΏΡΠΎΡΠΈΡ
ΡΠ΅ΡΡΡΡΠΎΠ². ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ°ΠΊΠΈΡ
ΠΏΠ°Π½Π΅Π»Π΅ΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π²ΠΏΠΎΠ»Π½Π΅ ΠΎΠΏΡΠ°Π²Π΄Π°Π½ΠΎ. ΠΠ΄Π½ΠΎΠΉ ΠΈΠ· ΠΎΡΠ½ΠΎΠ²Π½ΡΡ
ΠΏΡΠΈΡΠΈΠ½ Π°ΠΊΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠΈΡ
jQuery ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ, ΡΡΠΎ ΠΌΠ΅Π½Ρ Π²ΡΠ΅Π³Π΄Π° ΠΏΠΎΠ΄ ΡΡΠΊΠΎΠΉ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΠΎΠ½ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π²Π½ΠΈΠ·Ρ ΡΡΡΠ°Π½ΠΈΡΡ. Π ΡΠΎΠΌΡ ΠΆΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ΅ΡΡΠ° ΠΈ Π½Π΅ ΠΎΡΠ²Π»Π΅ΠΊΠ°Π΅Ρ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ ΠΎΡ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°. ΠΡΠ»ΠΈ Π³ΠΎΠ²ΠΎΡΠΈΡΡ Π² ΡΠ΅Π»ΠΎΠΌ β ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ ΡΠ»ΡΡΡΠ°Π΅Ρ ΡΠ·Π°Π±ΠΈΠ»ΠΈΡΠΈ ΡΠ°ΠΉΡΠ°.
Π― ΡΠΎΠ±ΡΠ°Π» ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΠΈΠ· Π»ΡΡΡΠΈΡ
, Π½Π° ΠΌΠΎΠΉ Π²Π·Π³Π»ΡΠ΄, Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ
jQuery ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π΄Π»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ. Π‘ΡΠ°ΡΠ°Π»ΡΡ, ΡΡΠΎΠ± ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π±ΡΠ» ΡΠ΅ΠΌ-ΡΠΎ ΡΠ½ΠΈΠΊΠ°Π»Π΅Π½, ΡΡΠΎΠ±Ρ Π»ΡΠ±ΠΎΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΈΠ· ΠΏΠΎΠ΄Π±ΠΎΡΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ Π² Π²Π°ΡΠ΅ΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅. Π ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ ΠΊΠ°ΠΊ ΠΏΡΠΎΡΡΡΠ΅, ΡΠ°ΠΊ ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΡΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΈ Ρ. Π΄.
ΠΡΠ°ΠΊ. Π Π²Π°ΡΠ΅ΠΌΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ 6 jQuery ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ.
Π‘ΠΌΠΎΡΡΠΈΡΠ΅ ΡΠ°ΠΊΠΆΠ΅:
jQuery ΠΏΠ»Π°Π³ΠΈΠ½ ΡΠΈΠΊΡΠΈΡΡΡΡΠ΅Π³ΠΎΡΡ Π»ΠΈΠΏΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°
20 jQuery ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ
20 ΡΠ»Π°ΠΉΠ΄-ΠΏΠ°Π½Π΅Π»Π΅ΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°
5 Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ
ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠ°Π·Π½ΡΡ
Π·Π°Π΄Π°Ρ
7 jQuery ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² ΠΌΠ΅Π½Ρ Π΄Π»Ρ Bootstrap
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅, Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠ°ΠΉΡΠΎΠ² Π½Π° css-ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ΅ Bootstrap. ΠΡΠΎ Π½ΠΎΠ²ΡΠΉ Π²Π·Π³Π»ΡΠ΄ Π½Π° ΡΠ°ΠΌΡ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΏΠ°Π½Π΅Π»Π΅ΠΉ. Β«Π€ΠΈΡΠΊΠΎΠΉΒ» ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ, ΡΡΠΎ ΠΏΡΠΈ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π΅ ΡΡΡΠ°Π½ΠΈΡΡ Π²Π½ΠΈΠ·, ΠΏΠ°Π½Π΅Π»Ρ Π½Π΅ Π²ΠΈΠ΄Π½ΠΎ, Π½ΠΎ ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΠΌΡ Π½Π°ΡΠΈΠ½Π°Π΅ΠΌ ΠΊΡΡΡΠΈΡΡ ΡΠΎΠ»ΠΈΠΊ Π²Π²Π΅ΡΡ , ΠΎΠ½ΠΎ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ. ΠΡΠ»ΠΈ Π²Ρ ΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ Β«ChromeΒ» Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΡΠΌΠ°ΡΡΡΠΎΠ½Π΅, ΡΠΎ Π·Π½Π°ΠΊΠΎΠΌΡ Ρ ΡΠ°ΠΊΠΈΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ. Π’Π°ΠΌ ΠΏΠΎ ΡΠ°ΠΊΠΎΠΌΡ ΠΆΠ΅ ΠΏΡΠΈΠ½ΡΠΈΠΏΡ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π°Π΄ΡΠ΅ΡΠ½Π°Ρ ΡΡΡΠΎΠΊΠ°.
Auto-Hide Sticky Header
jQuery ΠΏΠ»Π°Π³ΠΈΠ½ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΏΠΎ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎΠΌΡ ΠΏΡΠΈΠ½ΡΠΈΠΏΡ ΠΊΠ°ΠΊ ΠΈ ΡΠΊΡΠΈΠΏΡ Π²ΡΡΠ΅, Π½ΠΎ ΠΌΠ΅Π½Π΅Π΅ ΠΏΠ»Π°Π²Π½ΡΠΉ, Ρ ΠΎΡΡ, Π½Π° ΠΏΠ΅ΡΠ²ΡΠΉ Π²Π·Π³Π»ΡΠ΄, Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π»Π΅Π³ΡΠ΅. Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, Π½Π΅ ΠΌΠΎΠ³Ρ ΡΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Π² ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΌΠ΅ΡΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π½Π° ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΡ ΡΠΊΡΠ°Π½Π°Ρ ΠΏΡΠ½ΠΊΡΡ ΠΌΠ΅Π½Ρ ΡΡΠ°Π½ΠΎΠ²ΡΡΡΡ ΠΏΡΠΎΡΡΠΎ ΡΠΈΡΡΠ°ΠΌΠΈ, ΡΡΠΎ ΠΎΡΠ΅Π½Ρ ΡΡΡΠ°Π½Π½ΠΎ.On Scroll Header Effects
ΠΠΎΡΠ½ΡΠΉ jQuery ΠΏΠ»Π°Π³ΠΈΠ½ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ. ΠΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΠΎΡΡΠ΅Π·ΠΊΠΈ ΠΈ ΠΏΡΠΈ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π΅, ΠΏΠΎ Π΄ΠΎΡΡΠΈΠΆΠ΅Π½ΠΈΡ ΠΊΠΎΡΠΎΡΡΡ , ΠΏΠ°Π½Π΅Π»Ρ ΡΡΠ°Π½ΡΡΠΎΡΠΌΠΈΡΡΠ΅ΡΡΡ ΠΈ ΡΠΏΠΎΡΠΎΠ±Π½Π° ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄. Π’Π°ΠΊΠΈΡ ΠΎΡΡΠ΅Π·ΠΊΠΎΠ² Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ³ΠΎΠ΄Π½ΠΎ.On-Scroll Animated Header
Π₯ΠΎΡΠΎΡΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π»ΠΈΠΏΠΊΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ. ΠΠ½ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ: Π½Π°Ρ ΠΎΠ΄ΡΡΡ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π½Π°ΡΠ°Π»Π΅ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΌΡ Π²ΠΈΠ΄ΠΈΠΌ Π²ΡΡΠΎΠΊΡΡ ΡΠ°ΠΏΠΊΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π»ΠΎΠ³ΠΎΡΠΈΠΏ ΠΈ ΠΌΠ΅Π½Ρ. ΠΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΠΎΠ±Π»Π°ΡΡΡ ΡΠ°ΠΏΠΊΠΈ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ, Π²ΠΊΠ»ΡΡΠ°Ρ Π»ΠΎΠ³ΠΎ ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ² CSS3 ΠΏΠ»Π°Π²Π½ΠΎ ΡΠΌΠ΅Π½ΡΡΠ°Π΅ΡΡΡ ΠΈ ΡΡΠ°Π½ΠΎΠ²ΠΈΡΡΡ ΡΠ·ΠΊΠΎΠΉ ΠΏΠΎΠ»ΠΎΡΠΊΠΎΠΉ, ΠΏΡΠΈΠ»ΠΈΠΏΡΠ΅ΠΉ ΠΊ Π²Π΅ΡΡ Ρ ΡΠΊΡΠ°Π½Π°.Headhesive.js
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ Ρ ΠΎΡΠΎΡΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ, Π² ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ ΠΌΠ΅Π½Ρ. ΠΡΠΈΠ½ΡΠΈΠΏ ΡΠ°Π±ΠΎΡΡ Π΅Π³ΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ: ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠ°ΠΏΠΊΠ° ΡΡ ΠΎΠ΄ΠΈΡ, Π½ΠΎ Π²ΡΠΊΠΎΡΠ΅ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠ°Π½Π΅Π»Ρ. ΠΡΠ»ΠΈ Π² ΠΏΠ»Π°Π³ΠΈΠ½Π°Ρ Π²ΡΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ ΡΠ°ΠΏΠΊΠΈ ΠΏΡΠΎΡΡΠΎ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π»ΠΎΡΡ, ΡΠΎ ΡΡΡ ΠΎΠ½ΠΎ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.StickUp
jQuery ΠΏΠ»Π°Π³ΠΈΠ½ Π»ΠΈΠΏΠΊΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΡΠ½ΠΎ ΡΠ°ΠΊΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ ΠΏΠ°Π½Π΅Π»Ρ Ρ ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΠΌΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ ΡΠ΅ΠΉΡΠ°Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°Π±Π»ΡΠ΄Π°ΡΡ Π½Π° ΡΡΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ Π²Π²Π΅ΡΡ Ρ ΡΠΊΡΠ°Π½Π°. Π’Π°ΠΊΠΆΠ΅ ΠΎΠ½ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΡ ΠΎΠΆ Π½Π° ΠΏΠ»Π°Π³ΠΈΠ½ Π½Π°ΡΠ΅ΠΉ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Π΄Π»Ρ ΡΠΈΠΊΡΠ°ΡΠΈΠΈ Π±Π»ΠΎΠΊΠ° ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ Π½Π° Π΄Π½ΡΡ Π²ΡΠ»ΠΎΠΆΠΈΠ»ΠΈ Π² ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΡΠΉ Π΄ΠΎΡΡΡΠΏ. ΠΠΎ Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ β ΡΡΠΎ ΠΌΠ΅Π½Ρ Π΄Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΏΠΎ ΡΠΊΡΠ°Π½Π°ΠΌ. ΠΡΠΎΡ Jquery ΠΏΠ»Π°Π³ΠΈΠ½ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ Π½Π° ΡΠ°ΠΉΡ ΠΎΠ΄Π½ΠΎΡΡΡΠ°Π½ΠΈΡΠ½ΠΈΠΊΠ° ΠΈΠ»ΠΈ Landing Page.Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΌΠ΅Π½Ρ Π½Π° 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 ΠΊΠΎΠ΄Π° ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΡΠΎΡΡΠΎΠ΅, Π½ΠΎ ΡΡΠΈΠ»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π½Π°ΠΉΠ΄ΡΡ ΡΠ²ΠΎΠ΅ ΠΌΠ΅ΡΡΠΎ Π² ΠΊΠ°ΠΊΠΎΠΌ-Π»ΠΈΠ±ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅. ΠΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎ-ΡΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ.
ΠΠ΅Π»Π°Π΅ΠΌ ΡΠ΄Π°ΡΠΈ!
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS
Π ΡΡΠΎΠΌ ΠΏΠΎΡΡΠ΅ ΠΌΡ ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ. ΠΠ»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΠΌ ΡΡΠΈΡΡ FontAwesome.
Π¨Π°Π³ 1. ΠΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ ΡΡΠΈΡΡ Ρ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ, ΡΠΎΠ·Π΄Π°Π΅ΠΌ ΠΏΡΡΡΠΎΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ
ΠΠΎΠ΄ΡΠΎΠ±Π½ΡΡ ΠΈΠ½ΡΡ ΠΎ ΡΠ°Π±ΠΎΡΠ΅ ΡΠΎ ΡΡΠΈΡΡΠΎΠΌ FontAwesome ΠΈ ΡΡΡΠ»ΠΊΡ Π½Π° ΡΠ°ΠΌ ΠΏΡΠΎΠ΅ΠΊΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ Π² ΠΌΠΎΠ΅ΠΌ ΠΏΠΎΡΡΠ΅ β Π²ΠΎΡ ΡΡΡΠ»ΠΊΠ°.
ΠΠΎΡ ΠΊΠΎΠ΄ ΡΡΡΠ°Π½ΠΈΡΠΊΠΈ Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½Π½ΡΠΌΠΈ ΡΠ°ΠΉΠ»Π°ΠΌΠΈ:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"> </head> <body> </body> </html>
Π¨Π°Π³ 2. ΠΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ HTML ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ
ΠΠΎΡ ΠΈ ΡΠ°ΠΌ ΠΊΠΎΠ΄ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ Π½Π°ΡΠ΅Π³ΠΎ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ:
<nav> <ul> <li> <i></i> </li> <li> <i></i> </li> <li> <i></i> </li> </ul> </nav>
ΠΠ°ΠΊ Π²Ρ Π·Π°ΠΌΠ΅ΡΠΈΠ»ΠΈ Ρ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΠ» ΡΠ΅Π³ <nav> β ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ html5, Π΅ΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ html4, ΡΠΎ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΎΡ ΡΠ΅Π³ Π½Π° ΠΎΠ±ΡΡΠ½ΡΠΉ <div> ΠΈΠ»ΠΈ Π²ΠΎΠ²ΡΠ΅ Π΅Π³ΠΎ ΡΠ±ΡΠ°ΡΡ, Π° ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ ΠΏΠ΅ΡΠ΅Π½Π΅ΡΡΠΈ ΠΊ ΡΠΏΠΈΡΠΊΡ, Π²ΠΎΡ ΡΠ°ΠΊ:
<ul> ... </nav>
Π¨Π°Π³ 3. ΠΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ HTML ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ
<b></b> <ul> <li><a href="">Π’Π΅ΠΊΡΡ Π²Π°ΡΠ΅ΠΉ ΡΡΡΠ»ΠΊΠΈ</a></li> <li><a href="">Π’Π΅ΠΊΡΡ Π²Π°ΡΠ΅ΠΉ ΡΡΡΠ»ΠΊΠΈ</a></li> <li><a href="">Π’Π΅ΠΊΡΡ Π²Π°ΡΠ΅ΠΉ ΡΡΡΠ»ΠΊΠΈ</a></li> </ul>
ΠΠΎΠ΄ΠΌΠ΅Π½Ρ ΠΊΠ°ΠΊ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΡΠ°ΠΊΠΎΠΉ ΠΆΠ΅ ΡΠΏΠΈΡΠΎΠΊ ΠΊΠ°ΠΊ ΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ, ΠΏΠ»ΡΡ ΡΠ΅Π³ <b class=βfa fa-caret-leftβ></b>, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΡΠ²ΠΎΠ΄ΠΈΡ ΠΈΠΊΠΎΠ½ΠΊΡ βΠΊΠ°ΡΠ΅ΡΠΊΠΈ ΡΠ»Π΅Π²Π°β, Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ ΡΡΠ½ΠΊΡΠΈΡ Π½Π΅ΠΊΠΎΠ³ΠΎ βΡ Π²ΠΎΡΡΠΈΠΊΠ°β, Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅ Π½ΠΈΠΆΠ΅ π
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½ΡΠ’Π°ΠΊΠΆΠ΅ ΡΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΎΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ ΠΏΡΡΡΠΎΡΡ ΠΌΠ΅ΠΆΠ΄Ρ Π±Π»ΠΎΠΊΠΎΠΌ ΠΌΠ΅Π½Ρ ΠΈ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ, ΡΠ΅ΠΌ ΡΠ°ΠΌΡΠΌ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡ Π½Π°ΠΌ ΠΎΡΡΡΠ΅ΡΡΠ²ΠΈΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π°.
Π¨Π°Π³ 4. ΠΡΠΎΠΏΠΈΡΡΠ²Π°Π΅ΠΌ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±ΠΎΠΊΠΎΠ²ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ
ΠΠΎΠ΄ ΡΡΠΈΠ»Π΅ΠΉ Ρ ΠΏΠΎΡΡΠ°ΡΠ°Π»ΡΡ ΠΏΡΠΎΠΊΠΎΠΌΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡ Π² ΠΌΠ΅ΡΡΠ°Ρ Π³Π΄Π΅ ΡΡΠΎ ΠΈΠΌΠ΅Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅. Π ΡΠ΅Π»ΠΎΠΌ Π²ΡΠ΅ Π½Π΅ ΠΏΡΠΎΠΊΠΎΠΌΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΌΠΎΠΌΠ΅Π½ΡΡ ΠΎΡΠ½ΠΎΡΡΡΡΡ ΠΊ Π±Π°Π½Π°Π»ΡΠ½ΠΎΠΉ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠΎΠ½Π°, ΡΠ²Π΅ΡΠ° ΠΈ Ρ.Π΄.
#sidebar-menu { position: fixed; /* ΡΠΈΠΊΡΠΈΡΡΠ΅ΠΌ Π½Π°ΡΠ΅ ΠΌΠ΅Π½Ρ */ top: 200px; /* ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠ΅Π½Ρ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΠΊΡΠ°Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ° */ left: 0; /* ΠΏΡΠΈΠ»ΠΈΠΏΠΈΠ»ΠΈ ΠΌΠ΅Π½Ρ ΠΊ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ */ padding: 10px; background: #323A45; color: #FFF; border-radius: 0 8px 8px 0; } #sidebar-menu li { position: relative; cursor: pointer; } #sidebar-menu li i { /* ΠΠ°Π΄Π°Π΅ΠΌ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, height ΠΈ line-height Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΌΠΈ */ width: 27px; height: 27px; line-height: 27px; border-radius: 4px; background: #3CB7E7; text-align: center; } #sidebar-menu li+li {margin-top: 4px;} #sidebar-menu b { display: none; position: absolute; /* ΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΠΊΡΠ°Ρ ΡΠ°Π²Π½Π° ΡΠΈΡΠΈΠ½Π΅ ΡΠ»-ΡΠ° li */ left: 27px; top: 0; height: 27px; /* ΡΠΈΡΠΈΠ½Π° ΡΠ°Π²Π½Π° Π·Π°Π·ΠΎΡΡ ΠΌΠ΅ΠΆΠ΄Ρ Π±Π»ΠΎΠΊΠΎΠΌ ΠΌΠ΅Π½Ρ ΠΈ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ */ width: 16px; line-height: 27px; background: transparent; color: #323A45; /* ΡΠ°ΠΌΡ ΠΈΠΊΠΎΠ½ΠΊΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌ Π²ΠΏΡΠ°Π²ΠΎ, ΡΡΠΎΠ±Ρ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΠΎΠ½Π° ΡΠΌΠΎΡΡΠ΅Π»Π°ΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π±Π»ΠΎΠΊΠΎΠΌ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ */ text-align: right; } #sidebar-menu li > ul { display: none; position: absolute; top: -10px; left: 42px; width: 120px; padding: 10px; background: #323A45; border-radius: 8px; } #sidebar-menu li:hover b, #sidebar-menu li:hover ul {display: block;} #sidebar-menu li a { display: block; padding: 4px 8px; border-radius: 4px; color: #FFF; -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; transition: all .2s; } #sidebar-menu li a:hover { display: block; background: #3CB7E7; }
ΠΡΠ»ΠΈ ΠΏΠΎ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ Π²ΠΎΠΏΡΠΎΡΡ ΠΏΠΈΡΠΈΡΠ΅ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΊ ΡΡΠΎΠΌΡ ΠΏΠΎΡΡΡ, Ρ ΡΠ΄ΠΎΠ²ΠΎΠ»ΡΡΡΠ²ΠΈΠ΅ΠΌ ΠΎΡΠ²Π΅ΡΡ.
ΠΠΎΡ ΠΈ Π²ΡΠ΅! Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π³ΠΎΡΠΎΠ²ΠΎ π