Π“Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€ мСню css: Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€ мСню, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS ΠΈ HTML | by АндрСй ΠšΡ€ΠΎΡ…ΠΈΠ½

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€, мСню, Ρ€ΡƒΡ‡ΠΊΠ° пСрСмСщСния, порядок, Ρ€Π°ΡƒΠ½Π΄, Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΠ°Π½Π΅Π»ΠΈ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ iOS, png

Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€, мСню, Ρ€ΡƒΡ‡ΠΊΠ° пСрСмСщСния, порядок, Ρ€Π°ΡƒΠ½Π΄, Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΠ°Π½Π΅Π»ΠΈ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ iOS, png

Ρ‚Π΅Π³ΠΈ

  • Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€,
  • мСню,
  • Ρ€ΡƒΡ‡ΠΊΠ° пСрСмСщСния,
  • порядок,
  • Ρ€Π°ΡƒΠ½Π΄,
  • png,
  • ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ,
  • бСсплатная Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ°

Об этом PNG

Π Π°Π·ΠΌΠ΅Ρ€ изобраТСния
4096x4096px
Π Π°Π·ΠΌΠ΅Ρ€ Ρ„Π°ΠΉΠ»Π°
90.48KB
MIME Ρ‚ΠΈΠΏ
Image/png
Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ PNG ( 90.48KB )

ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ PNG

ΡˆΠΈΡ€ΠΈΠ½Π°(px)

высота(px)

ЛицСнзия

