ΡΠΊΡΠΈΠΏΡ ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° html
ΠΠΎΠ»ΡΡΠΎΠΉ ΠΎΠ±Π·ΠΎΡ ΠΊΡΠ°ΡΠΈΠ²ΡΡ ΠΌΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΡΡ ΠΌΠ΅Π½Ρ Ρ codepen
ΠΠ° Π‘odepen ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ Ρ ΠΎΡΠΎΡΠΈΡ ΡΠ΅ΡΠ΅Π½ΠΈΠΉ ΠΎΡ ΡΠ°Π·Π½ΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΠΈΡΡΠΎΠ², ΠΈ Ρ ΡΡΠΈΡΠ°Ρ, ΡΡΠΎ Π»ΡΡΡΠΈΠ΅ ΠΈΠ· Π½ΠΈΡ Π½ΡΠΆΠ½ΠΎ ΡΠΎΠ±ΠΈΡΠ°ΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅. ΠΠΎΡΡΠΎΠΌΡ 2 Π³ΠΎΠ΄Π° Π½Π°Π·Π°Π΄ Π½Π°ΡΠ°Π» ΡΠΎΡ ΡΠ°Π½ΡΡΡ Ρ ΡΠ΅Π±Ρ Π½Π° ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠ΅ ΡΠΊΡΠΈΠΏΡΡ ΠΏΠΎ ΡΠ°Π·Π½ΡΠΌ ΡΠ΅ΠΌΠ°ΡΠΈΠΊΠ°ΠΌ.
Π Π°Π½ΡΡΠ΅ Ρ ΠΈΡ Π²ΡΠΊΠ»Π°Π΄ΡΠ²Π°Π» Π² Π³ΡΡΠΏΠΏΠ΅ ΠΏΡΠΎΠ΄ΡΠΊΡΠ° ΠΎΠ±Π»Π°ΡΠ½ΠΎΠΉ IDE mr. Gefest, ΡΡΠΎ Π±ΡΠ»ΠΈ ΡΠ±ΠΎΡΠΊΠΈ ΠΈΠ· 5-8 ΡΠ΅ΡΠ΅Π½ΠΈΠΉ. ΠΠΎ ΡΠ΅ΠΏΠ΅ΡΡ Ρ ΠΌΠ΅Π½Ρ ΡΡΠ°Π»ΠΎ ΡΠΊΠ°ΠΏΠ»ΠΈΠ²Π°ΡΡΡΡ ΠΏΠΎ 15-30 ΡΠΊΡΠΈΠΏΡΠΎΠ² Π² ΡΠ°Π·Π½ΡΡ ΡΠ΅ΠΌΠ°ΡΠΈΠΊΠ°Ρ (ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΠΌΠ΅Π½Ρ, ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅).
Π’Π°ΠΊΠΈΠ΅ Π±ΠΎΠ»ΡΡΠΈΠ΅ Π½Π°Π±ΠΎΡΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ΠΌΡ ΡΠΈΡΠ»Ρ ΡΠΏΠ΅ΡΠΈΠ°Π»ΠΈΡΡΠΎΠ². ΠΠΎΡΡΠΎΠΌΡ Π²ΡΠΊΠ»Π°Π΄ΡΠ²Π°Ρ ΠΈΡ Π½Π° Π₯Π°Π±Ρ. ΠΠ°Π΄Π΅ΡΡΡ ΠΎΠ½ΠΈ Π±ΡΠ΄ΡΡ ΠΠ°ΠΌ ΠΏΠΎΠ»Π΅Π·Π½Ρ.
Π ΡΡΠΎΠΌ ΠΎΠ±Π·ΠΎΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΌΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΡΠ΅ ΠΌΠ΅Π½Ρ.
Flat Horizontal Navigation
ΠΡΠ°ΡΠΈΠ²Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Ρ ΠΏΠ»Π°Π²Π½ΠΎ ΠΏΠΎΡΠ²Π»ΡΡΡΠΈΠΌΡΡ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ. ΠΠΎΠ΄ Ρ
ΠΎΡΠΎΡΠΎ ΡΡΡΡΠΊΡΡΡΠΈΡΠΎΠ²Π°Π½, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ js. Π‘ΡΠ΄Ρ ΠΏΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Π½ΡΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌ, ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² ie8+.
http://codepen.io/andytran/pen/kmAEy
Material Nav Header w/ Aligned Dropdowns
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ ΡΡΡΠ»ΠΎΠΊ Ρ Π΄Π²ΡΡ
ΠΊΠΎΠ»ΠΎΠ½Π½ΡΠΌ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ. ΠΡΠ΅ ΡΠ΄Π΅Π»Π°Π½ΠΎ Π½Π° css ΠΈ html. ΠΡΠΈΠΌΠ΅Π½Π΅Π½Ρ css3 ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π² ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ
Smooth Accordion Dropdown Menu
Π‘ΡΠΈΠ»ΡΠ½ΠΎΠ΅ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ ΠΏΠ»Π°Π²Π½ΠΎ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΌΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ transition, transform js-ΠΊΠΎΠ΄.
http://codepen.io/fainder/pen/AydHJ
Pure CSS Dark Inline Navigation Menu
Π’Π΅ΠΌΠ½Π°Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Ρ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ ΠΈΠ· ionicons. ΠΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ javascript. Π ie8 ΡΠΊΠΎΡΠ΅Π΅ Π²ΡΠ΅Π³ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π±Π΅Π· Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
http://codepen.io/3lv3n_snip3r/pen/XbddOO
Pure CSS3 Mega Dropdown Menu With Animation
Π‘ΡΠΈΠ»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ Π΄Π²ΡΠΌΡ ΡΠΎΡΠΌΠ°ΡΠ°ΠΌΠΈ Π²ΡΠ²ΠΎΠ΄Π°: Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΌ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΌ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈ css3-Π°Π½ΠΈΠΌΠ°ΡΠΈΡ. Π ie8 ΡΠΎΡΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠΆΠ°ΡΠ½ΠΎ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ, Π½ΠΎ Π·Π°ΡΠΎ Π² Π΄ΡΡΠ³ΠΈΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
Π²ΡΠ΅ ΠΊΡΡΡΠΎ.
Π‘ΡΡΠ»ΠΊΠ° Π½Π° Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ: http://codepen.io/rizky_k_r/full/sqcAn/
Π‘ΡΡΠ»ΠΊΠ° Π½Π° Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ: http://codepen.io/rizky_k_r/pen/xFjqs
CSS3 Dropdown Menu
ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ Π±ΠΎΠ»ΡΡΠΈΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΠΈ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠΌ ΡΠΏΠΈΡΠΊΠΎΠΌ ΡΡΡΠ»ΠΎΠΊ. Π§ΠΈΡΡΡΠΉ ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡΠΈΡΠ½ΡΠΉ ΠΊΠΎΠ΄ Π±Π΅Π· js.
http://codepen.io/ojbravo/pen/tIacg
Simple Pure CSS Dropdown Menu
ΠΡΠΎΡΡΠΎΠ΅, Π½ΠΎ ΡΡΠΈΠ»ΡΠ½ΠΎΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ font-awesome. ΠΡΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½Π° css ΠΈ html, Π±Π΅Π· js. Π ie8 Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ.
http://codepen.io/Responsive/pen/raNrEW
Bootstrap 3 mega-dropdown menu
ΠΡΠ»ΠΈΡΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΠΌΠ°Π³Π°Π·ΠΈΠ½ΠΎΠ². ΠΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΠΎΠ²Π½Π΅ΠΉ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΉ ΠΈ Π±ΠΎΠ»ΡΡΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΎΠ²Π°Ρ ΠΏΠΎ Π°ΠΊΡΠΈΠΈ). Π Π΅Π³ΠΎ ΠΎΡΠ½ΠΎΠ²Π΅ Π»Π΅ΠΆΠΈΡ boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/
Flat Navigation
Π‘ΡΠΈΠ»ΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ Ρ ΠΏΠ»Π°Π²Π½ΡΠΌ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ. Π ΡΡΠ°ΡΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡΡ Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°ΠΌΠΈ.
http://codepen.io/andytran/pen/YPvQQN
3D nested navigation
Responsive Mega Menu β Navigation
ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ. ΠΡΠ³Π»ΡΠ΄ΠΈΡ Π½Π΅ΠΏΠ»ΠΎΡ
ΠΎ, Π½ΠΎ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½Π°Ρ Π²Π΅ΡΡΠΈΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ «Ρ
ΡΠΎΠΌΠ°Π΅Ρ». ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ css, html ΠΈ js.
http://codepen.io/samiralley/pen/xvFdc
Pure Css3 Menu
ΠΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ. Π‘ ΠΏΡΠΎΡΡΡΠΌ ΠΈ ΡΠΈΡΡΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ Π±Π΅Π· js. ΠΡΠΈΠΌΠ΅Π½ΡΠΉΡΠ΅ Π΄Π»Ρ «Π²Π°Ρ» ΡΡΡΠ΅ΠΊΡΠΎΠ².
http://codepen.io/Sonick/pen/xJagi
Full CSS3 Dropdown Menu
ΠΡΠ°ΡΠΎΡΠ½ΠΎΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Ρ ΠΎΠ΄Π½ΠΈΠΌ ΡΡΠΎΠ²Π½Π΅ΠΌ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΡΡΠΈ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈΠ· font-awesome, html ΠΈ css.
http://codepen.io/daniesy/pen/pfxFi
Css3 only dropdown menu
ΠΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π½Π΅ΠΏΠ»ΠΎΡ
ΠΎΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ ΡΡΠ΅ΠΌΡ ΡΡΠΎΠ²Π½ΡΠΌΠΈ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΡΡΠΈ. Π Π°Π±ΠΎΡΠ°Π΅Ρ Π±Π΅Π· js.
http://codepen.io/riogrande/pen/ahBrb
Dropdown Menus
ΠΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡΠΈΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΡΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΡ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΠΏΠΈΡΠΊΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². Π Π°Π΄ΡΠ΅Ρ, ΡΡΠΎ ΡΡΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠΆΠ΅ Π±Π΅Π· javascript.
http://codepen.io/kkrueger/pen/qfoLa
Pure CSS DropDown Menu
ΠΡΠΈΠΌΠΈΡΠΈΠ²Π½ΠΎΠ΅, Π½ΠΎ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅. Π’ΠΎΠ»ΡΠΊΠΎ css ΠΈ html.
http://codepen.io/andornagy/pen/xhiJH
Pull Menu β Menu Interaction Concept
ΠΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΏΡ ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΡΠ΅Π»Π΅ΡΠΎΠ½Π°. Π― ΡΠ°ΠΊΠΎΠ³ΠΎ Π΅ΡΡ Π½Π΅ Π²ΠΈΠ΄Π΅Π». ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ html, css ΠΈ javascript.
http://codepen.io/fbrz/pen/bNdMwZ
Make Simple Dropdown Menu
Π§ΠΈΡΡΡΠΉ ΠΈ ΠΏΡΠΎΡΡΠΎΠΉ ΠΊΠΎΠ΄, Π±Π΅Π· js. Π ie8 ΡΠΎΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π±ΡΠ΄Π΅Ρ.
http://codepen.io/nyekrip/pen/pJoYgb
Pure CSS dropdown [work for mobile touch screen]
Π Π΅ΡΠ΅Π½ΠΈΠ΅ Π½Π΅ΠΏΠ»ΠΎΡ
ΠΎΠ΅, Π½ΠΎ ΡΠ»ΠΈΡΠΊΠΎΠΌ ΡΠΆ ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΊΠ»Π°ΡΡΠΎΠ². Π Π°Π΄ΡΠ΅Ρ, ΡΡΠΎ Π½Π΅Ρ js.
http://codepen.io/jonathlee/pen/mJMzgR
Dropdown Menu
Π‘ΠΈΠΌΠΏΠ°ΡΠΈΡΠ½ΠΎΠ΅ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΌ javascript-ΠΊΠΎΠ΄ΠΎΠΌ. JQuery Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ!
http://codepen.io/MeredithU/pen/GAinq
CSS 3 Dropdown Menu
ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΌΠΈ ΠΏΠΎΠ΄ΠΏΠΈΡΡΠΌΠΈ ΠΌΠΎΠΆΠ΅Ρ Ρ
ΠΎΡΠΎΡΠΎ ΡΠΊΡΠ°ΡΠΈΡΡ ΠΠ°Ρ ΡΠ°ΠΉΡ. ΠΠΎΠ΄ ΠΏΡΠΎΡΡΠΎΠΉ ΠΈ ΠΏΠΎΠ½ΡΡΠ½ΡΠΉ. Javascript Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ.
http://codepen.io/ibeeback/pen/qdEZjR
KVdKQJ (Π°Π²ΡΠΎΡ ΠΎΡΠ΅Π½Ρ Π΄ΠΎΠ»Π³ΠΎ Π΄ΡΠΌΠ°Π» Π½Π°Π΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ)
ΠΡΠ°ΡΠΈΠ²ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Ρ Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ ΠΊΠΎΠ΄Π° (html, css ΠΈ js). ΠΡΠΈΠ΄ΡΠΌΠ°Π½ΠΎ 3 ΡΠΎΡΠΌΠ°ΡΠ° ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ. ΠΠ»Ρ ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΠΌΠ°Π³Π°Π·ΠΈΠ½ΠΎΠ² ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Ρ
ΠΎΡΠΎΡΠΎ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΈΡ.
http://codepen.io/martinridgway/pen/KVdKQJ
CSS3 Menu Dropdowns (ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅)!
Π’Π΅ΠΌΠ½ΠΎΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ ΡΡΠΈΠ½Π°Π΄ΡΠ°ΡΡΡ (13) Π²Π°ΡΠΈΠ°Π½ΡΠ°ΠΌΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ! ΠΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΡΠΎΠ²Π΅ΡΡΡ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ, ΠΏΡΠΈΠ³ΠΎΠ΄ΠΈΡΡΡ Π² Π±ΡΡΡ.
http://codepen.io/cmcg/pen/ofFiz
Π.Π‘.
ΠΠ°Π΄Π΅ΡΡΡ, ΠΠ°ΠΌ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ»Π°ΡΡ ΡΠ±ΠΎΡΠΊΠ° ΠΈΠ· 23 ΡΠ΅ΡΠ΅Π½ΠΈΠΉ. ΠΡΠ»ΠΈ Ρ
ΠΎΡΠΈΡΠ΅ ΠΈ Π΄Π°Π»ΡΡΠ΅ ΠΈΡ
ΡΠΈΡΠ°ΡΡ, ΡΠΎ ΠΏΡΠΎΠΉΠ΄ΠΈΡΠ΅ ΡΠ½ΠΈΠ·Ρ ΠΎΠΏΡΠΎΡ.
ΠΡΠ΅ΠΌ ΠΏΡΠΈΡΡΠ½ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ.
Π‘ΠΊΡΠΈΠΏΡ ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° html
ΠΡΡΠ΅ΠΊΡ Π·Π°ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΏΡΠ½ΠΊΡ Π² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΌ ΠΌΠ΅Π½Ρ. ΠΠ°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΡΡΠ΅ΠΊΡΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠΌΠΎΡΡΠ΅ΡΡΡΡ Π½Π° Π»Π΅Π½Π΄ΠΈΠ½Π³Π°Ρ , Π³Π΄Π΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΎ ΠΏΠΎΠ²Π΅ΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΠΈΠ±ΠΊΠΎΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΠΈΠ°Π³ΠΎΠ½Π°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π½Π° CSS
ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ CSS3 Π² ΡΡΠΎΠΌ ΡΡΠΎΠΊΠ΅ ΡΠ΄Π΅Π»Π°Π΅ΠΌ Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ, ΠΈ Π½Π°ΠΏΠΈΡΠ΅ΠΌ media queries, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠ΄Π°ΡΡ Π΅ΠΌΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΡΡΠΈ.
ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π½Π° CSS3
Π‘ΠΈΠΌΠΏΠ°ΡΠΈΡΠ½ΠΎΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ CSS3 ΠΌΠ΅Π½Ρ Ρ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠΌΠΈ ΠΏΡΠ½ΠΊΡΠ°ΠΌΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.
ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Π½Π° CSS3
ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ Π²ΡΠΏΠ°Π΄ΡΡΠΈΠΌΠΈ ΠΏΠΎΠ΄ΠΏΡΠ½ΠΊΡΠ°ΠΌΠΈ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ css3.
Π Π°Π·ΠΌΡΡΠΎΠ΅ ΠΌΠ΅Π½Ρ Π½Π° CSS3
ΠΡΠΎΡΡΠΎΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΡΠ°Π·ΠΌΡΡΠΈΡ ΠΈ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΡΡΠΈ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ CSS3 ΠΈ HTML5.
JQuery ΠΏΠ»Π°Π³ΠΈΠ½, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΠΉ ΡΠ΄Π΅Π»Π°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ΄Π΅Ρ Π·Π°Π½ΠΈΠΌΠ°ΡΡ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ. ΠΠΎΠ±Π°Π²Π»Π΅Π½Π° ΡΠ°ΠΊΠΆΠ΅ ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° IE7.
ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠΌΠΈ ΠΏΠΎΠ΄ΠΏΡΠ½ΠΊΡΠ°ΠΌΠΈ
ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠΌΠΈ ΠΏΠΎΠ΄ΠΏΡΠ½ΠΊΡΠ°ΠΌΠΈ. ΠΡΠΏΠ°Π΄Π°ΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ jQuery, Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΎ Π½Π° CSS. Π Π΄Π΅ΠΌΠΎ Π²ΠΊΠ»ΡΡΠ΅Π½ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΌΠ°ΠΊΠ΅Ρ ΡΠ°ΠΉΡΠ°, ΠΎΡΡΠ°Π»ΠΎΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½ΡΡ ΡΠ°ΡΡΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ ΠΈ Π½Π°ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΡ ΡΠ°ΠΏΠΊΡ. ΠΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΌΡ ΠΈΠ΄Π΅Ρ ΠΌΠ΅Π½Ρ.
ΠΠ΅Π½Ρ Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΠΏΠΎΠ΄ΠΏΡΡΠ³ΠΈΠ²Π°Π½ΠΈΡ
ΠΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ΄ΠΏΡΡΠ³ΠΈΠ²Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ (bounce), ΡΠ΄Π΅Π»Π°Π½Π½ΠΎΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠ΅Π²Π΄ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠ² Π½Π° CSS3. Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ Ρ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠΌΠΈ ΠΏΠΎΠ΄ ΠΏΡΠ½ΠΊΡΠ°ΠΌΠΈ ΠΌΠ΅Π½Ρ.
ΠΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΠΎΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ
ΠΠ½ΠΎΠ³ΠΎΡΡΠΎΠ²Π½Π΅Π²ΠΎΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Π½Π° CSS2. ΠΡΠΈ ΡΡΠΎΠΌ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΎΠ½ΠΎ Π² IE5.5, IE6, IE7, IE8, Firefox, Opera, Safari(PC) ΠΈ Google Chrome.
ΠΠ½ΠΎΠ³ΠΎΡΠ²Π΅ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π½Π° CSS3
ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ, ΡΠΈΡΠΊΠ° ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ ΠΌΠΎΠ³ΡΡ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ²Π΅Ρ Π½Π° ΡΠΎΡ, ΠΏΠΎ ΠΊΠ°ΠΊΠΎΠΌΡ ΠΈΠ· ΡΠ²Π΅ΡΠ½ΡΡ ΠΊΠ²Π°Π΄ΡΠ°ΡΠΈΠΊΠΎΠ² Π²Ρ ΡΠ΅Π»ΠΊΠ½ΠΈΡΠ΅ ΠΌΡΡΠΊΠΎΠΉ. ΠΡΠΈ ΡΡΠΎΠΌ ΡΠΌΠ΅Π½Π° ΡΠ²Π΅ΡΠ° ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π° Π½Π° CSS, Π° Π½Π΅ Π½Π° jΠ°vascript.
ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ CSS3 ΠΌΠ΅Π½Ρ
ΠΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Π½Π° CSS3 ΡΠ΄Π΅Π»Π°Π½Π½ΠΎΠ΅ Π½Π° Π±Π°Π·Π΅ UI ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΠ»Π°Π΄ΠΈΠΌΠΈΡΠΎΠΌ ΠΡΠ΄ΠΈΠ½ΠΎΠ²ΡΠΌ.
ΠΠ΅Π½Ρ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°
ΠΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ°ΠΉΡ Π±Π΅Π· Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΉ Π² ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΉ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ ΡΠΊΡΠΈΠΏΡΡ ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° Π² ΡΠ°Π·Π½ΠΎΠΎΠ±ΡΠ°Π·Π½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΈ ΠΎΡΡΠ΅Π½ΠΊΠ΅ ΡΠ²Π΅ΡΠ°. ΠΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ± ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΈΠ»ΠΈ ΠΊΡΠΎ Π²ΠΎΡΠ΅Π» Π½Π° ΡΠ°ΠΉΡ, ΠΌΠΎΠ³ Π±ΡΡΡΡΠΎ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Π³Π΄Π΅ ΠΊΠ°ΠΊΠΎΠΉ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π» Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΡ. Π Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ Π΄Π»Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΠΎΡΡΠ°Π»Π° ΠΊΠ°ΠΊ ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ ΡΠ°ΠΊ ΠΈ ΠΏΠΎ Π΅Π³ΠΎ ΡΡΠ½ΠΊΡΠΈΡΠΌ, ΡΠΎΡ ΠΊΠΎΠ΄ ΠΊΠΎΡΠΎΡΡΠΉ Π²Π°ΠΌ Π½ΡΠΆΠ΅Π½.
ΠΡΠΎ Π½Π΅ΠΎΡΡΠ΅ΠΌΠ»Π΅ΠΌΠ°Ρ ΡΠ°ΡΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ Π±Π΅Π·ΡΡΠ»ΠΎΠ²Π½ΠΎ ΠΎΡΠ΅Π½Ρ Π±ΠΎΠ»ΡΡΡΡ ΡΠΎΠ»Ρ ΠΈΠ³ΡΠ°Π΅Ρ Π² ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΡΡΠΈ Π΅Π³ΠΎ. Π Π·Π΄Π΅ΡΡ ΠΌΠ΅Π½Ρ Π±Π΅ΡΠ΅Ρ Π²ΡΠ΅ Π½Π° ΡΠ΅Π±Ρ, ΠΎΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΈΡΠ°Π½ΠΎ ΠΏΠΎ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΡΠΌ ΠΈΠ»ΠΈ ΠΊΠ°ΠΊ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΈ Ρ Π½ΠΈΠΌ Π±ΡΠ΄Π΅Ρ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π»Π΅Π³ΡΠ΅ Π½Π°ΠΉΡΠΈ ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ, ΠΊΠΎΡΠΎΡΡΡ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ. ΠΠ½ΠΎ Π±ΡΠ²Π°Π΅Ρ ΠΊΠ°ΠΊ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠΌ ΡΠ°ΠΊ ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΌ, Π½ΠΎ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ ΠΎΠ΄Π½Ρ ΡΡΠ½ΠΊΡΠΈΡ ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ.
Π ΡΡΠ°ΡΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π° Π½Π°Π΄Π΅ΠΆΠ½Π°Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ ΡΠΈΡΡΠ΅ΠΌΠ° Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π³Π΄Π΅ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ Π²ΡΠ²ΠΎΠ΄ΠΈΡ Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ ΡΠ°Π·Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°.
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΠΉ ΠΈ ΡΠ΅Π°Π»ΠΈΡΡΠΈΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ Π΄Π»Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠΈΡΡΠΎΠ³ΠΎ CSS ΠΈ ΡΡΠΈΡΡΠΎΠ²ΡΡ Π·Π½Π°ΠΊΠΎΠ².
Π ΡΡΠ°ΡΡΠ΅ ΡΠ·Π½Π°Π΅ΡΠ΅, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΏΡΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π³Π΄Π΅ Π²ΡΠ΅ Π²ΡΡΡΡΠΎΠ΅Π½ΠΎ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS.
ΠΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎ ΡΡΠ½ΠΊΡΠΈΡΠΌ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΊΡΡΠ²Π°Π΅ΡΡΡ Ρ Π»Π΅Π²ΠΎΠ³ΠΎ ΡΡΠΎΡΠΎΠ½Ρ ΡΠ°ΠΉΡΠ°, Π³Π΄Π΅ ΠΈΠΌΠ΅Π΅Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΉ ΡΡΡΠ΅ΠΊΡ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
Π ΡΡΠ°ΡΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΎ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Ρ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΡΠΌΠΈ Π² Π±Π΅Π»ΠΎΠΉ ΠΏΠ°Π»ΠΈΡΡΠ΅ ΡΠ²Π΅ΡΠ°, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΎ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS, Π±Π΅Π· ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ JavaScript.
Π ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΎ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ ΠΌΠ΅Π³Π°-ΠΌΠ΅Π½Ρ Ρ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΠΌΠΈΡΡ ΠΏΠΎΠ΄ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΡΠΌΠΈ, Π³Π΄Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π·Π°Π΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°Π½ΠΎ HTML ΠΈ CSS, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΡΠΈΡΡΠΎΠ²ΡΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
Π ΡΠ΅ΠΌΠ½ΠΎΠΌ ΠΏΠ°Π»ΠΈΡΡΠ΅ ΡΠ²Π΅ΡΠ° ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΎ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΎΠ·Π΄Π°Π½ΠΎ Π±Π΅Π· JS Π½Π° ΡΠΈΡΡΠΎΠΌ CSS3, Π½ΠΎ Ρ ΠΏΡΠΈΡΡΡΡΡΠ²ΠΈΠ΅ΠΌ ΡΡΠΈΡΡΠΎΠ²ΡΡ Π·Π½Π°ΡΠΊΠΎΠ².
ΠΡΠΎΡΡΠΎΠ΅ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ, Π³Π΄Π΅ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΡΡ ΠΏΠΎΠ΄ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΠΏΠΎΠ»Π½Π΅Π½Ρ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS, Π³Π΄Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π΅Π³ΠΎ ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ Π½Π° ΡΠ°Π·Π½ΡΠ΅ ΡΠ΅ΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ°ΠΉΡΡ.
ΠΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ, ΠΊΠ°ΠΊ Π°Π΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ, Π³Π΄Π΅ ΠΏΡΠ΅Π΄ΡΡΠΌΠΎΡΡΠ΅Π½Π° ΡΡΠ½ΠΊΡΠΈΡ ΠΏΠΎΠΈΡΠΊΠ° ΠΏΠΎ ΡΠ°ΠΉΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ HTML, CSS ΠΈ JavaScript.
ΠΠ΄Π΅ΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π° Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ, Π²ΠΈΠ΄Π΅ Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ, Π³Π΄Π΅ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡΡΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ Ρ Π΄Π°Π½Π½ΡΠΌ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ ΡΠ°Π·Π΄Π΅Π»Π° Π½Π° CSS.
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ 2 Π²Π°ΡΠΈΠ°Π½ΡΠ° Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΡΡΠΎ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΉ ΡΡΡΡΠΊΡΡΡΠ΅ ΠΎΠ½ΠΈ Π½Π΅ ΠΏΠΎΡ ΠΎΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½, Π½ΠΎ Π²ΡΠ΅ ΠΎΠ½ΠΈ Π²ΡΠΏΠΎΠ»Π½Π΅Π½Ρ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS.
Π ΡΡΠ°ΡΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π° Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠΈΠ΅ ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS, Π³Π΄Π΅ ΠΈΠΌΠ΅Π΅ΡΡΡ ΠΏΠΎΠΈΡΠΊ ΠΏΠΎ ΡΠ°ΠΉΡΡ, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠ°Π·Π΄Π΅Π»Ρ Π΄Π»Ρ Π·Π°Π΄Π°Π½Π½ΡΡ ΠΏΠΎΠ΄ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΉ.
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π° Π°Π΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ Π»ΠΈΠΏΠΊΠ°Ρ ΠΏΠ°Π½Π΅Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅, Π³Π΄Π΅ Π·Π°Π΄Π΅ΠΉΡΡΠ²ΡΠ΅ΠΌ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ JavaScript ΠΈ CSS.
Π ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΠΎΠΏΠΈΡΠ°Π½ΠΎ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ Π² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π³Π΄Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π·Π°Π΄Π΅ΠΉΡΡΠ²ΡΠ΅ΠΌ ΡΡΠΈΡΡΡ ΠΈ CSS.
jQuery Π΄Π»Ρ Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ . Π§Π°ΡΡΡ 2. JavaScript ΠΠ΅Π½Ρ.
Π ΠΏΠ΅ΡΠ²ΠΎΠΉ ΡΠ°ΡΡΠΈ Π±ΡΠ»ΠΈ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½Ρ Π±Π°Π·ΠΎΠ²ΡΠ΅ ΠΏΡΠΈΠ½ΡΠΈΠΏΡ ΡΠ°Π±ΠΎΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ² ΠΈ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ², Π² Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Ρ ΠΏΠΎΡΡΠ°ΡΠ°ΡΡΡ Π°ΠΊΡΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ JavaScript ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΠΠ°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°.
ΠΡΠ»ΠΈ ΠΠ°ΠΌ Π³ΠΎΡΠΎΠ²ΡΠΉ ΠΊΠΎΠ΄ Π½Π°Π³Π»ΡΠ΄Π½Π΅ΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ, ΡΠΎ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΠΌ ΠΎΡ ΡΠ»ΠΎΠ² ΠΊ Π΄Π΅Π»Ρ, Ρ.Π΅. Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ°ΠΌΠΈ.
Slide ΠΌΠ΅Π½Ρ
ΠΠ²Π° slide-ΠΌΠ΅Π½Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅: Π²Π²Π΅ΡΡ Ρ ΠΈ Π²Π½ΠΈΠ·Ρ.
ΠΠ»ΠΈΠΊΠ°Π΅ΠΌ ΠΏΠΎ ΡΡΡΠ»ΠΊΠ΅ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ Β«btn-slideΒ», Π²ΡΠ΅Π·ΠΆΠ°Π΅Ρ ΠΏΠ°Π½Π΅Π»Ρ Ρ ΠΌΠ΅Π½Ρ.
Π§Π°ΡΡΠΈΡΠ½ΠΎ Π΄Π°Π½Π½ΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΠ΅Ρ Π² ΠΏΠ΅ΡΠ²ΠΎΠΉ ΡΠ°ΡΡΠΈ, ΡΠ°ΠΊ ΡΡΠΎ ΠΎΡΠΎΠ±ΠΎ ΡΠ³Π»ΡΠ±Π»ΡΡΡΡΡ Π² ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ Π½Π΅ Π±ΡΠ΄Ρ, ΠΏΡΠΈΠ²Π΅Π΄Ρ Π»ΠΈΡΡ JavaScript ΠΊΠΎΠ΄ Ρ ΠΏΠΎΡΡΠ½Π΅Π½ΠΈΡΠΌΠΈ:
Slide ΠΌΠ΅Π½Ρ 2
Slide-ΠΌΠ΅Π½Ρ ΡΠ»Π΅Π²Π° ΠΈ ΡΠΏΡΠ°Π²Π° ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° ΠΏΡΠΈΠ³ΠΎΡΠΎΠ²ΠΈΠΌ HTML:
Π£ Π½Π°Ρ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡΡΡ ΡΡΠΎ-ΡΠΎ Π½Π°ΠΏΠΎΠ΄ΠΎΠ±ΠΈΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ:
Π’Π΅ΠΏΠ΅ΡΡ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΎΠ±ΡΡΠΈΠΉ Π΄Π»Ρ ΡΡΡΠ»ΠΎΠΊ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ Β«btn-slideΒ»:
ΠΠ°ΡΠ΅ΠΌ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π½Π°ΠΉΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ Β«panelΒ» ΠΈ Π²ΡΠ΄Π²ΠΈΠ½ΡΡΡ Π΅Π³ΠΎ Π½Π° 120 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ:
Π‘ΠΎΠ΅Π΄ΠΈΠ½ΡΠ΅ΠΌ ΡΡΠΎ Π²ΠΌΠ΅ΡΡΠ΅:
Drop-down ΠΌΠ΅Π½Ρ
ΠΠ΄Π½Π° ΠΈΠ· ΡΠ°ΠΌΡΡ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΉ ΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° ΡΡΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ, Π΅Π³ΠΎ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ CSS, Π½ΠΎ ΡΡΠ°ΡΡΡ Ρ Π½Π°Ρ ΠΎ jQuery, ΡΠ°ΠΊ ΡΡΠΎ Π±ΡΠ΄Π΅ΠΌ ΠΎΡΡΠ΄ΠΎΠ²Π°ΡΡ ΠΎΠ½ΡΠΌ. ΠΠ°ΡΠ½Π΅ΠΌ Ρ HTML’a (Π·Π°ΠΌΠ΅ΡΡ, ΡΡΠΎ Π΄Π»Ρ Π²ΡΠ΅Ρ ΠΎΡΡΠ°Π»ΡΠ½ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΊΠΎΠ΄ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π΅ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ):
ΠΡ ΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎ ΡΠ°ΠΌ HTML:
ΠΠ°Π»Π΅Π΅ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ Π΄Π»Ρ ΡΠΎΠ±ΡΡΠΈΡ hover Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² li:
Π ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌ ΠΏΠΎΠ΄-ΠΌΠ΅Π½Ρ:
Π ΡΠ΅ΠΏΠ΅ΡΡ Π²ΡΡ Π²ΠΌΠ΅ΡΡΠ΅:
Drop-down AJAX ΠΌΠ΅Π½Ρ
ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠ΄Π³ΡΡΠ·ΠΊΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² AJAX’ΠΎΠΌ.
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° Π½Π°ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ ΡΠ°ΠΌΠΎ ΠΌΠ΅Π½Ρ:
Π Π·Π°Π³ΠΎΡΠΎΠ²ΠΊΠΈ Π΄Π»Ρ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ, Π½Π°Π·ΠΎΠ²Π΅ΠΌ ΠΈΡ menu1.html, menu2.html ΠΈ menu3.html β ΠΏΠΎ id ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΌΠ΅Π½Ρ (ΡΠΊΠΎΡΠ΅ΠΉ Π²ΡΠ΅Π³ΠΎ Π΄Π°Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π±ΡΠ΄ΡΡ Π³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ, Π½ΠΎ Π΄Π»Ρ ΡΠΏΡΠΎΡΠ΅Π½ΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΡΡΠ°Π½ΠΈΡΠΊΠΈ):
Π’Π΅ΠΏΠ΅ΡΡ, ΠΊΠ°ΠΊ ΠΈ Π² ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅, Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΡΠΎΠ±ΡΡΠΈΡ hover:
Π’Π΅ΠΏΠ΅ΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°Π³ΡΡΠ·ΠΈΡΡ Π½Π΅Π΄ΠΎΡΡΠ°ΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠ΅Π½Ρ ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²ΠΎΠΌ AJAX’a:
Drop-down ΠΌΠ΅Π½Ρ
ΠΠ΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ Π²ΡΠΏΠ°Π΄Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ. ΠΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΏΡΠΎΡΡΠ΅Π½ΡΠΊΠΈΠΉ ΠΏΡΠΈΠΌΠ΅ΡΡΠΈΠΊ:
Float ΠΌΠ΅Π½Ρ
ΠΠ»Π°Π²Π°ΡΡΠ΅Π΅ ΠΌΠ΅Π½Ρ. ΠΠ°ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ Dimensions (Π΄Π°Π±Ρ ΡΠ°Π±ΠΎΡΠ°Π»ΠΈ ΠΌΠ΅ΡΠΎΠ΄Ρ height() ΠΈ width()). ΠΡ Ρ HTML Ρ Π΄ΡΠΌΠ°Ρ, ΠΡ ΡΠ°Π·Π±Π΅ΡΠ΅ΡΠ΅ΡΡ:
Π’Π΅ΠΏΠ΅ΡΡ ΠΏΠΎ ΠΏΠΎΡΡΠ΄ΠΊΡ β Π½Π°ΡΠ½Π΅ΠΌ Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΎ ΡΠ΅ΠΊΡΡΠ΅ΠΌ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Β«ΠΏΠ»Π°Π²Π°ΡΡΠΈΡ Β» ΠΌΠ΅Π½Ρ:
ΠΠ°Π»Π΅Π΅, Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Β«ΠΏΠΎΠ²Π΅ΡΠΈΡΡΒ» ΡΠ²ΠΎΡ ΡΡΠ½ΠΊΡΠΈΡ Π΄Π»Ρ ΡΠΎΠ±ΡΡΠΈΡ scroll:
ΠΡ ΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎ Π½Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅:
Π’Π°ΠΊ ΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅/ΡΠΊΡΡΡΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ:
Π‘ΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ JavaScript
Π§ΡΠΎ Π΅ΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ?
ΠΡΠ»ΠΈ Π²Π΅ΡΠΈΡΡ ΠΠΈΠΊΠΈΠΏΠ΅Π΄ΠΈΠΈ, ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ β ΠΌΠ΅Π½Ρ, ΠΏΠΎΡΠ²Π»ΡΡΡΠ΅Π΅ΡΡ ΠΏΡΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Ρ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠΎΠΌ (ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΡΡΠΈ). ΠΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΡΠΉ Π½Π°Π±ΠΎΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ±ΡΡΠ½ΠΎ ΡΠ²ΡΠ·Π°Π½Ρ Ρ Π²ΡΠ±ΡΠ°Π½Π½ΡΠΌ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠΌ.
ΠΠ° Π²Π°ΡΠ΅ΠΌ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠ΅ ΠΊΠ»ΠΈΠΊ ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡΡΠΈ Π½Π° ΡΠ°Π±ΠΎΡΠ΅ΠΌ ΡΡΠΎΠ»Π΅ Π²ΡΠ·ΠΎΠ²Π΅Ρ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ. ΠΡΡΡΠ΄Π° Π²Ρ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ Π½ΠΎΠ²ΡΡ ΠΏΠ°ΠΏΠΊΡ, ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΊΠ°ΠΊΡΡ-ΡΠΎ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΈ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ Π΅ΡΠ΅. ΠΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΅Π΅ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠΈ, ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΎΡΠΊΡΡΡΡ ΡΡΡΠ»ΠΊΡ Π² Π½ΠΎΠ²ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅, ΠΏΠΎΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ Π±ΡΡΠ΅ΡΠΎΠΌ ΠΎΠ±ΠΌΠ΅Π½Π° ΠΈ Π²ΡΡΠΊΠΎΠ΅ ΡΠ°ΠΊΠΎΠ΅. ΠΡΠΈΡΠ΅ΠΌ Π½Π°Π±ΠΎΡ Π΄ΠΎΡΡΡΠΏΠ½ΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΡΠΎΠ³ΠΎ, ΠΊΡΠ΄Π° ΠΈΠΌΠ΅Π½Π½ΠΎ Π²Ρ ΠΊΠ»ΠΈΠΊΠ½ΡΠ»ΠΈ, ΡΠΎ Π΅ΡΡΡ ΠΎΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ°. ΠΡΠΎ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅, Π·Π°ΠΊΠ»Π°Π΄ΡΠ²Π°Π΅ΠΌΠΎΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ° [Π ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠΉ ΠΊ Π½Π΅ΠΌΡ].
ΠΠ΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎ Π½Π°ΡΠΈΠ½Π°ΡΡ Π·Π°ΠΌΠ΅Π½ΡΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΡΠ΅ ΠΌΠ΅Π½Ρ ΡΠ²ΠΎΠΈΠΌΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΌΠΈ. ΠΡΠ»ΠΈΡΠ½ΡΠΌΠΈ ΠΏΡΠΈΠΌΠ΅ΡΠ°ΠΌΠΈ ΡΠ²Π»ΡΡΡΡΡ Π²ΡΠ΅ ΡΠ΅ ΠΆΠ΅ Gmail ΠΈ Dropbox. ΠΠΎΠΏΡΠΎΡ Π»ΠΈΡΡ Π² ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ²ΠΎΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ? Π Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΠΏΡΠΈ ΠΊΠ»ΠΈΠΊΠ΅ ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡΡΠΈ ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ ΡΠΎΠ±ΡΡΠΈΠ΅ contextmenu. ΠΠ°ΠΌ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΠΎΡΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ Π²ΡΠ²ΠΎΠ΄ΠΈΠ»ΠΎΡΡ Π½Π°ΡΠ΅ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ΅. ΠΡΠΎ Π½Π΅ ΡΠ°ΠΊ ΡΠΆ ΡΠ»ΠΎΠΆΠ½ΠΎ, Π½ΠΎ ΡΠ°Π·Π±ΠΈΡΠ°ΡΡΡΡ Π±ΡΠ΄Π΅ΠΌ ΠΏΠΎΡΠ°Π³ΠΎΠ²ΠΎ, ΡΠ°ΠΊ ΡΡΠΎ Π²ΡΠΉΠ΄Π΅Ρ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΎΠ±ΡΠ΅ΠΌΠ½ΠΎ. ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π±Π°Π·ΠΎΠ²ΡΡ ΡΡΡΡΠΊΡΡΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΡΡΠΎΠ± ΡΠ°Π·ΡΠ°Π±Π°ΡΡΠ²Π°Π΅ΠΌΡΠΉ ΠΏΡΠΈΠΌΠ΅Ρ Π½Π΅ Π±ΡΠ» ΡΠΎΠ²ΡΠ΅ΠΌ ΡΠΆ ΠΎΡΠΎΡΠ²Π°Π½ ΠΎΡ ΡΠ΅Π°Π»ΡΠ½ΠΎΡΡΠΈ.
Π‘ΠΏΠΈΡΠΎΠΊ Π·Π°Π΄Π°Ρ
ΠΡΠ΅Π΄ΡΡΠ°Π²ΠΈΠΌ, ΡΡΠΎ ΠΌΡ ΡΠΎΠ·Π΄Π°Π΅ΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠ΅Π΅ Π²Π΅ΡΡΠΈ ΡΠΏΠΈΡΠΎΠΊ Π·Π°Π΄Π°Ρ. Π― ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ, Π²Ρ ΡΠΆΠ΅ Π½Π°Π²Π΅ΡΠ½ΡΠΊΠ° Π½Π΅ΠΈΠΌΠΎΠ²Π΅ΡΠ½ΠΎ ΡΡΡΠ°Π»ΠΈ ΠΎΡ Π²ΡΠ΅Ρ ΡΡΠΈΡ ΡΠΏΠΈΡΠΊΠΎΠ² Π·Π°Π΄Π°Ρ, Π½ΠΎ ΠΏΡΡΡΡ Π±ΡΠ΄Π΅Ρ. Π‘ΡΡΠ°Π½ΠΈΡΠ° ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΠΏΠΈΡΠΎΠΊ Π½Π΅Π·Π°Π²Π΅ΡΡΠ΅Π½Π½ΡΡ Π·Π°Π΄Π°Ρ. ΠΠ»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π·Π°Π΄Π°ΡΠΈ Π΄ΠΎΡΡΡΠΏΠ΅Π½ ΡΠΈΠΏΠΈΡΠ½ΡΠΉ Π½Π°Π±ΠΎΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ CRUD: ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ Π·Π°Π΄Π°ΡΠ΅, Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½ΠΎΠ²ΡΡ, ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ, ΡΠ΄Π°Π»ΠΈΡΡ.
ΠΡΠΈΠΌΠ΅Ρ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ° Π΅ΡΡΡ Π½Π° CodePen. ΠΠΎΠΆΠ΅ΡΠ΅ Π·Π°Π³Π»ΡΠ½ΡΡΡ ΡΡΠ΄Π° ΡΡΠ°Π·Ρ, Π΅ΡΠ»ΠΈ Π»Π΅Π½Ρ ΡΠΈΡΠ°ΡΡ ΠΈΠ»ΠΈ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π·Π°ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠΎΠ²Π°Π½Ρ Π² Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅ΠΌ ΡΡΠ΅Π½ΠΈΠΈ. ΠΡ Π° ΠΏΠΎΠΊΠ° ΠΏΡΠΈΡΡΡΠΏΠΈΠΌ ΠΊ ΠΏΠΎΡΠ°Π³ΠΎΠ²ΠΎΠΉ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ Π·Π°Π΄ΡΠΌΠ°Π½Π½ΠΎΠ³ΠΎ. Π― Π±ΡΠ΄Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠΈΡΠΊΠΈ CSS ΠΈ ΡΠΎΠ·Π΄Π°ΠΌ ΠΏΡΠΎΡΡΠ΅ΠΉΡΠΈΠΉ ΡΠΏΠΈΡΠΎΠΊ Π·Π°Π΄Π°Ρ Π½Π° data-Π°ΡΡΠΈΠ±ΡΡΠ°Ρ . Π’Π°ΠΊΠΆΠ΅ Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡ ΡΠ±ΡΠΎΡΠΎΠΌ ΡΡΠΈΠ»Π΅ΠΉ ΠΎΡ ΠΡΠΈΠΊΠ° ΠΠ΅ΠΉΠ΅ΡΠ° ΠΈ ΡΠ±ΡΠΎΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ box-sizing Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π² border-box:
Π― Π½Π΅ Π±ΡΠ΄Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠ΅ΡΠΈΠΊΡΡ Π² CSS, Π½ΠΎ Π² Π΄Π΅ΠΌΠΎ Π½Π° CodePen Π²ΠΊΠ»ΡΡΠ΅Π½ Π°Π²ΡΠΎΠΏΡΠ΅ΡΠΈΠΊΡΠ΅Ρ.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π±Π°Π·ΠΎΠ²ΠΎΠΉ ΡΡΡΡΠΊΡΡΡΡ
ΠΡΠΊΡΠΎΠ΅ΠΌ Π½Π°Ρ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ, Π½Π°ΠΊΠΈΠ΄Π°Π΅ΠΌ ΡΠ°ΠΏΠΊΡ, ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ½ΡΡ ΡΠ°ΡΡΡ Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌ ΡΠΏΠΈΡΠΊΠΎΠΌ Π·Π°Π΄Π°Ρ ΠΈ ΠΏΠΎΠ΄Π²Π°Π». Π― ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄ΡΡΠ½Ρ Font Awesome ΠΈ ΡΡΠΈΡΡ Roboto, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π»ΡΡΡΠ΅. ΠΠ°ΠΆΠ΄Π°Ρ Π·Π°Π΄Π°ΡΠ° Π΄ΠΎΠ»ΠΆΠ½Π° ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ Π°ΡΡΠΈΠ±ΡΡ data-id, ΠΊΠΎΡΠΎΡΡΠΉ Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΡΡΠΈ Π±ΡΠ°Π»ΡΡ Π±Ρ ΠΈΠ· ΠΠ. Π’Π°ΠΊΠΆΠ΅ ΠΊΠ°ΠΆΠ΄Π°Ρ Π·Π°Π΄Π°ΡΠ° Π±ΡΠ΄Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΡΠΏΠΈΡΠΎΠΊ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ. ΠΠΎΡ Π²Π°ΠΆΠ½ΡΠ΅ ΡΠ°ΡΡΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ:
ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ CodePen, ΠΌΠΎΠΆΠ΅ΡΠ΅ Π² Π½Π°ΡΡΡΠΎΠΉΠΊΠ°Ρ Π²ΠΊΠ»ΡΡΠΈΡΡ Π°Π²ΡΠΎΠΏΡΠ΅ΡΠΈΠΊΡΠ΅Ρ ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ CSS-ΡΠ±ΡΠΎΡΠ°. Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΏΡΠΈΠ΄Π΅ΡΡΡ Π΄Π΅Π»Π°ΡΡ Π²ΡΠ΅ ΡΡΠΊΠ°ΠΌΠΈ, Π΅ΡΠ»ΠΈ Π΅ΡΠ΅ Π½Π΅ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΠ·ΠΈΡΠΎΠ²Π°Π»ΠΈ ΡΡΠΎΡ ΠΏΡΠΎΡΠ΅ΡΡ. ΠΠ΅ Π·Π°Π±ΡΠ²Π°ΠΉΡΠ΅, ΡΡΠΎ Π½Π°ΡΠ° ΡΠ΅Π»Ρ β ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ, ΡΠ°ΠΊ ΡΡΠΎ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠ° Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π°. Π ΡΠ΅ΠΏΠ΅ΡΡ Π΄Π°Π²Π°ΠΉΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π΅ΡΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ CSS:
ΠΠΎΠ»Π½ΡΠΉ Π½Π°Π±ΠΎΡ ΡΡΠΈΠ»Π΅ΠΉ (Π΄Π° ΠΈ Π²ΡΠ΅Π³ΠΎ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ) ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ Π½Π° CodePen. Π Π·Π΄Π΅ΡΡ Π±ΡΠ΄ΡΡ ΡΠ°ΠΌΡΠ΅ Π²Π°ΠΆΠ½ΡΠ΅ ΡΠ°ΡΡΠΈ ΠΊΠΎΠ΄Π°, ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ ΠΈ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ. ΠΠΎ Π΄Π°Π²Π°ΠΉΡΠ΅ ΡΠΆΠ΅ Π½Π°ΠΊΠΎΠ½Π΅Ρ ΠΏΡΠΈΠ±Π»ΠΈΠ·ΠΈΠΌΡΡ ΠΊ Π½Π°ΡΠ΅ΠΌΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠΌΡ ΠΌΠ΅Π½Ρ.
ΠΠ°Π±ΡΠΎΡΠ°Π΅ΠΌ Π½Π°ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ β ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ°
ΠΡΠΈΠ²ΠΎΠ΄ΠΈΠΌ Π½Π°ΡΠ΅ ΠΌΠ΅Π½Ρ Π² ΠΏΠΎΡΡΠ΄ΠΎΠΊ β CSS
Π£ΠΆΠ΅ Π±ΡΠ»Π° ΡΠΏΠΎΠΌΡΠ½ΡΡΠ° Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ°Π·ΡΠ°Π±Π°ΡΡΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ z-index Π² 10. ΠΠ΅ Π·Π°Π±ΡΠ²Π°ΠΉΡΠ΅, ΡΡΠΎ Π² Π²Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°ΡΡΡΡ Π΄ΡΡΠ³ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅. ΠΡΠΎ Π½Π΅ Π²ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈ, Π² Π΄Π΅ΠΌΠΊΠ΅ Π½Π°Π²Π΅Π΄Π΅Π½Ρ ΠΏΡΠΎΡΠΈΠ΅ ΠΊΡΠ°ΡΠΈΠ²ΠΎΡΡΠΈ, Π½ΠΎ ΠΎΠ½ΠΈ ΡΠΆΠ΅ Π·Π°Π²ΠΈΡΡΡ ΠΎΡ Π²Π°ΡΠΈΡ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΠ΅ΠΉ ΠΈ Π½Π΅ ΡΠ²Π»ΡΡΡΡΡ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠΌΠΈ. ΠΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡΡ ΠΊ JS, ΡΠ΄Π΅Π»Π°Π΅ΠΌ ΠΌΠ΅Π½Ρ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡΠΌ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠ»Π°ΡΡ Π΄Π»Ρ Π΅Π³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
Π Π°Π·Π²ΠΎΡΠ°ΡΠΈΠ²Π°Π΅ΠΌ Π½Π°ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ β JavaScript
ΠΠ°ΡΠ½Π΅ΠΌ Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎ ΠΏΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ Π·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΠ±ΡΡΠΈΠ΅ contextmenu. ΠΡΠΊΡΠΎΠ΅ΠΌ ΡΠ°ΠΌΠΎΠ²ΡΠΏΠΎΠ»Π½ΡΡΡΡΡΡΡ ΡΡΠ½ΠΊΡΠΈΡ ΠΈ ΠΎΡΠ»ΠΎΠ²ΠΈΠΌ ΡΠΎΠ±ΡΡΠΈΠ΅ Π½Π° Π²ΡΠ΅ΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅. Π’Π°ΠΊΠΆΠ΅ Π±ΡΠ΄Π΅ΠΌ Π»ΠΎΠ³ΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΠ±ΡΡΠΈΠ΅ Π² ΠΊΠΎΠ½ΡΠΎΠ»Ρ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΊΠ°ΠΊΡΡ-ΡΠΎ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ:
ΠΡΠ»ΠΈ Π·Π°Π³Π»ΡΠ½ΡΡΡ Π² ΠΊΠΎΠ½ΡΠΎΠ»Ρ, ΠΌΠΎΠΆΠ½ΠΎ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΡΡΠΎ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΡΠΎΠ±ΡΡΠΈΠ΅ ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ ΠΏΡΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ· ΡΠΏΠΈΡΠΊΠ° Π·Π°Π΄Π°Ρ. Π’Π΅ΠΏΠ΅ΡΡ ΠΏΠΎΠΌΠΈΠΌΠΎ ΠΎΡΠΌΠ΅Π½Ρ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ΅Π°Π»ΠΈΠ·ΡΠ΅ΠΌ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ, Π΄ΠΎΠ±Π°Π²Π»ΡΡ ΠΊ Π½Π΅ΠΌΡ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠ»Π°ΡΡ.
ΠΠΎ Π΄Π»Ρ Π½Π°ΡΠ°Π»Π° Π΄Π°Π²Π°ΠΉΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΊ ΠΌΠ΅Π½Ρ ID, ΡΡΠΎΠ±Ρ Π΅Π³ΠΎ ΠΏΡΠΎΡΠ΅ Π±ΡΠ»ΠΎ ΠΏΠΎΠ»ΡΡΠ°ΡΡ ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²ΠΎΠΌ JS. Π’Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ ΠΌΠ΅Π½Ρ menuState ΠΈ ΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Ρ Π°ΠΊΡΠΈΠ²Π½ΡΠΌ ΠΊΠ»Π°ΡΡΠΎΠΌ. ΠΠΎΠ»ΡΡΠΈΠ»ΠΈΡΡ ΡΡΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ :
ΠΠ΄Π΅ΠΌ Π΄Π°Π»ΡΡΠ΅. ΠΠ΅ΡΠ΅ΡΠΌΠΎΡΡΠΈΠΌ ΡΡΠ½ΠΊΡΠΈΡ contextMenuListener ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ toggleMenuOn, ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΌΠ΅Π½Ρ:
ΠΠ° Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡΡΠΈ ΡΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΠ·Π²Π°ΡΡ Π½Π°ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ. ΠΠΎ Π½Π΅Π»ΡΠ·Ρ ΡΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ ΠΎΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ. ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ , ΠΎΠ½ΠΎ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΡΠΎΠ²ΡΠ΅ΠΌ Π½Π΅ ΡΠ°ΠΌ, Π³Π΄Π΅ Ρ ΠΎΡΠ΅Π»ΠΎΡΡ Π±Ρ. ΠΠ»Ρ ΡΡΡΡΠ°Π½Π΅Π½ΠΈΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ°ΡΠ΅ΠΌΠ°ΡΠΈΠΊΠΈ. ΠΠΎ-Π²ΡΠΎΡΡΡ , Π·Π°ΠΊΡΡΡΡ ΡΡΠΎ ΠΌΠ΅Π½Ρ ΠΏΠΎΠΊΠ° Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ. Π‘ ΡΡΠ΅ΡΠΎΠΌ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΎΠ±ΡΡΠ½ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΡΠ΅ ΠΌΠ΅Π½Ρ, Ρ ΠΎΡΠ΅Π»ΠΎΡΡ Π±Ρ, ΡΡΠΎΠ± Π½Π°ΡΠ° Π΅Π³ΠΎ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ Π·Π°ΠΊΡΡΠ²Π°Π»Π°ΡΡ ΠΏΡΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π΅ ΠΌΠ΅Π½Ρ ΠΈ ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Escape. ΠΠΎΠΌΠΈΠΌΠΎ ΡΡΠΎΠ³ΠΎ ΠΏΡΠΈ ΠΏΡΠ°Π²ΠΎΠΌ ΠΊΠ»ΠΈΠΊΠ΅ Π²Π½Π΅ Π½Π°ΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ ΠΎΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π·Π°ΠΊΡΡΡΡΡΡ, Π° Π²ΠΌΠ΅ΡΡΠΎ Π½Π΅Π³ΠΎ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΎΡΠΊΡΡΡΠΈΠ΅ ΠΌΠ΅Π½Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ Π²ΡΠ΅ ΡΡΠΎ ΡΠ΅ΡΠΈΡΡ.
Π Π΅ΡΠ°ΠΊΡΠΎΡΠΈΠ½Π³ Π½Π°ΡΠ΅Π³ΠΎ ΠΊΠΎΠ΄Π°
ΠΠ΅ΡΠ½Π΅ΠΌΡΡ ΠΈ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΡΠ΅ΠΌ contextListener:
ΠΠΌΠ΅Ρ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΡ ΡΡΠ½ΠΊΡΠΈΡ, Π΄Π΅Π»Π°ΡΡΡΡ Π·Π° Π½Π°Ρ ΡΠ°ΡΡΡ Π³ΡΡΠ·Π½ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ, ΠΈ ΠΎΡΠ»Π°Π²Π»ΠΈΠ²Π°Ρ ΡΠΎΠ±ΡΡΠΈΠ΅ contextmenu Π½Π° Π²ΡΠ΅ΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΅ΠΏΠ΅ΡΡ Π·Π°ΠΊΡΡΠ²Π°ΡΡ ΠΌΠ΅Π½Ρ ΠΏΡΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π²Π½Π΅ Π΅Π³ΠΎ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΡΡΠ½ΠΊΡΠΈΡ toggleMenuOff ΠΈ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΡΠ΅ΠΌ contextListener:
Π’Π΅ΠΏΠ΅ΡΡ Π½Π°ΠΆΠΌΠΈΡΠ΅ ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΏΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΠΈΡΠΊΠ°. Π ΠΏΠΎΡΠ»Π΅ β Π³Π΄Π΅-Π½ΠΈΠ±ΡΠ΄Ρ Π² Π΄ΡΡΠ³ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. ΠΡΠ°Π»Ρ! ΠΠ°ΡΠ΅ ΠΌΠ΅Π½Ρ Π·Π°ΠΊΡΡΠ»ΠΎΡΡ ΠΈ ΠΎΡΠΊΡΡΠ»ΠΎΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ΅. ΠΠ°ΡΠ΅ΠΌ ΡΠ΄Π΅Π»Π°Π΅ΠΌ Π½Π΅ΡΡΠΎ ΠΏΠΎΡ ΠΎΠΆΠ΅Π΅ ΡΠ°ΠΌΠΎΠ΅ Π΄Π»Ρ ΡΠΎΠ±ΡΡΠΈΡ click, ΡΡΠΎΠ±Ρ Π½Π΅ ΠΎΡ ΠΎΠ΄Π½ΠΎΠΉ ΠΏΡΠ°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΠ½ΠΎ Π·Π°ΠΊΡΡΠ²Π°Π»ΠΎΡΡ:
ΠΡΠΎΡ ΠΊΡΡΠΎΠΊ ΠΊΠΎΠ΄Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΎΡ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅Π³ΠΎ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Firefox. ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΡΠ°Π²Π°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΌΡΡΠΈ ΠΎΡΠΆΠ°ΡΠ°, Π² Firefox ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ ΡΠΎΠ±ΡΡΠΈΠ΅ click, ΡΠ°ΠΊ ΡΡΠΎ Π·Π΄Π΅ΡΡ Π½Π°ΠΌ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ±Π΅ΠΆΠ΄Π°ΡΡΡΡ, ΡΡΠΎ ΠΏΡΠΎΠΈΠ·ΠΎΡΠ΅Π» Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠ»ΠΈΠΊ Π»Π΅Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ. Π’Π΅ΠΏΠ΅ΡΡ ΠΌΠ΅Π½Ρ Π½Π΅ ΠΌΠΎΡΠ³Π°Π΅Ρ ΠΏΡΠΈ ΠΏΡΠ°Π²ΠΎΠΌ ΠΊΠ»ΠΈΠΊΠ΅. ΠΠ°Π²Π°ΠΉΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΏΠΎΡ ΠΎΠΆΠΈΠΉ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ ΠΈ Π½Π° Π½Π°ΠΆΠ°ΡΠΈΠ΅ ΠΊΠ»Π°Π²ΠΈΡΠΈ ESC:
ΠΡ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΈ ΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΡΠΊΡΡΠ²Π°Π΅ΡΡΡ ΠΈ Π·Π°ΠΊΡΡΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ Π·Π°Π΄ΡΠΌΠ°Π½ΠΎ, Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΡΡΡΠ΅Π΅ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ Π΅ΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ. ΠΠ°Π²Π°ΠΉΡΠ΅ Π½Π°ΠΊΠΎΠ½Π΅Ρ ΠΎΡΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌ ΠΌΠ΅Π½Ρ ΠΈ ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΡΠΎΠ±ΡΡΠΈΡ Π²Π½ΡΡΡΠΈ Π½Π΅Π³ΠΎ.
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π°ΡΠ΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ
Π‘ ΡΡΠ΅ΡΠΎΠΌ ΡΠ΅ΠΊΡΡΠΈΡ HTML ΠΈ CSS, Π½Π°ΡΠ΅ ΠΌΠ΅Π½Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π² Π½ΠΈΠΆΠ½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΠΊΡΠ°Π½Π°. ΠΠΎ Π½Π°ΠΌ-ΡΠΎ Ρ ΠΎΡΠ΅Π»ΠΎΡΡ Π±Ρ, ΡΡΠΎΠ± ΠΎΠ½ΠΎ ΠΏΠΎΡΠ²Π»ΡΠ»ΠΎΡΡ ΡΠ°ΠΌ, Π³Π΄Π΅ ΠΏΡΠΎΠΈΠ·ΠΎΡΠ΅Π» ΠΊΠ»ΠΈΠΊ. ΠΠ°Π²Π°ΠΉΡΠ΅ ΠΈΡΠΏΡΠ°Π²ΠΈΠΌ ΡΠΈΠ΅ Π΄ΠΎΡΠ°Π΄Π½ΠΎΠ΅ ΡΠΏΡΡΠ΅Π½ΠΈΠ΅. ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ , Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π΅ΡΠ΅ ΠΎΠ΄Π½Ρ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΡ ΡΡΠ½ΠΊΡΠΈΡ, ΠΏΠΎΠ»ΡΡΠ°ΡΡΡΡ ΡΠΎΡΠ½ΡΠ΅ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΠΊΠ»ΠΈΠΊΠ°. ΠΠ°Π·ΠΎΠ²Π΅ΠΌ Π΅Π΅ getPosition ΠΈ ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΠΌ Π·Π°ΡΡΠ°Π²ΠΈΡΡ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΠΏΡΠΈΡΡΠ΄Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ²:
ΠΠ°Ρ ΠΏΠ΅ΡΠ²ΡΠΉ ΡΠ°Π³ Π² ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΠΌΠ΅Π½Ρ β ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²ΠΊΠ° ΡΡΠ΅Ρ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ . ΠΠΎΠ±Π°Π²ΠΈΠΌ ΠΈΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ Π±Π»ΠΎΠΊ ΠΊΠΎΠ΄Π°:
Π‘ΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΡΡΠ½ΠΊΡΠΈΡ positionMenu, ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡΡΡ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΉ Π°ΡΠ³ΡΠΌΠ΅Π½Ρ β ΡΠΎΠ±ΡΡΠΈΠ΅. ΠΠΎΠΊΠ° ΡΡΠΎ ΠΏΡΡΡΡ ΠΎΠ½Π° Π²ΡΠ²ΠΎΠ΄ΠΈΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΠΌΠ΅Π½Ρ Π² ΠΊΠΎΠ½ΡΠΎΠ»Ρ:
ΠΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΡΠ΅ΠΌ contextListener, ΡΡΠΎΠ±Ρ Π½Π°ΡΠ°ΡΡ ΠΏΡΠΎΡΠ΅ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ:
Π‘Π½ΠΎΠ²Π° ΠΏΠΎΠ²ΡΡΠΊΠ°ΠΉΡΠ΅ Π² ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ ΠΈ Π·Π°Π³Π»ΡΠ½ΠΈΡΠ΅ Π² ΠΊΠΎΠ½ΡΠΎΠ»Ρ. Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΠΎΡΡΡΠΏΠ½Π° ΠΈ Π»ΠΎΠ³ΠΈΡΡΠ΅ΡΡΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ Π·Π°Π΄Π°Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ² top ΠΈ left ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²ΠΎΠΌ JS. ΠΠΎΡ ΠΈ Π½ΠΎΠ²Π°Ρ Π²Π΅ΡΡΠΈΡ positionMenu:
ΠΠ°ΠΊ Π²Ρ ΠΏΠΎΠΌΠ½ΠΈΡΠ΅, ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π½Π°ΡΠ΅ ΠΌΠ΅Π½Ρ ΡΠΊΡΡΡΠΎ, ΡΠ°ΠΊ ΡΡΠΎ Π½Π΅Π»ΡΠ·Ρ ΠΏΡΠΎΡΡΠΎ Π²Π·ΡΡΡ ΠΈ ΠΏΠΎΡΡΠΈΡΠ°ΡΡ Π΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ. Π Π½Π°ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΠ΅Π½Ρ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅, Π½ΠΎ ΠΏΡΠΈ ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΌΠ΅Π½ΡΡΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ°, ΡΠ°ΠΊ ΡΡΠΎ ΡΠ°ΡΡΡΠΈΡΡΠ²Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ Π»ΡΡΡΠ΅ Π² ΠΌΠΎΠΌΠ΅Π½Ρ ΠΎΡΠΊΡΡΡΠΈΡ. ΠΠΎΠ»ΡΡΠΈΠΌ Π½ΡΠΆΠ½ΡΠ΅ Π²Π΅Π»ΠΈΡΠΈΠ½Ρ Π²Π½ΡΡΡΠΈ ΡΡΠ½ΠΊΡΠΈΠΈ positionMenu:
ΠΠ²Π΅Π΄Π΅ΠΌ Π΅ΡΠ΅ Π΄Π²Π΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ , Π½ΠΎ Π½Π° ΡΡΠΎΡ ΡΠ°Π· Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΠΎΠΊΠ½Π°:
ΠΠΎΡΡΠΈΡΠ°Π΅ΠΌ ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎΡ ΠΎΠΆΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
Π ΠΊΠΎΠ½Π΅ΡΠ½ΠΎΠΌ ΡΡΠ΅ΡΠ΅ Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, ΡΡΠΎ Ρ ΠΎΡΠΈΠΌ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΌΠ΅Π½Ρ Π½Π΅ Π±Π»ΠΈΠΆΠ΅, ΡΠ΅ΠΌ Π² 4 ΠΏΠΈΠΊΡΠ΅Π»ΡΡ ΠΎΡ ΠΊΡΠ°Ρ ΠΎΠΊΠ½Π°. ΠΠΎΠΆΠ½ΠΎ ΡΡΠ°Π²Π½ΠΈΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ, ΠΊΠ°ΠΊ Ρ Π³ΠΎΠ²ΠΎΡΠΈΠ» Π²ΡΡΠ΅, ΠΈ ΡΠΊΠΎΡΡΠ΅ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠΎΠ·ΠΈΡΠΈΡ ΠΊΠ°ΠΊ-ΡΠΎ ΡΠ°ΠΊ:
Π‘Π΅ΠΉΡΠ°Ρ Π½Π°ΡΠ΅ ΠΌΠ΅Π½Ρ Π²Π΅Π΄Π΅Ρ ΡΠ΅Π±Ρ ΡΠΎΠ²ΡΠ΅ΠΌ Ρ ΠΎΡΠΎΡΠΎ. ΠΡΡΠ°Π»ΠΎΡΡ ΡΡΠΎ-ΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Ρ ΡΠ΅ΡΠ°ΠΉΠ·ΠΎΠΌ ΠΎΠΊΠ½Π°. Π― ΡΠΆΠ΅ Π³ΠΎΠ²ΠΎΡΠΈΠ», ΠΊΠ°ΠΊ ΠΏΠΎΡΡΡΠΏΠ°Π΅Ρ Dropbox, Π½ΠΎ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΠΎΠ³ΠΎ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ Π·Π°ΠΊΡΡΠ²Π°ΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ. [Π’Π°ΠΊΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΊΡΠ΄Π° Π±Π»ΠΈΠΆΠ΅ ΠΊ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠΌΡ] ΠΠΎΠ±Π°Π²ΠΈΠΌ Π² ΡΡΠ½ΠΊΡΠΈΡ init ΡΠ»Π΅Π΄ΡΡΡΡΡ ΡΡΡΠΎΠΊΡ:
Π Π½Π°ΠΏΠΈΡΠ΅ΠΌ ΡΠ°ΠΌΡ ΡΡΠ½ΠΊΡΠΈΡ:
Π¦Π΅ΠΏΠ»ΡΠ΅ΠΌ ΡΠΎΠ±ΡΡΠΈΡ ΠΊ ΠΏΡΠ½ΠΊΡΠ°ΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ
ΠΡΠ»ΠΈ Π²Π°ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»ΠΎΠΆΠ½Π΅Π΅ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ°, ΠΈ Ρ Π²Π°Ρ ΠΏΠ»Π°Π½ΠΈΡΡΠ΅ΡΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ, ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ Π²Π½ΠΈΠΊΠ½ΡΡΡ Π² ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΡΡΠ΅Π΅ Π΄Π°Π»Π΅Π΅, ΡΡΠΎΠ±Ρ ΡΠ°ΠΌΠΎΠΌΡ Π΄ΠΎΠ΄ΡΠΌΠ°ΡΡ Π½Π΅Π΄ΠΎΡΡΠ°ΡΡΠΈΠ΅ Π΄Π΅ΡΠ°Π»ΠΈ. Π Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π²ΡΠ΅ ΠΏΡΠΎΡΠ΅, ΠΈ Π΅ΡΡΡ Π²ΡΠ΅Π³ΠΎ ΠΎΠ΄Π½ΠΎ ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΡΡΠΎΡΠ½Π½ΡΠΌ Π½Π°Π±ΠΎΡΠΎΠΌ Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΡΡΡΠΎ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ, ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π±ΡΠ» Π²ΡΠ±ΡΠ°Π½, ΠΈ ΠΎΠ±ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΡΠΎΡ Π²ΡΠ±ΠΎΡ. Π Π½Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎ ΡΠΎΡ ΡΠ°Π½ΠΈΠΌ Π²ΡΠ±ΡΠ°Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π² ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ ΠΈ Π·Π°ΠΏΠΈΡΠ΅ΠΌ Π² ΠΊΠΎΠ½ΡΠΎΠ»Ρ Π΅Π³ΠΎ data-id ΠΈ Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΡΠ΅ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ ΠΌΠ΅Π½Ρ:
ΠΠ°Π»Π΅Π΅ Π΄Π°Π²Π°ΠΉΡΠ΅ Π·Π°ΠΊΡΡΠΈΡΡΠ΅ΠΌ Π²ΡΠ΅ Π½ΡΠΆΠ½ΡΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΡ:
ΠΠΎΡΠ²ΠΈΠ»Π°ΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½Π°Ρ taskItemInContext, ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΏΡΠΈΡΠ²Π°ΠΈΠ²Π°Π΅ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈ ΠΏΡΠ°Π²ΠΎΠΌ ΠΊΠ»ΠΈΠΊΠ΅ ΠΏΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΠΈΡΠΊΠ°. ΠΠ½Π° Π½Π°ΠΌ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π΄Π»Ρ Π»ΠΎΠ³ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ID ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². Π’Π°ΠΊΠΆΠ΅ ΠΏΠΎΡΠ²ΠΈΠ»ΠΈΡΡ Π½ΠΎΠ²ΡΠ΅ ΠΈΠΌΠ΅Π½Π° ΠΊΠ»Π°ΡΡΠΎΠ². Π’Π΅ΠΏΠ΅ΡΡ ΠΏΡΠΎΠΉΠ΄Π΅ΠΌΡΡ ΠΏΠΎ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΠΈ.
Π€ΡΠ½ΠΊΡΠΈΡ ΠΈΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΎΡΡΠ°Π΅ΡΡΡ ΡΠ°ΠΊΠΎΠΉ ΠΆΠ΅. ΠΠ΅ΡΠ²ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π·Π°ΡΡΠ°Π³ΠΈΠ²Π°Π΅Ρ contextListener, Π²Π΅Π΄Ρ ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΡΠΎΡ ΡΠ°Π½ΡΡΡ Π² taskItemInContext ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π½Π° ΠΊΠΎΡΠΎΡΡΠΉ ΠΊΠ»ΠΈΠΊΠ½ΡΠ» ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ, Π° ΡΡΠ½ΠΊΡΠΈΡ clickInsideElement ΠΊΠ°ΠΊ ΡΠ°Π· Π΅Π³ΠΎ ΠΈ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ:
ΠΡ ΡΠ±ΡΠ°ΡΡΠ²Π°Π΅ΠΌ Π΅Π΅ Π² null, Π΅ΡΠ»ΠΈ ΠΏΡΠ°Π²ΡΠΉ ΠΊΠ»ΠΈΠΊ ΠΏΡΠΎΠΈΠ·ΠΎΡΠ΅Π» Π½Π΅ ΠΏΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΠΈΡΠΊΠ°. ΠΡ ΠΈ Π²ΠΎΠ·ΡΠΌΠ΅ΠΌΡΡ Π·Π° clickListener. ΠΠ°ΠΊ Ρ ΡΠΏΠΎΠΌΠΈΠ½Π°Π» ΡΠ°Π½Π΅Π΅, Π΄Π»Ρ ΠΏΡΠΎΡΡΠΎΡΡ ΠΌΡ ΠΏΡΠΎΡΡΠΎ Π±ΡΠ΄Π΅ΠΌ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ Π² ΠΊΠΎΠ½ΡΠΎΠ»Ρ. Π‘Π΅ΠΉΡΠ°Ρ ΠΏΡΠΈ ΠΎΡΠ»Π°Π²Π»ΠΈΠ²Π°Π½ΠΈΠΈ ΡΠΎΠ±ΡΡΠΈΡ click ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΎΠ²Π΅ΡΠΎΠΊ ΠΈ ΠΌΠ΅Π½Ρ Π·Π°ΠΊΡΡΠ²Π°Π΅ΡΡΡ. ΠΠ½Π΅ΡΠ΅ΠΌ ΠΊΠΎΡΡΠ΅ΠΊΡΠΈΠ²Ρ ΠΈ Π½Π°ΡΠ½Π΅ΠΌ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΠΊΠ»ΠΈΠΊ Π²Π½ΡΡΡΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ, Π²ΡΠΏΠΎΠ»Π½ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΠΎΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ ΠΈ Π»ΠΈΡΡ ΠΏΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ Π·Π°ΠΊΡΡΠ²Π°Ρ ΠΌΠ΅Π½Ρ:
ΠΡ ΠΌΠΎΠ³Π»ΠΈ Π·Π°ΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ Π²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΡΡΠ½ΠΊΡΠΈΡ menuItemListener. ΠΠ΅ ΠΌΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΠΌ ΡΡΡΡ ΠΏΠΎΠ·ΠΆΠ΅. Π€ΡΠ½ΠΊΡΠΈΠΈ keyupListener, resizeListener ΠΈ positionMenu ΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌ Π±Π΅Π· ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ. Π€ΡΠ½ΠΊΡΠΈΠΈ toggleMenuOn ΠΈ toggleMenuOff ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΡΠ΅ΠΌ Π½Π΅Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² ΠΈΠΌΠ΅Π½Π° ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π΄Π»Ρ Π»ΡΡΡΠ΅ΠΉ ΡΠΈΡΠ°Π΅ΠΌΠΎΡΡΠΈ ΠΊΠΎΠ΄Π°:
ΠΠ°ΠΊΠΎΠ½Π΅Ρ ΡΠ΅Π°Π»ΠΈΠ·ΡΠ΅ΠΌ menuItemListener:
ΠΠ° ΡΡΠΎΠΌ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ° ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΠΈ Π·Π°ΠΊΠ°Π½ΡΠΈΠ²Π°Π΅ΡΡΡ.
ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π°ΠΌΠ΅ΡΠ°Π½ΠΈΡ
ΠΠΎΠ»ΡΡΠΎΠΉ Π²ΠΎΠΏΡΠΎΡ
Π― Π²ΡΠ΄Π΅Π»ΠΈΠ» ΡΡΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ ΠΏΡΠ½ΠΊΡ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π°ΠΆΠ½ΠΎ ΠΏΠΎΡΠ»Π΅ Π²ΡΠ΅Π³ΠΎ, ΡΡΠΎ ΠΌΡ ΠΏΡΠΎΠ΄Π΅Π»Π°Π»ΠΈ. ΠΠ°Π΄Π°ΠΉΡΠ΅ΡΡ Π²ΠΎΠΏΡΠΎΡΠΎΠΌ: Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ? Π’Π°ΠΊΠΈΠ΅ ΡΡΡΠΊΠΈ β ΡΡΠΎ ΠΊΡΡΡΠΎ, Π½ΠΎ ΠΏΡΠ΅ΠΆΠ΄Π΅ ΡΠ΅ΠΌ ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ ΡΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π² Π²Π°ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅. ΠΠ±ΡΡΠ½ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΎΠΆΠΈΠ΄Π°ΡΡ ΠΏΡΠΈΠ²ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠΎΡΠ»Π΅ ΠΏΡΠ°Π²ΠΎΠ³ΠΎ ΠΊΠ»ΠΈΠΊΠ° ΠΏΠΎ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ ΠΎΠ½ΠΈ ΠΎΠΆΠΈΠ΄Π°ΡΡ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ Π΅Π΅, ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΡΡΡΠ»ΠΊΡ ΠΈ Ρ. Π΄. ΠΡΡΡΡΡΡΠ²ΠΈΠ΅ Π½ΡΠΆΠ½ΡΡ ΠΏΡΠ½ΠΊΡΠΎΠ² Π² ΠΊΠ°ΡΡΠΎΠΌΠ½ΠΎΠΌ ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΈΡ ΠΎΠ³ΠΎΡΡΠΈΡΡ.
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΈ Π΄Π΅ΠΌΠΎ
ΠΡΠ»ΠΈ Π²Ρ ΡΡΠ°ΡΠ΅Π»ΡΠ½ΠΎ Π²ΡΠ΅ ΠΎΠ±Π΄ΡΠΌΠ°Π»ΠΈ ΠΈ ΡΠ²Π΅ΡΠ΅Π½Ρ, ΡΡΠΎ ΡΠ°ΠΊΠ°Ρ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ Π½ΡΠΆΠ½Π° Π²Π°ΡΠ΅ΠΌΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ. ΠΠΎΠ½Π΅ΡΠ½ΠΎ, ΠΎΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊΠΈΡ -Π»ΠΈΠ±ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ, Π½ΠΎ Π΄Π°Π½Π½ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΠΎΠΏΠΈΡΡΠ²Π°Π΅Ρ ΠΏΡΠΎΡΠ΅ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ, ΡΠ°ΠΊ ΡΡΠΎ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²ΡΠ²Π°ΡΡ ΡΠ²ΠΎΠΈ ΠΏΠΎΠΏΡΠ°Π²ΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π½Π΅ ΡΠ°ΠΊ ΡΠ»ΠΎΠΆΠ½ΠΎ.
ΠΠΎΠ΄ΠΎΠ²Π°Ρ Π±Π°Π·Π° ΡΡΠΎΠ³ΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π° Π·Π°Π»ΠΈΡΠ° Π½Π° GitHub ΠΈ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΠΈ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΎΠ±Π½ΠΎΠ²Π»ΡΡΡΡΡ Π² ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠ»Π³ΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ. Π ΠΏΠΎΠ»Π½ΠΎΠ΅ ΡΠ°Π±ΠΎΡΠ΅Π΅ Π΄Π΅ΠΌΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΡΠΊΠ°ΡΡ Π½Π° CodePen.
ΠΡ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ΡΠΈΠΊΠ°
ΠΠ΅ΡΠ΅Π²ΠΎΠ΄ ΠΌΠ΅ΡΡΠ°ΠΌΠΈ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π²ΠΎΠ»ΡΠ½ΡΠΉ, Π½ΠΎ Π½Π΅ Π² ΡΡΠ΅ΡΠ± ΡΠΌΡΡΠ»Ρ ΠΈΠ»ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΡ. ΠΡΠ΅, ΡΡΠΎ Π½Π΅ ΠΎΡΠ½ΠΎΡΠΈΡΡΡ Π½Π°ΠΏΡΡΠΌΡΡ ΠΊ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»Ρ, Π²ΡΠ½Π΅ΡΠ΅Π½ΠΎ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΡ.
Π‘ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΡΠΌΠΈ, ΠΏΠΎΠΆΠ΅Π»Π°Π½ΠΈΡΠΌΠΈ ΠΈ Π·Π°ΠΌΠ΅ΡΠ°Π½ΠΈΡΠΌΠΈ, ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎ, Π² ΠΠ‘.







































