jquery Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
ΠΠ° ΡΡΠ΅Π½ΠΈΠ΅ 4 ΠΌΠΈΠ½. ΠΡΠΎΡΠΌΠΎΡΡΠΎΠ² 50 ΠΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½ΠΎ
ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΡΡΠ»ΠΊΠΈ, Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ ΠΌΠ΅Π½Ρ ΠΏΠΎΠ΄ Π½ΠΈΠΌΠΈ. Π ΡΡΠΎΠ± ΠΎΠ½ ΠΈΡΡΠ΅Π·Π°Π», Π΅ΡΠ»ΠΈ ΠΊΡΡΡΠΎΡ ΠΎΡΠΎΡΠ΅Π» Π±ΠΎΠ»Π΅Π΅ ΡΠ΅ΠΌ, Π΄ΠΎΠΏΡΡΡΠΈΠΌ, 200px ΠΎΡ ΠΏΠΎΡΠ²ΠΈΠ²ΡΠ΅Π³ΠΎΡΡ ΠΌΠ΅Π½Ρ ΠΈ ΠΏΡΠ΅Π²Π΄ΠΎ-ΡΡΡΠ»ΠΊΠΈ.
ΠΡ ΠΈΠ»ΠΈ Ρ
ΠΎΡΡ Π±Ρ Π½Π΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, Π° Π½Π°ΠΆΠ°ΡΠΈΠΈ. Π’ΠΎ Π΅ΡΡΡ ΡΠΆΠ΅ Π΅ΡΠ»ΠΈ ΠΊΠ»ΠΈΠΊΠ½ΡΠ» ΠΊΡΠ΄Π°-ΡΠΎ Π²Π½Π΅ ΠΌΠ΅Π½Ρ, ΡΠΎ ΠΎΠ½ΠΎ ΠΏΡΠΎΠΏΠ°Π΄Π°Π΅Ρ.
ΠΠ°ΠΊ Π² VK, ΠΊ ΠΏΡΠΈΠΌΠ΅ΡΡ:
ΠΠ½Π΅ ΠΏΡΠΎΡΡΠΎ Π½ΡΠΆΠ½ΠΎ Π·Π½Π°ΡΡ ΠΊΠ°ΠΊΠΈΠ΅ ΠΏΡΠΎΠ²Π΅ΡΠΊΠΈ Π² JS ΡΠΎΠ²Π΅ΡΡΠ°ΡΡ.
ΠΠ»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠ°ΠΌΠΎΠΌΡ Π½Π°ΠΏΠΈΡΠ°ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Π² Π²ΠΈΠ΄Π΅ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ Π½Π° jQuery Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠΌ ΡΠΏΠΈΡΠΊΠΎΠΌ ΠΏΠΎΠ΄ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΉ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ½ΡΡΡ ΡΠ°ΠΌ ΠΏΡΠΈΠ½ΡΠΈΠΏ ΡΠ°Π±ΠΎΡΡ ΡΡΠΎΠ³ΠΎ ΠΌΠ΅Ρ Π°Π½ΠΈΠ·ΠΌΠ°. ΠΠΎ Π΄Π»Ρ Π½Π°ΡΠ°Π»Π° ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌ ΡΡΡΡΠΊΡΡΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ:
ΠΠ°ΠΊ Π²Ρ ΡΠΆΠ΅ Π΄ΠΎΠ³Π°Π΄Π°Π»ΠΈΡΡ, Π½Π°ΡΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΎ Π½Π° Π±Π°Π·Π΅ ΠΌΠ°ΡΠΊΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΡΠΏΠΈΡΠΊΠΎΠ². ΠΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ Π½Π° ΡΠ΅Π³
Sub 1 β¦ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΡΡ Π±ΡΠ΄Π΅Ρ Π²ΡΠ΅, ΡΡΠΎ Π² Π½Π΅Π³ΠΎ Π·Π°ΠΊΠ»ΡΡΠ΅Π½ΠΎ, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ:
ΠΠΎ ΠΊΠ°ΠΊ, ΡΠΏΡΠΎΡΠΈΡΠ΅ Π²Ρ? ΠΠ° Π²ΡΠ΅ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ. ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌΡΡ Ρ ΡΠ°Π±Π»ΠΈΡΠ΅ΠΉ ΡΡΠΈΠ»Π΅ΠΉ Π½Π°ΡΠ΅Π³ΠΎ ΡΠΏΠΈΡΠΊΠ° Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΎΠ½Π° Π±ΡΠ΄Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
ΠΠ· ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ Π²ΠΈΠ΄Π½ΠΎ, ΡΡΠΎ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠΉ ΡΠΏΠΈΡΠΎΠΊ Π½Π΅ ΡΠΊΡΡΡ, Π½ΠΎ ΡΡΠΎΡ ΠΌΠΎΠΌΠ΅Π½Ρ ΠΌΡ ΠΈ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΡΠ°Π²Π»ΡΡΡ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ jQuery:
Π’Π΅ΠΏΠ΅ΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌ jQuery ΠΊΠΎΠ΄ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ, Ρ.ΠΊ. Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠΎΠΌΡ-ΡΠΎ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ Π½Π΅ ΡΠΎΠ²ΡΠ΅ΠΌ ΠΏΠΎΠ½ΡΡΠ΅Π½. Π ΡΠ°ΠΌΠΎΠΌ Π½Π°ΡΠ°Π»Π΅ ΠΏΡΠΎΠΏΠΈΡΠ°Π½Π° ΡΠ»Π΅Π΄ΡΡΡΠ°Ρ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΡ:
Π Π½Π΅ΠΉ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°ΡΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ ΠΏΠΎΡΠ»Π΅ ΠΏΠΎΠ»Π½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ. Π‘Π΄Π΅Π»Π°Π½ΠΎ ΡΡΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π½Π΅ ΠΏΠΎΡΠ²Π»ΡΠ»ΠΈΡΡ ΡΠ°Π·Π½ΠΎΠ³ΠΎ ΡΠΎΠ΄Π° ΠΎΡΠΈΠ±ΠΊΠΈ, ΠΏΡΠΈ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π½Π°ΠΉΡΠΈ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΠΎΠ±ΡΠ΅ΠΊΡ ΠΈΠ·-Π·Π° ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΎΠ½ Π±Π°Π½Π°Π»ΡΠ½ΠΎ Π΅ΡΡ Π½Π΅ Π·Π°Π³ΡΡΠ·ΠΈΠ»ΡΡ.
Π§ΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΡΡΠ° Π·Π°ΠΏΠΈΡΡ? ΠΠΎΠ½ΡΡΡΡΠΊΡΠΈΡ Β«$()Β» ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΡΠΎΠΈΠ·Π²Π΅ΡΡΠΈ Π²ΡΠ±ΠΎΡΠΊΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². Π‘Π»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ Π² ΡΠ°ΠΌΠΎΠΌ Π½Π°ΡΠ°Π»Π΅ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΊΡΡΡΡ Π½Π°Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠΉ ΡΠΏΠΈΡΠΎΠΊ. ΠΡ Π±Π΅ΡΠ΅ΠΌ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΡ Β«$()Β» ΠΈ ΠΏΠΈΡΠ΅ΠΌ Π² Π½Π΅ΠΉ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΡΡΠΈΠΉ Π½Π°Ρ ΠΎΠ±ΡΠ΅ΠΊΡ. Π Π½Π°ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΡΠΈΠΌ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠΌ Π±ΡΠ΄Π΅Ρ ΠΌΠ°ΡΠΊΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ Β«menuΒ». ΠΠ°Π»Π΅Π΅ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π΅ΠΌ ΠΌΠ΅ΡΠΎΠ΄ Β«hide()Β», ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΠΉ ΡΠΊΡΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΡΡΠΈΠΉ Π½Π°Ρ ΠΎΠ±ΡΠ΅ΠΊΡ.
ΠΠ°Π»Π΅Π΅ ΠΈΠ΄Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠ°Ρ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΡ:
Π§ΡΠΎ ΠΎΠ½Π° Π΄Π΅Π»Π°Π΅Ρ? ΠΠ½Π° ΠΈΡΠ΅Ρ ΡΠ΅Π³ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΏΡΠΈΡΠ²ΠΎΠ΅Π½ ΠΊΠ»Π°ΡΡ Β«menuΒ» ΠΈ, ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΠΌΠ΅ΡΠΎΠ΄Π° Β«css(βbackgroundβ, βurl(Β«down.pngΒ»)β)β, ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Ρ ΡΡΠΈΠ»Ρ Β«backgroundΒ» Π·Π½Π°ΡΠ΅Π½ΠΈΡ Β«url(Β«down.pngΒ»)Β». Β«down.pngΒ» β ΡΡΠΎ ΠΈΠΊΠΎΠ½ΠΊΠ°, ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡΠ°Ρ, ΡΡΠΎ ΡΠΏΠΈΡΠΎΠΊ ΠΌΠΎΠΆΠ΅Ρ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΡΡ.
ΠΠ°ΡΠ΅ΠΌ ΠΈΠ΄Π΅Ρ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΈ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡ Π½Π°Ρ ΡΠΏΠΈΡΠΎΠΊ, Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΎΠ½Π° ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
ΠΡ ΠΈΡΠ΅ΠΌ ΡΠ΅Π³ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΏΡΠΈΡΠ²ΠΎΠ΅Π½ hoverβ ΠΈ Π² ΡΠΊΠΎΠ±ΠΊΠ°Ρ Π΄Π²Π΅ ΡΡΠ½ΠΊΡΠΈΠΈ. ΠΠ΅ΡΠ²Π°Ρ ΡΡΠ½ΠΊΡΠΈΡ Π±ΡΠ΄Π΅Ρ Π²ΡΠΏΠΎΠ»Π½ΡΡΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ, Π° Π²ΡΠΎΡΠ°Ρ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡΡΡ, Π΅ΡΠ»ΠΈ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ ΠΏΠΎΠΊΠΈΠ½Π΅Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΡΡΠΈΠΉ Π½Π°Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
Π ΠΏΠ΅ΡΠ²ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΏΡΠΎΠΏΠΈΡΠ°Π½ΠΎ:
ΠΠΎΠ½ΡΡΡΡΠΊΡΠΈΡ Β«$(this)β ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π½Π°Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΠ΅Ρ ΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π½Π° ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ Π² Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π½Π°Π²Π΅Π»ΠΈ (this ΠΎΡ Π°Π½Π³Π». ΡΡΠΎΡ). Π Π½Π°Π²Π΅Π»ΠΈ ΠΌΡ Π½Π° ΡΠ΅Π³
Sub 1 β¦. . ΠΠ°Π»Π΅Π΅ Ρ ΡΠ΅Π³Π° ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΠΌΠ΅ΡΠΎΠ΄Π° Β«children(Β«ulΒ»)Β» ΠΌΡ ΠΈΡΠ΅ΠΌ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠΉ ΡΠ΅Π³ ΠΈ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠΌ Β«show()Β» ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌ Π΅Π³ΠΎ.
ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ Ρ ΡΠ΅Π³Π° ΠΌΡ ΠΈΡΠ΅ΠΌ ΠΏΠΎΡΠΎΠΌΠΊΠΎΠ², Π° ΠΈΠΌΠ΅Π½Π½ΠΎ: ΡΠ΅Π³ ΠΈ Ρ Π½Π΅Π³ΠΎ ΠΌΠ΅Π½ΡΠ΅ΠΌ ΡΠΎΠ½ Π½Π° Π΄ΡΡΠ³ΡΡ ΠΈΠΊΠΎΠ½ΠΊΡ.
ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ ΠΏΡΠΎΠΏΠΈΡΠ°Π½Π° ΡΡΠ½ΠΊΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π΄Π΅Π»Π°Π΅Ρ Π²ΡΠ΅, ΠΊΠ°ΠΊ Π±ΡΠ»ΠΎ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ, ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ ΠΏΠΎΠΊΠΈΠ½Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΏΠΈΡΠΊΠ°:
Π§ΡΠΎΠ±Ρ Π½Π°ΠΏΠΈΡΠ°Π½Π½ΡΠΉ ΠΊΠΎΠ΄ Π½Π° jQuery Π·Π°ΡΠ°Π±ΠΎΡΠ°Π» ΠΈ Π½Π°ΡΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ ΡΠ°Π±ΠΎΡΠ°Π»ΠΎ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΊΠ°ΡΠ°ΡΡ Ρ ΡΠ°ΠΉΡΠ° jquery.com Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ Π΅Ρ, ΠΏΡΠΎΠΏΠΈΡΠ°Π² ΠΏΠΎΡΠ»Π΅ ΠΎΡΠΊΡΡΠ²Π°ΡΡΠ΅Π³ΠΎ ΡΠ΅Π³Π° ΡΡΡΠΎΠΊΡ .
ΠΡ Π²ΠΎΡ ΠΈ Π²ΡΠ΅! Π Π·Π°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠΈ Ρ ΠΎΡΡ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ Π΅ΡΠ»ΠΈ Π²Π°Ρ ΡΠ°ΠΉΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ²Π΅ΡΠΈΡΡ, ΡΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΠΊΡΠΈΠΏΡ Π±ΡΠ΄Π΅Ρ Π·Π°ΠΏΡΡΠΊΠ°ΡΡΡΡ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΠΏΠΎΠ·Π΄Π½ΠΎ (ΡΠ°ΠΉΡ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΠ»Π³ΠΎ Π³ΡΡΠ·ΠΈΡΡΡΡ) ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π±ΡΠ΄ΡΡ Π²ΠΈΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ ΡΠ½Π°ΡΠ°Π»Π° ΡΠ°ΡΠΊΡΡΠ²Π°Π΅ΡΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ, Π° ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠΎΠΌ ΡΠΊΡΡΠ²Π°Π΅ΡΡΡ, ΡΡΠΎ, ΡΠΎΠ³Π»Π°ΡΠΈΡΠ΅ΡΡ, ΠΎΡΠ΅Π½Ρ Π½Π΅ΠΊΡΠ°ΡΠΈΠ²ΠΎ. Π‘Π»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΠ½Π΅ΡΡΠΈ Π²ΡΠ΅ jQuery ΠΊΠΎΠΌΠ°Π½Π΄Ρ Π·Π° ΡΡΡ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΡ: Β«$(document).ready(function())Β». ΠΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
ΠΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ Π½Π°ΡΠ΅Π³ΠΎ ΡΠΊΡΠΈΠΏΡΠ° Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠ΅ΡΠ΅Π½Π΅ΡΡΠΈ ΠΈΠ· ΡΠ΅Π³Π° Π² ΡΠ°ΠΌΡΠΉ ΠΊΠΎΠ½Π΅Ρ, ΠΏΠ΅ΡΠ΅Π΄ Π·Π°ΠΊΡΡΠ²Π°ΡΡΠΈΠΌ ΡΠ΅Π³ΠΎΠΌ
ΠΡΠ΅Π½Ρ ΡΠ°ΡΡΠΎ Π² ΡΠ°Π±Π»ΠΎΠ½Π°Ρ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡΡΠ΅ΡΠΈΡΡ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π΄Π°Π½Π½ΡΠΉ ΡΠΈΠΏ ΡΠΊΡΡΡΡΡ ΠΌΠ΅Π½Ρ Π΄Π»Ρ Π²ΡΠ²ΠΎΠ΄Π° Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΡΠΊΡΡΡΡΡ ΡΡΡΠ»ΠΎΠΊ, ΡΠ΅ΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠ²ΡΠ·Π°Π½Π½ΡΡ Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌ ΠΏΡΠ½ΠΊΡΠΎΠΌ. ΠΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ Π²ΡΡΠΊΠ°Π»ΡΠ·ΡΠ²Π°ΡΡΠΈΡ ΠΏΠ°Π½Π΅Π»Π΅ΠΉ ΠΈΠ»ΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΌΠ΅Π½Ρ Π² ΡΡΠΈΠ»Π΅ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π°, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ΅Π°Π»ΠΈΠ·ΡΡΡ ΡΠ°ΠΊΠΎΠΉ ΠΏΡΠΈΠ½ΡΠΈΠΏ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ.
ΠΠΎ Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΡΠΎΠΊΠ΅ ΠΌΡ ΠΏΠΎΡΡΡΠΎΠΈΠΌ ΠΏΡΠΎΡΡΠΎΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ jQuery. ΠΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠ΅ΡΠΎΠ΄Π° Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π΄Π»Ρ Π³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π·Π°Π΄Π΅ΡΠΆΠ°Π½Π½ΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ². ΠΠΌΠ΅ΡΡΠ΅ Ρ ΠΊΠΎΠ΄ΠΎΠΌ JavaScript ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΡΡΠ΅ΠΊΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ² CSS3. Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ Π·Π°Π³ΠΎΡΠΎΠ²ΠΊΠ° Π΄Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΡΠ°ΠΉΡΠ°.
Π‘Π½Π°ΡΠ°Π»Π° ΠΏΠΎΡΡΡΠΎΠΈΠΌ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠ°Π±Π»ΠΎΠ½ HTML5. ΠΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΏΠΎΡΠ»Π΅Π΄Π½ΡΡ Π²Π΅ΡΡΠΈΡ jQuery, ΠΊΠΎΡΠΎΡΡΡ ΠΌΡ ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ ΠΈΠ· API Google. Π’Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΡΠ°ΠΉΠ» ΡΡΠΈΠ»Π΅ΠΉ styles.css, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ Π½ΠΈΠΆΠ΅:
Π’Π΅ΠΏΠ΅ΡΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΡΡΡΠΊΡΡΡΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½Π° Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Π½Π΅ΡΠΏΠΎΡΡΠ΄ΠΎΡΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΠΏΠΈΡΠΊΠ° Π² Π²Π΅ΡΡ
Ρ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ΅ΡΡ ΡΠΏΠΈΡΠΎΠΊ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² ΡΠ»Π΅ΠΌΠ΅Π½Ρ HTML5
Π‘Π°ΠΉΡ ΠΌΠΎΠ½ΠΈΡΠΎΡΠΈΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅ΡΠ²ΠΈΡΠ° ping-admin π
dropdown Β» Π‘ΠΊΡΠΈΠΏΡΡ Π΄Π»Ρ ΡΠ°ΠΉΡΠΎΠ²
7 171 Π‘ΠΊΡΠΈΠΏΡΡ / Menu & NavMega dropdown ΠΌΠ΅Π½Ρ
Mega dropdown ΠΌΠ΅Π½Ρ — jQuery ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎΠΌ ΠΏΠΎΠ΄ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΉ Π΄Π»Ρ ΡΠ°ΠΉΡΠΎΠ² Ρ Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°.
13 176 Π‘ΠΊΡΠΈΠΏΡΡ / AccordionΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ accordion ΠΌΠ΅Π½Ρ
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΠΎΠ΅ ΠΌΠ΅Π½Ρ ΡΠΈΠΏΠ° Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½, ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡ Π½Π° ΡΡΡΠ΅Π»ΠΊΠ΅. Β
4 840 Π‘ΠΊΡΠΈΠΏΡΡ / AccordionΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ ΡΠΈΠΏΠ° Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½ Π² ΡΡΠΈΠ»Π΅ flat design. ΠΡΠΎΡΡΠΎΠ΅ Π² ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠΈ ΠΈ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ.
15 099 Π‘ΠΊΡΠΈΠΏΡΡ / Menu & NavΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΠΌΠ½ΠΎΠ³ΠΎ-ΡΡΠΎΠ²Π½Π΅Π²ΠΎΠ΅ ΠΌΠ΅Π½Ρ
Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΡΠ΄Π΅Π»Π°Π΅ΠΌ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΠΌΠ½ΠΎΠ³ΠΎ-ΡΡΠΎΠ²Π½Π΅Π²ΠΎΠ΅ ΠΌΠ΅Π½Ρ. ΠΠ»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΡΠΎΡΠ΅ΠΊ jΠ°vascript ΠΊΠΎΠ΄Π°. ΠΠ»Ρ Π»ΡΡΡΠ΅Π³ΠΎ Π²ΠΎΡΠΏΡΠΈΡΡΠΈΡ ΠΏΡΠ½ΠΊΡΠΎΠ² Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠΊΠΎΠ½ΠΊΠΈ, Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π²ΡΠΈΡΡ ΡΠΆΠ΅ Π·Π½Π°ΠΊΠΎΠΌΡΠΌ Π½Π°ΠΌ ΠΏΠΎ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠΌ ΡΡΠΎΠΊΠ°ΠΌ — font-awesome.css
6 841 Π‘ΠΊΡΠΈΠΏΡΡ / Menu & NavΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠ΅Π΅ Ρ ΡΠΊΠΎΠ½ΠΎΠΌΠΈΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π½Π° Π²Π°ΡΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅, Π³Π΄Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Π΅Π²ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ. «ΠΠ΅ΡΠΊΠΈ» Π·Π°ΠΌΠ΅Π½ΡΡΡ ΡΠΎΠ±ΠΎΠΉ «ΡΠΎΠ΄ΠΈΡΠ΅Π»Π΅ΠΉ» Π½Π΅ Π·Π°Π³ΡΠΎΠΌΠΎΠΆΠ΄Π°Ρ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ΅Π½Ρ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ.
5 227 Π‘ΠΊΡΠΈΠΏΡΡ / Menu & NavΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Π½Π° CSS3
ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ Π²ΡΠΏΠ°Π΄ΡΡΠΈΠΌΠΈ ΠΏΠΎΠ΄ΠΏΡΠ½ΠΊΡΠ°ΠΌΠΈ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ css3.
5 849 Π‘ΠΊΡΠΈΠΏΡΡ / Menu & NavΠΠ΅ΡΠ΅Π²ΠΎ ΠΌΠ΅Π½Ρ Π½Π° jQuery
ΠΡΠ΅Π²ΠΎΠ²ΠΈΠ΄Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π½Π° jQuery, ΠΊΠ°ΠΊ ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΎ Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΡ ΡΠ°ΡΠΊΡΡΡΠΈΡ ΠΈ ΡΠΊΡΡΡΠΈΡ ΠΏΡΠ½ΠΊΡΠΎΠ² ΠΈ ΠΏΠΎΠ΄ΠΏΡΠ½ΠΊΡΠΎΠ².
ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠΌΠΈ ΠΏΠΎΠ΄ΠΏΡΠ½ΠΊΡΠ°ΠΌΠΈ
ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠΌΠΈ ΠΏΠΎΠ΄ΠΏΡΠ½ΠΊΡΠ°ΠΌΠΈ. ΠΡΠΏΠ°Π΄Π°ΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ jQuery, Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΎ Π½Π° CSS. Π Π΄Π΅ΠΌΠΎ Π²ΠΊΠ»ΡΡΠ΅Π½ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΌΠ°ΠΊΠ΅Ρ ΡΠ°ΠΉΡΠ°, ΠΎΡΡΠ°Π»ΠΎΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½ΡΡ ΡΠ°ΡΡΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ ΠΈ Π½Π°ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΡ ΡΠ°ΠΏΠΊΡ. ΠΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΌΡ ΠΈΠ΄Π΅Ρ ΠΌΠ΅Π½Ρ.
2 070 Π‘ΠΊΡΠΈΠΏΡΡ / Menu & NavΠΠ΅Π½Ρ Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΠΏΠΎΠ΄ΠΏΡΡΠ³ΠΈΠ²Π°Π½ΠΈΡ
ΠΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ΄ΠΏΡΡΠ³ΠΈΠ²Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ (bounce), ΡΠ΄Π΅Π»Π°Π½Π½ΠΎΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠ΅Π²Π΄ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠ² Π½Π° CSS3. Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠΌΠΈ ΠΏΠΎΠ΄ ΠΏΡΠ½ΠΊΡΠ°ΠΌΠΈ ΠΌΠ΅Π½Ρ.
4 879 Π‘ΠΊΡΠΈΠΏΡΡ / Menu & NavΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ CSS3 ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΡΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΠΈ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΏΡΠ΅Π²ΡΠ°ΡΠ°Π΅ΡΡΡ Π² ΠΌΠ΅Π½Ρ Π²ΠΈΠ΄Π° Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½. ΠΡΠΎΠ²Π΅ΡΠ΅Π½ΠΎ Π² Chrome, Opera, FireFox, IE9, iPad, iPhone. Π IE7 ΠΈ IE8 ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ, Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΡΡΡ ΡΠ΅ΡΡΠ΅ΡΡΡ.
3 044 Π‘ΠΊΡΠΈΠΏΡΡ / Menu & NavΠΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΠΎΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ
ΠΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΠΎΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Π½Π° CSS2. ΠΡΠΈ ΡΡΠΎΠΌ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΎΠ½ΠΎ Π² IE5.5, IE6, IE7, IE8, Firefox, Opera, Safari(PC) ΠΈ Google Chrome.
2 780 Π‘ΠΊΡΠΈΠΏΡΡ / Menu & NavΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ CSS3 ΠΌΠ΅Π½Ρ
ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Π½Π° CSS3 ΡΠ΄Π΅Π»Π°Π½Π½ΠΎΠ΅ Π½Π° Π±Π°Π·Π΅ UI ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΠ»Π°Π΄ΠΈΠΌΠΈΡΠΎΠΌ ΠΡΠ΄ΠΈΠ½ΠΎΠ²ΡΠΌ.
ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Π½Π° Bootstrap 4 ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ (ΡΠΎΠ±ΡΡΠΈΠ΅ hover)
ΠΠ°ΠΊ ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎ, ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ dropdown ΡΠΏΠΈΡΠΎΠΊ ΡΠ°ΡΠΊΡΡΠ²Π°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° Π³Π»Π°Π²Π½ΡΠΉ ΠΏΡΠ½ΠΊΡ ΠΌΠ΅Π½Ρ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠΉ ΡΠΏΠΈΡΠΎΠΊ ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Β«display: none;
Β», ΠΈ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄ΠΈΡ Π² Β«display: block;
Β», ΠΊΠΎΠ³Π΄Π° ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ ΡΠΎΠ±ΡΡΠΈΠ΅ click ΠΈ Π½Π° ΠΎΠ±ΠΎΡΠΎΡ — ΡΡΠΎΠ±Ρ ΡΠΊΡΡΡΡ, Π½ΡΠΆΠ½ΠΎ ΠΎΠΏΡΡΡ Π½Π°ΠΆΠ°ΡΡ Π½Π° ΠΌΠ΅Π½Ρ.
ΠΠ° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΠ΅Π½Ρ ΠΈΠ· Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ Bootstrap 4:
<nav>
Β <button type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
Β Β <span></span>
Β </button>
Β <div>
Β Β <ul>
Β Β Β <li>
Β Β Β Β <a href="#">ΠΠ»Π°Π²Π½Π°Ρ</a>
Β Β Β </li>
Β Β Β <li>
Β Β Β Β <a href="#">ΠΠ΄ΠΈΠ½</a>
Β Β Β </li>
Β Β Β <li>
Β Β Β Β <a href="#">ΠΠ²Π°</a>
Β Β Β </li>
Β Β Β <li>
Β Β Β Β <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Π’ΡΠΈ</a>
Β Β Β Β <div aria-labelledby="navbarDropdownMenuLink">
Β Β Β Β Β <a href="#">Π’ΡΠΈ ΠΎΠ΄ΠΈΠ½</a>
Β Β Β Β Β <a href="#">Π’ΡΠΈ Π΄Π²Π°</a>
Β Β Β Β Β <a href="#">Π’ΡΠΈ ΡΡΠΈ</a>
Β Β Β Β </div>
Β Β Β </li>
Β Β </ul>
Β </div>
</nav>
Π Π΄Π°Π½Π½ΠΎΠΌ Π²Π°ΡΠΈΠ°Π½ΡΠ΅, Π΅ΡΠ»ΠΈ Π²Ρ ΠΏΡΠΎΡΡΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ ΡΡΠΎ ΠΌΠ΅Π½Ρ Π½Π° ΡΠ°ΠΉΡΠ΅, ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΠ΅ Π²ΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ, ΠΌΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡ.
Π§ΡΠΎΠ±Ρ ΠΌΠ΅Π½Ρ ΡΠ°ΡΠΊΡΡΠ²Π°Π»ΠΎΡΡ ΠΈ ΡΠΊΡΡΠ²Π°Π»ΠΎΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ (ΡΠΎΠ±ΡΡΠΈΠ΅ hover), Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΡΡΡ ΠΏΠΎΠ΄ΠΏΡΠ°Π²ΠΈΡΡ css ΡΠ°ΠΉΠ» bootstrap 4 ΠΈΠ»ΠΈ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΡΡΠΎ Π² ΡΠ²ΠΎΠ΅ΠΌ ΡΠ°ΠΉΠ»Π΅ ΡΡΠΈΠ»Π΅ΠΉ:
nav.navbar .dropdown:hover > .dropdown-menu {
Β display: block;Β
}Β
Π’Π΅ΠΏΠ΅ΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, Π½Π°ΡΠ΅ΠΌΡ ΡΠΏΠΈΡΠΊΡ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°ΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Β«block
Β» ΠΈ ΠΎΠ½ ΡΠ°ΡΠΊΡΠΎΠ΅ΡΡΡ. ΠΠΎΡ ΡΠ°ΠΊ Π»Π΅Π³ΠΊΠΎ ΡΡΠΎ Π΄Π΅Π»Π°Π΅ΡΡΡ, Π½Π΅ ΠΏΡΠ°Π²Π΄Π° Π»ΠΈ?
Π§ΡΠΎΠ±Ρ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π»ΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° ΠΠ Π²Π΅ΡΡΠΈΡΡ ΡΠΊΡΠ°Π½ΠΎΠ², ΠΈ Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π»ΠΎ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΠ°ΠΌ ΠΏΡΠΎΡΡΠΎ ΠΎΡΡΡΡΡΡΠ²ΡΠ΅Ρ Π½ΠΎΡΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠ°Π±ΠΎΡΠ° ΡΠΎΠ±ΡΡΠΈΡ hover
@media only screen and (max-device-width: 992px){
Β Β Β nav.navbar .dropdown:hover .dropdown-menu{
Β Β Β Β Β Β display: none;
Β Β Β }
}
Π£ΡΡΠΈΡΠ΅, ΡΡΠΎ ΡΡΠΈΠΌ Π²Ρ Π½Π΅ ΠΎΡΠΌΠ΅Π½ΡΠ΅ΡΠ΅ ΡΠΎΠ±ΡΡΠΈΠ΅ click β ΡΠ°ΡΠΊΡΡΡΠΈΠ΅ ΠΌΠ΅Π½Ρ ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡ. ΠΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ°ΠΊ ΠΆΠ΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π°ΡΠ°Π²Π½Π΅ ΠΈ Ρ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ.
ΠΠ°ΠΊ ΠΎΡΠΊΠ»ΡΡΠΈΡΡ ΡΠΎΠ±ΡΡΠΈΠ΅ click ΠΈ ΠΎΡΡΠ°Π²ΠΈΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ±ΡΡΠΈΠ΅ hover, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ Π² ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅:
ΠΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ (Π²Π΅ΡΡ Π½Π΅Π³ΠΎ) ΠΌΠ΅Π½Ρ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π³ΠΎΡΡ ΡΠΏΠΈΡΠΊΠ° Π² Bootstrap 4
Β
ΠΡΠ΅ΠΌ ΡΠ΄Π°ΡΠΈ!
Β
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π²Π°ΠΌ ΡΠ°ΠΊ ΠΆΠ΅ Π±ΡΠ΄Π΅Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ:
ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Π½Π° HTML / CSS Π±Π΅Π· ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ JavaScript
ΠΡΠ΅Π½Ρ ΡΠ°ΡΡΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π½Π°Β ΡΠ°ΠΉΡΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΠ΅Π½Ρ. ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ Π²Π΅Π±-Π΄Π΅Π²Π΅Π»ΠΎΠΏΠ΅ΡΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ JavaScript / Jquery. ΠΡΠΎ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ Ρ ΠΎΡΠΎΡΠΎ, Π½ΠΎΒ ΡΠ°ΠΊΠΎΠ³ΠΎ ΡΠΎΠ΄ΠΈ Π·Π°Π΄Π°ΡΠΈ Π»Π΅Π³ΠΊΠΎ ΡΠ΅ΡΠ°ΡΡΡΡ ΡΒ ΠΏΠΎΠΌΠΎΡΡΡ HTML / CSS.
ΠΠΎΡ ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ HTML-ΠΊΠΎΠ΄Π° ΠΌΠ΅Π½Ρ:
<ul>
<li><a href=#>Menu 1</a>
<ul>
<li><a href=#>Sudmenu 1</a></li>
<li><a href=#>Sudmenu 1</a></li>
<li><a href=#>Sudmenu 1</a></li>
</ul>
</li>
<li><a href=#>Menu 2</a>
<ul>
<li><a href=#>Sudmenu 2</a></li>
<li><a href=#>Sudmenu 2</a></li>
<li><a href=#>Sudmenu 2</a></li>
</ul>
</li>
<li><a href=#>Menu 3</a>
<ul>
<li><a href=#>Sudmenu 3</a></li>
<li><a href=#>Sudmenu 3</a></li>
<li><a href=#>Sudmenu 3</a></li>
</ul>
</li>
<li><a href=#>Menu 4</a>
<ul>
<li><a href=#>Sudmenu 4</a></li>
<li><a href=#>Sudmenu 4</a></li>
<li><a href=#>Sudmenu 4</a></li>
</ul>
</li>
<li><a href=#>Menu 5</a>
<ul>
<li><a href=#>Sudmenu 5</a></li>
<li><a href=#>Sudmenu 5</a></li>
<li><a href=#>Sudmenu 5</a></li>
</ul>
</li>
</ul>
ΠΠ»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ ΠΌΠ΅Π½Ρ Π±ΡΠ» ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ ΡΠΏΠΈΡΠΎΠΊ ΡΒ ΠΊΠ»Π°ΡΡΠΎΠΌ menu. ΠΠΎΠ΄ΠΌΠ΅Π½Ρ ΡΠ΄Π΅Π»Π°Π½Ρ ΡΠΏΠΈΡΠΊΠ°ΠΌΠΈ ΡΒ ΠΊΠ»Π°ΡΡΠΎΠΌ submenu.
Π’Π΅ΠΏΠ΅ΡΡ Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΊΠ°ΠΊ-Π½ΠΈΠ±ΡΠ΄Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎ ΠΎΡΠΎΡΠΌΠΈΠΌ Π½Π°ΡΠ΅ ΠΌΠ΅Π½Ρ ΡΡΠΈΠ»ΡΠΌΠΈ:
body {
font: 14px 'Verdana';
margin: 0;
padding: 0;
}
ul {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
ul:after {
display: block;
content: ' ';
clear: both;
float: none;
}
ul.menu > li {
float: left;
position: relative;
}
ul.menu > li > a {
display: block;
padding: 10px;
color: white;
background-color: red;
text-decoration: none;
}
ul.menu > li > a:hover {
background-color: black;
}
ul.submenu {
display: none;
position: absolute;
width: 120px;
top: 37px;
left: 0;
background-color: white;
border: 1px solid red;
}
ul.submenu > li {
display: block;
}
ul.submenu > li > a {
display: block;
padding: 10px;
color: white;
background-color: red;
text-decoration: none;
}
ul.submenu > li > a:hover {
text-decoration: underline;
}
ΠΠ»Ρ ΠΊΠ»Π°ΡΡΠ° submenu Π±ΡΠ»ΠΎ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ‘display: none’. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΠ»ΠΎ Π½Π°Β ΡΠΏΡΡΡΠ°ΡΡ Π½Π°ΡΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ.
Π’Π΅ΠΏΠ΅ΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π²Β CSS ΡΠ°ΠΊΠΎΠΉ ΠΊΠΎΠ΄:
ul.menu > li:hover > ul.submenu {
display: block;
}
ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.
ΠΠΎΡ ΠΈΒ Π²ΡΠ΅. ΠΡΠΎΡΡΠΎ ΠΈΒ Π»Π΅Π³ΠΊΠΎ Π±Π΅Π· JavaScript.
ΠΡΠΈΠΌΠ΅ΡΡ CSS ΠΌΠ΅Π½Ρ c Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ Ρ ΡΠ΅ΡΡΡΡΠ° Codepen
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ ΡΠ»ΡΡΠ°Π»ΠΈ ΠΎ ΡΠ΅ΡΡΡΡΠ΅ Codepen, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ°ΠΉΠ»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΈΡ Π² ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ .Β Π Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΌΠ΅Π½Ρ, Π°Π²ΡΠΎΡΡ ΠΊΠΎΡΠΎΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΠ»ΠΈ ΡΠ²ΠΎΠΉ ΠΊΠΎΠ΄ Π½Π° codepen.io.
ΠΡΠΎΡΡΡΠ΅ ΠΌΠ΅Π½Ρ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ°ΡΡΠΈΒ «ΠΠΈΠ΄Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°». ΠΠ΄Π΅ΡΡ ΠΆΠ΅ Π±ΡΠ΄ΡΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½Ρ ΠΏΡΠΈΠΌΠ΅ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΌΠ΅Π½Ρ, ΠΏΠΎΡΠ²Π»ΡΡΡΠΈΡ ΡΡ ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅. Π ΡΡΠΈΡ ΠΌΠ΅Π½Ρ, ΠΏΠΎΠΌΠΈΠΌΠΎ css-ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΊΠΎΠ΄ Π½Π° JavaScript/jQuery.
Flexbox-ΠΌΠ΅Π½Ρ Ρ ΠΏΠ΅ΡΠ΅ΠΊΡΡΡΠΈΠ΅ΠΌ ΡΠΊΡΠ°Π½Π°
ΠΠ΅ΡΡΡΠΊΠ° ΠΌΠ΅Π½Ρ ΠΎΡΠ½ΠΎΠ²Π°Π½Π° Π½Π° ΠΌΠΎΠ΄Π΅Π»ΠΈ Flexbox. ΠΡΠΈ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΌΠ΅Π½Ρ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΊΡΡΡΠΈΠ΅ ΡΠΊΡΠ°Π½Π°.Β ΠΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° transition
. Π’Π°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΊΠΎΠ΄ Π½Π° jQuery.
See the Pen Fullscreen flexbox overlay navigation by Mirko ZoriΔ (@fluxus) on CodePen.18892
ΠΠ΅Π½Ρ ΡΠΎ ΡΠ»Π°ΠΉΠ΄-ΡΡΡΠ΅ΠΊΡΠΎΠΌ
ΠΡΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ ΡΡΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΠ»Π°Π²Π½ΡΠΉ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΡ Π΄Π»Ρ Π°ΠΊΡΠΈΠ²Π½ΠΎΠΉ ΡΡΡΠ»ΠΊΠΈ. ΠΠ΄Π΅ΡΡ Π΅ΡΡΡ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ css-ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, Π½ΠΎ ΠΈ ΠΊΠΎΠ΄ Π½Π° jQuery.
Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ html-, css- ΠΈΒ js-ΠΏΡΠ΅ΠΏΡΠΎΡΠ΅ΡΡΠΎΡΡ. ΠΡΠ»ΠΈ ΠΊΠΎΠ΄ Π²Π°ΠΌ Π½Π΅ΠΏΠΎΠ½ΡΡΠ΅Π½, Π½Π°ΠΆΠΌΠΈΡΠ΅ Π½Π° ΡΡΡΠ΅Π»ΠΊΡ Π² ΠΏΡΠ°Π²ΠΎΠΌ Π²Π΅ΡΡ Π½Π΅ΠΌ ΡΠ³Π»Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅ΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ ΠΈ Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΠΏΡΠ½ΠΊΡ «View compiled HTML» ΠΈ Ρ.ΠΏ. ΠΏΡΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΡΡΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° Π½Π° Codepen.
See the Pen A clean navigation slider by Roemerdt (@Roemerdt) on CodePen.18892
Π¦Π²Π΅ΡΠ½ΠΎΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ CSS ΠΈ jQuery
Π ΡΡΠΎΠΌ css-ΠΌΠ΅Π½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΡΡΠ΅ΠΊΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ²Π΅ΡΠ° Π°ΠΊΡΠΈΠ²Π½ΠΎΠΉ ΡΠΎΡΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΏΡΠ½ΠΊΡΠΎΠ². ΠΠ°ΠΊ ΠΈ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΡ Β ΠΌΠ΅Π½Ρ, Π±Π΅Π· jQuery Π·Π΄Π΅ΡΡ Π½Π΅ ΠΎΠ±ΠΎΡΠ»ΠΎΡΡ.
See the Pen Colourful navigation by Lewi Hussey (@Lewitje) on CodePen.18892
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ Π²Π°ΡΠΈΠ°Π½Ρ:
See the Pen css3 Responsive menu effect by Bogdan Blinnikov (@bonkalol) on CodePen.18892
Π‘ΠΊΠΎΡΠ΅Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
Π ΡΡΠΎΠΌ ΠΌΠ΅Π½Ρ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS3-ΡΠ²ΠΎΠΉΡΡΠ²Π° transform: skew()
. ΠΡΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ Π²ΠΈΠ΄, ΠΏΠΎΠ»ΡΡΠ΅Π½Π½ΡΠΉ ΠΏΡΡΠ΅ΠΌ ΡΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΡΠΏΠΈΡΠΊΠ° ΡΡΡΠ»ΠΎΠΊ.
See the Pen Skewed Menu by Claudio Holanda (@kazzkiq) on CodePen.18892
CSS ΠΌΠ΅Π½Ρ Ρ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π½ΠΈΠΈ ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
Π ΡΡΠΎΠΌ ΠΌΠ΅Π½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Ρ ΡΡΡΠ΅ΠΊΡΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π½ΠΈΠΈ (ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π΅), ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ Ρ 3d-ΡΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΡΠΌΠΈ ΠΈ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠΈ ΠΌΠ°ΡΡΡΠ°Π±Π° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. Π’Π°ΠΊΠΆΠ΅ Π½Π΅ ΠΎΠ±ΠΎΡΠ»ΠΎΡΡ Π±Π΅Π· JavaScript.
ΠΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΡΠ²Π΅ΡΠ°ΠΌΠΈ ΠΈ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ Π΄Π»Ρ ΠΏΡΠ½ΠΊΡΠΎΠ² ΠΌΠ΅Π½Ρ. ΠΠ½ΠΎ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ ΡΠ°Π·Π²ΠΎΡΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅ Π½Π° Π²Π΅ΡΡ ΡΠΊΡΠ°Π½.
See the Pen Menu with scroll & hover effects by Ivan Bogachev (@sfi0zy) on CodePen.18892
ΠΠ΅Π½Ρ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ ΡΠ°ΠΉΡΠ° ΠΈΠ»ΠΈ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ
ΠΡΠΎ ΠΌΠ΅Π½Ρ «Π·Π°ΡΠΎΡΠ΅Π½ΠΎ» ΠΏΠΎΠ΄ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ Π²Π΅ΡΡΠΈΡ ΡΠ°ΠΉΡΠ° ΠΈΠ»ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ css-ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, Π½ΠΎ ΠΈ JavaScript-ΠΊΠΎΠ΄.
See the Pen App Navigation by Ian Turner (@iamturner) on CodePen.18892
ΠΠΎΠΊΠΎΠ²ΠΎΠ΅ Π²ΡΠ΅Π·ΠΆΠ°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΡΠ°Π·ΠΌΡΡΠΎΡΡΠΈ ΡΡΠ΅ΠΊΠ»Π°
Π Π°Π·ΠΌΠ΅ΡΠΊΠ° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ CSS ΠΈ Π½Π°ΡΠΈΠ²Π½ΠΎΠ³ΠΎ JS-ΠΊΠΎΠ΄Π°
See the Pen Frosted Glass Menu | [best in chrome] by Dev Loop (@dev_loop) on CodePen.18892
ΠΠ΅Π½Ρ, ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΠΎΠ΅ ΠΎΠΏΡΡΡ-ΡΠ°ΠΊΠΈ Π»ΠΈΠ±ΠΎ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ ΡΠ°ΠΉΡΠ°, Π»ΠΈΠ±ΠΎ Π΄Π»ΡΒ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. Π Π½Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ SVG ΠΈ CSS3 Π±Π΅Π· ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΡΡΠΎΡΠΎΠ½Π½ΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ + ΠΊΠΎΠ΄ Π½Π° JavaScript.
See the Pen SVG UI Navigation Concept by Alex Permyakov (@alexdevp) on CodePen.18892
ΠΠ΅Π»Π΅ΠΎΠ±ΡΠ°Π·Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²
ΠΡΠ΅Π½Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ ΠΏΡΠΈΡΡΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΏΡΠΈ ΡΠΊΡΠΎΠ»Π»ΠΈΠ½Π³Π΅ ΠΈ ΠΏΡΠΈΠΊΠΎΡΠ½ΠΎΠ²Π΅Π½ΠΈΠΈ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ . Π’ΡΠ΅Π±ΡΠ΅Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²Π° Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ.
See the Pen Touch device jelly menu concept by LegoMushroom (@sol0mka) on CodePen.18892
ΠΠΊΠΎΠ½ΠΎΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
See the Pen Mobile Menu by Ricardo Oliva Alonso (@ricardoolivaalonso) on CodePen.18892
ΠΠ΅Π½Ρ Ρ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
See the Pen Fancy tab bar active animation by Aymen Mohammed (@aymen-mohammed) on CodePen.18892
CSS ΠΌΠ΅Π½Ρ Ρ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ header
See the Pen Pure CSS Header Menu by Nikolay Talanov (@suez) on CodePen.18892
Π‘ΠΎΡΠΈΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ Π²ΡΠ΅Π·ΠΆΠ°ΡΡΠΈΠΌΠΈ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ
See the Pen Mobile Menu by Ricardo Oliva Alonso (@ricardoolivaalonso) on CodePen.18892
ΠΠ΅ΡΡ Π½Π΅Π΅ Π²ΡΠ΅Π·ΠΆΠ°ΡΡΠ΅Π΅ css-ΠΌΠ΅Π½Ρ c ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ-Π³Π°ΠΌΠ±ΡΡΠ³Π΅ΡΠΎΠΌ
ΠΡΠΈΡΡΠ½ΠΎΠ΅ Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ Π²ΡΠ΅Π·ΠΆΠ°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Ρ CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ ΡΠ°ΠΌΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΈΠΊΠΎΠ½ΠΊΠΈ-Π³Π°ΠΌΠ±ΡΡΠ³Π΅ΡΠ°. ΠΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ ΠΊΠ°ΠΊ Π΄Π»Ρ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ ΡΠ°ΠΉΡΠ°, ΡΠ°ΠΊ ΠΈ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ. ΠΠΎΠΌΠΈΠΌΠΎ CSS, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ΄ Π½Π° JS.
See the Pen Toggle menu by Tristan White (@triss90) on CodePen.18892
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ Π²Π°ΡΠΈΠ°Π½Ρ Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠΌΠΈ 3D-ΡΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΡΠΌΠΈ.
See the Pen 3D Rotating Navigation by Elen (@ambassador) on CodePen.18892
ΠΠΎΠΊΠΎΠ²Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Ρ ΠΌΠ΅Π½Ρ
ΠΠ΅Π½Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΎ Π½Π° Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ Π²ΡΠ΅Π·ΠΆΠ°ΡΡΠ΅ΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠΏΡΠ°Π²Π°. ΠΡΠΈ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠΈ ΠΌΠ΅Π½Ρ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΡΠ΄Π²ΠΈΠ³Π°Π΅ΡΡΡ Π²Π»Π΅Π²ΠΎ. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ ΠΊΠΎΠ΄ Π½Π° JS.
See the Pen CSS3 side panel with menu by Darren Huskie (@Huskie) on CodePen.0
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΏΡΠΈΠΌΠ΅Ρ Π΄Π»Ρ ΠΏΠ°Π½Π΅Π»ΠΈ Π°Π΄ΠΌΠΈΠ½ΠΈΡΡΡΠ°ΡΠΎΡΠ°
See the Pen Sidebar template by Mohamed Azouaoui (@azouaoui-med) on CodePen.18892
ΠΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ΅ Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π΄Π»Ρ Π»ΡΠ½Π΄ΠΈΠ½Π³Π° ΠΈΠ»ΠΈ ΠΎΠ΄Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠΉ ΠΏΡΠ΅Π·Π΅Π½ΡΠ°ΡΠΈΠΈ
See the Pen One Page Navigation CSS Menu by Alberto Hartzet (@hrtzt) on CodePen.18892
ΠΠ΅ΠΎΠ½ΠΎΠ²Π°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
See the Pen Menu Or Nav Hover Styles by Dev Loop (@dev_loop) on CodePen.18892
ΠΡΠ΅Π·ΠΆΠ°ΡΡΠ΅Π΅ ΡΠ±ΠΎΠΊΡ ΠΌΠ΅Π½Ρ
Π ΠΊΠΎΠ΄Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ css, Π½ΠΎ ΠΈ JS-ΠΊΠΎΠ΄
See the Pen Sliding Menu by Dev Loop (@dev_loop) on CodePen.18892
ΠΡΠΎΡΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ Π²ΡΠ΅Π·ΠΆΠ°ΡΡΠ΅Π³ΠΎ ΡΠ±ΠΎΠΊΡ ΠΌΠ΅Π½Ρ ΠΎΡΠ½ΠΎΠ²Π°Π½ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° CSS:
See the Pen Pure CSS Hamburger fold-out menu by Erik Terwan (@erikterwan) on CodePen.18892
ΠΠΎΠΊΠΎΠ²ΠΎΠ΅ css-ΠΌΠ΅Π½Ρ Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ
See the Pen Pure CSS3 Mega Dropdown Menu With Animation (Vertical) by Rizky Kurniawan Ritonga (@rizkykurniawanritonga) on CodePen.18892
ΠΡΠ΅Π·ΠΆΠ°ΡΡΠ΅Π΅ ΡΠ²Π΅ΡΡ Ρ CSS ΠΌΠ΅Π½Ρ
ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ-Π³Π°ΠΌΠ±ΡΡΠ³Π΅Ρ ΡΠ²Π΅ΡΡ Ρ Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΌΠ΅Π½Ρ. ΠΠΎΠ½ΡΠ΅Π½Ρ ΡΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²Π½ΠΈΠ· Ρ ΠΎΡΡΡΡΠΏΠ°ΠΌΠΈ ΡΠ»Π΅Π²Π° ΠΈ ΡΠΏΡΠ°Π²Π°. ΠΠΎΠΌΠΈΠΌΠΎ css-transition ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ Π½Π΅ΡΠ»ΠΎΠΆΠ½ΡΠΉ ΠΊΠΎΠ΄ Π½Π° jQuery.
See the Pen Off canvas menu by Mark Murray (@markmurray) on CodePen.0
ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π² ΡΡΠΈΠ»Π΅Β Material Design
ΠΡΠΈΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ ΡΠ»Π°ΠΉΠ΄-ΡΡΡΠ΅ΠΊΡΠΎΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡΒ css-transition ΠΈ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ jQuery-ΠΊΠΎΠ΄Π°.
See the Pen Material design navigation by Lewi Hussey (@Lewitje) on CodePen.0
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ Π²Π°ΡΠΈΠ°Π½Ρ Π² ΡΡΠΈΠ»Π΅ Material Design Ρ ΠΊΡΡΠ³Π»ΡΠΌΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ
See the Pen CSS Gooey Menu (Version 3) by Lucas Bebber (@lbebber) on CodePen.18892
ΠΡΠΎΡΠ°Ρ Π²Π΅ΡΡΠΈΡ ΠΌΠ΅Π½Ρ Ρ ΠΊΡΡΠ³Π»ΡΠΌΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ.
See the Pen Floatting Draggable Menu (Messenger like) by Andy Pagès (@andyNroses) on CodePen.18892
Π Π°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ Π²Π½ΠΈΠ· (Dropdown) ΠΌΠ΅Π½Ρ
Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Ρ CSS ΠΈ JS-ΠΊΠΎΠ΄.
See the Pen CSS3/Javascript Pure Dropdown Menu by Pedro Nauck (@pedronauck) on CodePen.18892
ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ Π²Π°ΡΠΈΠ°Π½Ρ dropdown-ΠΌΠ΅Π½Ρ
See the Pen Swanky Pure CSS Drop Down Menu V2.0 by Jamie Coulter (@jcoulterdesign) on CodePen.18892
ΠΠ°ΡΠΈΠ°Π½Ρ Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
See the Pen Solution for Long Drop Down Items by Larry Geams Parangan (@larrygeams) on CodePen.18892
Π’ΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΡ ΡΠΊΠΎΡΠ° Π² Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅ΠΌ ΠΌΠ΅Π½Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ
See the Pen CSS Swinging Panel Menu by Seth Abbott (@sethabbott) on CodePen.18892
ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅Β (Dropdown) ΠΌΠ΅Π½Ρ Π½Π° CSS
See the Pen Pure CSS DropDown Menu by Andor Nagy (@andornagy) on CodePen.18892
ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡ ΠΌΠ΅Π½Ρ Π² ΡΡΠΈΠ»Π΅ Bootstrap
See the Pen OnClick Dropdown by Sazzad (@sazzad) on CodePen.18892
ΠΡΠ΅Π·ΠΆΠ°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ ΡΠ»Π΅Π²Π° Π² ΡΡΠΈΠ»Π΅ Bootstrap 3
See the Pen Awesome Bootstrap 3 Sidebar Navigation by Jay Holtslander (@j_holtslander) on CodePen.dark
ΠΡΠ΅Π·ΠΆΠ°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Ρ CSS-Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ
Π’ΠΎΠ»ΡΠΊΠΎ CSS, Π±Π΅Π· JS-ΠΊΠΎΠ΄Π°
See the Pen CSS Drop-Down Menu Transitions by Shaw (@shshaw) on CodePen.18892
ΠΡΠ΅Π·ΠΆΠ°ΡΡΠ΅Π΅ ΡΠ²Π΅ΡΡ Ρ ΠΌΠ΅Π½Ρ Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ
ΠΡΡΡ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ Π΄Π»Ρ ΡΠ΅ΠΌΠ½ΠΎΠΉ/ΡΠ²Π΅ΡΠ»ΠΎΠΉ ΡΠ΅ΠΌΡ ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π² Π²ΠΈΠ΄Π΅ ΠΊΡΡΠ³Π°, ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΠ΅Π³ΠΎΡΡ Π·Π° ΠΊΡΡΡΠΎΡΠΎΠΌ ΠΌΡΡΠΈ. CSS+JS-ΠΊΠΎΠ΄.
See the Pen Overlay menu by Ivan Grozdic (@ig_design) on CodePen.18892
ΠΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΠ΅ ΠΌΠ΅Π³Π°-ΠΌΠ΅Π½Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ jQuery
See the Pen Responsive and Mega menu by Arjun Amgain (@arjunamgain) on CodePen.18892
CSS-ΠΌΠ΅Π½Ρ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΡΠΎΠ²Π½ΡΠΌΠΈ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΡΡΠΈ
See the Pen Multi level css only push menu by Shven (@Shven) on CodePen.18892
ΠΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΡΠΎΠ²Π½ΡΠΌΠΈ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΡΡΠΈ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ CSS, Π½ΠΎ ΠΈ jQuery.
See the Pen CSS3 Responsive Menu Dropdown + Submenu width Logo by emre (@emredenx) on CodePen.18892
CSS-ΠΌΠ΅Π½Ρ Ρ Π²ΠΊΠ»Π°Π΄ΠΊΠ°ΠΌΠΈ
Π‘ΡΠΎΠΈΡ, Π½Π°Π²Π΅ΡΠ½ΠΎΠ΅, ΠΎΡΠΊΠ»ΡΡΠΈΡΡ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΡ radio-ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Π΅ΠΉ Π² ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ ΠΌΠ΅Π½Ρ.
See the Pen No JS: Tabs that scale down to menu by Jake Albaugh (@jakealbaugh) on CodePen.18892
ΠΠ°ΡΠΈΠ°Π½ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΈΠΊΠΎΠ½ΠΊΠΈ-Π³Π°ΠΌΠ±ΡΡΠ³Π΅ΡΠ°
See the Pen Hamburger Menu Animations by Tamino Martinius (@Zaku) on CodePen.18892
SVG-ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΈΠΊΠΎΠ½ΠΊΡ Π³Π°ΠΌΠ±ΡΡΠ³Π΅ΡΠ° Π² Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ
See the Pen SVG Gooey Hover Menu Concept by Michael Leonard (@mikel301292) on CodePen.18892
ΠΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΈΠΊΠΎΠ½ΠΊΠΈ-Π³Π°ΠΌΠ±ΡΡΠ³Π΅ΡΠ°.
See the Pen CSS Menu Icon Animation: Know Your Menu by Olivia Ng (@oliviale) on CodePen.18892
Π Π°Π·Π»ΠΈΡΠ½ΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΠΌΠ΅Π½Ρ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ ΡΠ°ΠΊΠΆΠ΅ Π½Π°Β freefrontend.com, onaircode.comΒ ΠΈΒ navnav.co.
Β
ΠΡΠΎΡΠΌΠΎΡΡΠΎΠ²: 7Β 114
35 ΠΌΠ΅Π½Ρ CSS ΠΈ HTML Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ², Π±Π»ΠΎΠ³ΠΎΠ², ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΊΠΎΠΌΠΌΠ΅ΡΡΠΈΠΈ ΠΈ Π΄Ρ.
Π ΡΡΠΎΠΉ ΡΠ΅ΡΠΈΠΈ ΡΡΠ°ΡΠ΅ΠΉ Ρ lΠΠ·Π±ΡΠ°Π½Π½ΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΊΠΎΠ΄Π° CSS, HTML ΠΈ JavaScript, ΠΌΡ ΠΎΠ±ΡΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ, ΡΡΡΠ΅Π»ΠΊΠΈ, ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΈΠ»ΠΈ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠΈ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠ½ΡΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π°ΡΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°, ΡΠ΄Π΅Π»Π°Π² Π΅Π³ΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΠ»Π΅Π³Π°Π½ΡΠ½ΡΠΌ ΠΈΠ»ΠΈ ΡΠΏΠΎΡΠΎΠ±Π½ΡΠΌ ΠΏΠΎΠ²ΡΡΠΈΡΡ ΡΠ΅Π½Π½ΠΎΡΡΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅ΠΌ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ.
ΠΠ° ΡΡΠΎΡ ΡΠ°Π· ΠΏΡΠΈΡΠ»ΠΎ Π²ΡΠ΅ΠΌΡ ΠΌΠ΅Π½Ρ Π² HTML ΠΈ CSS, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ Π°Π΄Π΅ΠΊΠ²Π°ΡΠ½ΠΎ ΡΠ΅ Π²Π°ΠΆΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π½Π°ΠΌ Π½Π°ΠΏΡΠ°Π²Π»ΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΊ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΡΠΌ ΡΠ°ΡΡΡΠΌ Π½Π°ΡΠ΅ΠΉ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΊΠΎΠΌΠΌΠ΅ΡΡΠΈΠΈ, Π±Π»ΠΎΠ³Π° ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ³ΠΎ Π΄ΡΡΠ³ΠΎΠ³ΠΎ. ΠΡ ΠΈΠ΄Π΅ΠΌ Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π½ΠΈΠΌΠΈ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠ΄Π°ΡΡ Π½Π°ΡΠ΅ΠΌΡ ΡΠ°ΠΉΡΡ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΡΡΠΈΡ ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ°ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°.
UnΒ ΡΠ»Π°ΠΉΠ΄-ΠΌΠ΅Π½Ρ ΠΈΠ»ΠΈ Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π³Π°ΠΌΠ±ΡΡΠ³Π΅ΡΠ° ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· ΠΈΠ·ΡΡΠ½ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡΠΈΡΠ½ΡΠΌ ΠΎΡΡΠ΅Π½ΠΊΠΎΠΌ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ°.
Π’Π΅ΠΌΠ΅ ΡΡΠ°ΡΡΠΈ:
9 CSS-ΠΌΠ΅Π½Ρ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅Π»ΡΠ·Ρ ΠΏΡΠΎΠΏΡΡΡΠΈΡΡ
ΠΡΠΏΠ°Π΄Π°ΡΡΠΈΠΉ ΡΠΏΠΈΡΠΎΠΊ Swanky Π½Π° ΡΠΈΡΡΠΎΠΌ CSS
Π ΠΎΡΠΊΠΎΡΠ½ΡΠΉ Lil Drop Down Manu V2.0 esΒ ΠΌΠ΅Π½Ρ Π½Ρ ΠΏΠΎΠ»Π½ΡΠΉ ΡΠΈΡΡΡΠΉ CSS ΡΡΠΎ ΠΈΠΌΠ΅Π΅Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΡΠ΅Π½Π½ΠΎΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π² ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠΌ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ΅ Π½Π΅Ρ ΠΊΠΎΠ΄Π° JavaScript. ΠΡΠΎΡΡΠΎ ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ΅ ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠ΅, ΡΡΠΎΠ±Ρ ΠΎΡΠΊΡΡΡΡ Π΄Π»Ρ ΡΠ΅Π±Ρ Π±ΠΎΠ»ΡΡΡΡ ΡΠ»Π΅Π³Π°Π½ΡΠ½ΠΎΡΡΡ.
ΡΡΠΎ Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ es ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ Π΅ΡΠ»ΠΈ ΠΌΡ ΡΡΠ°Π²Π½ΠΈΠΌ Π΅Π³ΠΎ Ρ Π΄Π²ΡΠΌΡ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠΌΠΈ Ρ HTML, JS ΠΈ CSS.
Π’Π΅ΠΌΠ΅ ΡΡΠ°ΡΡΠΈ:
16 ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΡ ΠΌΠ΅Π½Ρ Π½Π° CSS Π΄Π»Ρ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°
Un Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ jQuery ΠΈ CSS3 de ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΡΡΠΈΡ Π΄Π»Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ Π²Π΅Π±-ΡΠ°ΠΉΡ. ΠΡΠ΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ ΠΈ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΡ Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡΠΈΡΠ½ΡΠΌΠΈ ΡΠ΅Π½ΡΠΌΠΈ.
Un ΠΊΡΡΠ³ΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ de ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΡΠ΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ°. ΠΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΎ Π² SVG ΠΈ GreenSock Animation Platform, Π±Π΅Π· ΡΠΎΠΌΠ½Π΅Π½ΠΈΡ, ΡΠ°Π·Π½ΡΠ΅.
ΠΡΡΠ³ΠΎΠΉ ΠΊΡΡΠ³ΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ ΠΈ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°Π»ΡΠ½ΡΠΉ ΡΡΠΎ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΠΎΠΉ Π΄Π»Ρ ΠΈΠ³ΡΡ.
Un ΠΊΡΡΠ³ΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ CSS HTML ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π΅Π³ΠΎ ΡΠ±ΠΎΠΊΡ ΠΈ ΡΡΠΎ ΠΎΡΠΊΡΡΠ²Π°Π΅ΡΡΡ ΠΏΠΎ ΠΊΡΡΠ³Ρ Ρ ΠΎΡΠ»ΠΈΡΠ½ΡΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΌ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠΎΠΌ.
Π ΡΡΠΎΠΌ ΠΊΠΎΠ»ΡΡΠΎ ΠΌΠ΅Π½Ρ Π»ΠΎΡ ΡΠ²ΡΠ·ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΡΡΡΡ Π² Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°Π·Π½ΡΡ ΠΊΠΎΠ»Π΅Ρ.
ΠΡΡΠ³ΠΎΠΉ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΉ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Ρ ΠΎΡΠ΅Π½Ρ Ρ ΠΎΡΠΎΡΠΎ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ, Π΄Π°ΡΡΠ΅ΠΉ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ.
Π Π΅ΠΊΡΡΡΠΈΠ²Π½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ
Π Π΅ΠΊΡΡΡΠΈΠ²Π½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΡΠ²Π»ΡΠ΅ΡΡΡΒ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Π²ΡΡΠΎΠΊΠΎΠ³ΠΎ ΠΊΠ°ΡΠ΅ΡΡΠ²Π° Π΄Π»Ρ ΡΠ΅Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΎΡΡΠ°ΠΆΠ°ΡΡ ΡΡΡΡΠΊΡΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ΅ΡΠΈ.
Π Π°ΡΠΊΡΡΠ²Π°ΡΡΠ°ΡΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
Un ΠΌΠ΅Π½Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ΅Π½ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌΡ, Π½ΠΎ Ρ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΎΡΡΠ΅Π½ΠΊΠ°ΠΌΠΈ Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°.
ΠΡΡΠ³ΠΎΠΉ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ ΠΊΠ°ΡΠ΅ΡΡΠ²Π° Π² CSSΒ ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΡΠ΅ΠΊΡΡΠΈΠΌ ΡΡΠ°Π½Π΄Π°ΡΡΠ°ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°.
AΒ ΠΏΠΎΠ»Π½ΡΠΉ ΡΠΊΡΠ°Π½, ΡΡΠΎ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΠΎΠ΅ ΠΈ ΠΏΡΠΎΡΡΠΎΠ΅ ΠΌΠ΅Π½Ρ Π² HTML5 ΠΈ CSS3 ΠΎΠ½ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌ Ρ Internet Explorer 11.
Un ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π² SVG ΠΊΠ»Π°Π΄ΡΡ ΡΠ±ΠΎΠΊΡ Π² Π³Π°ΠΌΠ±ΡΡΠ³Π΅Ρ, ΠΈ ΡΡΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅.
Un ΠΠ΅Π³Π° ΠΌΠ΅Π½Ρ Π² CSS ΠΈ HTML ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π²ΠΈΠ΄Π½ΠΎ, Π² ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΌ ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡΡΠΊΠΎΠΌ ΡΡΠΈΠ»Π΅.
ΠΡΡΠ³Π°Ρ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ ΠΌΠ΅Π½Ρ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ, Π΅ΡΠ»ΠΈΒ Π²Ρ ΠΈΡΠ΅ΡΠ΅ Π΄ΡΡΠ³ΠΎΠ΅ ΠΈ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½ΡΠΠ½ ΠΏΡΠΎΡΡΠΎ Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ΅Π½ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΠΎΠΌΡ ΠΌΠ΅Π½Ρ Π½Π° Π·Π½Π°ΡΠΊΠ΅ ΠΈ ΡΡΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΡΠΎΡΠ°Π±ΠΎΡΠ°Π½Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
ΠΠ΅Π½Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ² Π΅ΡΡΡΒ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠ·ΡΠΊΠ° Π΄ΠΈΠ·Π°ΠΉΠ½Π° Google.Β
Un Π³Π°ΠΌΠ±ΡΡΠ³Π΅Ρ-ΠΌΠ΅Π½ΡΒ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² ΠΈ ΡΡΠΎ ΡΡΠΎ ΡΠ΄Π΅Π»Π°Π½ΠΎ Π² HTML, CSS ΠΈ JavaScript.
ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠΉ Flexbox Velocity.js
ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠΉ Flexbox Velocity.js ΡΡΠΎ ΠΌΠ΅Π½Ρ ΠΎΠ³ΡΠΎΠΌΠ½ΠΎΠ΅ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ Π΄ΠΎΡΡΠΈΠ³Π½ΡΡΠΎΠ³ΠΎ ΡΡΡΠ΅ΠΊΡΠ° ΠΈ Π·Π° Π΅Π³ΠΎ ΠΏΠΎΡΡΠΈ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΎΠΏΡΡ. ΠΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΊΡΠ±ΠΎΠΊΡ Ρ velocity.js.
ΠΠΎΠ»Π½Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° Π²Π½Π΅ Ρ ΠΎΠ»ΡΡΠ°
ΠΠΎΠ»Π½Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° Π²Π½Π΅ Ρ ΠΎΠ»ΡΡΠ° ΡΡΠΎ Π²ΡΡΠΎΠΊΠΎΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡΠ°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ Π²Π΅Π±ΡΠ°ΠΉΡ Ρ ΡΡΠΈΠΌΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ.
Un Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½ΡΒ ΠΏΡΠΎΡΡΠΎΠΉ ΡΡΡΠ΅ΠΊΡ Π»ΠΈΠ½ΠΈΠΈ ΠΈ ΠΎΡΠ΅Π½Ρ ΠΊΡΠ°ΡΠΈΠ²ΠΎ.
ΠΡΠ΅ ΠΎΠ΄Π½Π° ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΡ ΠΌΠ΅Π½Ρ Ρ clip-path ΡΠΎΡΡΠΎΡΡΠΈΠΉ ΠΈΠ· ΠΎΡΠ΅Π½Ρ Π»ΡΠ±ΠΎΠΏΡΡΠ½ΠΎΠ³ΠΎ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΉ.
ΠΠ°ΡΠ΅ΡΠΊΠ½ΡΡΡΠΉ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅
ΠΠ°ΡΠ΅ΡΠΊΠ½ΡΡΡΠΉ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΡΡΠΎ Π΄ΡΡΠ³ΠΎΠ΅ ΠΌΠ΅Π½ΡΒ Π½Π°Π²Π΅Π΄ΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° Π»ΡΠ±ΠΎΠΏΡΡΠ½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ Π Π΅Π·ΡΠ»ΡΡΠ°Ρ.
ΠΠ΅Π½Ρ CSS Lavalamp ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΎΠ΄ΠΈΠ½Β Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠ»ΠΊΠΈ ΡΡΠΎ ΠΏΠΎΠ΄Π΄Π°Π΅ΡΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΠ·ΠΌΡ.
Π‘Π»Π°ΠΉΠ΄Π΅Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
Un ΠΏΠΎΠ»Π·ΡΠ½ΠΎΠΊ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°Π΅Ρ ΠΊΠ°ΠΆΠ΄ΡΡ ΡΡΡΠ»ΠΊΡ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ ΠΊΡΠ°ΡΠ½ΡΠΌ ΠΎΡΡΠ΅Π½ΠΊΠΎΠΌ ΠΈ Ρ ΠΎΡΠΎΡΠΎ ΡΡ ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ, Π΄Π°ΡΡΠ΅ΠΉ ΠΎΡΠ»ΠΈΡΠ½ΡΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ.
Un Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΏΠΎ ΠΌΠ΅Π½Ρ Π±ΡΡΠ³Π΅ΡΠΎΠ²Β Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΡΡΠ΅ΠΊΡ, Π½Π°ΡΠ΅Π»Π΅Π½Π½ΡΠΉ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π°.
Β
Un ΠΌΠ΅Π½Ρ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΎ Π΄Π»Ρ iPhone X ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ ΠΏΡΠΈΠ΄Π°ΡΡ Π²Π°ΡΠ΅ΠΌΡ Π²Π΅Π±-ΡΠ°ΠΉΡΡ Π½ΠΎΡΠΊΡ ΠΊΠ°ΡΠ΅ΡΡΠ²Π°, ΡΡΠΎΠ±Ρ ΠΎΠ½ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°Π» Π΄ΠΈΠ·Π°ΠΉΠ½Ρ ΡΠ΅Π»Π΅ΡΠΎΠ½Π° Apple.
Π Π°Π·Π²Π΅ΡΠ½ΡΡΡ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
Π Π°Π·Π²Π΅ΡΠ½ΡΡΡ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» Ρ ΠΈΠ·ΡΡΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΈ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠΈΠΉ ΠΎΠ±ΡΠ΅ΠΌ Π΄Π²ΠΈΠ³Π°ΡΠ΅Π»Ρ. ΠΠ»Π΅Π³Π°Π½ΡΠ½ΠΎΡΡΡ Π½Π° Π²ΡΠ΅Ρ ΡΡΠΎΠ²Π½ΡΡ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°.
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
ΠΡΡΠ³ΠΎΠΉ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ Ρ ΠΊΡΡΠ³ΠΎΠ²ΡΠΌ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌ ΡΠΎΠ½ΠΎΠΌ Ρ ΠΎΡΠ»ΠΈΡΠ½ΡΠΌΠΈ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΌΠΈ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°ΠΌΠΈ.
ΠΡΡΠ³ΠΎΠΉ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π΄Π»Ρ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ ΠΈ ΠΏΡΠΈΡΡΠ΄Π»ΠΈΠ²ΡΠΉ. ΠΠΎΡΡΠΎΠΊ ΠΌΠ΅Π½Ρ Ρ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΎΠ½ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΡΠ΅ΡΡΠΎΡΠ°Π½ΠΎΠ², ΠΎΠ±Π·ΠΎΡΠΎΠ² ΠΈ Ρ. Π΄.
Un ΡΠΈΠ»ΡΡΡ ΠΌΠ΅Π½Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΉΒ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ Π² Π²Π΅Π±-Π²Π΅ΡΡΠΈΡ ΠΈ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ².
Off-canvas Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
Off-canvas Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΡΠΎ ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΈΡΡΠΉΡΠ΅ Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π°ΠΌΠΈ ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠ΅ΠΉ Π±ΡΡΡ ΠΎΡΠ΅Π½Ρ Π°ΠΊΡΡΠ°Π»ΡΠ½ΡΠΌ. ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠ΅ΡΠ΅ ΡΡΠΎ-ΡΠΎ Π½ΠΎΠ²ΠΎΠ΅, ΡΡΠΎΠ±Ρ ΡΠ΄ΠΈΠ²ΠΈΡΡ, Π΅Π³ΠΎ ΡΡΠΎΠ²Π΅Π½Ρ — Π»ΡΡΡΠΈΠΉ Π² ΡΡΠΎΠΌ ΡΠΏΠΈΡΠΊΠ΅.
Un Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π² CSS ΡΡΠΎ ΡΠΊΡΡΡΠΎ ΠΈ ΡΠ°ΠΊ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ Π·Π½Π°ΡΠΊΠΎΠΌ Π³Π°ΠΌΠ±ΡΡΠ³Π΅ΡΠ°.
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ Π±ΠΎΠΊΠΎΠ²Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ bootstrap Π²ΠΌΠ΅ΡΡΠΎ flexbox Π΄Π»Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ IE9 / 10. ΠΡΠ΅ ΠΎΠ΄Π½ΠΎ ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠ²ΠΎΠΈΡ Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ Π±ΠΎΠΊΠΎΠ²Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π² ΡΠ²ΠΎΠ΅ΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ.
ΠΠΊΠ»Π°Π΄ΠΊΠ° «ΠΠΎΡΡΠΈΠ½Π³»
ΠΠΊΠ»Π°Π΄ΠΊΠ° «ΠΠΎΡΡΠΈΠ½Π³» ΡΡΠΎ ΠΌΠ΅Π½ΡΒ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΉΡΡ ΡΠΏΠΈΡΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠ΅ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ.
CSS: ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Ρ Π·Π°Π΄Π΅ΡΠΆΠΊΠΎΠΉ
ΠΠ±ΡΡΠ½ΠΎΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠ΅ css-ΠΌΠ΅Π½Ρ ΡΠ΄Π΅Π»Π°Π½Π½ΠΎΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ display:none;
/display:block;
ΠΏΠΎΠ²Π΅ΡΠ΅Π½Π½ΠΎΠ³ΠΎ Π½Π° hover ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ Π΄Π²ΡΠΌΡ ΡΠ°Π·Π΄ΡΠ°ΠΆΠ°ΡΡΠΈΠΌΠΈ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠ°ΠΌΠΈ:
β ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ, ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ ΠΏΠΎΠΏΠ°Π» Π² ΠΎΠ±Π»Π°ΡΡΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΏΡΠ½ΠΊΡΠ°
β ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ ΠΏΡΠΎΠΏΠ°Π΄Π°Π΅Ρ, ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΠΊΡΡΡΠΎΡ Π²ΡΡΠ΅Π» Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ
ΠΡΠΈΠΌΠ΅Ρ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ:
<ul>
<li>
<a href="#">item</a>
<ul>
<li>subitem 1</li>
<li>subitem 2</li>
</ul>
</li>
</ul>
<style>
.menu {
margin: 0;
padding: 0;
list-style: none;
}
.menu .menu-item {
float: left;
margin: 0 1px 0 0;
padding: 0;
background: #E1E1E1;
}
.menu .menu-item a {
display: block;
padding: 5px 10px;
}
.menu .submenu {
display: none; /* ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠΊΡΡΠ²Π°Π΅ΠΌ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ */
position: absolute;
margin: 0;
padding: 0;
list-style: none;
background: #E1E1E1;
}
.menu .menu-item:hover .submenu {
display: block; /* ΠΠΎΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ ΠΏΡΠΈ Ρ
ΠΎΠ²Π΅ΡΠ΅ */
}
.menu .submenu-item {
margin: 0;
padding: 5px 10px;
}
</style>
ΠΠ΅ΠΌΠΎ
Π§ΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΡΡ Π·Π°Π΄Π΅ΡΠΆΠΊΡ ΠΏΠ΅ΡΠ΅Π΄ ΠΏΠΎΠΊΠ°Π·ΠΎΠΌ ΠΈ ΡΠΊΡΡΡΠΈΠ΅ΠΌ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ ΡΠ°Π½ΡΡΠ΅ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΠ»ΠΎΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ javascript, Π½ΠΎ ΡΠ΅ΠΏΠ΅ΡΡ Π½Π°ΡΠΊΠ½ΡΠ»ΡΡ Π½Π° css Π²Π°ΡΠΈΠ°Π½Ρ.
ΠΠ΅ΡΡ ΡΠΎΠΊΡΡ Π² ΡΠ²ΠΎΠΉΡΡΠ²Π΅ transition
, Π° ΡΠΎΡΠ½Π΅Π΅ Π΅Π³ΠΎ ΠΏΠΎΠ΄ΡΠ²ΠΎΠΉΡΡΠ²Π΅ transition-delay
, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π·Π°Π΄Π΅ΡΠΆΠΊΡ ΠΏΠ΅ΡΠ΅Π΄ ΠΏΠΎΠΊΠ°Π·ΠΎΠΌ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ:
.menu .submenu {
opacity: 0; /* ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠΊΡΡΠ²Π°Π΅ΠΌ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ */
visibility: hidden;
transition-property: opacity, visibility; /* ΠΠ°ΠΆΠ½ΠΎ ΡΡΠΎΠ±Ρ transition ΠΏΡΠΈΠΌΠ΅Π½ΡΠ»ΠΎΡΡ ΠΊ ΠΎΠ±ΠΎΠΈΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌ */
transition-duration: 0.2s; /* ΠΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ 0.3 ΡΠ΅ΠΊ. */
transition-delay: 0.15s; /* ΠΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π·Π°Π΄Π΅ΡΠΆΠΊΡ Π² 0.15 ΡΠ΅ΠΊ. */
}
.menu .menu-item:hover .submenu {
opacity: 1; /* ΠΠΎΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ ΠΏΡΠΈ Ρ
ΠΎΠ²Π΅ΡΠ΅ */
visibility: visible;
}
ΠΠ΅ΠΌΠΎ
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ Π½Π΅Π»ΡΠ·Ρ Π²Π΅ΡΠ°ΡΡ Π½Π° display
, ΡΠΎ Π΄Π»Ρ ΡΠΊΡΡΡΠΈΡ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ ΠΏΡΠΈΡ
ΠΎΠ΄ΠΈΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ²ΡΠ·ΠΊΡ opacity:0; visibility:hidden;
.
ΠΠΎΠΊΠ°Π·Π°ΡΡ ΡΠΊΡΡΡΡ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS
Π’Π΅ΠΌΠ°: HTML / CSSPrev | Π‘Π»Π΅Π΄.
ΠΡΠ²Π΅Ρ: ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ CSS
: hover
ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ ΠΡΠ»ΠΈ Π²Ρ ΠΏΡΠΎΡΡΠΎ Ρ
ΠΎΡΠΈΡΠ΅ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΈ ΡΠΊΡΡΠ²Π°ΡΡ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ, Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ΅Π½ JavaScript. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ, ΠΏΡΠΎΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS display
ΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ : hover
.
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠΎΡΡΠΎΠ΅ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS.
ΠΠΎΠΊΠ°Π·Π°ΡΡ ΡΠΊΡΡΡΡ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΉΡΡ ΡΠΏΠΈΡΠΎΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS
<ΡΡΠΈΠ»Ρ>
ul {
ΠΎΡΡΡΡΠΏ: 0;
ΡΡΠΈΠ»Ρ ΡΠΏΠΈΡΠΊΠ°: Π½Π΅Ρ;
ΡΠΎΠ½: # f2f2f2;
}
ul li {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ;
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
Π²ΡΡΠΎΡΠ° ΡΡΡΠΎΠΊΠΈ: 21px;
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: ΡΠ»Π΅Π²Π°;
}
ul li a {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π±Π»ΠΎΠΊ;
ΠΎΡΡΡΡΠΏ: 8px 25px;
ΡΠ²Π΅Ρ: # 333;
ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅: Π½Π΅Ρ;
}
ul li a: hover {
ΡΠ²Π΅Ρ: #fff;
ΡΠΎΠ½: # 939393;
}
ul li ul.ΠΏΠ°Π΄Π°ΡΡ {
ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 100%; / * Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΡΠΈΡΠΈΠ½Ρ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π³ΠΎΡΡ ΡΠΏΠΈΡΠΊΠ° * /
ΡΠΎΠ½: # f2f2f2;
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π½Π΅Ρ;
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
z-ΠΈΠ½Π΄Π΅ΠΊΡ: 999;
ΡΠ»Π΅Π²Π°: 0;
}
ul li: hover ul.dropdown {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π±Π»ΠΎΠΊ; / * ΠΠΎΠΊΠ°Π·Π°ΡΡ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΉΡΡ ΡΠΏΠΈΡΠΎΠΊ * /
}
ul li ul.dropdown li {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π±Π»ΠΎΠΊ;
}
Π‘Π²ΡΠ·Π°Π½Π½ΡΠ΅ ΡΠ°ΡΡΠΎ Π·Π°Π΄Π°Π²Π°Π΅ΠΌΡΠ΅ Π²ΠΎΠΏΡΠΎΡΡ
ΠΠΎΡ Π΅ΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°ΡΡΠΎ Π·Π°Π΄Π°Π²Π°Π΅ΠΌΡΡ Π²ΠΎΠΏΡΠΎΡΠΎΠ² ΠΏΠΎ ΡΡΠΎΠΉ ΡΠ΅ΠΌΠ΅:
ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Bootstrap ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°: 5 Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΉ
ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ ΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡΠ ΡΡΠ΅Π±Π½ΠΎΠΌ ΠΏΠΎΡΠΎΠ±ΠΈΠΈ ΠΏΠΎ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅ΠΌΡΡΡ ΠΌΠ΅Π½Ρ Bootstrap Ρ ΠΏΠΎΠΊΠ°Π·Π°Π» ΡΠ΅ΠΌΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΉ ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π³ΠΎΡΡ ΡΠΏΠΈΡΠΊΠ° (ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈΠ»ΠΈ ΡΡΡΠ»ΠΊΠ°).ΠΡΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π³ΠΎΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°, ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌΠΎΠ³ΠΎ Ρ ΠΏΠ»Π°ΡΡΠΎΡΠΌΠΎΠΉ Bootstrap. ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΎΡΠΊΡΡΠ²Π°ΡΡ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ ΠΈΠ»ΠΈ ΡΡΡΠ»ΠΊΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΠΉ ΠΌΠΎΠ΄ΡΠ»Ρ.
Π ΡΡΠΎΠΌ ΡΡΠΎΠΊΠ΅ Ρ ΡΠΎΠ±ΠΈΡΠ°ΡΡΡ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ Π²Π°ΠΌ ΡΠ°ΠΊΠΎΠΉ ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΊΡΡΠ²Π°ΡΡ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ, ΠΊΠΎΠ³Π΄Π° Π²Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ, Π³ΡΡΠΏΠΏΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈΠ»ΠΈ ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π½ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ.
ΠΡΠΎΡΡΠ°Ρ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π³ΠΎΡΡ ΡΠΏΠΈΡΠΊΠ° Bootstrap ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°ΠΠ»Ρ Π²ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΠΌΠ΅Π½Ρ, ΠΎΡΠΊΡΡΡΠΎΠ³ΠΎ Π² ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΠΊΠ»ΡΡΠΈΡΡ JS-ΡΠ°ΠΉΠ» ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΠΎΠ³ΠΎ ΠΌΠΎΠ΄ΡΠ»Ρ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΏΠΎΠΌΠΈΠΌΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Bootstrap ΠΈ jQuery.ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°Π³ΡΡΠ·ΠΈΡΡ ΡΡΠΎΡ JS-ΡΠ°ΠΉΠ», ΠΏΠ΅ΡΠ΅ΠΉΠ΄Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΠ»Π°Π³ΠΈΠ½Π° ΠΈ Π·Π°Π³ΡΡΠ·ΠΈΠ² ΠΏΠ°ΠΊΠ΅Ρ, ΠΈΠ»ΠΈ ΠΏΡΠΎΡΡΠΎ ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π½Π° Π»ΡΠ±ΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π½ΠΈΠΆΠ΅, ΠΏΡΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ Π½Π°ΠΉΠ΄ΠΈΡΠ΅ ΡΠ°ΠΉΠ» bootstrap-hover-dropdown.js . Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ Π΅Π³ΠΎ Π² ΡΠ²ΠΎΠ΅ΠΉ ΡΠΈΡΡΠ΅ΠΌΠ΅.
Π‘ΠΌ. Π‘Π»Π΅Π΄ΡΡΡΡΡ ΠΎΠ½Π»Π°ΠΉΠ½-Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΌΠ΅Π½Ρ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΠ°Π²Π΅Π΄ΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° Π’ΠΎΠ²Π°ΡΡ, ΠΈ ΠΎΡΠΊΡΠΎΠ΅ΡΡΡ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΉΡΡ ΡΠΏΠΈΡΠΎΠΊ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΎΠ½Π»Π°ΠΉΠ½-Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΈ ΠΊΠΎΠ΄ ΠΡΠ°ΠΊ, ΠΏΠΎΡΠ»Π΅ Π²ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ ΠΈ ΡΠ°ΠΉΠ»Π° ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΠΎΠ³ΠΎ ΠΌΠΎΠ΄ΡΠ»Ρ, Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΡΠ°Π·Π»ΠΈΡΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΠΏΡΠΎΡΡΡΠΌ ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΡΠΊΡΡΠ²Π°Π΅ΡΡΡ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ, ΠΈ ΡΡΠΈΠΌ — data-hover = «dropdown» Π°ΡΡΠΈΠ±ΡΡ Π΄Π°Π½Π½ΡΡ
:
|
ΠΠ° ΡΡΠΎΡ ΡΠ°Π·, Π²ΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠΎΡΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ, ΠΊΠ°ΠΊ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²ΡΡΠ΅, Ρ ΡΠΎΠ·Π΄Π°Π» Π²Π΅ΡΡ Π½ΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΠΏΡΠ½ΠΊΡΠ°ΠΌΠΈ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΠΌΠ΅Π½Ρ.Π‘ΡΠ΅Π΄ΠΈ Π½ΠΈΡ , ΠΊΠΎΠ³Π΄Π° Π²Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡΠ΅ ΠΊΡΡΡΠΎΡ ΠΌΡΡΠΈ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ Β«BootstrapΒ», ΠΎΠ½ ΠΎΡΠΊΡΡΠ²Π°Π΅Ρ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΉΡΡ ΡΠΏΠΈΡΠΎΠΊ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°. Π¦Π΅Π»Ρ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° Β«ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΡΡΒ» ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΎΠ½Π»Π°ΠΉΠ½-Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΈ ΠΊΠΎΠ΄ ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅, Bootstrap ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°, Π° Β«AboutΒ» — Π½Π΅Ρ. ΠΡΠΎ ΡΠ²ΡΠ·Π°Π½ΠΎ Ρ ΡΠ΅ΠΌ, ΡΡΠΎ data-hover = «dropdown» ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅ «Bootstrap»:
1 2 3 4 5 6 7 8 9 10 11 12 13 140002 |
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π³ΠΎΡΡ ΡΠΏΠΈΡΠΊΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΡΠΎ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΌΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ Bootstrap
Π ΡΡΠΎΠΉ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠ΅ΡΡ ΡΠΏΠΈΡΠΊΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΡΠΎΠ·Π΄Π°Π½Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΡ ΠΊΠ»Π°ΡΡΠΎΠ² Bootstrap. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ Π°ΡΡΠΈΠ±ΡΡ Π΄Π°Π½Π½ΡΡ data-hover = Β«dropdownΒ» , ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ½ ΠΎΡΠΊΡΡΠ²Π°Π΅ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ.Π‘ΠΌ. ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΈ ΠΊΠΎΠ΄ Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΎΠ½Π»Π°ΠΉΠ½-Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΈ ΠΊΠΎΠ΄ ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ Ρ Π³ΡΡΠΏΠΏΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΎΠΊΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎΡ ΠΏΠ»Π°Π³ΠΈΠ½ Ρ Π³ΡΡΠΏΠΏΠ°ΠΌΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ. ΠΡΠΎΡΠ΅ΡΡ ΠΎΡΡΠ°Π΅ΡΡΡ ΠΏΡΠ΅ΠΆΠ½ΠΈΠΌ, ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ data-hover = «dropdown» ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π³ΠΎΡΡ ΡΠΏΠΈΡΠΊΠ° Π² Π³ΡΡΠΏΠΏΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ. Π‘ΠΌ. Π‘Π»Π΅Π΄ΡΡΡΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΎΠ½Π»Π°ΠΉΠ½-Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΈ ΠΊΠΎΠ΄ ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π³ΠΎΡΡ ΡΠΏΠΈΡΠΊΠ° Π³ΡΡΠΏΠΏΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠ°Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ°:
1 2 3 4 5 6 7 8 9 10 11 12 13 140002 14 18 19 20 21 |
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ Bootstrap
Π, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ°Ρ Bootstrap, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π³ΠΎΡΡ ΡΠΏΠΈΡΠΊΠ°.ΠΠΏΡΡΡ ΠΆΠ΅, ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π°ΡΡΠΈΠ±ΡΡ data-hover = «dropdown» Π² ΡΠ΅Π³ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π³Π΄Π΅ Π²Ρ ΡΠΎΠ±ΠΈΡΠ°Π΅ΡΠ΅ΡΡ ΠΎΡΠΊΡΡΠ²Π°ΡΡ ΠΌΠ΅Π½Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°. Π‘ΠΌΠΎΡΡΠΈΡΠ΅ ΡΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ:
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΎΠ½Π»Π°ΠΉΠ½-Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΈ ΠΊΠΎΠ΄ΠΠ½ΠΎΠΏΠΊΠ° ΡΠ°Π·Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ°Ρ , Π³Π΄Π΅ ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΡΠ°ΡΡΠΈ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°Π΅ΡΡΡ Π°ΡΡΠΈΠ±ΡΡ data-hover = «dropdown» . ΠΠΎΠ³Π΄Π° Π²Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡΠ΅ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π½ΡΡ ΡΠ°ΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΌΠ΅Π½Ρ ΠΎΡΠΊΡΡΠ²Π°Π΅ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°. ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΎΡΠΊΡΡΡΡ ΠΎΠ±Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΡΠΎΡ Π°ΡΡΠΈΠ±ΡΡ ΠΈ Π½Π° Π΄ΡΡΠ³ΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ.
ΠΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΠΎΠ΅ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΠΈ jQuery — CodeHim
ΠΠ»Π°Π²Π½Π°Ρ / ΠΠ΅Π½Ρ ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ / ΠΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΠΎΠ΅ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΠΈ jQuery
Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΠΎΠ΅ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS ΠΈ jQuery, ΡΡΠΎΠ±Ρ ΡΠΏΡΠΎΡΡΠΈΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΏΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ ΡΠ°ΠΉΡΠ°.
ΠΠ±Π·ΠΎΡ ΠΏΠ»Π°Π³ΠΈΠ½Π°
ΠΠ»Π°Π³ΠΈΠ½: | ΠΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΠΎΠ΅ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ |
ΠΠ²ΡΠΎΡ: | saeedfouda |
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: | ΠΠΈΡΠ΅Π½Π·ΠΈΡ MIT |
ΠΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½ΠΎ: | 19 Π°ΠΏΡΠ΅Π»Ρ 2019 |
Π Π΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΠΉ: | ΠΠΈΠ»ΠΊΠ° Π½Π° GitHub |
ΠΠ°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ: | jQuery 1.3.1 ΠΈΠ»ΠΈ ΠΏΠΎΡΠ»Π΅Π΄Π½ΡΡ Π²Π΅ΡΡΠΈΡ |
Π’ΠΈΠΏ ΡΠ°ΠΉΠ»Π°: | zip-Π°ΡΡ ΠΈΠ² (HTML, CSS ΠΈ JavaScript) |
Π Π°Π·ΠΌΠ΅Ρ ΡΠΏΠ°ΠΊΠΎΠ²ΠΊΠΈ: | 3 ΠΠ |
ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΠΌΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΠΎΠ΅ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ
ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° :1. ΠΠ°Π³ΡΡΠ·ΠΈΡΠ΅ jQuery ΠΈ Π²ΠΊΠ»ΡΡΠΈΡΠ΅ Π²ΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ ΡΠ΅ΡΡΡΡΡ Π½Π° ΡΠ²ΠΎΡ HTML-ΡΡΡΠ°Π½ΠΈΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΌΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΠΎΠ³ΠΎ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π³ΠΎΡΡ ΠΌΠ΅Π½Ρ.
2. Π‘ΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΡΡΡΡΠΊΡΡΡΡ HTML Π΄Π»Ρ ΠΌΠ΅Π½Ρ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅, ΠΈ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π² Π½Π΅Π³ΠΎ ΡΠ²ΠΎΠΈ ΡΡΡΠ»ΠΊΠΈ.
550+ ΠΡΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ jQuery ΠΈ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ jQuery Ρ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠΌ
HC Off-canvas nav — ΡΡΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°Π΅ΠΌΠΎΠΉ ΠΌΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π²Π½Π΅ Ρ ΠΎΠ»ΡΡΠ°, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΠΉ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠ΅ Π²Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ.
Π£ΡΠ΅Π±Π½ΠΎΠ΅ ΠΏΠΎΡΠΎΠ±ΠΈΠ΅ ΠΏΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΡΠ΅ΠΊΡΠ° Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄Π»Ρ ΠΌΠ΅Π½Ρ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΡΡΡΡΡΠΉ Π²Π·Π³Π»ΡΠ΄ Π½Π° ΡΠΎ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΌΠ΅Π½Ρ Ρ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΎΠΉ, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π½Π° ΠΈΠ»Π»ΡΠ·ΠΈΠΈ Π·Π°ΡΠΈΠΊΠ»Π΅Π½Π½ΠΎΠΉ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΊΠ»ΠΎΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
SlideMenu.js — ΡΡΠΎ ΠΏΡΠΎΡΡΠΎΠ΅ ΠΌΠ΅Π½Ρ Π²Π½Π΅ Ρ ΠΎΠ»ΡΡΠ° Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ ΡΠ΅Π½ΡΠΎΡΠ½ΠΎΠ³ΠΎ Π²Π²ΠΎΠ΄Π°.
Pagemap — ΡΡΠΎ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄Π° Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΡΠΈΡΡΠ΅ΠΌΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΌΠΈΠ½ΠΈ-ΠΊΠ°ΡΡΡ Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΡΡΡΠ°Π½ΠΈΡΠ½ΠΎΠ³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° ΠΈΠ»ΠΈ Π»ΡΠ±ΠΎΠΉ Π΄ΡΡΠ³ΠΎΠΉ Π΄Π»ΠΈΠ½Π½ΠΎΠΉ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Ρ javascript ΠΈ Ρ ΠΎΠ»ΡΡΠΎΠΌ html5.
ΠΡΡΠ³ΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ — ΡΡΠΎ ΠΊΡΡΠ³ΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ ΡΠΈΡΠΎΠΊΠΈΠΌΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΡΠ΅Π½Ρ Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ.ΠΡΠΎ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΠΎΠ΅ ΠΊΡΠ°ΡΠΈΠ²ΠΎΠ΅ ΠΊΡΡΠ³ΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ ΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΠ° ΡΠ°Π±ΠΎΡΠ΅ΠΌ ΡΡΠΎΠ»Π΅ ΠΈΠ»ΠΈ Π½ΠΎΡΡΠ±ΡΠΊΠ΅ Π½Π°ΠΆΠΌΠΈΡΠ΅ Π²ΡΠΎΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΡ ΠΌΡΡΠΈ (ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ). ΠΠ° ΡΠΌΠ°ΡΡΡΠΎΠ½Π΅ ΠΈΠ»ΠΈ ΠΏΠ»Π°Π½ΡΠ΅ΡΠ΅ Π½Π°ΠΆΠΌΠΈΡΠ΅ Π½Π° ΡΠΊΡΠ°Π½ ΠΈ ΡΠ΄Π΅ΡΠΆΠΈΠ²Π°ΠΉΡΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΠΊΡΠ½Π΄, ΠΈ ΠΏΠΎΡΠ²ΠΈΡΡΡ ΠΌΠ΅Π½Ρ.
ΠΡΠΎΡΡΠΎΠΉ, Π»Π΅Π³ΠΊΠΈΠΉ ΠΈ Π»Π΅Π³ΠΊΠΈΠΉ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ / ΡΠΊΡΡΠ²Π°Π΅Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π²Π½ΠΈΠ· Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ Π΅Π΅ Π²ΡΡΠΎΡΠ°. ΠΠ΄Π½Π°ΠΊΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅Ρ ΡΠ»Π΅Π΄ΠΈΡΡ Π·Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ΠΉ, ΠΏΠΎΡΡΠΎΠΌΡ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΏΡΠΎΠΊΡΡΡΠΈΠ²Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π²Π²Π΅ΡΡ , ΠΎΠ½ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ.
Zeynepjs — ΡΡΠΎ Π»Π΅Π³ΠΊΠΈΠΉ ΠΌΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ Π±ΠΎΠΊΠΎΠ²ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ jQuery.
ΠΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π΅ΠΌΠΎΠ΅ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ ΡΠ°Π·Π±ΡΠΎΡΠ°Π½Π½ΡΠΌ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΡΠΎΡΠΌΠΎΡΡΠΎΠΌ ΡΡΠΊΠΈΠ·ΠΎΠ² ΡΠ΅ΡΠΊΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΠΎΡΠ»Π΅ Π½Π°ΡΠ΅Π³ΠΎ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ° Ρ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π΅ΠΌΠΎΠΉ ΠΏΠΎΠ»ΠΎΡΠΎΠΉ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΌΡ Ρ ΠΎΡΠ΅Π»ΠΈ ΠΈΠ·ΡΡΠΈΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π½ΠΈΡ Π² ΠΌΠ΅Π½Ρ. ΠΠ΄Π΅Ρ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ Π±ΠΎΠ»ΡΡΠΎΠ΅ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ ΡΠ°Π·Π±ΡΠΎΡΠ°Π½Π½ΡΠΌΠΈ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΠ°ΠΌΠΈ. ΠΠ΅Π½Ρ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°ΡΡ, ΠΈ ΠΏΡΠΈ ΡΡΠΎΠΌ ΡΡΠΊΠΈΠ·Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ. ΠΠ°ΠΆΠ΄ΡΠΉ ΠΏΡΠ½ΠΊΡ ΠΌΠ΅Π½Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠ΅Π½ΡΠ΅Ρ Π±ΡΠΊΠ²Ρ, ΡΡΠΎΠ±Ρ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΠΎΠ±Π²Π΅Π΄Π΅Π½Π½ΡΡ Π²Π΅ΡΡΠΈΡ.ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° ΡΡΡΠ»ΠΊΡ Β«ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡΒ» ΠΏΠΎΠ΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ ΠΌΠ΅Π½Ρ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ ΠΈ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡΡΡ, ΠΎΠ±ΡΠ°Π·ΡΡ ΡΠ΅ΡΠΊΡ.
PrMenu — ΡΡΠΎ ΠΎΡΠ΅Π½Ρ Π»Π΅Π³ΠΊΠΈΠΉ, ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΌΠ΅Π½Ρ Π΄Π»Ρ jQuery. ΠΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΌΠ΅Π½Ρ ΡΠΎ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ, ΡΠ°Π²Π½ΠΎΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΌΠΈ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΌΠ΅Π½Ρ.
Π€ΡΠ½ΠΊΡΠΈΠΈ:
- Π‘ΡΡΠ»ΠΊΠΈ ΡΠ°Π²Π½ΠΎΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅ ΠΌΠ΅Π½Ρ
- ΠΠ°ΠΊΡΠΈΠΌΡΠΌ ΡΠ΅ΡΡΡΠ΅ ΡΡΠΎΠ²Π½Ρ ΠΌΠ΅Π½Ρ (ΡΡΠΈ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΡ )
- ΠΠ²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΏΠ΅ΡΠ΅Π½ΠΎΡ Π΄Π»ΠΈΠ½Π½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° ΡΡΡΠ»ΠΊΠΈ (ΠΌΠ°ΠΊΡΠΈΠΌΡΠΌ Π΄Π²Π΅ ΡΡΡΠΎΠΊΠΈ)
- Π¦Π²Π΅Ρ ΡΠΎΠ½Π° Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΡΡΡΠ»ΠΊΠΈ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΡΠΎΠ²Π½Π΅ΠΉ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Π½Π° ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΌ ΡΠ²Π΅ΡΠ΅ ΡΠΎΠ½Π°
- ΠΡΠ΅ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ, ΠΏΠ΅ΡΠ΅Π΄Π°Π² ΡΠ²ΠΎΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ
ΠΡΡΡΠΈΠ΅ 4 jQuery Dropdown Plugins (Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠ΅ ΠΈ ΠΏΠ»Π°ΡΠ½ΡΠ΅)
Π₯ΠΎΡΠΈΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ»Π΅Π³Π°Π½ΡΠ½ΠΎΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ, ΠΊΠ°ΠΊ Π½Π° ΡΠ°ΠΉΡΠ°Ρ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΊΠΎΠΌΠΌΠ΅ΡΡΠΈΠΈ?
ΠΡΠ»ΠΈ Π΄Π°?
Π’ΠΎΠ³Π΄Π° Ρ Π²Π°Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ jQuery Dropdown Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°.
ΠΠΎ ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΏΡΠΈΡΡΡΠΏΠΈΡΡ ΠΊ ΡΠ°Π±ΠΎΡΠ΅, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΠ΅ ΠΌΠ½Π΅ ΠΎΠ±ΡΡΡΠ½ΠΈΡΡ Π²Π°ΠΌ, ΠΊΠ°ΠΊ ΡΡΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Ρ ΠΌΠΎΠ³ΡΡ ΠΎΠΏΡΠ°Π²Π΄Π°ΡΡ Π²Π°ΡΠΈ ΠΎΠΆΠΈΠ΄Π°Π½ΠΈΡ.
ΠΡΠΏΠ°Π΄Π°ΡΡΠΈΠ΅ ΠΌΠ΅Π½Ρ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½Ρ Π΄Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΠΏΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°ΠΌ. ΠΡΠΎ ΡΠΏΠΈΡΠΊΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΎΠΏΡΠΈΠΉ, ΠΊΠ°ΠΆΠ΄Π°Ρ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ ΠΈΠΌΠ΅Π΅Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ.
ΠΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ ΠΊΡΡΡΠΎΡ ΠΈΠ»ΠΈ ΡΠ΅Π»ΠΊΠ°Π΅Ρ ΠΌΡΡΡΡ Π½Π° ΠΎΠΏΡΠΈΠΈ, Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Β«ΡΠ°ΡΠΊΡΡΠ²Π°Π΅ΡΡΡΒ».
ΠΡΠΏΠ°Π΄Π°ΡΡΠΈΠ΅ ΠΌΠ΅Π½Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡ Π΄Π»Ρ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ Π½Π°Π±ΠΎΡΠ° ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ² Π² ΠΌΠ΅Π½Ρ Π²Π°ΡΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°.
ΠΠ±ΡΡΠ½ΠΎ ΠΎΠ½ΠΈ ΡΠΎΠ·Π΄Π°ΡΡΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ HTML, CSS ΠΈ JavaScript. ΠΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΌΠΎΡΡ Π²Π°ΠΌ, ΠΌΡ Π΄Π΅Π»ΠΈΠΌΡΡ ΡΠΏΠΈΡΠΊΠΎΠΌ ΠΈΠ· 4 Π»ΡΡΡΠΈΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² jQuery Dropdown. ΠΠ½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°ΡΡ Π³ΠΈΠ±ΠΊΠΎΠ΅ ΠΈ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ.
ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· ΡΡΠΈΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² ΠΌΠΎΠ³ΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π½Π΅ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΡΠΎΠ²Π½Π΅ΠΉ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΡΠΎΠΊ ΠΌΠ΅Π½Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΠΈΠ»Π΅ΠΉ, ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ Π»ΠΈΠΏΠΊΠΎΠ΅, Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅, Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΈ Ρ. Π. ΠΠ»Ρ Π²Π°ΡΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°.
ΠΠ°Π²Π°ΠΉ ΠΏΡΠΎΠ²Π΅ΡΠΈΠΌ!
Swift ΡΠ΅ΡΠ΅Π· Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ jquery:
1.ΠΠ»Π°Π³ΠΈΠ½ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ jQuery CSS3 — ΠΠ»Π°Π³ΠΈΠ½Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ jQuery
ΠΡΠΎ Π»Π΅Π³ΠΊΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΡ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΡ ΡΡ ΠΌΠ΅Π½Ρ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΡ Π½Π΅ΡΠΏΠΎΡΡΠ΄ΠΎΡΠ΅Π½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ ΡΠ²ΠΎΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° Π² ΡΠΈΡΡΠ΅ΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ.
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΎΠ³ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½Π° Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π±Π΅Π· ΡΡΠ΅ΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ ΡΠΊΡΡΡΠΎ ΠΈ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π²ΡΡΠΊΠΈΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ Π½Π° Π½Π΅Π³ΠΎ ΠΊΡΡΡΠΎΡ. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΎΠ³ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½Π°.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π½Π΅ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΡΠΈΠ»Π΅ΠΉ Π΄Π»Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²Π΅ΡΠΎΠ² ΡΠΎΠ½Π° ΠΈ ΠΎΡΡΡΡΠΏΠΎΠ². ΠΠ»Π°Π³ΠΈΠ½ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ CSS3, ΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌΡΡ animate.css. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΡΠΎΠ»ΡΠΊΠΎ ΡΠ²ΠΎΠΉΡΡΠ² CSS, ΡΠΊΠΎΠ»ΡΠΊΠΎ Π·Π°Ρ ΠΎΡΠΈΡΠ΅, ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ³ΠΎΠ΄Π½ΠΎ ΡΠ°Π·.
Π₯Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠΈ
- ΠΠ΅Π½Ρ, ΠΎΡΠΎΡΠΌΠ»Π΅Π½Π½ΠΎΠ΅ ΡΡΠΈΠΌ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ, Π±ΡΠ΄Π΅Ρ Ρ ΠΎΡΠΎΡΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ .
- ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΊΠ»ΡΡΠΈΡΡ / ΠΎΡΠΊΠ»ΡΡΠΈΡΡ ΠΏΡΠΈΡΡΠ΄Π»ΠΈΠ²ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, ΠΎΡΠΊΠ»ΡΡΠΈΠ² Π°Π½ΠΈΠΌΠ°ΡΠΈΡ.css ΡΠ°ΠΉΠ».
- ΠΠΎΠΊΡΠΏΠ°ΡΠ΅Π»Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π΄ΠΎΡΡΡΠΏ ΠΊ FAQ ΠΏΠΎ ΡΡΠΎΠΌΡ ΠΏΠ»Π°Π³ΠΈΠ½Ρ ΠΏΠΎΡΠ»Π΅ Π΅Π³ΠΎ ΠΏΠΎΠΊΡΠΏΠΊΠΈ.
- ΠΡΠΎΡ ΠΏΠ»Π°Π³ΠΈΠ½ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΡΠ°ΠΉΡΠΎΠΌ joomla.
- Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΠΎΠ³ΠΎ ΠΌΠΎΠ΄ΡΠ»Ρ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΡΠ½ΠΊΡΡ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ ΠΈΠ»ΠΈ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π³ΠΎ Π²ΠΏΡΠ°Π²ΠΎ ΠΌΠ΅Π½Ρ.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΊΡΠΏΠΈΡΡ ΡΡΠΎΡ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΏΠΎ ΡΠ°Π·ΡΠΌΠ½ΠΎΠΉ ΡΠ΅Π½Π΅ Π² 5 Π΄ΠΎΠ»Π»Π°ΡΠΎΠ².
ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ Π·Π΄Π΅ΡΡ
2. BDropdown — ΠΏΠ»Π°Π³ΠΈΠ½Ρ jQuery Dropdown
ΠΡΠΎΡ ΠΏΠ»Π°Π³ΠΈΠ½ Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠΌ ΡΠΏΠΈΡΠΊΠΎΠΌ jquery ΠΎΡΠ½ΠΎΠ²Π°Π½ Π½Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ΅ Bootstrap 4.ΠΡΠΏΠ°Π΄Π°ΡΡΠΈΠΉ ΡΠΏΠΈΡΠΎΠΊ, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌΡΠΉ ΡΡΠΈΠΌ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΡ ΡΠ΅Π»ΡΠΊΠΎΠΌ, Π° Π½Π΅ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ ΠΊΡΡΡΠΎΡΠ°. ΠΡΠΎΡ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠ΅ ΡΠΏΠΈΡΠΊΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΠΈΠ»Π΅ΠΉ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΎΠ΄ΠΈΠ½ΠΎΡΠ½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°, ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π½Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°, Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠ΅, ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠ΅, Π²Π°ΡΠΈΠ°ΡΠΈΠΈ Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠΌ ΠΈ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠΌ ΡΠΏΠΈΡΠΊΠΎΠΌ.
ΠΡΠΏΠ°Π΄Π°ΡΡΠΈΠ΅ ΡΠΏΠΈΡΠΊΠΈ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠ΅ ΡΡΠΈΠΌ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ, ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°, Π²ΠΊΠ»ΡΡΠ°Ρ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΠΈ ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠ΅ΡΡ ΡΠΏΠΈΡΠΊΠΈ.
ΠΡΠΏΠ°Π΄Π°ΡΡΠΈΠΉ ΡΠΏΠΈΡΠΎΠΊ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ ΡΡΠΈΠΌ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ, ΡΠΏΡΠ°Π²Π»ΡΠ΅ΡΡΡ ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΡΠ΅ΡΠ΅Π· CSS. ΠΡΠ»ΠΈ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΉΡΡ ΡΠΏΠΈΡΠΎΠΊ Π²ΡΡ ΠΎΠ΄ΠΈΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΡΠΈΡΠΈΠ½Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°, Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ jQuery.
Π₯Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠΈ
- ΠΠ»Π°Π³ΠΈΠ½ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»ΠΈ ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠ°Π·Π΄Π΅Π»Π΅Π½ΠΈΡ Π³ΡΡΠΏΠΏ ΡΠ²ΡΠ·Π°Π½Π½ΡΡ ΠΏΡΠ½ΠΊΡΠΎΠ² ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»Ρ.
- ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ ΡΠΎΡΠΌΡ Π² ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΎΠ³ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½Π°.
- Π ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅ΠΌΡΡ ΡΠΏΠΈΡΠΊΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΊΠ»ΡΡΠΈΡΡ ΠΈΠ»ΠΈ ΠΎΡΠΊΠ»ΡΡΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΡ Π°ΠΊΡΠΈΠ²Π½ΡΠΌΠΈ ΠΈΠ»ΠΈ Π½Π΅Π°ΠΊΡΠΈΠ²Π½ΡΠΌΠΈ.
ΠΡ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ 6-ΠΌΠ΅ΡΡΡΠ½ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΠΎΡ Documentdriver Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π±ΡΠ΄ΡΡΠΈΠΌΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡΠΌΠΈ.
ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ Π·Π΄Π΅ΡΡ
3. ΠΠ°Π²ΠΈΡΠΈΠΌΡΠΉ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΉΡΡ ΡΠΏΠΈΡΠΎΠΊ — ΠΏΠ»Π°Π³ΠΈΠ½Ρ jQuery Dropdown
ΠΡΠΎΡ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΌΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΠΎΠ³ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½Π° jQuery Ρ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΌΡΡ ΡΠΏΠΈΡΠΊΠΎΠΌ. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠ΅ΡΡ ΡΠΏΠΈΡΠΊΠΈ Ρ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠΌΠΈ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΡΠΌΠΈ.
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΎΠ³ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½Π° Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠ΅ΡΡ ΡΠΏΠΈΡΠΊΠΈ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠ΅ΠΉ Ρ 3, 2 ΠΈ 4 ΡΡΠΎΠ²Π½ΡΠΌΠΈ. ΠΡΠΈ Π·Π°Π²ΠΈΡΠΈΠΌΡΠ΅ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠ΅ΡΡ ΡΠΏΠΈΡΠΊΠΈ Π±ΡΠ΄ΡΡ Π³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΏΠΈΡΠΎΠΊ ΠΎΠΏΡΠΈΠΉ, ΡΠ³ΡΡΠΏΠΏΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΏΠΎ optgroup.
Π₯Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠΈ
- ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π΅Π³ΠΎ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΡ ΠΎΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ Π΄ΡΡΠ³ΠΈΡ Π²Ρ ΠΎΠ΄Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² (Π²ΠΊΠ»ΡΡΠ°Ρ Π²Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠ΅ΠΉ).
- ΠΠ»Π°Π³ΠΈΠ½ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΎΡΠΊΠ»ΡΡΠ°Π΅Ρ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΠ΅ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ Π΄ΠΎ ΡΠ΅Ρ ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° Π·Π°Π²ΠΈΡΠΈΠΌΡΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ Π½Π΅ ΡΡΠ°Π½ΡΡ Π΄ΠΎΡΡΡΠΏΠ½Ρ.
- ΠΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π²ΡΠ·ΠΎΠ² ajax Π½Π° ΡΠ΅ΡΠ²Π΅Ρ Π΄Π»Ρ Π΄ΠΎΡΡΠ°Π²ΠΊΠΈ ΡΠΏΠΈΡΠΊΠ° Π·Π°Π²ΠΈΡΠΈΠΌΡΡ ΠΎΠΏΡΠΈΠΉ.
- ΠΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΠΌ Π²ΡΠ±ΠΎΡΠ΅, ΠΏΠΎΠΊΠ° ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ Π½Π΅ Π±ΡΠ΄ΡΡ ΠΏΠΎΠ»ΡΡΠ΅Π½Ρ Ρ ΡΠ΅ΡΠ²Π΅ΡΠ°.
ΠΡΠΎ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΎΠ±ΡΠ΅ΡΡΠΈ Π½Π° GitHub.
ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ Π·Π΄Π΅ΡΡ
4. ΠΠ»Π°Π³ΠΈΠ½ jQuery Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠ³ΠΎ ΠΏΠΎΡΡΠ΄ΠΊΠ°
ΠΡΠΎΡ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΏΠΎΡΡΠ΄ΠΊΠ° Π²ΡΠ±ΠΎΡΠ°.ΠΠΎΡΠ»Π΅ ΠΈΠ½ΡΠ΅Π³ΡΠ°ΡΠΈΠΈ ΡΡΠΎΠ³ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½Π° Π²Π°ΡΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΡΠΌΠΎΠ³ΡΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΠΏΠΎΡΡΠ΄ΠΎΠΊ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΏΡΠΎΠ΄ΡΠΊΡΠΎΠ², Π΄ΠΎΡΡΡΠΏΠ½ΡΡ Π² ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅ΠΌΡΡ ΡΠΏΠΈΡΠΊΠ΅. ΠΡΠ±ΡΠ°Π½Π½ΡΠ΅ ΠΏΡΠΎΠ΄ΡΠΊΡΡ Π±ΡΠ΄ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² ΠΏΠ°Π½Π΅Π»ΠΈ. ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΌΠΎΠ³ΡΡ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠ²ΠΎΠΉ Π·Π°ΠΊΠ°Π· ΠΏΠΎΡΠ»Π΅ Π²ΡΠ±ΠΎΡΠ° ΠΏΡΠΎΠ΄ΡΠΊΡΠΎΠ² ΠΈΠ· ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π³ΠΎΡΡ ΡΠΏΠΈΡΠΊΠ°.
Π₯Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠΈ
- ΠΡΠΎΡ ΠΏΠ»Π°Π³ΠΈΠ½ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌ Ρ:
- jQuery: 1.4+
- ΠΡΠΎΡΠΎΡΠΈΠΏ: 1.7.1+
- ΠΡΠ±ΡΠ°Π½ΠΎ: 1.0.0+
- ΠΠ½ ΠΏΡΠΎΡΡ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΎΡΠ΅Π½Ρ Ρ ΠΎΡΠΎΡΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½.ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΆΠΈΠ²ΡΠ΅ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ ΡΡΠΎΠ³ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½Π° Π½Π° JsFiddle.
ΠΡΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ ΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΠΎ Π½Π° GitHub.
ΠΠΎΠ΄ΡΠΎΠ±Π½ΠΎΡΡΠΈ Π·Π΄Π΅ΡΡ
ΠΠ° Π²Π°ΠΌΠΈ!
ΠΡΠΈ Π»Π΅Π³ΠΊΠΈΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π³ΠΎΡΡ ΡΠΏΠΈΡΠΊΠ° jQuery ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ»Π΅Π·Π½Ρ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΡ ΡΡ ΠΌΠ΅Π½Ρ. ΠΠΈΠ·Π°ΠΉΠ½ ΡΡΠΈΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΡΠ΅ΡΡΡ CSS. ΠΠΎΡΡΠΎΠΌΡ ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ Π½Π°ΠΆΠ°ΡΠΈΠΉ ΠΊΠ»Π°Π²ΠΈΡ, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°Π»ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ Π²Π°ΡΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°.
ΠΡΠΈ ΡΡΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄ΠΎΠ±ΡΠ°Π½Π½ΡΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ jQuery Dropdown ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡ Π²Π°ΠΌ Π±Π΅Π· ΠΏΡΠΎΠΌΠ΅Π΄Π»Π΅Π½ΠΈΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΌΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΡΠ΅ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ Π½Π° Π²Π°Ρ Π²Π΅Π±-ΡΠ°ΠΉΡ.
ΠΡΡΡ Π»ΠΈ Ρ Π²Π°Ρ ΠΊΠ°ΠΊΠΈΠ΅-Π½ΠΈΠ±ΡΠ΄Ρ ΠΎΡΠ»ΠΈΡΠ½ΡΠ΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΈ ΠΏΠΎ ΠΏΠ»Π°Π³ΠΈΠ½Π°ΠΌ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π³ΠΎΡΡ ΡΠΏΠΈΡΠΊΠ° jQuery? ΠΠ°ΠΉΡΠ΅ Π½Π°ΠΌ Π·Π½Π°ΡΡ ΠΎΠ± ΡΡΠΎΠΌ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ !
Π‘Π»Π΅Π΄ΠΈΡΠ΅ Π·Π° ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡΠΌΠΈ! ΠΡΡΡ Π΅ΡΠ΅ ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡΠ·ΡΠ²ΠΎΠ² ΠΎ Π»ΡΡΡΠΈΡ ΠΏΠ»Π°Π³ΠΈΠ½Π°Ρ .
ΠΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΠΈ ΡΠΊΡΡΡΡ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ CSS
: hover
ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ ΠΡΠ»ΠΈ Π²Ρ ΠΏΡΠΎΡΡΠΎ Ρ
ΠΎΡΠΈΡΠ΅ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΈ ΡΠΊΡΡΠ²Π°ΡΡ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ, Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ΅Π½ JavaScript.ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ, ΠΏΡΠΎΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ CSS display
ΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡ : hover
.
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠΎΡΡΠΎΠ΅ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π΅ΡΡ ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS.
ΠΠΎΠΊΠ°Π·Π°ΡΡ ΡΠΊΡΡΡΡ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΉΡΡ ΡΠΏΠΈΡΠΎΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS
<ΡΡΠΈΠ»Ρ>
ul {
ΠΎΡΡΡΡΠΏ: 0;
ΡΡΠΈΠ»Ρ ΡΠΏΠΈΡΠΊΠ°: Π½Π΅Ρ;
ΡΠΎΠ½: # f2f2f2;
}
ul li {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π±Π»ΠΎΠΊ;
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
Π²ΡΡΠΎΡΠ° ΡΡΡΠΎΠΊΠΈ: 21px;
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: ΡΠ»Π΅Π²Π°;
}
ul li a {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π±Π»ΠΎΠΊ;
ΠΎΡΡΡΡΠΏ: 8px 25px;
ΡΠ²Π΅Ρ: # 333;
ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅: Π½Π΅Ρ;
}
ul li a: hover {
ΡΠ²Π΅Ρ: #fff;
ΡΠΎΠ½: # 939393;
}
ul li ul.ΠΏΠ°Π΄Π°ΡΡ{
ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΡΠΈΡΠΈΠ½Π°: 100%; / * Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΡΠΈΡΠΈΠ½Ρ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠ΅Π³ΠΎΡΡ ΡΠΏΠΈΡΠΊΠ° * /
ΡΠΎΠ½: # f2f2f2;
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π½Π΅Ρ;
ΠΏΠΎΠ·ΠΈΡΠΈΡ: Π°Π±ΡΠΎΠ»ΡΡΠ½Π°Ρ;
z-ΠΈΠ½Π΄Π΅ΠΊΡ: 999;
ΡΠ»Π΅Π²Π°: 0;
}
ul li: hover ul.dropdown {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π±Π»ΠΎΠΊ; / * ΠΠΎΠΊΠ°Π·Π°ΡΡ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΉΡΡ ΡΠΏΠΈΡΠΎΠΊ * /
}
ul li ul.dropdown li {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π±Π»ΠΎΠΊ;
}
ΠΠ°ΠΊ ΡΠ΅ΡΠΈΡΡ Π·Π°Π΄Π°ΡΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ | Π₯Π°Π²ΡΠ΅Ρ ΠΠΈΠ»ΡΡΠ½ΡΡΠ²Π°
ΠΡΠΏΠ°Π΄Π°ΡΡΠΈΠ΅ ΠΌΠ΅Π½Ρ — ΠΎΡΠ΅Π½Ρ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠΉ ΠΎΠ±ΡΠ°Π·Π΅Ρ Π² ΡΠ΅ΡΠΈ, ΠΈΡ ΠΊΠΎΠ΄ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΡΠΎΡΡ:
- ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅
ΠΏΠΎΠ·ΠΈΡΠΈΡ: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅
Π² ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌ ΠΏΡΠ½ΠΊΡΠ΅ ΠΌΠ΅Π½Ρ. - ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ
: Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
Π² ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ. - ΠΠ΅ΡΠ΅ΠΊΠ»ΡΡΠΈΡΡ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΡ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
ΠΠ΄Π½Π°ΠΊΠΎ ΡΡΠΎ Π½Π΅ ΡΡΠΈΡΡΠ²Π°Π΅Ρ ΡΠΎΡ ΡΠ°ΠΊΡ, ΡΡΠΎ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ Π½Π΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ ΠΊΡΡΡΠΎΡ Π² ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ ΠΏΠΎ ΠΏΡΡΠΌΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ, Π±ΠΎΠ»ΡΡΡΡ ΡΠ°ΡΡΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΠΎΠ½ΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡ ΠΊΡΡΡΠΎΡ Π½Π° ΠΏΠΎ Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»ΠΈ Π½Π° , ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎ ΠΊΡΠ°ΡΡΠ°ΠΉΡΠΈΠΉ ΠΏΡΡΡ ΠΊ ΠΊΠΎΠ½ΡΠ΅Π½ΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ½ΠΈ ΠΏΡΡΠ°Π΅ΠΌΡΡ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π΄ΠΎΡΡΡΠΏ.
ΠΡΠ³Ρ ! ΠΠΈΠ»ΡΠΉ ΠΊΠΎΡΠ΅Π½ΠΎΠΊ Π²Π½Π΅ Π΄ΠΎΡΡΠ³Π°Π΅ΠΌΠΎΡΡΠΈβ¦ΠΡΠ½ΠΎΠ²Π½Π°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Ρ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΎΠΌ Β«Π½Π°Π²Π΅ΡΡΠΈ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ, ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠΈΡΡ Π΄Π΅ΡΠ΅ΠΉΒ» Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΠΊΡΡΡΠΎΡ ΠΏΠΎΠΊΠΈΠ΄Π°Π΅Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ ΡΠΊΡΡΠ²Π°Π΅ΡΡΡ.ΠΡΠΎ Π±ΠΎΠ»Π΅Π΅ ΡΠ΅ΡΡΠ΅Π·Π½Π°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Ρ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΌΠΈΡΡ ΡΠΏΠΈΡΠΊΠ°ΠΌΠΈ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ»ΡΡΠ°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π±ΡΠ΄ΡΡ ΠΏΡΡΠ°ΡΡΡΡ ΡΠ΅Π»ΠΊΠ½ΡΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π½Π° Π΄Π°Π»ΡΠ½Π΅ΠΌ ΠΊΠΎΠ½ΡΠ΅ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ.
Π ΡΡΠ°ΡΡΡΡ, Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠ΅ΡΠΈΡΡ ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ:
ΠΡ Π²ΡΠ΅ Π·Π½Π°Π΅ΠΌ, ΡΡΠΎ javascript ΡΠ΅ΡΠ°Π΅Ρ Π²ΡΠ΅, , ΠΈ ΡΡΠΎ Π½Π΅ ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°ΠΊΠΎΠΉ ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠ°ΠΊ jQuery-menu-aim, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΌΠΎΡΡ ΡΠ°Π·Π»ΠΈΡΠ°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, ΠΏΡΡΠ°ΡΡΠ΅Π³ΠΎΡΡ Π½Π°Π²Π΅ΡΡΠΈ ΠΊΡΡΡΠΎΡ Π½Π° ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΉΡΡ ΡΠΏΠΈΡΠΎΠΊ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ»ΠΈ ΠΏΠΎΠΏΡΡΠΊΠ° ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ ΠΊ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ.
ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠ΅ ΡΠΏΠΈΡΠΊΠΈ, ΠΏΠΎΡ ΠΎΠΆΠΈΠ΅ Π½Π° Amazon, Π½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠ΅ ΠΌΠ΅Π½Ρ.ΠΠ½ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Ρ ΠΎΡΠΎΡΠΎ, Ρ ΠΎΡΡ ΠΎΠ½ Π½Π΅ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ»ΡΡ Π³ΠΎΠ΄Π°ΠΌΠΈ, Π½ΠΎ Π΅ΡΠ»ΠΈ Π²Ρ ΠΏΡΡΠ°Π΅ΡΠ΅ΡΡ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ², Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° CSS Π±ΡΠ΄Π΅Ρ Π»ΡΡΡΠ΅ΠΉ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²ΠΎΠΉ.
ΠΡΠ»ΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° ΡΠΎ ΡΠΊΡΡΡΠΈΠ΅ΠΌ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΡ ΡΡ ΡΠΏΠΈΡΠΊΠΎΠ² Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΊΡΡΡΠΎΡ ΡΠ»ΡΡΠ°ΠΉΠ½ΠΎ ΠΏΠΎΠΊΠΈΠ΄Π°Π΅Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΠΎ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΌΡ ΡΠΌΠΎΠΆΠ΅ΠΌ ΡΠ°ΡΡΠΈΡΠΈΡΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ , ΡΡΠΎΠ±Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ Π±ΠΎΠ»ΡΡΠΈΠΉ ΠΏΡΠ΅Π΄Π΅Π» ΠΎΡΠΈΠ±ΠΊΠΈ.
ΠΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΡ :: before
ΠΈ :: after
ΡΠ²Π»ΡΡΡΡΡ ΡΠ°ΡΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° , ΠΏΠΎΡΡΠΎΠΌΡ ΠΈΡ
ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Β«ΡΡΡΠ°Ρ
ΠΎΠ²ΠΎΡΠ½ΠΎΠΉ ΡΠ΅ΡΠΈΒ» ΠΏΠΎΠ΄ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π²Π΅ΡΡ
Π½Π΅Π³ΠΎ ΡΡΠΎΠ²Π½Ρ, ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Π΄Π΅ΡΠΆΠ°ΡΡ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΉΡΡ ΡΠΏΠΈΡΠΎΠΊ ΠΎΡΠΊΡΡΡΡΠΌ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π°Π΄.
ΠΡΠ°ΡΠ½Π°Ρ ΠΏΠΎΠ»ΠΎΡΠ° — ΡΡΠΎ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ :: after
ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ ΠΏΠΎΠ²Π΅ΡΡ
Π²ΡΠ΅Ρ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Π΅ΡΡ
Π½Π΅Π³ΠΎ ΠΌΠ΅Π½Ρ, ΠΎΠ½ Π±ΡΠ΄Π΅Ρ Π΄Π΅ΡΠΆΠ°ΡΡ ΠΌΠ΅Π½Ρ ΠΎΡΠΊΡΡΡΡΠΌ Π΄Π°ΠΆΠ΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ°.