НСкоммСрчСскоС использованиС, DMCA Contact Us

  • Кнопка Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Π° Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΉ список ΠšΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π½Ρ‹Π΅ Π·Π½Π°Ρ‡ΠΊΠΈ, ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΈ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ мСню страницы, тСкст, ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ, Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ png 768x768px 6. 05KB
  • Адаптивный Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ ПанСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ МСню ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π½Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ Кнопка Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Π°, МСню, тСкст, ΠΊΠ°Ρ„Π΅, ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ png 980x982px 54.79KB
  • Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€, мСню, панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹, Π·Π½Π°Ρ‡ΠΎΠΊ Essential, png 4096x4096px 72.67KB
  • Кнопка Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Π° ΠšΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ ΠΈΠΊΠΎΠ½ΠΊΠΈ мСню, Π·Π½Π°Ρ‡ΠΎΠΊ мСню, тСкст, ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ, ΠΌΠΎΠ½ΠΎΡ…Ρ€ΠΎΠΌΠ½Ρ‹ΠΉ png 980x768px 32.29KB
  • Π“Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€ Eguneko мСню ΠšΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π½Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ, Π·Π½Π°Ρ‡ΠΎΠΊ Π±ΡƒΡ€Π³Π΅Ρ€, Π±Π°Ρ€Π±Π΅ΠΊΡŽ, Π΅Π΄Π°, тСкст png 512x512px 9.43KB
  • cricle, cross, delete, multiply, osx, remove, times, Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΠ°Π½Π΅Π»ΠΈ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ iOS, png 4096x4096px 192. 97KB
  • Π—Π½Π°Ρ‡ΠΎΠΊ сброса, Кнопка сброса, Π”ΠΈΠ·Π°ΠΉΠ½ ΠΈΠΊΠΎΠ½ΠΎΠΊ, Π‘Ρ‚Ρ€ΠΎΠΊΠ° мСню, Кнопка Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Π°, ΠšΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€, Π§Π΅Ρ€Π½ΠΎ-бСлыйВСкст, ΠΏΠ»ΠΎΡ‰Π°Π΄ΡŒ, Π§Π΅Ρ€Π½ΠΎΠ΅ ΠΈ Π±Π΅Π»ΠΎΠ΅, ΠΊΠ½ΠΎΠΏΠΊΠ° png 980x980px 71.6KB
  • мСню, Π»ΠΈΠ½ΠΈΠΈ, Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€, Π·Π½Π°Ρ‡ΠΎΠΊ Wirecons Free Vector Icons, png 4096x4096px 87.53KB
  • Π—Π½Π°Ρ‡ΠΎΠΊ мСню, Π”ΠΈΠ·Π°ΠΉΠ½ ΠΈΠΊΠΎΠ½ΠΎΠΊ, Кнопка Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Π°, Π”ΠΎΠΌ, Π‘ΠΏΡ€Π°ΠΉΡ‚Ρ‹ Css, ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс, Π”ΠΎΠΌΠ°ΡˆΠ½ΡΡ страница, Π’Ρ€Π΅ΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ, ΡƒΠ³ΠΎΠ», CSS спрайты, ΠΊΠ½ΠΎΠΏΠΊΠ° Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€ png 1024x1024px 14.32KB
  • Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€, Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€-мСню, мСню, навигация, боковая панСль, Π·Π½Π°Ρ‡ΠΎΠΊ ΠΊΠΎΠ½Ρ‚ΡƒΡ€Π° элСмСнтов стрСлки, png 4096x4096px 170.41KB
  • org/ImageObject»> Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€, линия, мСню, большС ΠΊΠ½ΠΎΠΏΠΊΠΈ, Ρ‚Ρ€ΠΈ, Π·Π½Π°Ρ‡ΠΎΠΊ стиля ΠΊΠΎΠ½Ρ‚ΡƒΡ€Π°, png 4096x4096px 70.84KB
  • Π˜Π»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«Π—Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ сСйчас», Π—Π½Π°Ρ‡ΠΎΠΊ Π²Π΅Π±-страницы мСню ΠΊΠ½ΠΎΠΏΠΎΠΊ, ПанСли ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΏΠΎ ΠΌΠ°Π³Π°Π·ΠΈΠ½Π°ΠΌ, Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½, тСкст, панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ png 768x614px 1.8MB
  • приборная панСль, сСтка, мСню, Π·Π½Π°Ρ‡ΠΎΠΊ мСню, Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΡ€ΠΈΠ±ΠΎΡ€Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ (ΡΡ‚ΠΈΠ»ΡŒ Π»ΠΈΠ½ΠΈΠΈ), png 4096x4096px 129.22KB
  • Π˜Π»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡ Π·Π½Π°Ρ‡ΠΎΠΊ листа Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, МСню ΠšΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π½Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Кнопка Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Π° ΠšΡƒΠΊΡƒ, Π‘Π²ΠΎΠ±ΠΎΠ΄Π½ΠΎΠ΅ мСню Svg, ΡƒΠ³ΠΎΠ», суп, тСкст png 512x512px 2.82KB
  • элСмСнты управлСния, Π·Π°Π»ΠΈΠ²ΠΊΠ°, ios, ΠΌΠ΅Π΄ΠΈΠ°ΠΏΠ»Π΅Π΅Ρ€, ΠΏΠ°ΡƒΠ·Π°, приостановлСно, Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΠ°Π½Π΅Π»ΠΈ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ iOS, png 4096x4096px 147.
    02KB
  • ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ°, Π³Π°Π»ΠΎΡ‡ΠΊΠ°, ΠΊΡ€ΡƒΠΆΠΎΠΊ, Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΎ, Π³ΠΎΡ‚ΠΎΠ²ΠΎ, ΠΎΠΊ, Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΠ°Π½Π΅Π»ΠΈ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ iOS, png 4096x4096px 184.44KB
  • Кнопка Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Π° Адаптивный Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ МСню, Π·Π½Π°Ρ‡ΠΎΠΊ, ΡƒΠ³ΠΎΠ», тСкст, ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ png 2400x2400px 38.3KB
  • Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€, список, мСню, Π΅Ρ‰Π΅, навигация, Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ интСрфСйс — Π·Π½Π°Ρ‡ΠΎΠΊ Jumpicon (линия), png 4096x4096px 97.01KB
  • панСль, Π»ΠΈΠ½ΠΈΠΈ, список, мСню, навигация, навигация, ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹, Π·Π½Π°Ρ‡ΠΎΠΊ Essentials, png 4096x4096px 173.63KB
  • Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹Π΅ Π·Π½Π°Ρ‡ΠΊΠΈ, мСню, сторона, боковая панСль, Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ мСню, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс, Π²Π΅Π±-страница, Π·Π½Π°Ρ‡ΠΎΠΊ Π±Π°Π·ΠΎΠ²Ρ‹Ρ… элСмСнтов Π²Π΅Π±-интСрфСйса, png 4096x4096px 155. 91KB
  • Кнопка Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Π° Иконки ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π° Π‘Ρ‚Ρ€ΠΎΠΊΠ° мСню, Π·Π½Π°Ρ‡ΠΎΠΊ увСдомлСния, Ρ„ΠΈΠΎΠ»Π΅Ρ‚ΠΎΠ²Ρ‹ΠΉ, тСкст, ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ png 1600x1600px 19.14KB
  • ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ, ΠΊΠ»ΠΈΠ΅Π½Ρ‚, учСтная запись, ΠΊΠ»ΠΈΠ΅Π½Ρ‚Ρ‹, Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ, Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π½Ρ‹ΠΉ, ΠΏΡ€ΠΎΡ„ΠΈΠ»ΡŒ, Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΠ°Π½Π΅Π»ΠΈ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ iOS, png 4096x4096px 117.15KB
  • Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€, мСню, список, ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹, Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, png 4096x4096px 76.69KB
  • часы, врСмя, Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΠ°Π½Π΅Π»ΠΈ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ iOS, png 4096x4096px 174.56KB
  • Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€, список, мСню, навигация, Π·Π½Π°Ρ‡ΠΎΠΊ основных Π²Π΅Π±-элСмСнтов, png 4096x4096px 85.08KB
  • org/ImageObject»> ΠΊΡ€ΡƒΠ³, Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€, список, мСню, навигация, стСк, Π·Π½Π°Ρ‡ΠΎΠΊ Π²Π΅Π±-интСрфСйса, png 4096x4096px 133.19KB
  • интСрфСйс, слСва, мСню, боковая панСль, ΠΎΠΊΠ½ΠΎ, Π·Π½Π°Ρ‡ΠΎΠΊ простых Π»ΠΈΠ½ΠΈΠΉ (с Π·Π°Π»ΠΈΠ²ΠΊΠΎΠΉ), png 4096x4096px 130.45KB
  • учСтная запись, ΠΊΠ»ΠΈΠ΅Π½Ρ‚, Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ, ΠΏΡ€ΠΎΡ„ΠΈΠ»ΡŒ, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ, Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΠ°Π½Π΅Π»ΠΈ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ iOS, png 4096x4096px 151.32KB
  • крСст, ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ, Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ, ΡƒΠΌΠ½ΠΎΠΆΠΈΡ‚ΡŒ, osx, ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ, Ρ€Π°Π·, Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΠ°Π½Π΅Π»ΠΈ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ iOS, png 4096x4096px 145.96KB
  • Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€, мСню, ΠΊΡ€ΡƒΠ³Π»Ρ‹ΠΉ Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€, боковая навигация, Π·Π½Π°Ρ‡ΠΎΠΊ Π±Π°Π·ΠΎΠ²Ρ‹Ρ… элСмСнтов Π²Π΅Π±-интСрфСйса, png 4096x4096px 170.12KB
  • org/ImageObject»> ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ°, Π³Π°Π»ΠΎΡ‡ΠΊΠ°, ΠΊΡ€ΡƒΠΆΠΎΠΊ, Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΎ, Π³ΠΎΡ‚ΠΎΠ²ΠΎ, Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΎ, ΠΎΠΊ, Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΠ°Π½Π΅Π»ΠΈ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ iOS, png 4096x4096px 136.88KB
  • ΠΊΠ½ΠΎΠΏΠΊΠ°, ΠΊΡ€ΡƒΠ³, ΠΏΡ€Π΅Π΄ΠΌΠ΅Ρ‚Ρ‹ ΠΏΠ΅Ρ€Π²ΠΎΠΉ нСобходимости, мСню, Ρ€Π°ΡƒΠ½Π΄, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс, Π·Π½Π°Ρ‡ΠΎΠΊ UI Essentials, png 4096x4096px 163.34KB
  • Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€, мСню, Π΅Ρ‰Π΅, навигация, Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ, Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ интСрфСйс — Π·Π½Π°Ρ‡ΠΎΠΊ Jumpicon (линия), png 4096x4096px 101.16KB
  • Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€, список, мСню, Π΅Ρ‰Π΅, навигация, Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ интСрфСйс — Π·Π½Π°Ρ‡ΠΎΠΊ Jumpicon (Glyph), png 4096x4096px 106.41KB
  • Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€, мСню, Π΅Ρ‰Π΅, навигация, Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс — Π·Π½Π°Ρ‡ΠΎΠΊ Jumpicon (Glyph), png 4096x4096px 89.12KB
  • org/ImageObject»> ПанСль мСню Π—Π½Π°Ρ‡ΠΎΠΊ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, МСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, ПанСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, Π²Π΅Π±-сайт, шаблон мСню png 7115x4458px 2.88MB
  • ГалСрСя ΠΊΠ½ΠΎΠΏΠΎΠΊ Кнопка Π“Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€ МСню ПанСль инструмСнтов, Кнопка, Π³Π°Π·ΠΎΠ½, сад, Π²Π΅Π»ΡŽΡ€ png 500x514px 86.96KB
  • приборная панСль, Ρ€ΡƒΡ‡ΠΊΠ°, ΠΊΠ°Ρ€Π°Π½Π΄Π°Ρˆ, письмо, Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΡ€ΠΈΠ±ΠΎΡ€Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ (ΡΡ‚ΠΈΠ»ΡŒ Π»ΠΈΠ½ΠΈΠΈ), png 4096x4096px 103.17KB
  • мСню, Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€, навигация, Π·Π½Π°Ρ‡ΠΎΠΊ Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ интСрфСйса ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, png 4096x4096px 78.77KB
  • Π±Π°Ρ€, Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€, мСню, Ρ€Π°Π·Π½ΠΎΠ΅, Π‘Π»ΡƒΡ‡Π°ΠΉΠ½ΠΎΠ΅ — Π·Π½Π°Ρ‡ΠΎΠΊ Crafticons, png 4096x4096px 76.72KB
  • Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€, список, мСню, Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ сСрый Π·Π½Π°Ρ‡ΠΎΠΊ основного Π½Π°Π±ΠΎΡ€Π°, png 4096x4096px 107.
    65KB
  • ΠΊΠ½ΠΎΠΏΠΊΠ°, ΠΊΡ€ΡƒΠ³, ΠΏΡ€Π΅Π΄ΠΌΠ΅Ρ‚Ρ‹ ΠΏΠ΅Ρ€Π²ΠΎΠΉ нСобходимости, мСню, Ρ€Π°ΡƒΠ½Π΄, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс, Π·Π½Π°Ρ‡ΠΎΠΊ UI Essentials, png 4096x4096px 127.14KB
  • ΠΊΡ€ΡƒΠ³, Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€, список, мСню, навигация, стСк, Π·Π½Π°Ρ‡ΠΎΠΊ Π²Π΅Π±-интСрфСйса, png 4096x4096px 140.3KB
  • Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€, мСню, Π΅Ρ‰Π΅, навигация, Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ, Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ интСрфСйс — Π·Π½Π°Ρ‡ΠΎΠΊ Jumpicon (Glyph), png 4096x4096px 109.13KB
  • Π°ΡƒΠ΄ΠΈΠΎ, ΠΊΠ°Ρ€Π°ΠΊΡƒΠ»ΠΈ, ios, iphone, мСню, Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ, ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ, ΠΊΠ°Ρ€Π°ΠΊΡƒΠ»ΠΈ — Π·Π½Π°Ρ‡ΠΎΠΊ Π°ΡƒΠ΄ΠΈΠΎ / Π²ΠΈΠ΄Π΅ΠΎ / ΠΈΠ³Ρ€Ρ‹, png 4096x4096px 166.74KB
  • Π·Π΅Π»Π΅Π½Ρ‹ΠΉ, Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€, список, мСню, навигация, стСк, Ρ†Π²Π΅Ρ‚Π½ΠΎΠΉ Π·Π½Π°Ρ‡ΠΎΠΊ Π²Π΅Π±-интСрфСйса, png 4096x4096px 167.
    08KB
  • Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€, мСню, Π΅Ρ‰Π΅, навигация, Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ, Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ интСрфСйс — Π·Π½Π°Ρ‡ΠΎΠΊ Jumpicon (Π·Π°ΠΊΡ€Π°ΡˆΠ΅Π½Π½Π°Ρ линия), png 4096x4096px 118.63KB
  • шаблон, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ, мСню, ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹, инструмСнты, ΠΎΠ±ΠΎΡ€ΡƒΠ΄ΠΎΠ²Π°Π½ΠΈΠ΅, Π·Π½Π°Ρ‡ΠΎΠΊ интСрфСйса ΠΏΡ€ΠΈΠ±ΠΎΡ€Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ, png 4096x4096px 134.8KB
  • синий, ΡΠ΅Ρ€ΠΊΠ»ΡŒ, Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€, список, mavigation, мСню, стСк, Ρ†Π²Π΅Ρ‚Π½ΠΎΠΉ Π·Π½Π°Ρ‡ΠΎΠΊ Π²Π΅Π±-интСрфСйса, png 4096x4096px 173.81KB

WP Hamburger β€” Плагин для WordPress

  • Π”Π΅Ρ‚Π°Π»ΠΈ
  • ΠžΡ‚Π·Ρ‹Π²Ρ‹
  • Установка
  • Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ°

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ°

  • Author: Fahad Mahmood

  • Project URI: http://androidbubble.com/blog/wordpress/plugins/wp-hamburger

  • License: GPL 3. See License below for copyright jots and titles.

Customization possibility including font-size, font-weight, color, bullets, background, opacity, font-family and menu selection. WP Hamburger is WordPress plugin to redesign the menus with different color combination, font family, bullets and custom CSS. Colors and bullets for First Level / Second Level menu items can be customized separately.

Highly Customizable

  • Settings page demo preview available
  • Mobile and Desktop compatibility
  • Font Family
  • Background Color
  • Background Opacity
  • Hamburger Color
  • Parent Level Menu Items
  • Child Level Menu Items
  • Font Color
  • Font Weight
  • List Bullets
  • FontAwesome Icons
  • Custom Image Upload for Bullets
  • Custom CSS section

License

This WordPress Plugin is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 2 of the License, or any later version. This free software is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this software. If not, see http://www.gnu.org/licenses/gpl-2.0.html.

  • Configuration > menu selection
  • Customization > font family, color, bullets, font-size and opacity etc.
  • Customization > custom css styles
  • Implementation Overview
  • Opacity Settings & Custom Bullet Image from Media Library
  • Collapsible Menu Items for Hover Effects
  • Hover BG Color, Hover BG Image, Hover Text Color, Reset Selection
  • Hierarchical Menu Items On Settings Page
  • Hover Effect Demo #1
  • Hover Effect Demo #2
  • Hover Effect Background Image Demo #1
  • Hover Effect Background Image Demo #2
  • Hover Effect Background Image — Media Library
  • Hover Effects

From the WordPress plugin menu click on Add New and search for WP Hamburger

Instead of searching for a plugin you can directly upload the plugin zip file by clicking on Upload:

Use the browse button to select the plugin zip file that was downloaded, then click on Install Now. The plugin will be uploaded to your blog and installed. It can then be activated.

Β«WP HamburgerΒ» is available in left sidebar settings menu.

How does it work?

Go to settings page, select a menu and save changes.

Is it free or a paid plugin?

Basic functionality is free. Customization options are available in premium version.

Do I need to purchase to make it work?

No, you do not need to purchase as it is fully functional as a free version. Just customization from settings page is not available in free version but still you can customize with you HTML/CSS skills.

Where to report if I found a bug?

It is always better to open a ticket on support forum. There is a help tab on settings page for your convenience.

What if any other plugin or theme using a different version of Bootstrap or FontAwesome?

You can turn Bootstrap and FontAwesome OFF from settings page.

How can I contribute to this plugin?

You may suggest improvements, features and user friendliness. Your name will be mentioned in changelog with the respective plugin version in next release.

Is it compatible with Avada, Enfold and standard WordPress twenty series themes?

Yes, it is compatible with all kind of themes. If you face any compatibility issue, let us know and we will try to make it work in next version.

You will find WP Hamburger menu item under settings menu.

Use Font family name for example Arial or leave it blank for default.

Insert HTML/CSS bullets disc, circle, outsite inside etc., or choose icons from FontAwesome. Alternatively, custom image can be used from media library as well. Recommended dimensions are 32px X 32px.

I installed and activated this and set it to work on the main menu. The entire site displayed narrow on screen and did not display a hamburger menu.

I’ve installed the plugin and it completely deleted my functions.php file, making the theme broken. Do not install.

The configuration page don’t work. Only the premium one. And nothing happens in front.

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ всС 3 ΠΎΡ‚Π·Ρ‹Π²Π°

Β«WP HamburgerΒ» β€” ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ. Π’ Ρ€Π°Π·Π²ΠΈΡ‚ΠΈΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Π° внСсли свой Π²ΠΊΠ»Π°Π΄ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ участники:

Участники

  • Fahad Mahmood

ΠŸΠ΅Ρ€Π΅Π²Π΅ΡΡ‚ΠΈ Β«WP HamburgerΒ» Π½Π° ваш язык.

ЗаинтСрСсованы Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅?

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ ΠΊΠΎΠ΄, ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ SVN Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΉ, ΠΈΠ»ΠΈ ΠΏΠΎΠ΄ΠΏΠΈΡˆΠΈΡ‚Π΅ΡΡŒ Π½Π° ΠΆΡƒΡ€Π½Π°Π» Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΏΠΎ RSS.

1.6.5
  • Updated for WordPress. [24/05/2023]
1.6.4
  • Updated for WordPress. [07/09/2022]
1.6.3
  • Submenu issue resolved. [Thanks to Kickan][19/03/2022]
1.6.2
  • Hide on mobile, new option added. [Thanks to yannickburky][11/12/2021]
1.6.1
  • Hide on desktop, new option added. [Thanks to yannickburky][11/12/2021]
1.6
  • Updated for WordPress.
1.5
  • Hide on scroll revised. [Thanks to Diana]
1.4
  • Custom image as bullet. [Thanks to Diana]
1.3
  • PHP Notice and Warning fixed. [Thanks to Abu Usman]
1.2
  • Position and DOM Position fields added.
1.1
  • Elektro Skin added for WP Hamburger and Hover Effects Introduced. [Thanks to Diana & Team Ibulb Work]
1.0
  • Initial Release of WP Hamburger. [Thanks to Diana from Switzerland]

ΠžΡ†Π΅Π½ΠΊΠΈ

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ всС

  • 5 Π·Π²Ρ‘Π·Π΄ 1
  • 4 Π·Π²Π΅Π·Π΄Ρ‹ 0
  • 3 Π·Π²Π΅Π·Π΄Ρ‹ 0
  • 2 Π·Π²Π΅Π·Π΄Ρ‹ 0
  • 1 Π·Π²Π΅Π·Π΄Π° 2

Π’ΠΎΠΉΠ΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΎΡ‚Π·Ρ‹Π².

Участники

  • Fahad Mahmood

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ°

Π•ΡΡ‚ΡŒ Ρ‡Ρ‚ΠΎ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ? НуТна ΠΏΠΎΠΌΠΎΡ‰ΡŒ?

ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π² Ρ„ΠΎΡ€ΡƒΠΌ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€-мСню Π² CSS?

ΠžΠ±Π·ΠΎΡ€

Π“Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€-мСню Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ ΠΈ Π²Ρ‹ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, скрывая Π΅Π΅ Π·Π° ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΈΠ»ΠΈ отобраТая Π΅Π΅. Он появляСтся, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ Π½Π° Π·Π½Π°Ρ‡ΠΎΠΊ ΠΈΠ· Ρ‚Ρ€Π΅Ρ… Π»ΠΈΠ½ΠΈΠΉ, Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°ΡŽΡ‰ΠΈΠΉ Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€. Π“Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€-мСню создаСт ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½ΠΎΠ΅ , ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠΎΠ΅ мСню. Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ ΡƒΠ·Π½Π°Π΅ΠΌ ΠΎ создании Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… мСню-Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€ΠΎΠ² ΠΈ ΠΈΠΊΠΎΠ½ΠΎΠΊ-Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€ΠΎΠ² Π² CSS.

ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ условия

ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ΡŒ, ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ основныС ΠΈΠ΄Π΅ΠΈ HTML ΠΈ CSS:

  • ЀлСкс-бокс
  • псСвдоэлСмСнтов
  • Запросы ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΌΠ΅Π΄ΠΈΠ° CSS
  • Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€Ρ‹ Π² CSS

Когда панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° содСрТит слишком ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ ссылок, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ мСню-Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€ для отобраТСния Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… ссылок Π½Π° нашСм Π²Π΅Π±-сайтС. Π“Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€-мСню создаСт ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½ΠΎΠ΅, ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠΎΠ΅ мСню. МСню называСтся мСню Β«Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Β», ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π·Π½Π°Ρ‡ΠΎΠΊ Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Π° выглядит ΠΊΠ°ΠΊ стопка Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€ΠΎΠ². ΠžΠ±Ρ‹Ρ‡Π½ΠΎ это для Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… дисплССв ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств. Однако Π²Π΅Π±-сайты для ПК Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€-мСню CSS.

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€-мСню.

  • Π£ нас Π΅ΡΡ‚ΡŒ Π³Π»Π°Π²Π½ΠΎΠ΅ мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ для создания Π·Π½Π°Ρ‡ΠΊΠ° Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Π°.
  • МСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ состоит ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… ссылок.
  • ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ чистый CSS, ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ состояниС Π·Π½Π°Ρ‡ΠΊΠ°, Ρ‚. Π΅. ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„Π»Π°ΠΆΠΊΠ° HTML.
  • ΠœΡ‹ ΡƒΠΊΠ°ΠΆΠ΅ΠΌ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ Ρ„Π»Π°ΠΆΠΊΠ° ΠΈ свяТСм Π΅Π³ΠΎ с ΠΌΠ΅Ρ‚ΠΊΠΎΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° for. НаТав Π½Π° <ΠΌΠ΅Ρ‚ΠΊΠ°> установит ΠΈ снимСт Ρ„Π»Π°ΠΆΠΎΠΊ. Π—Π°Ρ‚Π΅ΠΌ ΠΌΡ‹ установим Ρ„Π»Π°ΠΆΠΎΠΊ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS.
  • ΠœΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ мСню ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€-ΠΊΠ½ΠΎΠΏΠΊΡƒ мСню-Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Π°.
  • Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Ρ€ΠΈ Π»ΠΈΠ½ΠΈΠΈ для Π·Π½Π°Ρ‡ΠΊΠ° Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Π°, ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ псСвдоэлСмСнты ::before ΠΈ ::after. CSS для этого:
  • ΠœΡ‹ пСрСмСстим Π²Π΅Ρ€Ρ…Π½ΡŽΡŽ ΠΈ ниТнюю полосы ΠΈΠ»ΠΈ Π»ΠΈΠ½ΠΈΠΈ Π·Π½Π°Ρ‡ΠΊΠ° Π² ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ срСднСй Π»ΠΈΠ½ΠΈΠΈ.
  • ΠœΡ‹ спрячСм ΡΡ€Π΅Π΄Π½ΡŽΡŽ линию.
  • НаконСц, ΠΌΡ‹ ΠΏΠΎΠ²Π΅Ρ€Π½Π΅ΠΌ Π²Π΅Ρ€Ρ…Π½ΡŽΡŽ ΠΈ ниТнюю Π»ΠΈΠ½ΠΈΠΈ Π½Π° 45 градусов Π² ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½Ρ‹Ρ… направлСниях, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡ΠΎΠΊ Ρ€Π°Π·Ρ€Π΅Π·Π°/крСста.

4. ΠžΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Π°Ρ панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ с использованиСм ΠΌΠ΅Π΄ΠΈΠ°-запросов CSS

  • ΠœΡ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΌΠ΅Π΄ΠΈΠ°-запросы CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π½Π°ΡˆΡƒ панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ-Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Π° ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎΠΉ.
  • ΠœΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ экрана, которая Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ полноэкранноС мСню ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ΅ мСню-Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€ CSS.

Π’Ρ‹Π²ΠΎΠ΄

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚ΡŒ здСсь, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ большС

ΠœΡ‹ Π΄Π°ΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡ΠΎΠΊ нашСго мСню с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS вмСсто использования Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… Π·Π½Π°Ρ‡ΠΊΠΎΠ².

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π½Π°ΠΌ Π½Π°ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ Π΄Π΅Π»Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡ΠΎΠΊ мСню-Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Π°:

  • Π—Π½Π°Ρ‡ΠΎΠΊ мСню состоит ΠΈΠ· Ρ‚Ρ€Π΅Ρ… полос.
  • ΠœΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° div ΠΈ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… для создания структуры ΠΏΠ°Π½Π΅Π»ΠΈ.
  • ΠœΡ‹ ΡƒΠΊΠ°ΠΆΠ΅ΠΌ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту полосы ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π²Π΅Ρ€Ρ…Π½Π΅Π΅ ΠΈ Π½ΠΈΠΆΠ½Π΅Π΅ поля, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ пространство ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ полосой.

HTML

CSS

Π’Π«Π’ΠžΠ”

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚ΡŒ здСсь, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ большС

ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ‹ Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€-мСню, Π² Ρ‚ΠΎΠΌ числС Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅, ΡΠΊΠΎΠ»ΡŒΠ·ΡΡ‰ΠΈΠ΅, Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅. ПослС знакомства с Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€-мСню CSS Π΄Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим нСсколько ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² ΠΈ ΡƒΠ·Π½Π°Π΅ΠΌ, ΠΊΠ°ΠΊ ΠΈΡ… ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ.

ΠŸΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π·Π½Π°Ρ‡ΠΎΠΊ Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Π° прСвращаСтся Π² крСст ΠΈ слуТит ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ закрытия. МСню открываСтся, ΠΈ Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ ссылки.

HTML

CSS

Π’Ρ‹Π²ΠΎΠ΄

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚ΡŒ здСсь, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ большС

ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€-мСню Π² полноэкранном Ρ€Π΅ΠΆΠΈΠΌΠ΅. ПанСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ всС ΠΎΠΊΠ½ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. Π­Ρ‚ΠΎ ΡƒΠ΄ΠΎΠ±Π½ΠΎ, ΠΊΠΎΠ³Π΄Π° Π² мСню ΠΌΠ½ΠΎΠ³ΠΎ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² ΠΈΠ»ΠΈ Π½ΡƒΠΆΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ.

HTML

CSS

Π’Ρ‹Π²ΠΎΠ΄

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚ΡŒ здСсь, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ большС

  • Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ Ρ‡Π°ΡΡ‚ΡŒ насСлСния ΠΌΠΈΡ€Π° Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ мобильного устройства.
  • ΠŸΠΎΠ»Π½ΠΎΡΠΊΡ€Π°Π½Π½Ρ‹Π΅ мСню часто нСэффСктивны Π½Π° ΠΌΠ°Π»Π΅Π½ΡŒΠΊΠΈΡ… экранах.
  • Π§Ρ‚ΠΎΠ±Ρ‹ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ эту ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π΄Π°ΠΆΠ΅ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ мСню Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ, Π½ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒ мСню, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, Ρ‡Ρ‚ΠΎ Π½Π΅ идСально.
  • НСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, Π³Π΄Π΅ находится ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π° нашСм Π²Π΅Π±-сайтС, ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ доступ ΠΊ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ фиксированного Π·Π½Π°Ρ‡ΠΊΠ° Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Π°.

Π”ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ

Π—Π½Π°Ρ‡ΠΊΠΈ мСню Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€ΠΎΠ² ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌΠΈ, хотя ΠΎΠ½ΠΈ ΠΈ Π½Π΅ самыС ΡƒΠ΄ΠΎΠ±Π½Ρ‹Π΅. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ARIA ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΡ‚Π°Ρ‚ΡŒ доступным для людСй с ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΌΠΈ возмоТностями. ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° чтСния с экрана Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°ΡΠΏΠΎΠ·Π½Π°Π²Π°Ρ‚ΡŒ символ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΠ°ΠΊ Β«Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Β», Π° Π½Π΅ ΠΊΠ°ΠΊ мСню, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ скроСм Π½Π°ΡˆΡƒ панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΈ Π·Π°ΠΌΠ΅Π½ΠΈΠΌ Π΅Π΅ Сю. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… дСйствий ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ доступным:

  • Π‘ΠΊΡ€Ρ‹Ρ‚ΡŒ Π·Π½Π°Ρ‡ΠΎΠΊ мСню ΠΈΠ· ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ чтСния с экрана.
  • Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ чтСния с экрана Π·Π½Π°ΡŽΡ‚ ΠΎ Π½Π°Π»ΠΈΡ‡ΠΈΠΈ строки мСню, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ ΠΌΠΎΠ³Π»ΠΈ Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ Π΅Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ.

ΠœΠ΅Ρ‚ΠΊΠ° aria ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ссылка сущСствуСт.

Π‘ΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒ с Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ

Π’ Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€-мСню ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ основы CSS, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ псСвдоэлСмСнты, псСвдоклассы, сСлСкторы ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹. ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈ всС соврСмСнныС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ эти свойства.

90 166 9017 0 Π‘Π°Ρ„Π°Ρ€ΠΈ Π½Π° iOS
Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ ВСрсия (ΠΏΡ€Π΅ΠΆΠ΄Π΅ всСго)
Google Chrome 2.0
Safari 1.0
Mozilla Firefox 1.0
Microsoft Edge 12.0
Chrome Android 18
Firefox для Android 4
Opera Android 10. 1
1
OperaSamsung Internet 1.0
WebView Android 4.4
9 0011

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

  • Π“Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€-мСню Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ ΠΈ Π²Ρ‹ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, скрывая Π΅Π΅ Π·Π° ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΈΠ»ΠΈ отобраТая Π΅Π΅.
  • Π’Ρ€ΠΈ Π»ΠΈΠ½ΠΈΠΈ, ΠΈΠΌΠΈΡ‚ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠ΅ стопку Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€ΠΎΠ², ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ Π·Π½Π°Ρ‡ΠΎΠΊ Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Π°.
  • Π“Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€-мСню ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах.
  • Π”ΠΎΠ±Π°Π²ΠΈΠ² ΠΊ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρƒ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ для создания Π·Π½Π°Ρ‡ΠΊΠ° Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Π°.
  • ΠœΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΡƒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ псСвдоэлСмСнты, ΠΈ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²Π΅Ρ€Ρ…Π½ΡŽΡŽ, ниТнюю ΠΈ ΡΡ€Π΅Π΄Π½ΡŽΡŽ Π»ΠΈΠ½ΠΈΠΈ.
  • Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π½Π°ΡˆΡƒ панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎΠΉ, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½Ρ‹Π΅ запросы CSS.

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€-мСню Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° CSS | by threkk

4 ΠΌΠΈΠ½ΡƒΡ‚Ρ‹ чтСния

Β·

3 мая

НСдавно я Π΄Π΅Π»Π°Π» нСбольшиС измСнСния Π½Π° своСм сайтС, ΠΊΠΎΠ³Π΄Π° я Π·Π°Π½ΠΎΠ²ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Π» мСню Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ я сдСлал для Π½Π΅Π³ΠΎ. Π­Ρ‚ΠΎ Π½Π΅ особСнноС, просто мСню, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅, ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅Ρ‚Π΅ Π² малСнькоС Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅, соТмСтся Π² скрытоС Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ мСню, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ, Π½Π°ΠΆΠ°Π² ΠΊΠ½ΠΎΠΏΠΊΡƒ. Π˜Π½Ρ‚Π΅Ρ€Π΅ΡΠ½ΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ сдСлан Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с использованиСм HTML ΠΈ CSS.

Помню, ΠΊΠΎΠ³Π΄Π° я Π΅Π³ΠΎ Π΄Π΅Π»Π°Π», я Π½Π΅ ΠΌΠΎΠ³ Π½Π°ΠΉΡ‚ΠΈ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, ΠΈ Ρ‡Ρ‚ΠΎ для достиТСния ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ³ΠΎ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π° ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΎΠ²Π°Π»ΠΎΡΡŒ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ± ΠΈ ошибок. Π˜Ρ‚Π°ΠΊ, я ΠΈΠ·Π²Π»Π΅ΠΊ ΠΊΠΎΠ΄ мСню ΠΈ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΠ» Π΅Π³ΠΎ Π² ΡƒΠΏΡ€ΠΎΡ‰Π΅Π½Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€.

Когда я Π½Π°Ρ‡ΠΈΠ½Π°Π» этот ΠΏΡ€ΠΎΠ΅ΠΊΡ‚, Ρƒ мСня Π±Ρ‹Π»ΠΎ нСсколько Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ:

  • Он ΠΌΠΎΠ³ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ HTML ΠΈ CSS, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ взаимодСйствия (ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ) .
  • Π”ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Ρ‚ΠΎ ΠΆΠ΅ самоС мСню , Π½Π΅ ΠΈΠΌΠ΅ΡŽΡ‰Π΅Π΅ Π΄Π²ΡƒΡ… Ρ€Π°Π·Π½Ρ‹Ρ… мСню ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‰Π΅Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎ.
  • Если CSS Π½Π΅ загруТаСтся, ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ работоспособным.

ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ состоит ΠΈΠ· ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… шагов:

  1. Π‘ΠΎΡΡ‚Π°Π²ΡŒΡ‚Π΅ список ссылок.
  2. Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ список ссылок красивым Π½Π° большом экранС.
  3. Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ список ссылок выглядСл красиво Π½Π° ΠΌΠ°Π»Π΅Π½ΡŒΠΊΠΈΡ… экранах.
  4. Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ список ссылок Π½Π° малСньком экранС сворачиваСмым.

МСню β€” это, Π² ΠΊΠΎΠ½Ρ†Π΅ ΠΊΠΎΠ½Ρ†ΠΎΠ², список ссылок, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… для Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, поэтому Π½Π°Ρ‡Π½Π΅ΠΌ с Π½Π΅Π³ΠΎ:

  

Π­Ρ‚ΠΎΡ‚ список Π² основном прСдставляСт собой вСсь HTML, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для всСго мСню, ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ CSS magic .

Π­Ρ‚Π° Ρ‡Π°ΡΡ‚ΡŒ проста, с нСбольшим количСством CSS ΠΌΡ‹ Π³ΠΎΡ‚ΠΎΠ²Ρ‹. Π’Π°ΠΌ Ρ€Π΅ΡˆΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ выглядит красиво:

 nav { 
background-color: SeaGreen;
Ρ†Π²Π΅Ρ‚: снСг;
дисплСй: гибкий;
Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ содСрТимого: ΠΏΡ€ΠΎΠ±Π΅Π» ΠΌΠ΅ΠΆΠ΄Ρƒ;
}
nav ul {
/* ЗаставляСм ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ ΠΈΡΡ‡Π΅Π·Π½ΡƒΡ‚ΡŒ */
list-style-type: none;
}
nav ul li {
/* ΠŸΠΎΠΌΠ΅Ρ‰Π°Π΅Ρ‚ элСмСнты Π² ΠΎΠ΄Π½Ρƒ строку */
display: inline-flex;
ΠΏΠΎΠ»Π΅: 0,3em 1em;
}

ΠœΡ‹ Π·Π°ΠΊΠΎΠ½Ρ‡ΠΈΠ»ΠΈ с этой Ρ‡Π°ΡΡ‚ΡŒΡŽ ΠΈ Π½Π΅ Π±ΡƒΠ΄Π΅ΠΌ Π²Π½ΠΎΡΠΈΡ‚ΡŒ Π² Π½Π΅Π΅ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ.

ΠŸΠΎΠ»Π½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ CSS ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ ΠΏΠΎ ссылкам Π² ΠΊΠΎΠ½Ρ†Π΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΌΠ΅Π΄ΠΈΠ°-запросы, ΠΌΡ‹ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°Π΅ΠΌ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΡ€Π°Π²ΠΈΠ»Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ нСбольшими Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΠΌΠΈ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΈΠ³Ρ€Π°Ρ‚ΡŒ с ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ Π² зависимости ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π»ΠΈ Π²Ρ‹, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Ρ‹ «малСнькими устройствами».

 @media (максимальная ΡˆΠΈΡ€ΠΈΠ½Π°: 576 пиксСлСй) { 
nav {
flex-direction: row;
flex-wrap: ΠΎΠ±Π΅Ρ€Ρ‚ΠΊΠ°;
полС слСва: 0;
ΠΏΠΎΠ»Π΅ справа: 0;
}
/* ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΌΡ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅ΠΌ Π² мобильном Ρ€Π΅ΠΆΠΈΠΌΠ΅, ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π² Π²ΠΈΠ΄Π΅ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ списка
*/
nav ul {
display: block;
}
/* Π£ нас Π΅ΡΡ‚ΡŒ Π΄Π²Π° списка: ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ β€” это всСгда Π²ΠΈΠ΄ΠΈΠΌΡ‹Π΅ элСмСнты
Π² строкС мСню. Π’Ρ‚ΠΎΡ€ΠΎΠΉ Π±ΡƒΠ΄Π΅Ρ‚ скрыт */
nav ul:last-child {
width: 100%;
гибкая основа: 100%;
}
navul li {
margin-bottom: 0;
ΡˆΠΈΡ€ΠΈΠ½Π°: 100%;
Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста: Π²ΠΏΡ€Π°Π²ΠΎ;
набивка: 0,5 см;
}
}
Π­Ρ‚ΠΎ Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€-мСню.

НаконСц, самоС интСрСсноС. Π’ΡƒΡ‚ вся магия: Π·Π°Π΄Π°Π½ чСкбокс, Ссли ΠΎΠ½ Π½Π΅ ΠΎΡ‚ΠΌΠ΅Ρ‡Π΅Π½, сосСдний список Π½Π΅ отобраТаСтся.

 input[type='checkbox']:not(:checked)+ul { 
display: none;
}

Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, ΠΌΡ‹ добавляСм Ρ„Π»Π°ΠΆΠΎΠΊ с ΠΌΠ΅Ρ‚ΠΊΠΎΠΉ Π² β€‹β€‹Π½Π°Ρˆ HTML.

  

Π€Π»Π°ΠΆΠΎΠΊ ΠΈ ΠΌΠ΅Ρ‚ΠΊΠ° Π±ΡƒΠ΄ΡƒΡ‚ скрыты Π½Π° Π±ΠΎΠ»ΡŒΡˆΠΈΡ… экранах, ΠΈ ΠΈΡ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ значСния.

 Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ Π²Π²ΠΎΠ΄ [Ρ‚ΠΈΠΏ = 'checkbox'], навигационная ΠΌΠ΅Ρ‚ΠΊΠ° { 
дисплСй: Π½Π΅Ρ‚;
}

Но Π² Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΡ… ΠΌΡ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌ ΠΌΠ΅Ρ‚ΠΊΡƒ, оставляя Ρ„Π»Π°ΠΆΠΎΠΊ скрытым ΠΈΠ· эстСтичСских сообраТСний.

ΠžΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *