Π‘Π°ΠΉΡ‚

МСню для сайта html Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ: Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню CSS only (Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅)?

13.04.2021

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

css Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ мСню | ВсС ΠΎ Windows 10

На Ρ‡Ρ‚Π΅Π½ΠΈΠ΅ 5 ΠΌΠΈΠ½. ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ΠΎΠ² 41 ΠžΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½ΠΎ

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠ»Π°Π²Π½ΠΎ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ для сайта с ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌΠΈ основного Ρ€Π°Π·Π΄Π΅Π»Π° Π½Π° HTML5 + CSS3 + JS

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню HTML + CSS + JS

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· способ ΡΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ объСм ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Π½Π° страницС, Π±Π΅Π· ΠΏΠΎΡ‚Π΅Ρ€ΠΈ содСрТания. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ² содСрТит Π² свСрнутом Π²ΠΈΠ΄Π΅ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ основного. ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²Π° Ρ‚Π°ΠΊΠΈΡ… мСню Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° Ρ€Π°Π·Π΄Π΅Π» мСню, Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ основного Ρ€Π°Π·Π΄Π΅Π»Π°. ΠŸΡ€ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π΅ Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ основной Ρ€Π°Π·Π΄Π΅Π», Ρ€Π°Π·Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ.

ΠŸΠ»Π°Π²Π½ΠΎΡΡ‚ΡŒ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ…ΡΡ элСмСнтов подмСню ΠΏΡ€ΠΈΠ΄Π°Π΄ΡƒΡ‚ красоту ΠΈ ΡΡ‚ΠΈΠ»ΠΈΠ·Π°Ρ†ΠΈΡŽ, поэтому Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ css свойство transition. Π˜Π·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ всС ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню Π±ΡƒΠ΄ΡƒΡ‚ свСрнуты, ΠΊΡ€ΠΎΠΌΠ΅ основного Ρ€Π°Π·Π΄Π΅Π»Π°.

ВсС ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню свСрнуты ВсС ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню Ρ€Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚Ρ‹ Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ мСню Ρ€Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚. НумСрация ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠ² начинаСтся с 0 Π”Π²Π° ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Π° мСню Ρ€Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚Ρ‹

Если Π²Ρ‹ ΠΏΠΎΠΏΠ°Π»ΠΈ Π½Π° этот сайт случайно ΠΈΠ»ΠΈ искали Π΄Ρ€ΡƒΠ³ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню, ΡΠΎΠ²Π΅Ρ‚ΡƒΡŽ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΏΠΎ ссылкС, Ρ‚Π°ΠΌ собранно мноТСство Ρ€Π°Π·Π½Ρ‹Ρ… мСню для сайта.

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… мСнюшСк для сайтов довольно ΠΌΠ½ΠΎΠ³ΠΎ, Π² этом ΡƒΡ€ΠΎΠΊΠ΅ я ΠΏΠΎΠΊΠ°ΠΆΡƒ Π²Π°ΠΌ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Π½Π° CSS ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ с Π²Ρ‹ΠΏΠ°Π΄Π°ΡˆΠΊΠΎΠΉ Π²ΠΏΡ€Π°Π²ΠΎ ΠΈ Π²Π»Π΅Π²ΠΎ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹Π΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠ΅ мСню. Π”Ρ€ΡƒΠ³ΠΈΠ΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… мСню для сайта Π±ΡƒΠ΄ΡƒΡ‚ описаны Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… ΡƒΡ€ΠΎΠΊΠ°Ρ…. И Ρ‚Π°ΠΊ прСступим.

Навигация ΠΏΠΎ страницС:

Π’ качСствС вступлСния, Π΄ΡƒΠΌΠ°ΡŽ стоит Ρ€Π°ΡΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏ Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π²Ρ‹ΠΏΠ°Π΄Π°ΡˆΠ΅ΠΊ Π½Π° CSS.

Π£ всСх Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π·Π°ΠΏΡƒΡ‰Π΅Π½Π½Ρ‹Π΅ с ПК ΠΈΠ»ΠΈ Π½ΠΎΡƒΡ‚Π±ΡƒΠΊΠ°, Π² CSS доступно свойство :hover (Ρ‚ΡƒΡ‚ я ΠΌΠ°Π»ΠΎΡΡ‚ΡŒ Π½Π΅ΠΏΡ€Π°Π², это псСвдокласс ) Π½Π° Π±Π°Π·Π΅ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ практичСски любоС Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню.

А Ρ‡Ρ‚ΠΎ ΠΆΠ΅ Π΄Π΅Π»Π°Ρ‚ΡŒ с ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΌΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ? β€” ΠΈΠ»ΠΈ Π½Π° ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Π°Ρ… спроситС Π²Ρ‹.

К ΡΡ‡Π°ΡΡ‚ΡŒΡŽ, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² прСдусмотрСли (ΠΊ соТалСнию Π½Π΅ Π²Π΅Π·Π΄Π΅) Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ срабатывания псСвдокласса :hover ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π²ΠΎΠΌ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ссылку, Ссли ΠΎΠ½ΠΎ описано Π² CSS. Благодаря этим стараниям, Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ смоТСт ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ вашС Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню CSS.

ΠŸΠ°Ρ€Π° слов ΠΎ прСимущСствС Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΡ… мСню:

  • ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΎΡ‡Π΅Π½ΡŒ Π΄Π»ΠΈΠ½Π½Ρ‹Π΅ мСню Π² ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠ΅ пространство;
  • Π΄ΠΈΠ·Π°ΠΉΠ½ становится Π±ΠΎΠ»Π΅Π΅ изящным;
  • частично ΡƒΠ»ΡƒΡ‡ΡˆΠ°ΡŽΡ‚ΡΡ повСдСнчСскиС Ρ„Π°ΠΊΡ‚ΠΎΡ€Ρ‹.

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Π²ΠΏΡ€Π°Π²ΠΎ

ΠΊ ΠΌΠ΅Π½ΡŽΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽ Π²Π°ΡˆΠ΅ΠΌΡƒ вниманию ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€: простоС Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Π²ΠΏΡ€Π°Π²ΠΎ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.

НаписаниС мСнюшки ΠΌΡ‹ Π½Π°Ρ‡Π½Π΅ΠΌ с html ΠΊΠΎΠ΄Π° ΠΈ сдСлаСм Π΅Π³ΠΎ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΌ Π½Π° списках, Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ ΠΎΡ‚Π²Π΅Ρ‚Π° ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ‡Π½Ρ‹ΠΉ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ wordpress.

Html для Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню

Π”ΡƒΠΌΠ°ΡŽ Π² ΠΏΠ»Π°Π½Π΅ понимания html Ρƒ вас Π½Π΅ Π²ΠΎΠ·Π½ΠΈΠΊΠ½Π΅Ρ‚ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… слоТностСй, Ρ‚ΠΈΠΏΠΈΡ‡Π½Ρ‹Π΅ списки с Ρ‚Π΅Π³Π°ΠΌΠΈ ul ΠΈ li. Π‘ΠΌΠΎΡ‚Ρ€ΠΈΠΌ ΠΊΠΎΠ΄:

МСню для сайта Π½Π° списках: Ρƒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² Π΅ΡΡ‚ΡŒ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ, Ρƒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π½Π΅Ρ‚. ВсС ΠΏΡ€Π΅Π΄Π΅Π»ΡŒΠ½ΠΎ просто, Π΄ΡƒΠΌΠ°ΡŽ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… пояснСний Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ.

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню CSS

ΠΊ мСнюБо стилями CSS вопрос Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎ слоТнСС. Π― Π²Π°ΠΌ ΠΏΠΎΠΊΠ°ΠΆΡƒ ΠΊΠΎΠ΄ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ самого мСню, Π° ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ стили Π²Ρ‹ смоТСтС ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΊΠΎΠ³Π΄Π° скачаСтС ΠΏΡ€ΠΈΠΌΠ΅Ρ€.

Π’ΠΎΡ‚ эта строчка CSS

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ Ρƒ нас ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ Π² этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π° скинС:

Как Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню css Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Π΄Π΅ΠΌΠΎ Π½ΠΈΠΆΠ΅, ΠΈΠ»ΠΈ скачав ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

Π’ΠΎΡ‚ Ρ‚Π°ΠΊΠΎΠΉ Π½Π΅ слоТный ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню Ρƒ мСня получился.

Π­Ρ‚ΠΎ Π΅Ρ‰Π΅ Π½Π΅ ΠΊΠΎΠ½Π΅Ρ†, ΠΈΠ΄Π΅ΠΌ дальшС.

ΠŸΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ с Π²Ρ‹ΠΏΠ°Π΄Π°ΡˆΠΊΠΎΠΉ Π²Π»Π΅Π²ΠΎ. На основС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Π²Ρ‹ΠΏΠ°Π΄Π°ΡˆΠΊΠΈ Π²ΠΏΡ€Π°Π²ΠΎ ΠΌΡ‹ сСйчас Π΅Π΅ ΠΈ Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΠ΅ΠΌ.

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Π²Π»Π΅Π²ΠΎ Π½Π° CSS

ΠΊ мСнюΠ₯Ρ‚ΠΌΠ» ΠΊΠΎΠ΄ оставляСм ΠΏΡ€Π΅ΠΆΠ½ΠΈΠΌ, Π΅Π³ΠΎ Π½Π΅Ρ‚ смысла ΠΌΠ΅Π½ΡΡ‚ΡŒ. Π Π°Π·Π²Π΅ Ρ‡Ρ‚ΠΎ Π² самом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅, ΠΌΠ½Π΅ придСтся ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ мСстами Π»Π΅Π²Ρ‹ΠΉ Π±Π»ΠΎΠΊ ΠΈ ΠΏΡ€Π°Π²Ρ‹ΠΉ, для наглядности ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°. (ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ скачав ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π² ΠΊΠΎΠ½Ρ†Π΅)

Π‘Ρ‚ΠΈΠ»ΠΈ CSS Π±ΡƒΠ΄ΡƒΡ‚ Π½Π΅ΠΌΠ½ΠΎΠΆΠΊΠΎ ΠΎΡ‚Π»ΠΈΡ‡Π°Ρ‚ΡŒΡΡ, хотя Π½Π΅ ΠΊΠ°Ρ€Π΄ΠΈΠ½Π°Π»ΡŒΠ½ΠΎ. Π’ ΠΌΠΎΠ΅ΠΌ простом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ достаточно ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΎΠ΄Π½ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅. Π’ коммСнтариях, я ΠΏΠΎΠΌΠ΅Ρ‡Ρƒ Π΅Π³ΠΎ.

Для Π±ΠΎΠ»Π΅Π΅ слоТных мСню, Π²Π°ΠΌ потрСбуСтся ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π½Π΅ΠΌΠ½ΠΎΠΆΠΊΠΎ большС ΠΏΡ€Π°Π²ΠΎΠΊ. Π‘ΠΌΠΎΡ‚Ρ€ΠΈΠΌ стили:

Π’ΠΎΡ‚ ΠΈ всС. Π£ нас ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ Π²ΠΎΡ‚ Ρ‚Π°ΠΊΠΎΠ΅ мСню. Π‘Π»Π΅Π²Π° ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡŒΠ½Ρ‹ΠΉ скин, справа Π΄Π΅ΠΌΠΎ ΠΈ ссылка Π½Π° скачиваниС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ мСню дСлаСтся Π½Π° основС списка, ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ всС элСмСнты списка
. Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ, занимая ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅ всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ элСмСнта ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°

, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π² свою ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°-ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°.

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ списка
. ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ссылки, Π½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, ΠΈΠΊΠΎΠ½ΠΊΠΈ, ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ„ΠΎΡ€ΠΌΠ»ΡΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ Π½Π° сайтС, список ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΉ ΠΈ Ρ‚.Π΄.

1. Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ мСню с Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ

ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ элСгантный Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ оформлСния. ΠŸΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для стилизации ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΉ Π½Π° сайтС. ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ элСмСнт списка мСняСт Ρ†Π²Π΅Ρ‚ ссылки.

2. Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ мСню Π² стилС «схСма ΠΌΠ΅Ρ‚Ρ€ΠΎΒ»

Π˜Π½Ρ‚Π΅Ρ€Π΅ΡΠ½ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для оформлСния Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню, прСдусмотрСно Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… мСню. Β«Π’Π΅Ρ‚ΠΊΠ° ΠΌΠ΅Ρ‚Ρ€ΠΎΒ» β€” лСвая Π³Ρ€Π°Π½ΠΈΡ†Π° списка, ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΏΠ΅Ρ€Π΅Π΄ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ссылкой.

3. Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ мСню с эффСктами ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

Иконка ΠΈ фоновая Π·Π°Π»ΠΈΠ²ΠΊΠ°, ΠΏΡ€ΠΎΡΠ²Π»ΡΡŽΡ‰ΠΈΠ΅ΡΡ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° элСмСнт списка, ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ элСмСнтов Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню.

4. Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ мСню с ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ

Иконки Π² мСню ΡΠΎΠ·Π΄Π°ΡŽΡ‚ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΡΠΊΠΎΡ€ΡŒ, дополняя словСсноС описаниС ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ. Для отобраТСния ΠΈΠΊΠΎΠ½ΠΎΠΊ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚ Awesome. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ любой Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ ΠΈΠ»ΠΈ ΠΈΠΊΠΎΠ½ΠΊΠΈ-ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ.

5. Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ мСню с ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ

Π”Π°Π½Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для оформлСния Π±Π»ΠΎΠΊΠΎΠ² с Π½ΠΎΠ²ΠΈΠ½ΠΊΠ°ΠΌΠΈ, ΠΏΠΎΡ…ΠΎΠΆΠΈΠΌΠΈ Ρ‚ΠΎΠ²Π°Ρ€Π°ΠΌΠΈ, ΠΈ Ρ‚.ΠΏ. сайтС ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½Π°.

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π² css Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню? Пошаговая инструкция

ΠžΡ‚ Π°Π²Ρ‚ΠΎΡ€Π°: всСх ΠΏΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ. ΠŸΠΎΡ‡Π΅ΠΌΡƒ-Ρ‚ΠΎ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Ρƒ Π²Π΅Π±-мастСров ассоциируСтся со скриптами, Π½ΠΎ ΡƒΠΆΠ΅ Π΄Π°Π²Π½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΡƒΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ ΠΌΠΎΠΆΠ½ΠΎ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ спокойно Π½Π° чистом css. ΠŸΡ€ΠΈΡ‡Π΅ΠΌ Ρ‚Π°ΠΊΠΎΠ΅ мСню Π±ΡƒΠ΄Π΅Ρ‚ Π½ΠΈΡ‡Π΅ΠΌ Π½Π΅ Ρ…ΡƒΠΆΠ΅. БСгодня я Π²Π°ΠΌ ΠΏΠΎΠΊΠ°ΠΆΡƒ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π² css Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню. ПодСлюсь, Ρ‚Π°ΠΊ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ€Π΅Ρ†Π΅ΠΏΡ‚ΠΎΠΌ.

План ΡƒΡ€ΠΎΠΊΠ° ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° нашСго мСню

Π’ ΠΎΠ±Ρ‰Π΅ΠΌ-Ρ‚ΠΎ, сначала опрСдСлимся с Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ само мСню. Π’ html5 стандартным способом считаСтся ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅ nav с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка. Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊ ΠΈ сдСлаСм. ΠœΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ ΠΌΡ‹ ΠΏΠΎΠ·ΠΆΠ΅ ΡƒΠ±Π΅Ρ€Π΅ΠΌ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ css, Π² мСню ΠΎΠ½ΠΈ Π½Π°ΠΌ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Π½Π΅ Π½ΡƒΠΆΠ½Ρ‹.

БобствСнно, я сразу Π½Π°ΠΏΠΈΡˆΡƒ Π² html Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ с Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΌΠΈ списками. Π’ΠΎ Π΅ΡΡ‚ΡŒ наши список Π±ΡƒΠ΄Π΅Ρ‚ Π΄Π²ΡƒΡ…ΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹ΠΌ – Π² Π½Π΅ΠΌ Π±ΡƒΠ΄ΡƒΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ списки. А ΠΈΠΌΠ΅Π½Π½ΠΎ, Π½Π° ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚ 1 список, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈ Π±ΡƒΠ΄Π΅Ρ‚ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню.

Π’ΡƒΡ‚ Π΅ΡΡ‚ΡŒ Π²Π°ΠΆΠ½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚ Π΄Π΅Π»Π°Ρ‚ΡŒ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΌ, Π° лишь Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅. Π‘Π΅Π· ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ, Ρ‚ΠΎΠ³Π΄Π° Π² ΠΏΡƒΠ½ΠΊΡ‚Π°Ρ… Π±Π΅Π· выпадСния просто Π½Π΅ создаСм Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… списков.

БобствСнно, Π²ΠΎΡ‚ ΠΎΠ½Π°, вся Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°:

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ курс ΠΏΠΎ вСрсткС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля!

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ соврСмСнныС сайты Π½Π° HTML5 ΠΈ CSS3

Π£Π·Π½Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

<nav id = «nav»> <ul> <li><a href = «#»>ΠŸΡƒΠ½ΠΊΡ‚ 1</a> <ul class = «second»> <li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li> <li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li> <li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li> </ul> </li> <li><a href = «#»>ΠŸΡƒΠ½ΠΊΡ‚ 2</a> <ul class = «second»> <li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li> <li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li> <li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li> </ul> </li> <li><a href = «#»>ΠŸΡƒΠ½ΠΊΡ‚ 3</a> <ul class = «second»> <li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li> <li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li> <li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li> </ul> </li> <li><a href = «#»>ΠŸΡƒΠ½ΠΊΡ‚ 4</a> <ul class = «second»> <li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li> <li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li> <li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li> </ul> </li> </ul> </nav>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<nav id = «nav»>

<ul>

<li><a href = «#»>ΠŸΡƒΠ½ΠΊΡ‚ 1</a>

<ul class = «second»>

<li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li>

<li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li>

<li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li>

</ul>

</li>

<li><a href = «#»>ΠŸΡƒΠ½ΠΊΡ‚ 2</a>

<ul class = «second»>

<li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li>

<li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li>

<li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li>

</ul>

</li>

<li><a href = «#»>ΠŸΡƒΠ½ΠΊΡ‚ 3</a>

<ul class = «second»>

<li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li>

<li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li>

<li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li>

</ul>

</li>

<li><a href = «#»>ΠŸΡƒΠ½ΠΊΡ‚ 4</a>

<ul class = «second»>

<li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li>

<li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li>

<li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li>

</ul>

</li>

</ul>

</nav>

Π― понимаю, Ρ‡Ρ‚ΠΎ ΠΎΠ½Π° ΠΎΠ³Ρ€ΠΎΠΌΠ½Π°. Π’ этом-Ρ‚ΠΎ ΠΈ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… списков, Ρ‡Ρ‚ΠΎ трСбуСтся ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°. Но ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°ΠΉΡ‚Π΅ Ρ‚ΠΎΡ‚ Ρ„Π°ΠΊΡ‚, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π΄Π΅Π»Π°Π΅ΠΌ 4 основных ΠΏΡƒΠ½ΠΊΡ‚Π° ΠΈ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню.

БобствСнно, я Π·Π°Π΄Π°Π» всСй Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ nav, Π° всСм Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΌ спискам – стилСвой класс second, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΌΠΈ.

ΠžΡ‚Π»ΠΈΡ‡Π½ΠΎ, Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° Ρƒ нас Π³ΠΎΡ‚ΠΎΠ²Π°, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π½Π° Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

Π”Π° ΡƒΠΆ, выглядит уТасно. Но сСйчас ΠΌΡ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΠΌ Π² Ρ€Π°Π±ΠΎΡ‚Ρƒ css ΠΈ ΡƒΠΆΠ΅ Ρ‡Π΅Ρ€Π΅Π· нСсколько ΠΌΠΈΠ½ΡƒΡ‚ наша навигация прСобразится. Π”Π°Π²Π°ΠΉΡ‚Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ.

ПишСм css-стили

ΠŸΠ΅Ρ€Π²ΠΎΠ΅, Ρ‡Ρ‚ΠΎ я сдСлаю, это ΡΠ±Ρ€ΠΎΡˆΡƒ всС отступы ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для всСх элСмСнтов. Они Π½Π°ΠΌ Π±ΡƒΠ΄ΡƒΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΌΠ΅ΡˆΠ°Ρ‚ΡŒ, Π»ΡƒΡ‡ΡˆΠ΅ Π·Π°Π΄Π°Π΄ΠΈΠΌ ΠΏΠΎΡ‚ΠΎΠΌ отступы сами, Π³Π΄Π΅ это понадобится.

*{ margin: 0; padding: 0; }

*{

margin: 0;

padding: 0;

}

Π”Π°Π»Π΅Π΅ я ΠΏΡ€ΠΎΠΏΠΈΡˆΡƒ ΠΎΠ±Ρ‰ΠΈΠ΅ стили для самого мСню, Π° Ρ‚Π°ΠΊΠΆΠ΅ для списков, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ Ρƒ Π½ΠΈΡ… ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹.

#nav{ height: 70px; } #nav ul{ list-style: none; }

#nav{

height: 70px;

}

#nav ul{

list-style: none;

}

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ, собствСнно, Ρ€Π΅ΡˆΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊΠΈΠΌ Π±ΡƒΠ΄Π΅Ρ‚ нашС мСню. Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΈΠ»ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ? Π― ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽ сначала ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΈ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ всС Π½Π° Π΅Π³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅. Для этого Π½ΡƒΠΆΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅ стили:

#nav > ul > li{ float: left; width: 180px; position: relative; }

#nav > ul > li{

float: left;

width: 180px;

position: relative;

}

Π—Π°ΠΌΠ΅Ρ‚ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π·Π½Π°ΠΊΠ° > ΠΌΡ‹ обращаСмся ΠΊ ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌ списка, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ нСпосрСдствСнно Π²Π»ΠΎΠΆΠ΅Π½Ρ‹ Π² ul, Π° Ρ‚ΠΎΡ‚ нСпосрСдствСнно Π²Π»ΠΎΠΆΠ΅Π½ Π² nav. Π­Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½ΠΎ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ позволяСт Π½Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ ΠΊ ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… списков. Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΠΎ ΠΌΠΎΠ΅ΠΉ Π·Π°Π΄ΡƒΠΌΠΊΠ΅ Π² Π³Π»Π°Π²Π½ΠΎΠΌ спискС ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎ, Π° Π²ΠΎ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… – Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ.

Но Π²Ρ‹, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠΎ-Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ, Π² согласии со своСй Π·Π°Π΄ΡƒΠΌΠΊΠΎΠΉ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ всС ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ Π±Ρ‹Π»ΠΈ Π² ΠΎΠ΄Π½Ρƒ строчку.

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

Для Ρ‡Π΅Π³ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅? Оно Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΡ‚ΠΎΠΌ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ списки. Если Π²Ρ‹ ΠΈΠ·ΡƒΡ‡Π°Π»ΠΈ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² css, Ρ‚ΠΎ навСрняка Π·Π½Π°Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ Ссли Π·Π°Π΄Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊΡƒ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅, Ρ‚ΠΎ всС элСмСнты Π² Π½Π΅ΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΈΠΌΠ΅Π½Π½ΠΎ этого Π±Π»ΠΎΠΊΠ°, Π° Π½Π΅ всСго ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.

Π’Π΅ΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½Π΅ΠΌ, Π²ΠΎΡ‚ Ρ‡Ρ‚ΠΎ Ρƒ нас ΡƒΠΆΠ΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ:

По этому ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Ρƒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΆΠ΅ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ сСбС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½Ρ‹ΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚. ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π½Π°ΠΌ Π΅Ρ‰Π΅ прСдстоит красиво ΠΎΡ„ΠΎΡ€ΠΌΠΈΡ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π³Π»Π°Π·Π° Π½Π΅ умоляли ΠΎ ΠΏΠΎΡ‰Π°Π΄Π΅ ΠΏΡ€ΠΈ просмотрС Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.

Π”Π°Π»Π΅Π΅ ΠΌΡ‹ с Π²Π°ΠΌΠΈ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΈΠΌ внСшний Π²ΠΈΠ΄ нашСго мСню. Π’ΠΎΡ‚ Ρ‚Π°ΠΊΠΈΠ΅ стили для этого я прописал ссылкам:

#nav li a{ display: block; background: #90DA93; border: 1px solid #060A13; color: #060A13; padding: 8px; text-align: center; text-decoration: none; } #nav li a:hover{ background: #2F718E; }

#nav li a{

display: block;

background: #90DA93;

border: 1px solid #060A13;

color: #060A13;

padding: 8px;

text-align: center;

text-decoration: none;

}

#nav li a:hover{

background: #2F718E;

}

Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, сами ссылки Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΡ‡Π½Ρ‹ΠΌΠΈ. Π­Ρ‚ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы ΠΈ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΠ»ΠΈΡΡŒ всС свойства. Π”Π°Π»Π΅Π΅ ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽ Ρ†Π²Π΅Ρ‚Π° Ρ„ΠΎΠ½Π°, тСкста, ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Ρ€Π°ΠΌΠΊΠΈ, Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы ΠΈ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ. НаконСц, ΠΎΡ‚ΠΌΠ΅Π½ΡΡŽ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ссылок.

ВсС эти ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ это сдСлал я. Π¦Π²Π΅Ρ‚Π° Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΠΎ, Ρ€Π°ΠΌΠΊΡƒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΡƒΡŽ ΠΈΠ»ΠΈ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, отступы ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Ρ‚ΡŒ ΠΈΠ»ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Ρ‚ΡŒ.

Π—Π°ΠΌΠ΅Ρ‚ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π² Π΄Π°Π½Π½ΠΎΠΌ случаС ΠΌΡ‹ Π½Π΅ использовали Π·Π½Π°ΠΊ >, поэтому ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Π΅ ΠΏΡ€Π°Π²ΠΈΠ»Π° примСнятся ΠΊΠΎ всСм ссылкам, Π² Ρ‚ΠΎΠΌ числС ΠΈ Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ находятся Π²ΠΎ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… ΠΏΡƒΠ½ΠΊΡ‚Π°Ρ…. Π˜Ρ‚Π°ΠΊ, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΈΠΌΠ΅Π΅ΠΌ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

ΠžΡ‚Π»ΠΈΡ‡Π½ΠΎ, Π½ΠΎ вСдь Π²Ρ‹ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π²ΠΈΠ΄Π½ΠΎ, ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΡƒΠΆΠ½Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚. Π‘Π΅Π· этого нашС мСню ΠΏΠΎΡ…ΠΎΠΆΠ΅ Π½Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ. Π§Ρ‚ΠΎ ΠΆ, самоС врСмя ΡΠΏΡ€ΡΡ‚Π°Ρ‚ΡŒ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹.

#nav li .second{ display: none; position: absolute; top: 100%; }

#nav li .second{

display: none;

position: absolute;

top: 100%;

}

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ курс ΠΏΠΎ вСрсткС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля!

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ соврСмСнныС сайты Π½Π° HTML5 ΠΈ CSS3

Π£Π·Π½Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, скрываСм ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ списки. Π’ΠΎ-Π²Ρ‚ΠΎΡ€Ρ‹Ρ…, Π·Π°Π΄Π°Π΅ΠΌ ΠΈΠΌ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρƒ top: 100%. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Ρ‡Π΅Ρ‚ΠΊΠΎ ΠΏΠΎΠ΄ основным ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ ΠΏΡ€ΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ‚, Ρ‡Π΅Ρ‚ΠΊΠΎ ΠΏΠΎΠ΄ 100% высоты этого ΠΏΡƒΠ½ΠΊΡ‚Π°.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ Π½Π° Π²Π΅Π±-страницС Ρ‚ΠΎΠ»ΡŒΠΊΠΎ основноС мСню, Ρ‡Ρ‚ΠΎ Π½Π°ΠΌ ΠΈ Π½ΡƒΠΆΠ½ΠΎ.

Π Π΅Π°Π»ΠΈΠ·ΡƒΠ΅ΠΌ Π²Ρ‹ΠΏΠ°Π΄Π΅Π½ΠΈΠ΅

Нам ΠΎΡΡ‚Π°Π»ΠΎΡΡŒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ самоС Π³Π»Π°Π²Π½ΠΎΠ΅ – Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ само Π²Ρ‹ΠΏΠ°Π΄Π΅Π½ΠΈΠ΅. Π’ этом Π½Π΅Ρ‚ Π½ΠΈΡ‡Π΅Π³ΠΎ слоТного, смотритС Π½Π° этот ΠΊΠΎΠ΄:

#nav li:hover .second{ display: block; }

#nav li:hover .second{

display: block;

}

Π­Ρ‚ΠΎΡ‚ ΠΊΠΎΠ΄ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π±Π΅Π·ΡƒΠΊΠΎΡ€ΠΈΠ·Π½Π΅Π½Π½ΠΎ. ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΏΡƒΠ½ΠΊΡ‚ основного мСню, Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список Π±ΡƒΠ΄Π΅Ρ‚ ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒΡΡ Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ. ΠŸΡ€ΠΈΡ‡Π΅ΠΌ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎΡ‚ список, Ρ‡Ρ‚ΠΎ Π²Π»ΠΎΠΆΠ΅Π½ Π² ΠΏΡƒΠ½ΠΊΡ‚, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ наводится курсор.

Π•ΡΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½Π° Π½Π΅Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° – ΡˆΠΈΡ€ΠΈΠ½Π° Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² Π½Π΅ соотвСтствуСт ΡˆΠΈΡ€ΠΈΠ½Π΅ основных. Но это ΠΎΡ‡Π΅Π½ΡŒ Π»Π΅Π³ΠΊΠΎ Ρ€Π΅ΡˆΠ°Π΅Ρ‚ΡΡ дописываниСм ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… стилСй:

#nav li li{ width: 180px; }

#nav li li{

width: 180px;

}

ВсС, ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Ρ€Π΅ΡˆΠ΅Π½Π°:

ВсС Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ. ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° основной ΠΏΡƒΠ½ΠΊΡ‚ появляСтся ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π΅ Π΅ΠΌΡƒ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню. Если ΡƒΠ±Ρ€Π°Ρ‚ΡŒ курсор Π² сторону – ΠΎΠ½ΠΎ ΠΏΡ€ΠΎΠΏΠ°Π΄Π°Π΅Ρ‚. Если пСрСвСсти курсор Π½Π° сами Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹, Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎ Π½ΠΈΠΌ ΠΊΠ»ΠΈΠΊΠ½ΡƒΡ‚ΡŒ ΠΈ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π² Π½ΡƒΠΆΠ½Ρ‹ΠΉ Ρ€Π°Π·Π΄Π΅Π» сайта. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΌΡ‹ сдСлали с Π²Π°ΠΌΠΈ ΠΎΡ‡Π΅Π½ΡŒ простоС ΠΈ Π»Π΅Π³ΠΊΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ Π±Π΅Π· скриптов.

ΠŸΠ΅Ρ€Π΅Π΄Π΅Π»Ρ‹Π²Π°Π΅ΠΌ мСню Π² Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅

Ну Ρ…ΠΎΡ€ΠΎΡˆΠΎ, с Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠ΅ΠΉ ΠΌΡ‹ с Π²Π°ΠΌΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ, Π½ΠΎ вСдь ΠΏΠΎΠΌΠΈΠΌΠΎ Π½Π΅Π΅ Π½Π° сайтах ΠΎΡ‡Π΅Π½ΡŒ часто встрСчаСтся ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Π°Ρ ΠΈ ΠΎΠ½Π° Ρ‚ΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅ΠΉ. На самом Π΄Π΅Π»Π΅ ΠΏΠ΅Ρ€Π΅Π΄Π΅Π»Π°Ρ‚ΡŒ мСню с Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π½Π° Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΎΡ‡Π΅Π½ΡŒ Π»Π΅Π³ΠΊΠΎ, Π½Π°ΠΌ придСтся ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π±ΡƒΠΊΠ²Π°Π»ΡŒΠ½ΠΎ ΠΏΠ°Ρ€Ρƒ строк ΠΊΠΎΠ΄Π°.

Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ float:left Ρƒ Π³Π»Π°Π²Π½Ρ‹Ρ… ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² списка. ИмСнно это свойство способствуСт Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ наши ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π² ΠΎΠ΄Π½Ρƒ строку, Π½ΠΎ Π·Π°Ρ‡Π΅ΠΌ Π½Π°ΠΌ это, Ссли навигация Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ?

Π’Π΅ΠΏΠ΅Ρ€ΡŒ остаСтся ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»Π° для сСлСктора #nav li .second, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ для Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… списков, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ, ΠΈΡ… Π½ΡƒΠΆΠ½ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎ-Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π’ΠΎΡ‚ Ρ‚Π°ΠΊ:

#nav li .second{ display: none; position: absolute; left: 100%; top: 0; }

#nav li .second{

display: none;

position: absolute;

left: 100%;

top: 0;

}

Π’ΠΎ Π΅ΡΡ‚ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ Π΄Π²Π΅ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ вмСсто ΠΎΠ΄Π½ΠΎΠΉ. Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, Π² случаС с Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠ΅ΠΉ я Π³ΠΎΠ²ΠΎΡ€ΠΈΠ», Ρ‡Ρ‚ΠΎ ΠΏΠΎ Π·Π°Π΄ΡƒΠΌΠΊΠ΅ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… мСню Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ ΠΏΠΎΠ΄ основными ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌΠΈ. Π’ случаС с Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ мСню это Π½Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ – ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ сбоку.

ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ измСняСм top: 100% Π½Π° left: 100%. ΠšΡ€ΠΎΠΌΠ΅ этого, ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π° top Π½Π°ΠΌ Ρ‚ΠΎΠΆΠ΅ Π½ΡƒΠΆΠ½Π°. Π—Π°Π΄Π°Π΅ΠΌ Π΅ΠΉ 0, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ΅ мСню Π½Π°Ρ…ΠΎΠ΄ΠΈΠ»ΠΎΡΡŒ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅ с ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‚.

ВсС, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ всС Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π½Π°Π΄ΠΎ. ΠœΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, я Π½Π΅ Π²Ρ€Π°Π», ΠΊΠΎΠ³Π΄Π° Π³ΠΎΠ²ΠΎΡ€ΠΈΠ», Ρ‡Ρ‚ΠΎ придСтся ΠΏΠ΅Ρ€Π΅ΠΏΠΈΡΠ°Ρ‚ΡŒ всСго нСсколько строк ΠΊΠΎΠ΄Π°.

Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ мСню с нСсколькими уровнями

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

<li><a href = «#»>ΠŸΡƒΠ½ΠΊΡ‚ 4</a> <ul class = «second»> <li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a> <ul class = «third»> <li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Π°</a></li> <li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Π°</a></li> </ul> </li> <li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li> <li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li> </ul> </li>

<li><a href = «#»>ΠŸΡƒΠ½ΠΊΡ‚ 4</a>

<ul class = «second»>

<li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a>

<ul class = «third»>

<li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Π°</a></li>

<li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Π°</a></li>

</ul>

</li>

<li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li>

<li><a href = «#»>ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li>

</ul>

</li>

ΠžΠΏΡΡ‚ΡŒ ΠΆΠ΅, Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° прСвращаСтся Π² Π³Ρ€ΠΎΠΌΠΎΠ·Π΄ΠΊΡƒΡŽ ΠΈ Π½Π΅ΠΏΠΎΠ½ΡΡ‚Π½ΡƒΡŽ, Π½ΠΎ Ссли Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ Π²Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ, Ρ‚ΠΎ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅, Π² Ρ‡Π΅ΠΌ здСсь вся ΡΡƒΡ‚ΡŒ. Π”Π°Π»Π΅Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅ΠΌ с css:

#nav li li .third{ display: none; position: absolute; left: 100%; top: 0; } #nav li li:hover .third{ display: block; }

#nav li li .third{

display: none;

position: absolute;

left: 100%;

top: 0;

}

#nav li li:hover .third{

display: block;

}

БоотвСтствСнно, ΡƒΠ±ΠΈΡ€Π°Π΅ΠΌ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ΅ мСню Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅Π³ΠΎ уровня с экрана, Π΄Π΅Π»Π°Π΅ΠΌ Π΅ΠΌΡƒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ прописываСм Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹, ΠΊΠ°ΠΊ Π² случаС с Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ мСню. Π’ΠΎ Π΅ΡΡ‚ΡŒ Π΄Π°Π½Π½Ρ‹ΠΉ список Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ Ρ‡Π΅Ρ‚Π²Π΅Ρ€Ρ‚ΠΎΠ³ΠΎ ΠΏΡƒΠ½ΠΊΡ‚Π° ΠΈ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ сбоку.

Π’Π½ΠΈΠΌΠ°Π½ΠΈΠ΅! Π§Ρ‚ΠΎΠ±Ρ‹ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΎ для списка third, Ρƒ списков second Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Π·Π°Π΄Π°Π½ΠΎ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. Но ΠΊΠ°ΠΊ, Ссли ΠΌΡ‹ ΠΆΠ΅ Π·Π°Π΄Π°Π²Π°Π»ΠΈ для Π½Π΅Π³ΠΎ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅?

Π§Ρ‚ΠΎ ΠΆ, Ссли Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ мСню Ρ‚Ρ€Π΅Ρ… ΡƒΡ€ΠΎΠ²Π½Π΅ΠΉ, Ρ‚ΠΎ придСтся ΡƒΠ±ΠΈΡ€Π°Ρ‚ΡŒ Ρƒ second Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅, Π° Ρƒ Π³Π»Π°Π²Π½Ρ‹Ρ… ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² ΡƒΠ±ΠΈΡ€Π°Ρ‚ΡŒ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅. Вся Ρ„ΠΈΡˆΠΊΠ° Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π² случаС с Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ мСню это Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ повлияСт Π½Π° ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ – ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ ΠΏΠΎΠ΄ Π³Π»Π°Π²Π½Ρ‹ΠΌ ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠΌ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π³ΠΎ.

Π—Π°Ρ‚ΠΎ послС этих ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π²Ρ‹ смоТСтС Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ мСню для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Π°. ΠžΠΏΡΡ‚ΡŒ ΠΆΠ΅, Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ сбоку, это всСго лишь моя идСя, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΏΠΎΠ΄ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠΌ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½Π΅Π³ΠΎ. Π’ΠΎΠ³Π΄Π° Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½ΠΈΠΊΠ°ΠΊΠΎΠ³ΠΎ позиционирования Π½Π΅ понадобится!

Π’ ΠΎΠ±Ρ‰Π΅ΠΌ, ΠΈΡ‚ΠΎΠ³ Ρ‚Π°ΠΊΠΎΠ²:

ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΏΡƒΠ½ΠΊΡ‚ 4 появляСтся ΠΏΠ΅Ρ€Π²ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню, ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ появляСтся ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ΅ мСню для Π½Π΅Π³ΠΎ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ располоТСно сбоку. Π£ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² Ρ‚Π°ΠΊΠΎΠ΅ мСню Π½Π΅ отобраТаСтся, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΌΡ‹ Π½Π΅ создавали Π΅Π³ΠΎ Π² html-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅.

Π― Π΄ΡƒΠΌΠ°ΡŽ, Π²Π°ΠΌ понятно общая концСпция. Если Π²Ρ‹ смогли Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ, Ρ‚ΠΎ ΡƒΠΆΠ΅ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ смоТСтС ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½ΡƒΠΆΠ½ΠΎΠ΅ Π²Π°ΠΌ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню ΠΈ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹, Ссли это Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π² Ρ€Π°ΠΌΠΊΠ°Ρ… css.

Π˜Ρ‚ΠΎΠ³

Π’ ΠΎΠ±Ρ‰Π΅ΠΌ, Π²Π°ΠΌ Π³Π»Π°Π²Π½ΠΎΠ΅ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ΅ мСню, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΊΠ°ΠΊ нСпосрСдствСнно рСализовываСтся Π²Ρ‹ΠΏΠ°Π΄Π΅Π½ΠΈΠ΅. НадСюсь, ΠΈΠ· этой ΡΡ‚Π°Ρ‚ΡŒΠΈ Π²Ρ‹ это поняли ΠΈ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π° чистом css смоТСтС Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΡƒΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ. ΠœΡ‹ с Π²Π°ΠΌΠΈ ΡƒΠ·Π½Π°Π»ΠΈ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню.

Много Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΎΡ‡Π΅Π½ΡŒ интСрСсных возмоТностСй css Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ·Π½Π°Ρ‚ΡŒ Π² нашСм ΠΏΡ€Π΅ΠΌΠΈΡƒΠΌ-курсС ΠΏΠΎ Π½ΠΎΠ²Ρ‹ΠΌ Ρ„ΠΈΡˆΠΊΠ°ΠΌ css3. Π’Π°ΠΌ Π²Ρ‹ Π½Π°ΡƒΡ‡ΠΈΡ‚Π΅ΡΡŒ Π΄Π΅Π»Π°Ρ‚ΡŒ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹, Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Π½ΠΎΠ²Ρ‹ΠΌΠΈ сСлСкторами, ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ‚Π΅Π½ΠΈ ΠΈ Ρ‚.Π΄. Если Π²Π°ΠΌ нравится css, Ρ‚ΠΎ Ρ‚ΠΎΡ‡Π½ΠΎ понравится эта сСрия ΡƒΡ€ΠΎΠΊΠΎΠ². Ну Π° я Π½Π° этом ΠΏΡ€ΠΎΡ‰Π°ΡŽΡΡŒ с Π²Π°ΠΌΠΈ.

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ курс ΠΏΠΎ вСрсткС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля!

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ соврСмСнныС сайты Π½Π° HTML5 ΠΈ CSS3

Π£Π·Π½Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

PSD to HTML

ВСрстка сайта Π½Π° HTML5 ΠΈ CSS3 с нуля

Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ

CSS мСню. Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню. Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ CSS мСню. Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ CSS мСню.

ЗдравствуйтС, ΡƒΠ²Π°ΠΆΠ°Π΅ΠΌΡ‹Π΅ посСтитСли ΠΌΠΎΠ΅Π³ΠΎ скромного Π±Π»ΠΎΠ³Π° для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… Π²Π΅Π±Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΈ web мастСров ZametkiNaPolyah.ru. Π― Ρ€Π΅ΡˆΠΈΠ» ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½ΠΎΠ²ΡƒΡŽ Ρ€ΡƒΠ±Ρ€ΠΈΠΊΡƒ Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΈ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ сайтов, Π² этой Ρ€ΡƒΠ±Ρ€ΠΈΠΊΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΌΠ½ΠΎΠ³ΠΎ вкусного ΠΈ интСрСсного. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ, здСсь я Π±ΡƒΠ΄Ρƒ ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΎ Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ…. Π’Π΅ΠΌΠ° сСгодняшнСй ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΈΒ β€” созданиС CSS мСню, которая находится Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ CSS мСню.

Π›ΡŽΠ±ΠΎΠ΅ CSS мСню Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΎΡ‚Π²Π΅Ρ‡Π°Ρ‚ΡŒ нСскольким трСбованиям: CSS мСню Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌ, ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½Ρ‹ΠΌ, доступным для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. Π§Ρ‚ΠΎΠ±Ρ‹ мСню сайта Π±Ρ‹Π»ΠΎ ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½Ρ‹ΠΌ ΠΈ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌ Π΅Π³ΠΎ слСдуСт Π΄Π΅Π»Π°Ρ‚ΡŒ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΌ. ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ CSS мСню Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² старых Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ IE6. Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню ΡƒΠ΄ΠΎΠ±Π½ΠΎ Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Π½Π΅ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ ΠΌΠ½ΠΎΠ³ΠΎ мСста Π½Π° Π²Π΅Π±-страницС. Π’ Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ JavaScript ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° JQueryΒ β€” Π° это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Π±ΡƒΠ΄Π΅Ρ‚ доступно для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, Ρƒ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π² настройках Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹ скрипты.

И Ρ‚Π°ΠΊ, сСгодня ΠΌΡ‹ создадим Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΡƒΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ ΠΏΠΎ сайту ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΡƒΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ, ΠΏΡ€ΠΈ этом ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ HTML ΠΈ CSS.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ CSS мСню. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню. Π¨Π°Π³ 1Β β€” создаСм Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ HTML мСню.

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ:

Для Π½Π°Ρ‡Π°Π»Π° ΠΌΡ‹ создаСм ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML список ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Ρ‚Π΅Π³Π° <ul> ΠΈ Ρ‚Π΅Π³Π° <li>:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ CSS мСню</title> </head> <body> <span><span><> </span></span><ul> <li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li> <li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡƒΠ½ΠΊΡ‚ <ul> <li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</li> <li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</li> </ul> </li> <li>Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚ <ul> <li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</li> <li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</li> <li>Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</li> </ul> </li> <li>Π§Π΅Ρ‚Π²Π΅Ρ€Ρ‚Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li> </ul> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

<title>БозданиС CSS мСню</title>

</head>

<body>

<span><span><>

</span></span><ul>

<li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>

<li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡƒΠ½ΠΊΡ‚

<ul>

<li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</li>

<li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</li>

</ul>

</li>

<li>Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚

<ul>

<li>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</li>

<li>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</li>

<li>Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</li>

</ul>

</li>

<li>Π§Π΅Ρ‚Π²Π΅Ρ€Ρ‚Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚</li>

</ul>

</body>

Β 

</html>

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Ρ‚ΠΈΠΏΠ° Ρ‚Π°ΠΊΠΎΠ³ΠΎ списка:

  • ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚
  • Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡƒΠ½ΠΊΡ‚
    • ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚
    • Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚
  • Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚
    • ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚
    • Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚
    • Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚
  • Π§Π΅Ρ‚Π²Π΅Ρ€Ρ‚Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, это Π΅Ρ‰Π΅ Π½Π΅ мСню ΠΈ Π΄Π°ΠΆΠ΅ Π½Π΅ навигация, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π½ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² HTML списка Π½Π΅ являСтся ссылкой. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚ нашСго HTML списка ссылкой. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρƒ нас получится Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ HTML мСню, Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй (css) ΠΌΡ‹ Π΅Ρ‰Π΅ ΠΏΠΎΠΊΠ° Π½Π΅ Π±ΡƒΠ΄Π΅ΠΌ Ρ‚Ρ€ΠΎΠ³Π°Ρ‚ΡŒ ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ HTML списка стали ссылками, содСрТимоС ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ элСмСнта <li> Π²Π½ΡƒΡ‚Ρ€ΡŒ Ρ‚Π΅Π³Π° <a>:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ CSS мСню</title> </head> <body> div> <ul> <li><a href=»#»>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚</a></li> <li><a href=»#»>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡƒΠ½ΠΊΡ‚</a> <ul> <li><a href=»#»>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ </a></li> <li><a href=»#»>Π’Ρ‚ΠΎΡ€ΠΎΠΉ </a></li> <li><a href=»#»>Π’Ρ€Π΅Ρ‚ΠΈΠΉ </a></li> </ul> </li> <li><a href=»#»>Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚</a> <ul> <li><a href=»#»>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li> <li><a href=»#»>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li> </ul> </li> <li><a href=»#»>Π§Π΅Ρ‚Π²Π΅Ρ€Ρ‚Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚</a></li> </ul> <div> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

<title>БозданиС CSS мСню</title>

</head>

<body>

div>

<ul>

<li><a href=»#»>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚</a></li>

<li><a href=»#»>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡƒΠ½ΠΊΡ‚</a>

<ul>

<li><a href=»#»>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ </a></li>

<li><a href=»#»>Π’Ρ‚ΠΎΡ€ΠΎΠΉ </a></li>

<li><a href=»#»>Π’Ρ€Π΅Ρ‚ΠΈΠΉ </a></li>

</ul>

</li>

<li><a href=»#»>Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚</a>

<ul>

<li><a href=»#»>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li>

<li><a href=»#»>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li>

</ul>

</li>

<li><a href=»#»>Π§Π΅Ρ‚Π²Π΅Ρ€Ρ‚Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚</a></li>

</ul>

<div>

</body>

Β 

</html>

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ HTML мСню. Π£ Ρ‚Π΅Π³Π° <a> Π΅ΡΡ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ href, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ слСдуСт ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ адрСс страницы, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ вСсти ссылка, Ρƒ мСня Π½Π΅Ρ‚ нСобходимости этого Π΄Π΅Π»Π°Ρ‚ΡŒ, поэтому Π² качСствС адрСса я ΡƒΠΊΠ°Π·Π°Π» символ # ΠΈΠ»ΠΈ Π·Π°Π±ΠΎΠΉ. Бсылки, Ρƒ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π² качСствС значСния Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° href ΡƒΠΊΠ°Π·Π°Π½ #, Π½ΠΈΠΊΡƒΠ΄Π° Π½Π΅ Π²Π΅Π΄ΡƒΡ‚. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅: Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ HTML мСню я помСстил Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ <div>, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π² спСцификации HTML 4 Π΅ΡΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ: Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнта <body> ΠΌΠΎΠ³ΡƒΡ‚ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π±Π»ΠΎΡ‡Π½Ρ‹Π΅ элСмСнты ΠΈ элСмСнты <ins> ΠΈ <del>. Π£ Ρ‚Π΅Π³Π° <div> Π΅ΡΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ id со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ Β«blockΒ». Π£ ΠΊΠΎΡ€Π½Π΅Π²ΠΎΠ³ΠΎ Ρ‚Π΅Π³Π° <ul> Π΅ΡΡ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ id со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ Β«hnavΒ», этот Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ потрСбуСтся Π½Π°ΠΌ для создания Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ CSS мСню.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ CSS мСню. Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню. Π¨Π°Π³ 2Β β€” создаСм Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ CSS мСню.

Π”Π°Π»Π΅Π΅ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ стили CSS для нашСго Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ мСню. Для Π½Π°Ρ‡Π°Π»Π°, Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π·Π°Π΄Π°Π΄ΠΈΠΌ ΡΡ‚ΠΈΠ»ΡŒ для ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° <ul> со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ hnav Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° id, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΎΠ±Ρ‰ΠΈΠΉ ΡΡ‚ΠΈΠ»ΡŒ для нашСго Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню:

#hnav { list-style: none; margin: 0; padding: 0; font-size: 1.2em; float: right; position: relative }

#hnav {

list-style: none;

margin: 0;

padding: 0;

font-size: 1.2em;

float: right;

position: relative

Β 

}

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

Бвойство margin Π΄Π΅Π»Π°Π΅Ρ‚ Π½ΡƒΠ»Π΅Π²Ρ‹ΠΌ отступ ΠΎΡ‚ края элСмСнта ul. Бвойство paddin ΡƒΠ±ΠΈΡ€Π°Π΅Ρ‚ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы HTML элСмСнта ul. Бвойство font-size Π·Π°Π΄Π°Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ тСкста ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² нашСго CSS мСню. Бвойство float позволяСт Π²Ρ‹Ρ€Π°Π²Π½ΡΡ‚ΡŒ CSS мСню, Π² нашСм случаС ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ. Бвойство position со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ relative ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ ul ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΅Π³ΠΎ исходного мСста.

ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΌΡ‹ Π·Π°Π΄Π°Π»ΠΈ ΠΎΠ±Ρ‰ΠΈΠΉ ΡΡ‚ΠΈΠ»ΡŒ для нашСго Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню, ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ стили для всСх Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΡ… ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ:

#hnav li { float: left; position: relative; }

#hnav li {

Β 

float: left;

Β 

position: relative;

Β 

}

Для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ элСмСнта li, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ находятся Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ul ΠΌΡ‹ Π·Π°Π΄Π°Π΅ΠΌ Π΄Π²Π° свойства: float со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ left (Ρ‚Π΅ΠΌ самым ΠΌΡ‹ добиваСмся Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ нашС CSS мСню стало Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ) ΠΈ ΠΎΠΏΡΡ‚ΡŒ ΠΆΠ΅, Π·Π°Π΄Π°Π΅ΠΌ свойство position со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ relative, Ρ‡Ρ‚ΠΎΠ±Ρ‹ элСмСнты заняли своС мСсто.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π·Π°Π΄Π°Ρ‚ΡŒ стили, для содСрТимого ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ² li, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ стили для ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ CSS мСню:

#hnav li a{ float: left; display: block; padding: 4px; text-decoration: none; color: #666; text-transform: uppercase; margin-right: 10px; }

#hnav li a{

float: left;

display: block;

padding: 4px;

text-decoration: none;

color: #666;

text-transform: uppercase;

margin-right: 10px;

}

Бвойство display ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ block, это Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ Π½Π°ΠΌ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ нашСго CSS мСню Π±ΡƒΠ΄ΡƒΡ‚ вСсти сСбя ΠΊΠ°ΠΊ Π±Π»ΠΎΡ‡Π½Ρ‹Π΅ (Π² Π΄Π°Π½Π½ΠΎΠΌ случаС ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ <a>, Ρ‚Π΅Π³ <a> сам ΠΏΠΎ сСбС строчный элСмСнт). Бвойство padding устанавливаСт Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌΠΈ мСню, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ‚Π΅ Π½Π΅ Π½Π°ΠΊΠ»Π°Π΄Ρ‹Π²Π°Π»ΠΈΡΡŒ Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π°. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ none свойства text-decoration позволяСт ΡƒΠ±Ρ€Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Ρƒ ссылок(мСню ΠΆΠ΅ ΠΈΠ· ссылок состоит). Бвойство color Π·Π°Π΄Π°Π΅Ρ‚ Ρ†Π²Π΅Ρ‚ тСкста Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° <a>. Бвойство text-transform: uppercase; Π·Π°Π΄Π°Π΅Ρ‚ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ тСкста нашСго CSS мСню, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ, вСсь тСкст Π±ΡƒΠ΄Π΅Ρ‚ написан прописными Π±ΡƒΠΊΠ²Π°ΠΌΠΈ.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ Ρ‚ΠΎ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄ΡƒΡ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π° Π½ΠΈΡ… курсора ΠΌΡ‹ΡˆΠΊΠΈ:

#hnav li:hover a, #hnav li a:hover { background: #999; color: #fff; }

#hnav li:hover a,

#hnav li a:hover

{

background: #999;

color: #fff;

}

Бвойство color измСняСт Ρ†Π²Π΅Ρ‚ тСкста ΠΏΡƒΠ½ΠΊΡ‚Π° мСню ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π° Π½Π΅Π³ΠΎ курсора ΠΌΡ‹ΡˆΠΈ. Бвойство background Π·Π°Π΄Π°Π΅Ρ‚ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΏΡƒΠ½ΠΊΡ‚Π° CSS мСню ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ курсора Π½Π° ΠΏΡƒΠ½ΠΊΡ‚.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Β«ΡΠΏΡ€ΡΡ‚Π°Ρ‚ΡŒΒ» Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню:

#hnav ul {display: none;}

#hnav ul {display: none;}

ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΌΡ‹ «спрятали» ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню, Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ эти ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ Π²Ρ‹ΠΏΠ°Π΄Π°Π»ΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ курсора:

#hnav li:hover ul {display: block;} #hnav ul { float: none; position: absolute; list-style: none; margin: 0; padding: 0; top: 1.8em; left: 0; } #hnav ul li { float: none; clear: none; margin: 0; padding: 0; width: auto; color: #999; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

#hnav li:hover ul {display: block;}

Β 

#hnav ul

{

float: none;

position: absolute;

list-style: none;

margin: 0;

padding: 0;

top: 1.8em;

left: 0;

}

Β 

#hnav ul li

{

float: none;

clear: none;

margin: 0;

padding: 0;

width: auto;

color: #999;

}

Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС ΠΌΡ‹ добились Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‚ ΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡ„ΠΎΡ€ΠΌΠΈΠ»ΠΈ нашС мСню, сдСлали Π΅Π³ΠΎ Π±ΠΎΠ»Π΅Π΅ Ρ‡ΠΈΡ‚Π°Π±Π΅Π»ΡŒΠ½Ρ‹ΠΌ.

ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΌΡ‹ Π·Π°Π΄Π°Π»ΠΈ стили для основных ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню, ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ стили ΠΈ для Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню, Π·Π°Π΄Π°Ρ‚ΡŒ Ρ‚ΠΎ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄ΡƒΡ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π° Π½ΠΈΡ… курсора ΠΌΡ‹ΡˆΠΈ ΠΈ Ρ‚ΠΎ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄ΡƒΡ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ посСщСнныС ΠΏΡƒΠ½ΠΊΡ‚Ρ‹:

#hnav li:hover ul li a, #hnav ul li a { line-height: 200%; display: block; padding: 0 6px 0 0; float: none; text-transform: lowercase; color: #999; background: none; } #hnav li:hover ul li a:hover, #hnav ul li a:hover { background: none; color: #000; } <span>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

#hnav li:hover ul li a,

#hnav ul li a

{

line-height: 200%;

display: block;

padding: 0 6px 0 0;

float: none;

text-transform: lowercase;

color: #999;

background: none;

}

Β 

#hnav li:hover ul li a:hover,

#hnav ul li a:hover

{

background: none;

color: #000;

}

Β 

<span>

Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, ΠΌΡ‹ создали Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ CSS мСню,Β ΠΏΡ€ΠΈ этом, Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ JavaScript. МоТно ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ созданию Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ CSS мСню.

Π’Π°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ CSS мСню:

Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ CSS мСню. Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ CSS мСню.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ CSS мСню. Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню. Π¨Π°Π³ 3Β β€” создаСм Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ CSS мСню.

ΠŸΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΠΌ ΠΊ созданию Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ CSS мСню. Для Π½Π°Ρ‡Π°Π»Π° создаСм ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML список, Ρ‚ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊΠΎΠΉ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ для Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ CSS мСню</title> </head> <body> div> <ul> <li><a href=»#»>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚</a></li> <li><a href=»#»>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡƒΠ½ΠΊΡ‚</a> <ul> <li><a href=»#»>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ </a></li> <li><a href=»#»>Π’Ρ‚ΠΎΡ€ΠΎΠΉ </a></li> <li><a href=»#»>Π’Ρ€Π΅Ρ‚ΠΈΠΉ </a></li> </ul> </li> <li><a href=»#»>Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚</a> <ul> <li><a href=»#»>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li> <li><a href=»#»>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li> </ul> </li> <li><a href=»#»>Π§Π΅Ρ‚Π²Π΅Ρ€Ρ‚Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚</a></li> </ul> <div> </body> </html> <span>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>

<html>

<head>

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

<title>БозданиС CSS мСню</title>

</head>

<body>

div>

<ul>

<li><a href=»#»>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚</a></li>

<li><a href=»#»>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΡƒΠ½ΠΊΡ‚</a>

<ul>

<li><a href=»#»>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ </a></li>

<li><a href=»#»>Π’Ρ‚ΠΎΡ€ΠΎΠΉ </a></li>

<li><a href=»#»>Π’Ρ€Π΅Ρ‚ΠΈΠΉ </a></li>

</ul>

</li>

<li><a href=»#»>Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡƒΠ½ΠΊΡ‚</a>

<ul>

<li><a href=»#»>ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li>

<li><a href=»#»>Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚</a></li>

</ul>

</li>

<li><a href=»#»>Π§Π΅Ρ‚Π²Π΅Ρ€Ρ‚Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚</a></li>

</ul>

<div>

</body>

Β 

</html>

Β 

<span>

Π Π°Π·Π½ΠΈΡ†Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² ΠΈΠΌΠ΅Π½ΠΈ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π° для ΠΊΠΎΡ€Π½Π΅Π²ΠΎΠ³ΠΎ элСмСнта списка <ul>, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ для Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню Ρƒ мСня находятся Π² ΠΎΠ΄Π½ΠΎΠΌ Ρ„Π°ΠΉΠ»Π΅.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΎΠ±Ρ‰ΠΈΠ΅ стили для отобраТСния CSS мСню:

#vnav { width: 400px; float: left; list-style: none; margin: 0; padding: 0; font-size: 1.2em; }

#vnav {

width: 400px;

float: left;

list-style: none;

margin: 0;

padding: 0;

font-size: 1.2em;

}

ЕдинствСнным ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ΠΌ ΠΎΡ‚ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню являСтся Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π·Π°Π΄Π°Π΅ΠΌ ΡˆΠΈΡ€ΠΈΠ½Ρƒ нашСго мСню, которая Ρ€Π°Π²Π½Π° 400 пиксСлов, ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ свойства width.

Π”Π°Π»Π΅Π΅ Π·Π°Π΄Π°Π΅ΠΌ стили для всСх ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² HTML списка:

#vnav li { clear: both; height: 2em; }

#vnav li

{

clear: both;

height: 2em;

}

Бвойство height Π·Π°Π΄Π°Π΅Ρ‚ высоту элСмСнтов CSS мСню, clear Π·Π°ΠΏΡ€Π΅Ρ‰Π°Π΅Ρ‚ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ Π²ΠΎΠΊΡ€ΡƒΠ³ HTML элСмСнта, Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ both Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π½ΠΈ с Π»Π΅Π²ΠΎΠΉ, Π½ΠΈ с ΠΏΡ€Π°Π²ΠΎΠΉ стороны нашС Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ мСню Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ обтСкания.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ Π·Π°Π΄Π°Π΅ΠΌ Ρ‚ΠΎ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄ΡƒΡ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ этот ΡΡ‚ΠΈΠ»ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ ΠΈ для ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ², Π½ΠΎ Π² дальнСйшСм для Π½ΠΈΡ… ΠΌΡ‹ Π·Π°Π΄Π°Π΄ΠΈΠΌ свой ΡΡ‚ΠΈΠ»ΡŒ отобраТСния:

#vnav li a { float: left; display: block; padding: 4px; text-decoration: none; color: #666; text-transform: uppercase; margin-bottom: 5px; margin-right: 10px; }

#vnav li a

{

float: left;

display: block;

padding: 4px;

text-decoration: none;

color: #666;

text-transform: uppercase;

margin-bottom: 5px;

margin-right: 10px;

}

Β Π’ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ΅, ΡΡ‚ΠΈΠ»ΡŒ отобраТСния ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ CSS мСню Π½Π΅ отличаСтся ΠΎΡ‚ стиля для Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ Π·Π°Π΄Π°Π΅ΠΌ Ρ‚ΠΎ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ элСмСнты Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ CSS мСню ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π° Π½ΠΈΡ… курсора ΠΌΡ‹ΡˆΠΈ:

#vnav li:hover a, #vnav li a:hover { background: #999; color: #fff; }

#vnav li:hover a,

#vnav li a:hover

{

background: #999;

color: #fff;

}

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ CSS мСню Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌΠΈ:

#vnav ul {display: none;}

#vnav ul {display: none;}

ПослС Ρ‡Π΅Π³ΠΎ слСдуСт Π·Π°Π΄Π°Ρ‚ΡŒ CSS ΠΏΡ€Π°Π²ΠΈΠ»Π°, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню Π±ΡƒΠ΄ΡƒΡ‚ Π²Ρ‹ΠΏΠ°Π΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ курсора Π½Π° Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ элСмСнт:

#vnav li:hover ul {display: block;}

#vnav li:hover ul {display: block;}

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ список ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² нашСго CSS мСню отобраТался справа ΠΎΡ‚ своих Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΡ… элСмСнтов, сразу ΠΆΠ΅ избавляСмся ΠΎΡ‚ ΠΌΠ΅Ρ€Π·ΠΊΠΈΡ… ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ² HTML списка:

#hnav ul { list-style: none; float: left; margin: 0; padding: 4px 8px; }

#hnav ul

{

list-style: none;

float: left;

margin: 0;

padding: 4px 8px;

}

Но ΠΌΡ‹ Π΅Ρ‰Π΅ Π½Π΅ достигли Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ список ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню отобраТался Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎ, Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π·Π°Π΄Π°Π΄ΠΈΠΌ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ CSS ΠΏΡ€Π°Π²ΠΈΠ»Π°:

#hnav ul li { float: left; clear: none; margin: 0; padding: 0; width: auto; height: auto; color: #999; }

#hnav ul li

{

float: left;

clear: none;

margin: 0;

padding: 0;

width: auto;

height: auto;

color: #999;

}

Бвойство float: left Π΄Π΅Π»Π°Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню Π² линию.

А Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ стили для ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ², Π·Π°Π΄Π°Π΄ΠΈΠΌ CSS ΠΏΡ€Π°Π²ΠΈΠ»Π° для отобраТСния ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню, Ρ‚ΠΎ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π° Π½ΠΈΡ… курсора ΠΌΡ‹ΡˆΠΊΠΈ:

#hnav li:hover ul li a, #hnav ul li a { display: inline; padding: 0 6px 0 0; float: none; text-transform: lowercase; color: #999; background: none; } #hnav li:hover ul li a:hover, #hnav ul li a:hover { background: none; color: #000; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

#hnav li:hover ul li a,

#hnav ul li a

{

display: inline;

padding: 0 6px 0 0;

float: none;

text-transform: lowercase;

color: #999;

background: none;

}

Β 

#hnav li:hover ul li a:hover,

#hnav ul li a:hover

{

background: none;

color: #000;

}

Π’ΠΎΡ‚ Ρ‚Π°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ CSS мСню, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΡ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Ρ‚ΠΎ создали:

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ CSS мСню. Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ CSS мСню.

Π˜ΡΡ…ΠΎΠ΄Π½Ρ‹Π΅ ΠΊΠΎΠ΄Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π½Π° ΠΏΡƒΠ±Π»ΠΈΡ‡Π½Ρ‹Ρ… страницах Π²ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π΅: Ρ€Π°Π· ΠΈ Π΄Π²Π°.

На этом всё, спасибо Π·Π° Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, надСюсь, Ρ‡Ρ‚ΠΎ Π±Ρ‹Π» Ρ…ΠΎΡ‚ΡŒ Ρ‡Π΅ΠΌ-Ρ‚ΠΎ ΠΏΠΎΠ»Π΅Π·Π΅Π½ ΠΈ Π΄ΠΎ скорых встрСч Π½Π° страницах Π±Π»ΠΎΠ³Π° для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… Π²Π΅Π±Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΈ вСбмастСров ZametkiNaPolyah.ru. НС Π·Π°Π±Ρ‹Π²Π°Π΅ΠΌ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ с Π΄Ρ€ΡƒΠ·ΡŒΡΠΌΠΈ;)

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Π½Π° CSS

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Π½Π° CSS

29 января 2020 | Автор: seogrot | ΠšΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΡ: Π£Ρ€ΠΎΠΊΠΈ вёрстки

БСгодня я ΠΏΡ€ΠΈΠ²Π΅Π΄Ρƒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ создания Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½Π½ΠΎΠ³ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS. ΠŸΠΎΡΡ‚Π°Ρ€Π°ΡŽΡΡŒ Π·Π°Π΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ большС свойств css, Ρ‡Ρ‚ΠΎΠ±Ρ‹ наглядно ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ„ΠΎΡ€ΠΌΠΈΡ‚ΡŒ созданноС мСню. МСню Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΎ с использованиСм ΠšΠ°ΡΠΊΠ°Π΄Π½Ρ‹Ρ… Ρ‚Π°Π±Π»ΠΈΡ† стилСй. ЕдинствСнно, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈΡˆΠ»ΠΎΡΡŒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JavaScript, это эффСкт Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню для Internet Explorer, Ρ‚.ΠΊ ΠΎΠ΄Π½ΠΎ ΠΈΠ· Π½ΡƒΠΆΠ½Ρ‹Ρ… свойств ΠΎΠ½ всё Ρ‚Π°ΠΊΠΈ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚.

Для Π½Π°Ρ‡Π°Π»Π° Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ структуру нашСго мСню. Она Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΡΡ‚ΠΎΡΡ‚ΡŒ ΠΈΠ· Π½Π΅Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ списка Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‰Π΅Π³ΠΎ Π² сСбя списки-подмСню.
index.html

<title>Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Π½Π° CSS</title>
<script type="text/javascript" src="cssmenu.js"></script>
 	<link rel="stylesheet" type="text/css" href="style.css">
Β 
<ul>
Β 
 	<li><a href="#">Главная страница</a></li>
Β 
Β 
 	<li><a href="#">Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ сайтов</a>
Β 
<ul>
Β 
 	<li><a href="#">Π”ΠΈΠ·Π°ΠΉΠ½ сайтов</a></li>
Β 
Β 
 	<li><a href="#">Вёрстка сайтов</a></li>
Β 
Β 
 	<li><a href="#">ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ сайтов</a></li>
Β 
</ul>
Β 
</li>
Β 
Β 
 	<li><a href="#">ΠŸΡ€ΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ сайтов</a>
Β 
<ul>
Β 
 	<li><a href="#">SEO ΠΏΡ€ΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅</a></li>
Β 
Β 
 	<li><a href="#">SMO ΠΏΡ€ΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅</a></li>
Β 
</ul>
Β 
</li>
Β 
Β 
 	<li><a href="#">SEO Π±ΠΈΡ€ΠΆΠΈ</a></li>
Β 
Β 
 	<li><a href="#">SEO софт</a></li>
Β 
</ul>

<title>Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Π½Π° CSS</title> <script type=»text/javascript» src=»cssmenu.js»></script> <link rel=»stylesheet» type=»text/css» href=»style.css»> <ul> <li><a href=»#»>Главная страница</a></li> <li><a href=»#»>Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ сайтов</a> <ul> <li><a href=»#»>Π”ΠΈΠ·Π°ΠΉΠ½ сайтов</a></li> <li><a href=»#»>Вёрстка сайтов</a></li> <li><a href=»#»>ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ сайтов</a></li> </ul> </li> <li><a href=»#»>ΠŸΡ€ΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ сайтов</a> <ul> <li><a href=»#»>SEO ΠΏΡ€ΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅</a></li> <li><a href=»#»>SMO ΠΏΡ€ΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅</a></li> </ul> </li> <li><a href=»#»>SEO Π±ΠΈΡ€ΠΆΠΈ</a></li> <li><a href=»#»>SEO софт</a></li> </ul>

style.css

<div>
/* Π£Π±ΠΈΡ€Π°Π΅ΠΌ отступы ΠΈ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ Π² Π½Π΅Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠΌ спискС, Π·Π°Π΄Π°Ρ‘ΠΌ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ стили оформлСния */
ul {
padding: 0;
margin: 0;
list-style: none;
width: 140px;
list-style: none;
border-bottom: 1px solid #C1D8E6;
font-size: 11px;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
/* Π—Π°Π΄Π°Ρ‘ΠΌ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ списка */
ul li {
position: relative;
}
/* Π—Π°Π΄Π°Ρ‘ΠΌ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ списка, сдвиг Π²Π»Π΅Π²ΠΎ Π½Π° 139 px, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Π»ΠΎ Π³Π»Π°Π²Π½ΠΎΠ΅ ΠΈ Π½Π΅ создавалась двойная Π³Ρ€Π°Π½ΠΈΡ†Π°, ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΉ список Π±ΡƒΠ΄Π΅Ρ‚ скрыт */
li ul {
position: absolute;
left: 139px;
top: 0;
display: none;
}
/* Π—Π°Π΄Π°Ρ‘ΠΌ стили для ссылок */
ul li a {
display: block;
text-decoration: none;
color: #003399;
background: #EAF4FF;
background-image:  url('images/bullet-arrow.gif') ;
background-repeat: no-repeat;
background-position: 1px 9px;
padding: 5 5 5 10;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ, Ρ‡Ρ‚ΠΎ подмСню Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΡΠ²Π»ΡΡ‚ΡŒΡΡ, ΠΊΠΎΠ³Π΄Π° курсор находится Π½Π°Π΄ элСмСнтом списка. */
li:hover ul, li.over ul{
display: block;
}
/* Π—Π°Π΄Π°Ρ‘ΠΌ стили для Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню */
ul li a:hover {
background: #77CF7F;
background-image:  url('images/bullet-arrow.gif') ;
background-repeat: no-repeat;
background-position: 1px 9px;
text-decoration: none;
}
/* Π₯АК для ie, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈ Ρ‚Π°ΠΌ всё ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»ΠΎΡΡŒ:)*/
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */</div>

<div> /* Π£Π±ΠΈΡ€Π°Π΅ΠΌ отступы ΠΈ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ Π² Π½Π΅Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠΌ спискС, Π·Π°Π΄Π°Ρ‘ΠΌ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ стили оформлСния */ ul { padding: 0; margin: 0; list-style: none; width: 140px; list-style: none; border-bottom: 1px solid #C1D8E6; font-size: 11px; font-family: Geneva, Arial, Helvetica, sans-serif; } /* Π—Π°Π΄Π°Ρ‘ΠΌ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ списка */ ul li { position: relative; } /* Π—Π°Π΄Π°Ρ‘ΠΌ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ списка, сдвиг Π²Π»Π΅Π²ΠΎ Π½Π° 139 px, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Π»ΠΎ Π³Π»Π°Π²Π½ΠΎΠ΅ ΠΈ Π½Π΅ создавалась двойная Π³Ρ€Π°Π½ΠΈΡ†Π°, ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΉ список Π±ΡƒΠ΄Π΅Ρ‚ скрыт */ li ul { position: absolute; left: 139px; top: 0; display: none; } /* Π—Π°Π΄Π°Ρ‘ΠΌ стили для ссылок */ ul li a { display: block; text-decoration: none; color: #003399; background: #EAF4FF; background-image: url(‘images/bullet-arrow.gif’) ; background-repeat: no-repeat; background-position: 1px 9px; padding: 5 5 5 10; border: 1px solid #ccc; border-bottom: 0; } /* Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ, Ρ‡Ρ‚ΠΎ подмСню Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΡΠ²Π»ΡΡ‚ΡŒΡΡ, ΠΊΠΎΠ³Π΄Π° курсор находится Π½Π°Π΄ элСмСнтом списка. */ li:hover ul, li.over ul{ display: block; } /* Π—Π°Π΄Π°Ρ‘ΠΌ стили для Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню */ ul li a:hover { background: #77CF7F; background-image: url(‘images/bullet-arrow.gif’) ; background-repeat: no-repeat; background-position: 1px 9px; text-decoration: none; } /* Π₯АК для ie, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈ Ρ‚Π°ΠΌ всё ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»ΠΎΡΡŒ:)*/ /* Fix IE. Hide from IE Mac \*/ * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } /* End */</div>

JavaScript Π½ΡƒΠΆΠ΅Π½, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² Internet Explorer. Π’ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… Π΄ΠΎΠ»ΠΆΠ½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π±Π΅Π· Π½Π΅Π³ΠΎ.

Π’ΠΎΡ‚ Ρ‚Π°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ нашС мСню β€” Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Π½Π° CSS
Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Example1.zip

ΠœΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ΅ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ мСню HTML ΠΈ CSS

18 ноября, 2015 Β Β Β  10Β 982 Β Β Β  1

На днях быстро Π½ΡƒΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ простоС ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ΅ мСню ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ css ΠΈ html. ΠŸΠΎΡ‚Ρ€Π°Ρ‚ΠΈΠ» Π½Π° поиски ΠΌΠΈΠ½ΡƒΡ‚ 15, Ρ‡Π΅Π³ΠΎ Ρ‚ΠΎ подходящСго Ρ‡Ρ‚ΠΎ Π± Π½Π΅ ΠΏΠ΅Ρ€Π΅Π΄Π΅Π»Ρ‹Π²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ ΠΈ Π½Π΅ нашСл. По этому Ρ€Π΅ΡˆΠΈΠ» быстрСС Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ Π½ΠΎΠ²ΠΎΠ΅ Ρ‡Π΅ΠΌ Ρ‡ΠΈΡΡ‚ΠΈΡ‚ΡŒ Ρ‡ΡƒΠΆΠΎΠΉ ΠΊΠΎΠ΄. Π’ΠΎΡ‚ Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
ul{
	list-style: none;
	background-color: #484f61;
	width: 200px;
	border: 1px solid #2a323f;
	border-bottom: none;
	color: #fff;
}
ul li{
	border-bottom: 1px solid #2a323f;
	position: relative;
}
ul li:hover{
	background-color: #2a323f;
}
ul li:hover ul{
	display: block;
}
ul li:hover ul li ul{
	display: none;
}
ul li a{
	color: #fff;
	padding: 10px 20px;
	display: block;
	text-decoration: none;
	font-weight: bold;
}
ul li a:hover{
	background-color: #5d99cf;
	color: #fff;
}
ul li ul li:hover ul{
	display: block;
}
ul li ul{
	position: absolute;
	left: 200px;
	top: 0px;
	display: none;
}

ul{ list-style: none; background-color: #484f61; width: 200px; border: 1px solid #2a323f; border-bottom: none; color: #fff; } ul li{ border-bottom: 1px solid #2a323f; position: relative; } ul li:hover{ background-color: #2a323f; } ul li:hover ul{ display: block; } ul li:hover ul li ul{ display: none; } ul li a{ color: #fff; padding: 10px 20px; display: block; text-decoration: none; font-weight: bold; } ul li a:hover{ background-color: #5d99cf; color: #fff; } ul li ul li:hover ul{ display: block; } ul li ul{ position: absolute; left: 200px; top: 0px; display: none; }

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<ul>
	<li><a href="#">Главная</a></li>
	<li><a href="#">Новости</a></li>
	<li><a href="#">ΠŸΡ€Π°ΠΉΡ</a></li>
	<li><a href="#">Услуги</a>
		<ul>
			<li><a href="#">Услуга 1</a></li>
			<li><a href="#">Услуга 2</a></li>
			<li><a href="#">Услуга 3</a>
				<ul>
					<li><a href="#">Услуга 1</a></li>
					<li><a href="#">Услуга 2</a></li>
					<li><a href="#">Услуга 3</a></li>
					<li><a href="#">Услуга 4</a></li>
					<li><a href="#">Услуга 5</a></li>
				</ul>
			</li>
			<li><a href="#">Услуга 4</a></li>
			<li><a href="#">Услуга 5</a></li>
		</ul>
	</li>
	<li><a href="#">ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹</a></li>
</ul>

<ul> <li><a href=»#»>Главная</a></li> <li><a href=»#»>Новости</a></li> <li><a href=»#»>ΠŸΡ€Π°ΠΉΡ</a></li> <li><a href=»#»>Услуги</a> <ul> <li><a href=»#»>Услуга 1</a></li> <li><a href=»#»>Услуга 2</a></li> <li><a href=»#»>Услуга 3</a> <ul> <li><a href=»#»>Услуга 1</a></li> <li><a href=»#»>Услуга 2</a></li> <li><a href=»#»>Услуга 3</a></li> <li><a href=»#»>Услуга 4</a></li> <li><a href=»#»>Услуга 5</a></li> </ul> </li> <li><a href=»#»>Услуга 4</a></li> <li><a href=»#»>Услуга 5</a></li> </ul> </li> <li><a href=»#»>ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹</a></li> </ul>

Π’Π°ΠΌ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΡ‚ΡŒΡΡ

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ красивоС Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню

Если Π’Ρ‹ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚Π΅ΡΡŒ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ Π»ΠΈΠ±ΠΎ Ρƒ Вас Π΅ΡΡ‚ΡŒ собствСнный сайт (Π±Π»ΠΎΠ³), Ρ‚ΠΎ Π’Ρ‹ Π·Π½Π°ΠΊΠΎΠΌΡ‹ с Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊ создаСтся мСню ΠΈ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ Π² Π½Π΅ΠΌ. Если ΠΌΡ‹ рассматриваСм ΠΊΠ°ΠΊΡƒΡŽ-Π»ΠΈΠ±ΠΎ систСму управлСния сайтом (CMS), Ρ‚ΠΎ Ρ‚Π°ΠΌ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню Π½Π΅ Π½Π°Π΄ΠΎ – всё дСлаСтся Π½Π° Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚Π΅. Π­Ρ‚ΠΎ с ΠΎΠ΄Π½ΠΎΠΉ стороны Ρ…ΠΎΡ€ΠΎΡˆΠΎ, Π° с Π΄Ρ€ΡƒΠ³ΠΎΠΉ стороны плохо…


АвтоматичСскоС созданиС мСню Ρ…ΠΎΡ€ΠΎΡˆΠΎ Ρ‚ΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ прСдставлСния ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ HTML, PHP, CSS, JavaScript. Π’ CMS достаточно ввСсти названия страниц, Ρ€ΡƒΠ±Ρ€ΠΈΠΊ ΠΈ Ρ‚.ΠΏ. ΠΈ мСню Π±ΡƒΠ΄Π΅Ρ‚ сформировано. А Π²ΠΎΡ‚ ΠΏΠ»ΠΎΡ… Ρ‚Π°ΠΊΠΎΠΉ Ρ€Π΅ΠΆΠΈΠΌ Π΅Π³ΠΎ создания Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Ссли Π’Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ внСсти ΠΊΠ°ΠΊΠΈΠ΅-Ρ‚ΠΎ ΠΏΡ€Π°Π²ΠΊΠΈ Π² структуру мСню, Ρ‚ΠΎ Ρ‚ΡƒΡ‚ Π±Π΅Π· спСциалиста ΡƒΠΆΠ΅ Π½Π΅ ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ. Π‘ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΠ³ΠΎ, Π΄Π°ΠΆΠ΅ спСциалисты Π·Π°Ρ‡Π°ΡΡ‚ΡƒΡŽ Π²Ρ‹Π½ΡƒΠΆΠ΄Π΅Π½Ρ‹ ΠΊΠΎΡ€Π΅Π½Π½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΏΠ΅Ρ€Π΅ΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ Π²Ρ‹Π²ΠΎΠ΄Π° мСню CMS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ΄ΠΎΠ²Π»Π΅Ρ‚Π²ΠΎΡ€ΠΈΡ‚ΡŒ ТСлания Π·Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊΠ° (кстати исполнитСлСй Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ ΠΈΡΠΊΠ°Ρ‚ΡŒ здСсь).

Π‘ΠΊΠ°ΠΆΡƒ большС: Ссли ΠΌΡ‹ возьмСм ΡΠ°ΠΌΡƒΡŽ ΠΏΠΎΠΏΡƒΠ»ΡΡ€Π½ΡƒΡŽ Π½Π° сСгодняшний дСнь CMS – WordPress, Ρ‚ΠΎ названия Ρ€ΡƒΠ±Ρ€ΠΈΠΊ Π² сайдбарС ΡΠΎΡ€Ρ‚ΠΈΡ€ΡƒΡŽΡ‚ΡΡ автоматичСски ΠΏΠΎ Π°Π»Ρ„Π°Π²ΠΈΡ‚Ρƒ. Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ порядок ΠΈΡ… Π²Ρ‹Π²ΠΎΠ΄Π° Π±Π΅Π· ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½Π° силами самой CMS Π½Π΅Π»ΡŒΠ·Ρβ€¦

Если Π’Ρ‹ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π·Π½Π°Π΅Ρ‚Π΅ HTML, JavaScript, Ρ‚ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ мСню любого Π²ΠΈΠ΄Π° для Вас Π½Π΅ прСдставляСт Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ слоТности. А Π²ΠΎΡ‚ Ссли эти языки программирования Π’Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅ лишь повСрхностно ΠΈΠ»ΠΈ вовсС ΠΎ Π½ΠΈΡ… ΡΠ»Ρ‹ΡˆΠΈΡ‚Π΅ Π²ΠΏΠ΅Ρ€Π²Ρ‹Π΅, Ρ‚ΠΎ Π·Π°Π΄Π°Ρ‡Π° окаТСтся для Вас скорСС всСго нСподъСмной, особСнно Ссли Π΄Π΅Π»ΠΎ касаСтся Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню.

Pure CSS Menu – ΠΎΠ½Π»Π°ΠΉΠ½ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ мСню для сайта. Π‘ Π΅Π³ΠΎ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π’Ρ‹ смоТСтС ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π»ΠΈΠ±ΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ мСню с Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΌ количСством ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ².

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню

Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Π² Π΄Π°Π½Π½ΠΎΠΌ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ создаСтся Π½Π° чистом HTML ΠΈ CSS Π±Π΅Π· использования JavaScript. Π­Ρ‚ΠΎ нСсомнСнный плюс, Ρ‚.ΠΊ. Π·Π°Ρ‡Π°ΡΡ‚ΡƒΡŽ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ JavaScript, ΠΈ Ρ‚ΠΎΠ³Π΄Π° Π’Π°ΡˆΠ΅ мСню Ρƒ посСтитСлСй Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ слСдуСт.

ΠšΠΎΠΌΡƒ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»Π΅Π·Π΅Π½ сСрвис

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

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ мСню


Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ мСню ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ сСрвиса Pure CSS Menu происходит Π² Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΌ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅. Для Π½Π°Ρ‡Π°Π»Π° Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Β«TemplatesΒ» Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΉ шаблон мСню ΠΈΠ· восьми доступных. НС ΠΎΠ±Ρ€Π°Ρ‰Π°ΠΉΡ‚Π΅ ΠΏΠΎΠΊΠ° внимания Π½Π° количСство ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² ΠΈ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню, Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°, Ρ†Π²Π΅Ρ‚ ΠΈ ΠΏΡ€. – всё это ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ, пСрСйдя Π² Π·Π°ΠΊΠ»Π°Π΄ΠΊΡƒ Β«ParametersΒ».

Π’Ρ‹Π±ΠΎΡ€ шаблона мСню

Настройка ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² мСню

ΠŸΡƒΠ½ΠΊΡ‚Ρ‹ ΠΈ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню, ΠΈΡ… названия, порядок слСдования, ссылки ΠΈ ΠΏΡ€. ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ΡΡ Π² настройках Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ, пСрСйдя ΠΏΠΎ Π·Π°ΠΊΠ»Π°Π΄ΠΊΠ΅ Β«ItemsΒ». Π’.ΠΊ. ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π½Π΅ Π·Π½Π°ΡŽΡ‚ английского, объясню Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ этого ΠΎΠΊΠ½Π°.

Настройка ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню

1 – Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚ мСню Π² ΠΊΠΎΠ½Π΅Ρ† всСго списка
2 β€” Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚ мСню сразу Π·Π° Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ (Π²Ρ‹Π΄Π΅Π»Π΅Π½Ρ‹ΠΌ) Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠΌ
3 – Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ Π² Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ (Π²Ρ‹Π΄Π΅Π»Π΅Π½Ρ‹ΠΉ) ΠΏΡƒΠ½ΠΊΡ‚ мСню
4 – ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚ (ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚) мСню
5 – ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ всС ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню с ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌ

НС Π·Π°Π±ΡƒΠ΄ΡŒΡ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ссылки для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΡƒΠ½ΠΊΡ‚Π° мСню, подсказки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈ способ открытия ссылок Π² ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… полях ΠΏΠΎΠ΄ ΠΎΠ±Π»Π°ΡΡ‚ΡŒΡŽ прСдпросмотра мСню!

Бвойства ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню

ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π’Ρ‹ ΠΎΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ настроитС внСшний Π²ΠΈΠ΄ ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π’Π°ΡˆΠ΅Π³ΠΎ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню, Π½Π°ΠΆΠΈΠΌΠ°ΠΉΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«DownloadΒ» ΠΈ сохраняйтС Π½Π° своСм ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅ Π°Ρ€Ρ…ΠΈΠ² со всСм Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΌΠΈ Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ (для этого Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ).


Π’Π½ΡƒΡ‚Ρ€ΠΈ Π°Ρ€Ρ…ΠΈΠ²Π° Π’Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ ΠΏΠ°ΠΏΠΊΡƒ Β«images» с графичСскими Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π² мСню, Π° Ρ‚Π°ΠΊΠΆΠ΅ Ρ„Π°ΠΉΠ» Β«purecssmenu.htmlΒ» со сгСнСрированным ΠΊΠΎΠ΄ΠΎΠΌ. Π—Π°Π³Ρ€ΡƒΠΆΠ°ΠΉΡ‚Π΅ ΠΏΠ°ΠΏΠΊΡƒ с ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ Π² Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ΠΈΡŽ Π’Π°ΡˆΠ΅Π³ΠΎ сайта, вставляйтС ΠΊΠΎΠ΄ мСню Π² Π½ΡƒΠΆΠ½ΠΎΠ΅ мСсто ΠΈ Π½Π°ΡΠ»Π°ΠΆΠ΄Π°ΠΉΡ‚Π΅ΡΡŒ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΌ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΌ мСню, написанном Π½Π° простом HTML + CSS.

Π’ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊ ΠΏΠΎ созданию Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню:

Π”Ρ€ΡƒΠ·ΡŒΡ, понравился Π»ΠΈ Π’Π°ΠΌ Π΄Π°Π½Π½Ρ‹ΠΉ сСрвис? Π—Π½Π°Π΅Ρ‚Π΅ Π»ΠΈ Π’Ρ‹ Π±ΠΎΠ»Π΅Π΅ качСствСнныС Π°Π½Π°Π»ΠΎΠ³ΠΈ? Π”Π΅Π»ΠΈΡ‚Π΅ΡΡŒ своими впСчатлСниями Π² коммСнтариях.

Автор ΡΡ‚Π°Ρ‚ΡŒΠΈ: Π‘Π΅Ρ€Π³Π΅ΠΉ Π‘Π°Π½Π΄Π°ΠΊΠΎΠ², 40 Π»Π΅Ρ‚.
ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡΡ‚, Π²Π΅Π±-мастСр, ΠΎΠΏΡ‹Ρ‚Π½Ρ‹ΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ПК ΠΈ Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚.

Плавно ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS. Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Π½Π° css: ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ

ΠžΡ‚ Π°Π²Ρ‚ΠΎΡ€Π°: всСх ΠΏΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽ. ΠŸΠΎΡ‡Π΅ΠΌΡƒ-Ρ‚ΠΎ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Ρƒ Π²Π΅Π±-мастСров ассоциируСтся со скриптами, Π½ΠΎ ΡƒΠΆΠ΅ Π΄Π°Π²Π½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΡƒΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ ΠΌΠΎΠΆΠ½ΠΎ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ спокойно Π½Π° чистом css. ΠŸΡ€ΠΈΡ‡Π΅ΠΌ Ρ‚Π°ΠΊΠΎΠ΅ мСню Π±ΡƒΠ΄Π΅Ρ‚ Π½ΠΈΡ‡Π΅ΠΌ Π½Π΅ Ρ…ΡƒΠΆΠ΅. БСгодня я Π²Π°ΠΌ ΠΏΠΎΠΊΠ°ΠΆΡƒ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π² css Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню. ПодСлюсь, Ρ‚Π°ΠΊ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ€Π΅Ρ†Π΅ΠΏΡ‚ΠΎΠΌ.

План ΡƒΡ€ΠΎΠΊΠ° ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° нашСго мСню

Π’ ΠΎΠ±Ρ‰Π΅ΠΌ-Ρ‚ΠΎ, сначала опрСдСлимся с Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ само мСню. Π’ html5 стандартным способом считаСтся ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅ nav с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка. Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊ ΠΈ сдСлаСм. ΠœΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ ΠΌΡ‹ ΠΏΠΎΠ·ΠΆΠ΅ ΡƒΠ±Π΅Ρ€Π΅ΠΌ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ css, Π² мСню ΠΎΠ½ΠΈ Π½Π°ΠΌ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Π½Π΅ Π½ΡƒΠΆΠ½Ρ‹.

БобствСнно, я сразу Π½Π°ΠΏΠΈΡˆΡƒ Π² html Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ с Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΌΠΈ списками. Π’ΠΎ Π΅ΡΡ‚ΡŒ наши список Π±ΡƒΠ΄Π΅Ρ‚ Π΄Π²ΡƒΡ…ΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹ΠΌ – Π² Π½Π΅ΠΌ Π±ΡƒΠ΄ΡƒΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ списки. А ΠΈΠΌΠ΅Π½Π½ΠΎ, Π½Π° ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚ 1 список, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈ Π±ΡƒΠ΄Π΅Ρ‚ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню.

Π’ΡƒΡ‚ Π΅ΡΡ‚ΡŒ Π²Π°ΠΆΠ½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚ Π΄Π΅Π»Π°Ρ‚ΡŒ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΌ, Π° лишь Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅. Π‘Π΅Π· ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ, Ρ‚ΠΎΠ³Π΄Π° Π² ΠΏΡƒΠ½ΠΊΡ‚Π°Ρ… Π±Π΅Π· выпадСния просто Π½Π΅ создаСм Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… списков.

БобствСнно, Π²ΠΎΡ‚ ΠΎΠ½Π°, вся Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°:

ΠŸΡƒΠ½ΠΊΡ‚1

ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚

ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚

ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚

ΠŸΡƒΠ½ΠΊΡ‚2

ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚

ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚

ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚

ΠŸΡƒΠ½ΠΊΡ‚3

ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚

ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚

ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚

ΠŸΡƒΠ½ΠΊΡ‚4

ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚

ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚

ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚

Π― понимаю, Ρ‡Ρ‚ΠΎ ΠΎΠ½Π° ΠΎΠ³Ρ€ΠΎΠΌΠ½Π°. Π’ этом-Ρ‚ΠΎ ΠΈ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… списков, Ρ‡Ρ‚ΠΎ трСбуСтся ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°. Но ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°ΠΉΡ‚Π΅ Ρ‚ΠΎΡ‚ Ρ„Π°ΠΊΡ‚, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π΄Π΅Π»Π°Π΅ΠΌ 4 основных ΠΏΡƒΠ½ΠΊΡ‚Π° ΠΈ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню.

БобствСнно, я Π·Π°Π΄Π°Π» всСй Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ nav, Π° всСм Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΌ спискам – стилСвой класс second, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΌΠΈ.

ΠžΡ‚Π»ΠΈΡ‡Π½ΠΎ, Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° Ρƒ нас Π³ΠΎΡ‚ΠΎΠ²Π°, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π½Π° Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

Π”Π° ΡƒΠΆ, выглядит уТасно. Но сСйчас ΠΌΡ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΠΌ Π² Ρ€Π°Π±ΠΎΡ‚Ρƒ css ΠΈ ΡƒΠΆΠ΅ Ρ‡Π΅Ρ€Π΅Π· нСсколько ΠΌΠΈΠ½ΡƒΡ‚ наша навигация прСобразится. Π”Π°Π²Π°ΠΉΡ‚Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ.

ПишСм css-стили

ΠŸΠ΅Ρ€Π²ΠΎΠ΅, Ρ‡Ρ‚ΠΎ я сдСлаю, это ΡΠ±Ρ€ΠΎΡˆΡƒ всС отступы ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для всСх элСмСнтов. Они Π½Π°ΠΌ Π±ΡƒΠ΄ΡƒΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΌΠ΅ΡˆΠ°Ρ‚ΡŒ, Π»ΡƒΡ‡ΡˆΠ΅ Π·Π°Π΄Π°Π΄ΠΈΠΌ ΠΏΠΎΡ‚ΠΎΠΌ отступы сами, Π³Π΄Π΅ это понадобится.

*{ margin: 0; padding: 0; }

margin : 0 ;

padding : 0 ;

#nav{ height: 70px; } #nav ul{ list-style: none; }

#nav{

height : 70px ;

#nav ul{

list — style : none ;

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ, собствСнно, Ρ€Π΅ΡˆΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊΠΈΠΌ Π±ΡƒΠ΄Π΅Ρ‚ нашС мСню. Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΈΠ»ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ? Π― ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽ сначала ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΈ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ всС Π½Π° Π΅Π³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅. Для этого Π½ΡƒΠΆΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅ стили:

#nav > ul > li{ float: left; width: 180px; position: relative; }

#nav > ul > li{

float : left ;

width : 180px ;

position : relative ;

Π—Π°ΠΌΠ΅Ρ‚ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π·Π½Π°ΠΊΠ° > ΠΌΡ‹ обращаСмся ΠΊ ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌ списка, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ нСпосрСдствСнно Π²Π»ΠΎΠΆΠ΅Π½Ρ‹ Π² ul, Π° Ρ‚ΠΎΡ‚ нСпосрСдствСнно Π²Π»ΠΎΠΆΠ΅Π½ Π² nav. Π­Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½ΠΎ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ позволяСт Π½Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ ΠΊ ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… списков. Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΠΎ ΠΌΠΎΠ΅ΠΉ Π·Π°Π΄ΡƒΠΌΠΊΠ΅ Π² Π³Π»Π°Π²Π½ΠΎΠΌ спискС ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎ, Π° Π²ΠΎ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… – Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ.

Но Π²Ρ‹, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠΎ-Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ, Π² согласии со своСй Π·Π°Π΄ΡƒΠΌΠΊΠΎΠΉ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ всС ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ Π±Ρ‹Π»ΠΈ Π² ΠΎΠ΄Π½Ρƒ строчку.

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

Для Ρ‡Π΅Π³ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅? Оно Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΡ‚ΠΎΠΌ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ списки. Если Π²Ρ‹ ΠΈΠ·ΡƒΡ‡Π°Π»ΠΈ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² css, Ρ‚ΠΎ навСрняка Π·Π½Π°Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ Ссли Π·Π°Π΄Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊΡƒ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅, Ρ‚ΠΎ всС элСмСнты Π² Π½Π΅ΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΈΠΌΠ΅Π½Π½ΠΎ этого Π±Π»ΠΎΠΊΠ°, Π° Π½Π΅ всСго ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.

Π’Π΅ΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½Π΅ΠΌ, Π²ΠΎΡ‚ Ρ‡Ρ‚ΠΎ Ρƒ нас ΡƒΠΆΠ΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ:

По этому ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Ρƒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΆΠ΅ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ сСбС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½Ρ‹ΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚. ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π½Π°ΠΌ Π΅Ρ‰Π΅ прСдстоит красиво ΠΎΡ„ΠΎΡ€ΠΌΠΈΡ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π³Π»Π°Π·Π° Π½Π΅ умоляли ΠΎ ΠΏΠΎΡ‰Π°Π΄Π΅ ΠΏΡ€ΠΈ просмотрС Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.

#nav li a{ display: block; background: #90DA93; border: 1px solid #060A13; color: #060A13; padding: 8px; text-align: center; text-decoration: none; } #nav li a:hover{ background: #2F718E; }

#nav li a{

display : block ;

background : #90DA93;

border : 1px solid #060A13;

color : #060A13;

padding : 8px ;

text — align : center ;

text — decoration : none ;

#nav li a:hover{

background : #2F718E;

Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, сами ссылки Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΡ‡Π½Ρ‹ΠΌΠΈ. Π­Ρ‚ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы ΠΈ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΠ»ΠΈΡΡŒ всС свойства. Π”Π°Π»Π΅Π΅ ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽ Ρ†Π²Π΅Ρ‚Π° Ρ„ΠΎΠ½Π°, тСкста, ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Ρ€Π°ΠΌΠΊΠΈ, Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы ΠΈ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ. НаконСц, ΠΎΡ‚ΠΌΠ΅Π½ΡΡŽ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ ссылок.

ВсС эти ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ это сдСлал я. Π¦Π²Π΅Ρ‚Π° Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΠΎ, Ρ€Π°ΠΌΠΊΡƒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΡƒΡŽ ΠΈΠ»ΠΈ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, отступы ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Ρ‚ΡŒ ΠΈΠ»ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Ρ‚ΡŒ.

Π—Π°ΠΌΠ΅Ρ‚ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π² Π΄Π°Π½Π½ΠΎΠΌ случаС ΠΌΡ‹ Π½Π΅ использовали Π·Π½Π°ΠΊ >, поэтому ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Π΅ ΠΏΡ€Π°Π²ΠΈΠ»Π° примСнятся ΠΊΠΎ всСм ссылкам, Π² Ρ‚ΠΎΠΌ числС ΠΈ Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ находятся Π²ΠΎ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… ΠΏΡƒΠ½ΠΊΡ‚Π°Ρ…. Π˜Ρ‚Π°ΠΊ, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΈΠΌΠ΅Π΅ΠΌ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

ΠžΡ‚Π»ΠΈΡ‡Π½ΠΎ, Π½ΠΎ вСдь Π²Ρ‹ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π²ΠΈΠ΄Π½ΠΎ, ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π½ΡƒΠΆΠ½Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚. Π‘Π΅Π· этого нашС мСню ΠΏΠΎΡ…ΠΎΠΆΠ΅ Π½Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ. Π§Ρ‚ΠΎ ΠΆ, самоС врСмя ΡΠΏΡ€ΡΡ‚Π°Ρ‚ΡŒ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹.

#nav li .second{ display: none; position: absolute; top: 100%; }

#nav li .second{

display : none ;

position : absolute ;

top : 100 % ;

Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, скрываСм ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ списки. Π’ΠΎ-Π²Ρ‚ΠΎΡ€Ρ‹Ρ…, Π·Π°Π΄Π°Π΅ΠΌ ΠΈΠΌ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρƒ top: 100%. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Ρ‡Π΅Ρ‚ΠΊΠΎ ΠΏΠΎΠ΄ основным ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ ΠΏΡ€ΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ‚, Ρ‡Π΅Ρ‚ΠΊΠΎ ΠΏΠΎΠ΄ 100% высоты этого ΠΏΡƒΠ½ΠΊΡ‚Π°.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ Π½Π° Π²Π΅Π±-страницС Ρ‚ΠΎΠ»ΡŒΠΊΠΎ основноС мСню, Ρ‡Ρ‚ΠΎ Π½Π°ΠΌ ΠΈ Π½ΡƒΠΆΠ½ΠΎ.

Π Π΅Π°Π»ΠΈΠ·ΡƒΠ΅ΠΌ Π²Ρ‹ΠΏΠ°Π΄Π΅Π½ΠΈΠ΅

Нам ΠΎΡΡ‚Π°Π»ΠΎΡΡŒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ самоС Π³Π»Π°Π²Π½ΠΎΠ΅ – Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ само Π²Ρ‹ΠΏΠ°Π΄Π΅Π½ΠΈΠ΅. Π’ этом Π½Π΅Ρ‚ Π½ΠΈΡ‡Π΅Π³ΠΎ слоТного, смотритС Π½Π° этот ΠΊΠΎΠ΄:

#nav li:hover .second{ display: block; }

#nav li:hover .second{

display : block ;

Π­Ρ‚ΠΎΡ‚ ΠΊΠΎΠ΄ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π±Π΅Π·ΡƒΠΊΠΎΡ€ΠΈΠ·Π½Π΅Π½Π½ΠΎ. ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΏΡƒΠ½ΠΊΡ‚ основного мСню, Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список Π±ΡƒΠ΄Π΅Ρ‚ ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒΡΡ Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ. ΠŸΡ€ΠΈΡ‡Π΅ΠΌ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎΡ‚ список, Ρ‡Ρ‚ΠΎ Π²Π»ΠΎΠΆΠ΅Π½ Π² ΠΏΡƒΠ½ΠΊΡ‚, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ наводится курсор.

Π•ΡΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½Π° Π½Π΅Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° – ΡˆΠΈΡ€ΠΈΠ½Π° Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² Π½Π΅ соотвСтствуСт ΡˆΠΈΡ€ΠΈΠ½Π΅ основных. Но это ΠΎΡ‡Π΅Π½ΡŒ Π»Π΅Π³ΠΊΠΎ Ρ€Π΅ΡˆΠ°Π΅Ρ‚ΡΡ дописываниСм ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… стилСй:

#nav li li{ width: 180px; }

#nav li li{

width : 180px ;

ВсС, ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Ρ€Π΅ΡˆΠ΅Π½Π°:

ВсС Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ. ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° основной ΠΏΡƒΠ½ΠΊΡ‚ появляСтся ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π΅ Π΅ΠΌΡƒ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню. Если ΡƒΠ±Ρ€Π°Ρ‚ΡŒ курсор Π² сторону – ΠΎΠ½ΠΎ ΠΏΡ€ΠΎΠΏΠ°Π΄Π°Π΅Ρ‚. Если пСрСвСсти курсор Π½Π° сами Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹, Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎ Π½ΠΈΠΌ ΠΊΠ»ΠΈΠΊΠ½ΡƒΡ‚ΡŒ ΠΈ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π² Π½ΡƒΠΆΠ½Ρ‹ΠΉ Ρ€Π°Π·Π΄Π΅Π» сайта. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΌΡ‹ сдСлали с Π²Π°ΠΌΠΈ ΠΎΡ‡Π΅Π½ΡŒ простоС ΠΈ Π»Π΅Π³ΠΊΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ Π±Π΅Π· скриптов.

ΠŸΠ΅Ρ€Π΅Π΄Π΅Π»Ρ‹Π²Π°Π΅ΠΌ мСню Π² Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅

Ну Ρ…ΠΎΡ€ΠΎΡˆΠΎ, с Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠ΅ΠΉ ΠΌΡ‹ с Π²Π°ΠΌΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ, Π½ΠΎ вСдь ΠΏΠΎΠΌΠΈΠΌΠΎ Π½Π΅Π΅ Π½Π° сайтах ΠΎΡ‡Π΅Π½ΡŒ часто встрСчаСтся ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Π°Ρ ΠΈ ΠΎΠ½Π° Ρ‚ΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅ΠΉ. На самом Π΄Π΅Π»Π΅ ΠΏΠ΅Ρ€Π΅Π΄Π΅Π»Π°Ρ‚ΡŒ мСню с Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π½Π° Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΎΡ‡Π΅Π½ΡŒ Π»Π΅Π³ΠΊΠΎ, Π½Π°ΠΌ придСтся ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π±ΡƒΠΊΠ²Π°Π»ΡŒΠ½ΠΎ ΠΏΠ°Ρ€Ρƒ строк ΠΊΠΎΠ΄Π°.

Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ float:left Ρƒ Π³Π»Π°Π²Π½Ρ‹Ρ… ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² списка. ИмСнно это свойство способствуСт Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ наши ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π² ΠΎΠ΄Π½Ρƒ строку, Π½ΠΎ Π·Π°Ρ‡Π΅ΠΌ Π½Π°ΠΌ это, Ссли навигация Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ?

Π’Π΅ΠΏΠ΅Ρ€ΡŒ остаСтся ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»Π° для сСлСктора #nav li .second, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ для Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… списков, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ, ΠΈΡ… Π½ΡƒΠΆΠ½ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎ-Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π’ΠΎΡ‚ Ρ‚Π°ΠΊ:

#nav li .second{ display: none; position: absolute; left: 100%; top: 0; }

#nav li .second{

display : none ;

position : absolute ;

left : 100 % ;

top : 0 ;

Π’ΠΎ Π΅ΡΡ‚ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ Π΄Π²Π΅ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ вмСсто ΠΎΠ΄Π½ΠΎΠΉ. Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, Π² случаС с Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠ΅ΠΉ я Π³ΠΎΠ²ΠΎΡ€ΠΈΠ», Ρ‡Ρ‚ΠΎ ΠΏΠΎ Π·Π°Π΄ΡƒΠΌΠΊΠ΅ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… мСню Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ ΠΏΠΎΠ΄ основными ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌΠΈ. Π’ случаС с Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ мСню это Π½Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ – ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ сбоку.

ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ измСняСм top: 100% Π½Π° left: 100%. ΠšΡ€ΠΎΠΌΠ΅ этого, ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π° top Π½Π°ΠΌ Ρ‚ΠΎΠΆΠ΅ Π½ΡƒΠΆΠ½Π°. Π—Π°Π΄Π°Π΅ΠΌ Π΅ΠΉ 0, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ΅ мСню Π½Π°Ρ…ΠΎΠ΄ΠΈΠ»ΠΎΡΡŒ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅ с ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‚.

ВсС, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ всС Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π½Π°Π΄ΠΎ. ΠœΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, я Π½Π΅ Π²Ρ€Π°Π», ΠΊΠΎΠ³Π΄Π° Π³ΠΎΠ²ΠΎΡ€ΠΈΠ», Ρ‡Ρ‚ΠΎ придСтся ΠΏΠ΅Ρ€Π΅ΠΏΠΈΡΠ°Ρ‚ΡŒ всСго нСсколько строк ΠΊΠΎΠ΄Π°.

Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ мСню с нСсколькими уровнями

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

ΠœΠΈΡ…Π°ΠΈΠ» сб, 09/20/2014 — 12:28

Π§Ρ‚ΠΎ-Ρ‚ΠΎ ΠΌΠΎΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ Π½Π΅ Π²ΠΈΠ΄Π΅Π½ — Π΄ΡƒΠ±Π»ΠΈΡ€ΡƒΡŽ:

===========
Бпасибо, Π½ΠΎ Ρƒ мСня (ΠΏΠΎΠ΄ Π˜Π½Ρ‚.Экспл-8) мСню Π½Π΅ Π²Ρ‹ΠΏΠ°Π΄Π°Π΅Ρ‚. Π’.Π΅. Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ строка «ul.nav li:hover ul {display: block;}»
ΠŸΠΎΠ΄ΡΠΊΠ°ΠΆΠΈΡ‚Π΅, Π² Ρ‡Π΅ΠΌ Π΄Π΅Π»ΠΎ?

Π•ΡΡ‚ΡŒ поТСдания ΠΏΠΎ излоТСнию ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π°:

Π₯ΠΎΡ€ΠΎΡˆΠΎ Π±Ρ‹ Π² этой строкС (ul.aaaaa li:hover ul {display: block;}) Ρ€Π°ΡΡ‚ΠΎΠ»ΠΊΠΎΠ²Π°Ρ‚ΡŒ, какая Π΅Π΅ Ρ‡Π°ΡΡ‚ΡŒ ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π·Π° «Π²Ρ‹ΠΏΠ°Π΄Π΅Π½ΠΈΠ΅ мСню», Π° какая — Π·Π° скрываниС ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² Π±ΠΎΠ»Π΅Π΅ Π³Π»ΡƒΠ±ΠΎΠΊΠΎΠ³ΠΎ уровня влоТСнности

Π₯ΠΎΡ€ΠΎΡˆΠΎ Π±Ρ‹ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ… ΠΊΠ°ΠΆΠ΄ΡƒΡŽ строку ΡΠ½Π°Π±ΠΆΠ°Ρ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠ΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½Π° Π΄Π΅Π»Π°Π΅Ρ‚.

Π’ частности, нСясно, Π·Π°Ρ‡Π΅ΠΌ Π½ΡƒΠΆΠ½Π° строка «

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора с использованиСм CSS ΠΈ HTML

Π’Π²Π΅Π΄Π΅Π½ΠΈΠ΅

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΎΠ±ΡŠΡΡΠ½ΡΠ΅Ρ‚ΡΡ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS ΠΈ HTML.

Π’Ρ‹ часто Π²ΠΈΠ΄ΠΈΡ‚Π΅ сайты, содСрТащиС строку мСню, которая опускаСтся ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΈ выглядит Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π·Π΄ΠΎΡ€ΠΎΠ²ΠΎ, Π½ΠΎ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ это Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠ΅ мСню. Π­Ρ‚Π° ΡΡ‚Π°Ρ‚ΡŒΡ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню.

Π•Π³ΠΎ Π²Ρ‹Π²ΠΎΠ΄ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Ρ‚Π°ΠΊΠΈΠΌ:

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ ΡƒΠ²ΠΈΠ΄ΠΈΠΌ ΠΏΡ€ΠΎΡ†Π΅Π΄ΡƒΡ€Ρƒ создания Ρ‚Π°ΠΊΠΎΠ³ΠΎ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню.

Π¨Π°Π³ 1

ΠŸΡ€Π΅ΠΆΠ΄Π΅ всСго, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй ΠΈ Ρ„ΠΎΡ€ΠΌΡƒ ΠΈΠ»ΠΈ страницу HTML.

Π—Π°Ρ‚Π΅ΠΌ Π½Π° HTML-страницС ΠΈΠ»ΠΈ Π² Π²Π΅Π±-Ρ„ΠΎΡ€ΠΌΠ΅ .NET Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Β«DivΒ» ΠΈ Π½Π°Π·ΠΎΠ²ΠΈΡ‚Π΅ Π΅Π³ΠΎ Β«divMenuΒ».

ПослС создания Div Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ список элСмСнтов ΠΈ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ список Π² эти элСмСнты, поэтому Π΅Π³ΠΎ ΠΎΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠ΄ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Ρ‚Π°ΠΊΠΈΠΌ:

    • Home1
      • Homea
      • < a href = "#"> Homeb
      • Homec
    • Home2
      • Homed
      • Homee
      • Homef
    • Home3
      • Homeg
      • < href = "#"> Homeh
      • Homei
    • Home4
    • Home5
    • Home6

Step 2

ΠŸΡ€ΡΠΌΠΎ сСйчас ваш ΠΊΠΎΠ΄ Π½Π΅ Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅ΠΌ этот:

Π˜Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ выглядСл Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΈ интСрСсно, ΠΌΡ‹ внСсСм измСнСния Π² Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΡ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ Ρ€Π°Π½Π΅Π΅.

Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ этот ΠΊΠΎΠ΄ Π² Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй:

  1. #divMenu, ul, li, li li {
  2. margin: 0;
  3. отступ: 0;
  4. }
  5. #divMenu {
  6. width: 150px;
  7. высота: 27 пиксСлСй;
  8. }
  9. #divMenu ul
  10. {
  11. line-height: 25px;
  12. }
  13. #divMenu li {
  14. ΡΡ‚ΠΈΠ»ΡŒ списка: Π½Π΅Ρ‚;
  15. позиция: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ;
  16. Ρ„ΠΎΠ½: # 641b1b;
  17. }
  18. #divMenu li li {
  19. ΡΡ‚ΠΈΠ»ΡŒ списка: Π½Π΅Ρ‚;
  20. позиция: ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ;
  21. Ρ„ΠΎΠ½: # 641b1b;
  22. слСва: 148 пиксСлСй;
  23. Π²Π΅Ρ€Ρ…: -27 пиксСлСй;
  24. }
  25. #divMenu ul li a {
  26. width: 148px;
  27. высота: 25 пиксСлСй;
  28. дисплСй: блок;
  29. тСкстовоС ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅: Π½Π΅Ρ‚;
  30. Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ;
  31. сСмСйство ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²: Georgia, Times New Roman, с засСчками;
  32. Ρ†Π²Π΅Ρ‚: #ffffff;
  33. Π³Ρ€Π°Π½ΠΈΡ†Π°: сплошная 1px #eee;
  34. }
  35. #divMenu ul ul {
  36. ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ΅;
  37. Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ: скрыта;
  38. Π²Π΅Ρ€Ρ…: 27 пиксСлСй;
  39. }
  40. #divMenu ul li: hover ul {
  41. Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ: видимая;
  42. }
  43. #divMenu li: hover {
  44. background-color: # 945c7d;
  45. }
  46. #divMenu ul li: hover ul li a: hover {
  47. background-color: # 945c7d;
  48. }
  49. #divMenu a: hover {
  50. font-weight: bold;
  51. }

Π—Π΄Π΅ΡΡŒ я использовал ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€

, Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами Β«divMenuΒ».

Π’Π΅ΠΏΠ΅Ρ€ΡŒ всС измСнится, ΠΈ ваш Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΠΌ ΠΈ интСрСсным.

Π’Ρ‹Ρ…ΠΎΠ΄


Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню подмСню с Css / html

  nav ul {
  ΡΡ‚ΠΈΠ»ΡŒ списка: Π½Π΅Ρ‚;
  ΠΌΠ°Ρ€ΠΆΠ°: 0;
  отступ: 0 пиксСлСй;
  ΡˆΠΈΡ€ΠΈΠ½Π°: 200 пиксСлСй;
  высота: Π°Π²Ρ‚ΠΎ;
}
навигация
ul {
  ΠΌΠ°Ρ€ΠΆΠ° свСрху: 4 пиксСля;
}
nav ul li {
  border-top: 2px solid # 000000;
  Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: Π±Π΅Π»Ρ‹ΠΉ;
  ΡˆΠΈΡ€ΠΈΠ½Π°: 10em;
  Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚;
  ΡˆΠΈΡ€ΠΈΠ½Π°: 200 пиксСлСй;
  высота: Π°Π²Ρ‚ΠΎ;
  отступ: 5px 0px;
  Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°: 120%;
}
nav ul li: hover {
  Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # E88B2E;
}
навигацияя Π½Π΅ знаю {
  Ρ†Π²Π΅Ρ‚: ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ;
}
ссылка {
  Ρ†Π²Π΅Ρ‚: Π·Π΅Π»Π΅Π½Ρ‹ΠΉ;
}
Π°: посСтил {
  Ρ†Π²Π΅Ρ‚: Π·Π΅Π»Π΅Π½Ρ‹ΠΉ;
}
a: hover {
  Ρ†Π²Π΅Ρ‚: свСтло-Π·Π΅Π»Π΅Π½Ρ‹ΠΉ;
}
ul li ul {
  ΡΡ‚ΠΈΠ»ΡŒ списка: Π½Π΅Ρ‚;
  ΠΌΠ°Ρ€ΠΆΠ°: 0;
  отступ: 0 пиксСлСй;
  ΡˆΠΈΡ€ΠΈΠ½Π°: 200 пиксСлСй;
  высота: Π°Π²Ρ‚ΠΎ;
  дисплСй: Π½Π΅Ρ‚;
}
ul li ul li {
  border-top: 2px solid # 000000;
  Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: Π±Π΅Π»Ρ‹ΠΉ;
  ΡˆΠΈΡ€ΠΈΠ½Π°: 10em;
  Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚;
  ΡˆΠΈΡ€ΠΈΠ½Π°: 200 пиксСлСй;
  высота: Π°Π²Ρ‚ΠΎ;
  отступ: 5px 0px;
  Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°: 120%;
}
ссылка {
  тСкстовоС ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅: Π½Π΅Ρ‚;
}
nav ul li: hover ul {
  / * ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ указатСля ΠΌΡ‹ΡˆΠΈ Π½Π° элСмСнт списка ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌ UL, Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ Π² Π½Π΅Π³ΠΎ.* /
  дисплСй: блок;
}
nav ul ul {
  / * УдаляСм элСмСнт ΠΈΠ· ΠΏΠΎΡ‚ΠΎΠΊΠ° Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ² * /
  позиция: Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Π°Ρ;
  / * ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта & lt; li & gt; * /
  слСва: 210 пиксСлСй;
  Π²Π΅Ρ€Ρ…: 0;
  вСрхняя Π³Ρ€Π°Π½ΠΈΡ†Π°: 1px solid # e9e9e9;
  дисплСй: Π½Π΅Ρ‚;
}
nav ul ul li {
  ΡˆΠΈΡ€ΠΈΠ½Π°: 200 пиксСлСй;
  Ρ„ΠΎΠ½: # f1f1f1;
  Π³Ρ€Π°Π½ΠΈΡ†Π°: 1px solid # e9e9e9;
  Π³Ρ€Π°Π½ΠΈΡ†Π°-Π²Π΅Ρ€Ρ…: 0;
}
nav ul ul li a {
  Ρ†Π²Π΅Ρ‚: # a8a8a8;
  Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°: 12 пиксСлСй;
  тСкстовоС ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅: Π½Π΅Ρ‚;
}
nav ul ul li a: hover {
  Ρ†Π²Π΅Ρ‚: # 929292;
}  
  

100 ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Ρ… руководств ΠΏΠΎ мСню CSS

Π—Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ сСйчас

Π‘ΠΎΠ±ΠΈΡ€Π°ΠΉΡ‚Π΅ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, ΠΏΠ»Π°Ρ‚Π΅ΠΆΠΈ ΠΈ подписи с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ настраиваСмых ΠΎΠ½Π»Π°ΠΉΠ½-Ρ„ΠΎΡ€ΠΌ.

  • Π—Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΡƒΠΉΡ‚Π΅ΡΡŒ Π² Google
  • Π—Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΡƒΠΉΡ‚Π΅ΡΡŒ Ρ‡Π΅Ρ€Π΅Π· Facebook

Π˜Π›Π˜ Π–Π•

Π£ΠΆΠ΅ Π΅ΡΡ‚ΡŒ Π°ΠΊΠΊΠ°ΡƒΠ½Ρ‚? Π’Ρ…ΠΎΠ΄

Π‘ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π΅Π½ΠΈΠ΅ΠΌ!

Π‘ΠΎΠ±ΠΈΡ€Π°ΠΉΡ‚Π΅ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, ΠΏΠ»Π°Ρ‚Π΅ΠΆΠΈ ΠΈ подписи с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ настраиваСмых ΠΎΠ½Π»Π°ΠΉΠ½-Ρ„ΠΎΡ€ΠΌ.

  • Π’ΠΎΠΉΡ‚ΠΈ Ρ‡Π΅Ρ€Π΅Π· Google
  • Π’ΠΎΠΉΡ‚ΠΈ с Facebook
  • Π’ΠΎΠΉΡ‚ΠΈ Ρ‡Π΅Ρ€Π΅Π· Apple
ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

Π˜Π›Π˜ Π–Π•

НСт ΡƒΡ‡Π΅Ρ‚Π½ΠΎΠΉ записи? Π—Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ

Π—Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ сСйчас

  • Π—Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΡƒΠΉΡ‚Π΅ΡΡŒ Π² Google
  • Π—Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΡƒΠΉΡ‚Π΅ΡΡŒ Ρ‡Π΅Ρ€Π΅Π· Facebook

Π˜Π›Π˜ Π–Π•

ВскорС Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ инструкции ΠΏΠΎ сбросу пароля ΠΏΠΎ элСктронной ΠΏΠΎΡ‡Ρ‚Π΅.

Если Π²Ρ‹ Π½Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΈ письмо, ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ ΠΏΠ°ΠΏΠΊΡƒ со спамом.

Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½Π° Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ ΠΏΠΎΠΌΠΎΡ‰ΡŒ, ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ΡΡŒ Π² Π½Π°ΡˆΡƒ слуТбу ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ.

Ok

CSS3 МСню. БСсплатная ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° создания мСню CSS

Π§Ρ‚ΠΎ Π½ΠΎΠ²ΠΎΠ³ΠΎ

CSS3 Menu v5.3 (7 января 2021 Π³.)
* 7 Π½ΠΎΠ²Ρ‹Ρ… скинов: Bulgy, Delicacy, Eight, Elite, Impressive, Recent ΠΈ Eternity

* Новый ΡˆΡ€ΠΈΡ„Ρ‚ Π·Π½Π°Ρ‡ΠΊΠ°

* HTML5-Π²ΠΈΠ΄Π΅ΠΎ послС сохранСния
* ΠŸΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‰Π΅Π½Π½Ρ‹Π΅ ошибки Π²Π°Π»ΠΈΠ΄Π°Ρ‚ΠΎΡ€Π° W3C
* Π”ΠΎΠ±Π°Π²Π»Π΅Π½ ΠΌΠ΅Ρ‚Π°Ρ‚Π΅Π³ для мобильной Ρ€Π΅Π°ΠΊΡ†ΠΈΠΈ

CSS3 Menu v5.2 (16 мая 2020 г.)
* НовыС плоскиС скины: Lilt ΠΈ Magnetic

* Π£Π»ΡƒΡ‡ΡˆΠ΅Π½Π½Ρ‹ΠΉ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½. Π’Π΅ΠΏΠ΅Ρ€ΡŒ мСню сворачиваСтся Π΄ΠΎ СдинствСнной ΠΊΠ½ΠΎΠΏΠΊΠΈ Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Π° Π½Π° Π½ΠΈΠΆΠ½Π΅ΠΌ экранС, которая Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅Ρ‚ΡΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ‚Π΅ ΠΈΠ»ΠΈ Ρ‰Π΅Π»ΠΊΠ°Π΅Ρ‚Π΅ ΠΏΠΎ Π½Π΅ΠΉ. Π‘ΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ — ΠΌΡ‹ строим ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС

* Π˜ΡΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΡ ошибок

CSS3 Menu v4.9 (12 ΠΌΠ°Ρ€Ρ‚Π° 2019 Π³.)
* НовыС плоскиС скины: Neat, Refined, Facet ΠΈ Jalousie

* НовыС Π½Π°Π±ΠΎΡ€Ρ‹ плоских Π·Π½Π°Ρ‡ΠΊΠΎΠ²: Smart-сСрый ΠΈ Smart-ΠΎΡ€Π°Π½ΠΆΠ΅Π²Ρ‹ΠΉ

CSS3 МСню v4.7 (30 января 2018 Π³.)
* НовыС плоскиС скины: Posh, Boundary

* НовыС Π½Π°Π±ΠΎΡ€Ρ‹ плоских ΠΈΠΊΠΎΠ½ΠΎΠΊ: синий Smart, Π·Π΅Π»Π΅Π½Ρ‹ΠΉ фантазия

CSS3 Menu v4.6 (12 дСкабря 2017 Π³.)
* НовыС плоскиС скины: Sparkle ΠΈ Volume

* НовыС Π½Π°Π±ΠΎΡ€Ρ‹ плоских ΠΈΠΊΠΎΠ½ΠΎΠΊ: Π±Π΅Π»Ρ‹ΠΉ ΠΈ красный
.

CSS3 Menu v4.5 (14 ноября 2016 Π³.)
* НовыС плоскиС скины: Gleam, Sublime ΠΈ Blurring

* НовыС Π½Π°Π±ΠΎΡ€Ρ‹ плоских ΠΈΠΊΠΎΠ½ΠΎΠΊ: ΠΊΠΎΠ½Ρ‚ΡƒΡ€Π½Ρ‹Π΅ ΠΈ гСомСтричСскиС

CSS3 МСню v4.4 (10 октября 2013 Π³.)
* НовыС плоскиС скины: Marker ΠΈ Smoke

* НовыС Π½Π°Π±ΠΎΡ€Ρ‹ плоских ΠΈΠΊΠΎΠ½ΠΎΠΊ: ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ², Ρ€Π°Π΄ΡƒΠ³Π° ΠΈ канцСлярская ΠΊΠ½ΠΎΠΏΠΊΠ°

CSS3 Menu v4.3 (18 сСнтября 2013 Π³.)
* НовыС плоскиС скины: Metropolitan ΠΈ Cloud

* НовыС Π½Π°Π±ΠΎΡ€Ρ‹ плоских ΠΈΠΊΠΎΠ½ΠΎΠΊ: Π‘Ρ‚ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ-Π‘Π°Π·ΠΎΠ²Ρ‹ΠΉ, Π‘Ρ‚ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ-ΠšΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π½Ρ‹ΠΉ, Π‘Ρ‚ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ-ΠŸΡ€ΠΈΡ€ΠΎΠ΄Π°, Городской, ΠœΡƒΠ»ΡŒΡ‚Ρ„ΠΈΠ»ΡŒΠΌ, ΠœΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡ‚ΡΠΊΠΈΠΉ

* НовыС языки для сайта: швСдский ΠΈ японский.
* Π˜ΡΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΡ ошибок

CSS3 Menu v4.2 (12 сСнтября 2013 Π³.)
* НовыС плоскиС скины: Stitch, Flat Solid, Neoteric

* ОбновлСн список доступных Π²Π΅Π±-ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Google — Dosis , Ledger , Yanone Kaffeesatz Π”ΠΎΠ±Π°Π²Π»Π΅Π½Ρ‹ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹
* Π˜ΡΠΏΡ€Π°Π²Π»Π΅Π½Ρ‹ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с шаблоном Balance Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Internet Explorer
* НовыС языки для сайта: ΠΈΡ‚Π°Π»ΡŒΡΠ½ΡΠΊΠΈΠΉ ΠΈ русский.
* Π˜ΡΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΡ ошибок

CSS3 Menu v4.0 (15 июня 2013 г.)
* 3 Π½ΠΎΠ²Ρ‹Ρ… Π½Π°Π±ΠΎΡ€Π° Π·Π½Π°Ρ‡ΠΊΠΎΠ² (Cosmo, Eldorado, Flat), всСго 388 Π·Π½Π°Ρ‡ΠΊΠΎΠ², ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π² Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ…:

CSS3 МСню v3.9 (13 июня 2013 г.)
* НовыС ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ мСню: Flat, Metro, Graffito ΠΈ Motion:

* ОбновлСн мастСр Β«Π’ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π½Π° страницу».
* ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ ΠΈ ΠΌΠ΅Π»ΠΊΠΈΠ΅ исправлСния.

CSS3 Menu v3.8 (6 ΠΌΠ°Ρ€Ρ‚Π° 2013 Π³.)
* НовыС ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ мСню: Reflex ΠΈ Sphere:

* ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π²Π΅Π±-ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Google.
* ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ ΠΈ ΠΌΠ΅Π»ΠΊΠΈΠ΅ исправлСния.

CSS3 Menu v3.7 (20 фСвраля 2013 Π³.)
* НовыС ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ мСню: Radiance ΠΈ Syndicate:

* ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ ΠΈ ΠΌΠ΅Π»ΠΊΠΈΠ΅ исправлСния.

CSS3 Menu v3.5 (23 января 2013 Π³.)
* НовыС ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ мСню: Balance and Inspire:

* НовыС языки интСрфСйса: Π»Π°Ρ‚Ρ‹ΡˆΡΠΊΠΈΠΉ, сСрбский
* ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ ΠΈ ΠΌΠ΅Π»ΠΊΠΈΠ΅ исправлСния.

CSS3 Menu v3.1 (3 июля 2012 г.)
* НовыС ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ мСню: Push (Π³ΠΈΠ±ΠΊΠΎΠ΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню), Paradox, Hybrid, Nebula, Nexus, Pure, Crystalline, Push Plastic, Enigma:

* НовыС языки интСрфСйса: африкаанс, французский, индонСзийский, ΠΈΡ‚Π°Π»ΡŒΡΠ½ΡΠΊΠΈΠΉ, румынский, словацкий, украинский
* Π”ΠΎΠ±Π°Π²Π»Π΅Π½ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ «АвтоматичСский Ρ€Π°Π·ΠΌΠ΅Ρ€Β»
* Π”ΠΎΠ±Π°Π²Π»Π΅Π½ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ Β«Π¨ΠΈΡ€ΠΈΠ½Π° 100%Β»
* Π”ΠΎΠ±Π°Π²Π»Π΅Π½ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ «Адаптивный» (Тивая дСмонстрация )


* Π”ΠΎΠ±Π°Π²Π»Π΅Π½ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ «Π£ΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ мСню».Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ нСсколько ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… мСню Π½Π° страницу


* Π Π°ΡΡˆΠΈΡ€Π΅Π½ список кроссплатформСнных ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²
* ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ ΠΈ ΠΌΠ΅Π»ΠΊΠΈΠ΅ исправлСния.

CSS3 Menu v2.3 (2 фСвраля 2012 Π³.)
* НовыС ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ мСню: Core, Current, Enterprise:

* Π­Ρ„Ρ„Π΅ΠΊΡ‚ скольТСния для Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню. Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° CSS3. (ДСмонстрация Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ CSS3)
* Π­Ρ„Ρ„Π΅ΠΊΡ‚ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° элСмСнта. Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° CSS3. (ДСмонстрация ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° CSS3)
* Π£Π»ΡƒΡ‡ΡˆΠ΅Π½ Ρ€Π΅ΠΆΠΈΠΌ RTL.

CSS3 МСню v2.2 (14 дСкабря 2011 Π³.)
* НовыС ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню: Blocks, Modern, Elegant, Point, Charge (Тивая дСмонстрация):

* НовыС языки интСрфСйса: хорватский, голландский, Π½Π΅ΠΌΠ΅Ρ†ΠΊΠΈΠΉ, польский, ΠΏΠΎΡ€Ρ‚ΡƒΠ³Π°Π»ΡŒΡΠΊΠΈΠΉ, испанский, швСдский, Ρ‚ΡƒΡ€Π΅Ρ†ΠΊΠΈΠΉ, русский

* Π Π΅ΠΆΠΈΠΌ RTL (справа Π½Π°Π»Π΅Π²ΠΎ) (Тивая дСмонстрация):


* Π­Ρ„Ρ„Π΅ΠΊΡ‚ затухания для Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню. Π‘Π΄Π΅Π»Π°Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° CSS3, Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² соврСмСнных FF, Opera, Chrome, Safari

* ΠœΠ½ΠΎΠΆΠ΅ΡΡ‚Π²ΠΎ ΠΌΠ΅Π»ΠΊΠΈΡ… ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΠΉ Π² ΡˆΠ°Π±Π»ΠΎΠ½Π°Ρ… мСню ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ

CSS3 Menu v2.0 (9 мая 2011 г.)
* НовыС ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ мСню.

* Π˜ΡΠΏΡ€Π°Π²Π»Π΅Π½Π° ​​проблСма с Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠΌ Π² Opera

* НСкоторыС измСнСния Π² графичСском интСрфСйсС для ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½ΠΈΡ удобства использования

* МСлкиС исправлСния ошибок

CSS3 Menu v1.9 (4 ΠΌΠ°Ρ€Ρ‚Π° 2011)
* 28 Π½ΠΎΠ²Ρ‹Ρ… шаблонов мСню. ВсС ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ созданы Π½Π° чистом CSS3, Π±Π΅Π· JavaScript ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ (изобраТСния ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΈΠΊΠΎΠ½ΠΎΠΊ).

* ΠΠ΅ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ подмСню.

* Π¨ΠΈΡ€ΠΈΠ½Π° ΠΈ высота мСню. УстанавливаСт ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈΠ»ΠΈ высоту Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ мСню.

* Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста.


CSS3 Menu v1.7 (11 ноября 2010 Π³.)
* 36 Π½ΠΎΠ²Ρ‹Ρ… шаблонов мСню.

CSS3 Menu v1.6 (3 ноября 2010 Π³.)
* Π˜ΡΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΡ ошибок.

CSS3 Menu v1.5 (1 октября 2010 Π³.)
* МСга Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню — Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ с нСсколькими столбцами / мСгамСню для подмСню.

* 20 Π½ΠΎΠ²Ρ‹Ρ… шаблонов мСню.

* ПанСль «Иконка». Π›Π΅Π³ΠΊΠΎ добавляйтС красивыС Π·Π½Π°Ρ‡ΠΊΠΈ ΠΊ ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌ мСню!

* 22 Π½ΠΎΠ²Ρ‹Ρ… Π½Π°Π±ΠΎΡ€Π° Π·Π½Π°Ρ‡ΠΊΠΎΠ², всСго 2900+ Π·Π½Π°Ρ‡ΠΊΠΎΠ², ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π² Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ….

* ΠžΠΏΡ†ΠΈΡ «Высота мСню». УстанавливаСт высоту Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ мСню.


* «Радиус мСню» ΠΈ «Радиус элСмСнта» для настройки Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹Ρ… ΡƒΠ³Π»ΠΎΠ².
* Π˜ΡΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ошибок.

CSS3 МСню v1.2 (16 июня 2010 г.)

* НовыС ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ для Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… мСню!

* Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«ΠŸΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ элСмСнт» Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ порядок элСмСнтов Π²Π½ΡƒΡ‚Ρ€ΠΈ мСню.

* Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ радиус Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ мСню ΠΈ подмСню с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠΎΠ² «Радиус».

CSS3 Menu v1.0 (31 мая 2010 Π³.) — ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ выпуск!

ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΏΠΎΠ»Π½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ

CSS3Menu бСсплатСн для нСкоммСрчСского использования. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS3Menu Π½Π° школьном сайтС, Π² своСм нСкоммСрчСском Π±Π»ΠΎΠ³Π΅ ΠΈΠ»ΠΈ Π½Π° Π²Π΅Π±-сайтС нСкоммСрчСской ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ, просто скачайтС CSS3Menu ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π΅Π³ΠΎ бСсплатно.

Для коммСрчСского использования трСбуСтся Π»ΠΈΡ†Π΅Π½Π·ΠΈΠΎΠ½Π½Ρ‹ΠΉ сбор. CSS3Menu Commercial Edition Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ прСдоставляСт Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ создания ΠΌΠ½ΠΎΠ³ΠΎΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½Ρ‹Ρ… мСню ΠΈ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹Π΅ Π½Π°Π±ΠΎΡ€Ρ‹ шаблонов мСню ΠΈ Π·Π½Π°Ρ‡ΠΊΠΎΠ². ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ Π·Π°Π²Π΅Ρ€ΡˆΠΈΡ‚Π΅ ΠΎΠΏΠ»Π°Ρ‚Ρƒ Ρ‡Π΅Ρ€Π΅Π· Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ, Π²Ρ‹ Π½Π΅ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ Π»ΠΈΡ†Π΅Π½Π·ΠΈΠΈ ΠΏΠΎ элСктронной ΠΏΠΎΡ‡Ρ‚Π΅. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ подходящий способ ΠΎΠΏΠ»Π°Ρ‚Ρ‹: крСдитная ΠΊΠ°Ρ€Ρ‚Π°, банковский ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄, Ρ‡Π΅ΠΊ, PayPal ΠΈ Ρ‚. Π”.

Π‘ΠΏΡ€Π°Π²ΠΊΠ°

Π‘ΠΌ. Π’Π°ΠΊΠΆΠ΅:

ВСхничСскиС вопросы
Вопросы ΠΎ Π»ΠΈΡ†Π΅Π½Π·ΠΈΠΈ
НСдавниС вопросы

Π’ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊΠΈ:

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ простоС мСню с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS3Menu
Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ чистоС мСню css для вашСго Π²Π΅Π±-сайта
Как ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ HTML-ΠΊΠΎΠ΄ CSS3Menu
Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ классноС Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ мСню CSS3 Π±Π΅Π· Javascript

1) ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС мСню CSS3 ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ элСмСнт» ΠΈ Β«Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ подмСню», располоТСнныС Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов мСню CSS3, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ своС мСню.Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Β«Π£Π΄Π°Π»ΠΈΡ‚ΡŒ элСмСнт» для удалСния Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΊΠ½ΠΎΠΏΠΎΠΊ.

2) Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ . Для этого просто Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ²ΡˆΡƒΡŽΡΡ Ρ‚Π΅ΠΌΡƒ Π² Β«Π¨Π°Π±Π»ΠΎΠ½Π°Ρ…Β». список. Π”Π²Π°ΠΆΠ΄Ρ‹ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Ρ‚Π΅ΠΌΡƒ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ.

3) НастройтС внСшний Π²ΠΈΠ΄ мСню.
3.1. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ элСмСнт, Ρ‰Π΅Π»ΠΊΠ½ΡƒΠ² ΠΏΠΎ Π½Π΅ΠΌΡƒ, ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ внСшний Π²ΠΈΠ΄ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ состояния ΠΈ настройка свойств ссылки ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² Ρ†Π΅Π»ΠΈ ссылки Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Β«Π“Π»Π°Π²Π½ΠΎΠ΅ мСню».
3.2. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ элСмСнт подмСню, Ρ‰Π΅Π»ΠΊΠ½ΡƒΠ² ΠΏΠΎ Π½Π΅ΠΌΡƒ, ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ внСшний Π²ΠΈΠ΄ подмСню Π½Π° Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. состояния ΠΈ установка свойств ссылки элСмСнта подмСню ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² Ρ†Π΅Π»ΠΈ ссылки Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ «ПодмСню».

4) Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ своС мСню.
4.1. Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. Для сохранСния ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° просто Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒΒ» Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов. ΠΈΠ»ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Β«Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒΒ» ΠΈΠ»ΠΈ Β«Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ как…» Π² Π³Π»Π°Π²Π½ΠΎΠΌ мСню.
4.2. ΠžΠΏΡƒΠ±Π»ΠΈΠΊΡƒΠΉΡ‚Π΅ своС мСню Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ HTML. Для этого Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Β«ΠžΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒΒ». ΠΊΠ½ΠΎΠΏΠΊΡƒ Π½Π° ПанСли инструмСнтов.

Π‘Π²ΡΠΆΠΈΡ‚Π΅ΡΡŒ с Π½Π°ΠΌΠΈ

МСню CSS3
Для устранСния Π½Π΅ΠΏΠΎΠ»Π°Π΄ΠΎΠΊ, запросов Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ΠΈ ΠΎΠ±Ρ‰Π΅ΠΉ справки, ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ΡΡŒ Π² слуТбу ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ² ΠΏΠΎ адрСсу. Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ вашСм Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ систСмС, ВСрсия мСню CSS3, ссылка Π½Π° Π²Π°ΡˆΡƒ страницу.
Π’ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ ΠΎΡ‚Π²Π΅Ρ‚ Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ 1 Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ дня. ΠŸΠΎΠΆΠ°Π»ΡƒΠΉΡΡ‚Π°, ΠΏΡ€ΠΎΡ‡Ρ‚ΠΈΡ‚Π΅ сначала ΠΎΡ‚Π²Π΅Ρ‚Ρ‹ Π½Π° часто Π·Π°Π΄Π°Π²Π°Π΅ΠΌΡ‹Π΅ вопросы, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ, Π΅ΡΡ‚ΡŒ Π»ΠΈ ΡƒΠΆΠ΅ ΠΎΡ‚Π²Π΅Ρ‚ Π½Π° ваш вопрос.
ЭлСктронная ΠΏΠΎΡ‡Ρ‚Π°:

Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΡ… мСню | Онлайн-Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€

Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню, созданноС нашим ΠΎΠ½Π»Π°ΠΉΠ½-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ,
ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ всСм трСбованиям для ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΏΠΎ сайту.

ξ˜‡
НСсколько ΡƒΡ€ΠΎΠ²Π½Π΅ΠΉ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠΈ

Π‘Ρ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€Π° мСню ΠΌΠΎΠΆΠ΅Ρ‚ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ нСсколько ΡƒΡ€ΠΎΠ²Π½Π΅ΠΉ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠΈ. Π­Ρ‚ΠΎ позволяСт ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΡ„Ρ„Π΅ΠΊΡ‚ΠΈΠ²Π½ΡƒΡŽ ΠΈ ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΡƒΡŽ систСму Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ для вашСго сайта.

ξ™‹
Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Π°Ρ ΠΈΠ»ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Π°Ρ ориСнтация

МСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π²Π΅Π±-сайта ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π±Ρ‹Π²Π°Π΅Ρ‚ Π΄Π²ΡƒΡ… ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΉ: Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ»ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ.Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ для вашСй Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΎΠ΄Π½ΠΈΠΌ Ρ‰Π΅Π»Ρ‡ΠΊΠΎΠΌ ΠΌΡ‹ΡˆΠΈ.

ξ™ˆ
ПодмСню с нСсколькими столбцами

Если подмСню прСдставляСт собой Π΄Π»ΠΈΠ½Π½Ρ‹ΠΉ список элСмСнтов, просто Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅ Π΅Π³ΠΎ Π½Π° столбцы. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΡƒΡŽ линию ΠΌΠ΅ΠΆΠ΄Ρƒ столбцами, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ.


Π’Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя Π½Π°Π±ΠΎΡ€ ΠΈΠ· 120+ самых популярных ΠΈΠΊΠΎΠ½ΠΎΠΊ.Он содСрТит ΠΎΠ±Ρ‰ΠΈΠ΅ Π·Π½Π°Ρ‡ΠΊΠΈ, Π·Π½Π°Ρ‡ΠΊΠΈ для ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй, ΠΌΠ½ΠΎΠ³ΠΎΡ†Π΅Π»Π΅Π²Ρ‹Π΅ Π·Π½Π°Ρ‡ΠΊΠΈ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π΅Π³ΠΎ ΠΈΠ»ΠΈ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ свой собствСнный Π½Π°Π±ΠΎΡ€ Π·Π½Π°Ρ‡ΠΊΠΎΠ².

ξ™…
Π’Π΅Π±-ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹

ΠšΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ 60 самых популярных Π²Π΅Π±-ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ². ИспользованиС нСстандартных ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² придаст Π²Π°ΡˆΠ΅ΠΌΡƒ мСню ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π²ΠΈΠ΄, ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠ΅ вашСго сайта.


Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ

Π›ΡŽΠ΄ΠΈ быстрСС ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ.Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² мСню Π΄Π°Π΅Ρ‚ посСтитСлям Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ подсказки ΠΎ содСрТании сайта ΠΈ добавляСт приятный Π΄ΠΈΠ·Π°ΠΉΠ½ Π²Π°ΡˆΠ΅ΠΌΡƒ сайту.

ξ™„
Π˜Π½Ρ‚Π΅Π»Π»Π΅ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅

МСню прСдставляСт собой ΠΈΠ½Ρ‚Π΅Π»Π»Π΅ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ систСму — ΠΎΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ подмСню Π½Π° доступном пространствС экрана. Они ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ ΠΏΠΎΠ²Π΅Ρ€Ρ… Ρ€ΠΎΡ‚Π°Ρ‚ΠΎΡ€ΠΎΠ² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Flash-Ρ€ΠΎΠ»ΠΈΠΊΠΎΠ². Π‘ΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Π°Ρ Π»ΠΎΠ³ΠΈΠΊΠ° пСрСстановки ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ «Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅» подмСню.


Адаптивная панСль

Если ΡˆΠΈΡ€ΠΈΠ½Π° области просмотра мСньшС ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, появляСтся Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½ΠΎΠ΅ ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½ΠΎΠ΅ мСню.ΠšΠΎΠΌΠΏΠ°ΠΊΡ‚Π½ΠΎΠ΅ мСню ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΡ‹Π΅ / сворачиваСмыС подмСню.

ξ™Š
Быстрый ΠΈ Π»Π΅Π³ΠΊΠΈΠΉ

МСню прСдставляСт собой нСбольшой Ρ„Π°ΠΉΠ» JavaScript. Никаких Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ Π²Ρ€ΠΎΠ΄Π΅ jQuery. Он Π½Π΅ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ страниц ΠΈ обСспСчиваСт Ρ‚ΠΎΡ‡Π½Ρ‹ΠΉ ΠΎΡ‚Π²Π΅Ρ‚ Π½Π° дСйствия ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.

40 Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² ΠΈ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊ Π² 2020 Π³ΠΎΠ΄Ρƒ

Π§Π΅Ρ‚ΠΊΠΎΠ΅ ΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠΎ структурированноС Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΏΠΎ Π²Π΅Π±-сайту / ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡŽ, ΡΡƒΠΆΠ°Ρ‚ΡŒ ΠΈΡ… Π²Ρ‹Π±ΠΎΡ€ ΠΈ Π»Π΅Π³ΠΊΠΎ ΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ΡŒ мСсто Π½Π° экранС.Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΎΠ½ ΡˆΠΈΡ€ΠΎΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для ΠΏΠ°Π½Π΅Π»Π΅ΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π²Π΅Π±-сайтов / ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΠΏΠ°Π½Π΅Π»Π΅ΠΉ поиска ΠΈΠ»ΠΈ ΠΏΠ°Π½Π΅Π»Π΅ΠΉ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ UX.

Однако для UI / UX-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² настоящая ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° состоит Π² Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΡ… простыми, эффСктивными ΠΈ достаточно ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ.

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Mockplus собрал 40 Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π° Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ…ΡΡ мСню с Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ наТатия ΠΈ навСдСния, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠ΅Ρ€Π΅Π΄ΠΎΠ²Ρ‹Ρ… ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ², Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π²Π΄ΠΎΡ…Π½ΠΎΠ²ΠΈΡ‚ΡŒΡΡ ΠΈ с Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒΡŽ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ΡΡ мСню для своих Π²Π΅Π±-сайтов / ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

Для вашСго вдохновСния Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΎ мноТСство Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ² Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ…ΡΡ мСню для ΠΏΠ°Π½Π΅Π»Π΅ΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, ΠΏΠ°Π½Π΅Π»Π΅ΠΉ поиска, ΠΏΠ°Π½Π΅Π»Π΅ΠΉ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ ΠΈ Π΄Π°ΠΆΠ΅ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΡ… ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈΠ»ΠΈ Π·Π½Π°Ρ‡ΠΊΠΎΠ².

30 Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π° Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ мСню для вашСго вдохновСния

1. Converse

Converse — это ΠΌΠΎΠ΄Π½Ρ‹ΠΉ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-сайт, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ продаСтся ΠΎΠ±ΡƒΠ²ΡŒ, ΠΎΠ΄Π΅ΠΆΠ΄Π° ΠΈ снаряТСниС. Π’ Π΅Π³ΠΎ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΌ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌΡΡ мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π΅ΡΡ‚ΡŒ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰Π΅Π΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ подмСню с двумя столбцами, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. ΠŸΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ΡΡ Π±ΠΎΠ³Π°Ρ‚Ρ‹Π΅ эффСкты навСдСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π»Π΅Π³ΠΊΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΆΠ΅Π»Π°Π΅ΠΌΡ‹Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ мСню.

2. Santa Cruz

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

3. Helias Oils

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

4. Π’ΠΈΡ…Ρ€Π΅Π²ΠΎΠ΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню CSS3

Π’Ρ€Π°Ρ‰Π°ΡŽΡ‰Π΅Π΅ΡΡ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню CSS3 — это ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ шаблон Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ мСню, Π»Π΅Π³ΠΊΠΎ создаваСмый с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS.Когда Π²Ρ‹ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚Π΅ курсор Π½Π° Π²Π΅Ρ€Ρ…Π½ΠΈΠ΅ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню, ΠΎΠ½ΠΈ ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ с ΠΊΡ€ΡƒΡ‚Ρ‹ΠΌ эффСктом круТСния. Если Π²Π°ΠΌ интСрСсно, просто Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ссылку Π½Π° ΡƒΡ‡Π΅Π±Π½ΠΈΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС.

5. Lion Burger

Lion Burger ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΡƒΡŽ строку Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ мСню Π² Π²ΠΈΠ΄Π΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ. ΠŸΡƒΠ½ΠΊΡ‚Ρ‹ подмСню сдСланы с Ρ…Π°Ρ€Π°ΠΊΡ‚Π΅Ρ€Π½Ρ‹ΠΌΠΈ эффСктами навСдСния. Π‘ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΠ³ΠΎ, элСмСнты красной ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΈ Π±Π΅Π»Ρ‹ΠΉ тСкст Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π½Π° Ρ‚Π΅ΠΌΠ½ΠΎΠΌ Ρ„ΠΎΠ½Π΅ страницы.

6. CSS3 Slide Drop Down Box Menu

CSS3 Slide Drop Down Box Menu — Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ красивый шаблон Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ с ΠΎΡ‡Π΅Π½ΡŒ ΠΊΡ€ΡƒΡ‚Ρ‹ΠΌ эффСктом скольТСния.ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ указатСля ΠΌΡ‹ΡˆΠΈ Π½Π° ΠΏΡƒΠ½ΠΊΡ‚ мСню появится ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Π° изобраТСния, Π° ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ подмСню Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠ»Π°Π²Π½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ Π²ΠΏΡ€Π°Π²ΠΎ / Π²Π»Π΅Π²ΠΎ. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ ниТнюю ссылку, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ руководство ΠΏΠΎ CSS.

7. АдаптивноС Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ

АдаптивноС Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ происходит ΠΈΠ· шаблона Π²Π΅Π±-сайта Ρ€Π΅Ρ†Π΅ΠΏΡ‚ΠΎΠ² Bootstrap. Π•Π³ΠΎ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню состоит ΠΈΠ· Ρ‚Ρ€Π΅Ρ… столбцов подмСню для дСмонстрации ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΉ Ρ€Π΅Ρ†Π΅ΠΏΡ‚ΠΎΠ². Π—Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ слайдСр с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ справа Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ быстро Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Ρ€Π΅Ρ†Π΅ΠΏΡ‚.

8. Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Bryan

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

9. PopSockets

PopSockets — это красивый Π²Π΅Π±-сайт для ΠΎΠ½Π»Π°ΠΉΠ½-ΠΏΠΎΠΊΡƒΠΏΠΎΠΊ ΠΏΠΎ Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Ρƒ, Π² Π΅Π³ΠΎ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌΡΡ мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ красочныС ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ для ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΈ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ², Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΡΡŽΡ‰ΡƒΡŽ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ.

10. ИсслСдованиС минимального Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ мСню

ИсслСдованиС минимального Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ мСню — это классноС минималистичноС Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. ВсС Π΅Π³ΠΎ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ мСню Π±Ρ‹Π»ΠΈ ΡƒΠΏΡ€ΠΎΡ‰Π΅Π½Ρ‹ Π² Π²ΠΈΠ΄Π΅ ΠΎΡ‡Π΅Π½ΡŒ Ρ‚ΠΎΠ½ΠΊΠΈΡ… Ρ†Π²Π΅Ρ‚Π½Ρ‹Ρ… полос. ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° Π½ΠΈΡ… Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‚ элСмСнты подмСню, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. Π˜Π΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ для создания минималистичного Π²Π΅Π±-сайта.

11. Π Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню Creative со Π·Π½Π°Ρ‡ΠΊΠ°ΠΌΠΈ

Π Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню Creative со Π·Π½Π°Ρ‡ΠΊΠ°ΠΌΠΈ — это чистоС ΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΌΠ°Π½Π½ΠΎΠ΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.Он ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ Π² ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠΎΠ΄Π½ΠΎΠΉ Π±Π΅Π»ΠΎ-Π³ΠΎΠ»ΡƒΠ±ΠΎΠΉ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ Π³Π°ΠΌΠΌΠ΅. И ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт подмСню Ρ…ΠΎΡ€ΠΎΡˆΠΎ структурирован ΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ яркиС Π·Π½Π°Ρ‡ΠΊΠΈ ΡˆΡ‚Ρ€ΠΈΡ…ΠΎΠ².

12. Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Zenith Arena De Lille

Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Zenith Arena De Lille ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ создано для ΠΌΠ½ΠΎΠ³ΠΎΡ†Π΅Π»Π΅Π²ΠΎΠΉ ΠΊΡ€Ρ‹Ρ‚ΠΎΠΉ Π°Ρ€Π΅Π½Ρ‹. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ всС ΠΈΡ… мСроприятия расписаны ΠΏΠΎ мСсяцам, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π»Π΅Π³ΠΊΠΎ Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»Π½Ρ‹ΠΉ список событий Π·Π° мСсяц, ΠΈ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ΅ для просмотра Π΄Π΅Ρ‚Π°Π»Π΅ΠΉ.

13.Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню SkySmile

Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню SkySmile ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° для выдСлСния Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ…ΡΡ мСню. И синяя цвСтовая схСма Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ сочСтаСтся с Ρ„ΠΎΠ½ΠΎΠΌ домашнСй страницы.

14. МинимальноС взаимодСйствиС с Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌΡΡ мСню

МинимальноС взаимодСйствиС с Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌΡΡ мСню — это ΠΎΡ‡Π΅Π½ΡŒ классичСскоС Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню для ΠΊΠ½ΠΎΠΏΠΊΠΈ с ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΌ Π·Π½Π°Ρ‡ΠΊΠΎΠΌ. ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ появляСтся Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню, состоящСС ΠΈΠ· Π·Π½Π°Ρ‡ΠΊΠΎΠ², ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‰Π΅Π΅ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.Он идСально ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ минималистичноС мобильноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.

15. Π Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню мобильного прилоТСния

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

16. Π”ΠΈΠ·Π°ΠΉΠ½ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ ΠΎΠΊΠ½Π° ΡƒΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠΉ

Π”ΠΈΠ·Π°ΠΉΠ½ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ ΠΎΠΊΠ½Π° ΡƒΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠΉ — это ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ мСню для минималистичных Π²Π΅Π±-сайтов для дСмонстрации новостСй ΡƒΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠΉ.Когда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ наводят курсор Π½Π° Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ Π·Π½Π°Ρ‡ΠΎΠΊ увСдомлСния, ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ появляСтся Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉΡΡ список, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ новости с увСдомлСниями. Π‘ΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π΅ врСмя, люди ΠΈ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ слова новостСй Ρ‚Π°ΠΊΠΆΠ΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ‹ для быстрого сканирования.

17. Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню ΡƒΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠΉ

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

18. HTML-анимация Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ мСню

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

19. О нас Анимация Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню

О нас Анимация Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню — это Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню, ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½ΠΎΠ΅ для Ρ€Π°Π·Π΄Π΅Π»Π° «О нас».Он ΠΈΠΌΠ΅Π΅Ρ‚ ΡƒΠΌΠ½ΡƒΡŽ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ. И ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт подмСню ΠΈΠΌΠ΅Π΅Ρ‚ плоский Π·Π½Π°Ρ‡ΠΎΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π»Π΅Π³ΠΊΠΎ Π½Π°ΠΉΡ‚ΠΈ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎΠ± элСмСнтС.

20. Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ΡΡ мСню

Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ΡΡ мСню — это Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню, ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½ΠΎΠ΅ для ΠΏΠ°Π½Π΅Π»ΠΈ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠ². ПослС этого ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π»Π΅Π³ΠΊΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Ρ‚ΠΈΠΏ Π΄ΠΎΠΌΠ°, спальни, удобства ΠΈ Ρ‚. Π”., Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΉΡ‚ΠΈ ΠΆΠ΅Π»Π°Π΅ΠΌΡ‹Π΅ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹. Π­Ρ‚ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ΡΡ мСню для полос поиска / Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠ².

21. Π Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню ΠΌΠ°Π³Π°Π·ΠΈΠ½Π°

Π Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню ΠΌΠ°Π³Π°Π·ΠΈΠ½Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π·Π½Π°Ρ‡ΠΊΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для прСдставлСния Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΉ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ².

22. Mini Cooper

Mini Cooper — это ΠΊΡ€ΡƒΡ‚ΠΎΠΉ Π°Π²Ρ‚ΠΎΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Π²Π΅Π±-сайт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΌΠ°Π½Π½ΠΎΠ΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. Он ΠΈΠΌΠ΅Π΅Ρ‚ Π±ΠΎΠ³Π°Ρ‚Ρ‹Π΅ стили подмСню ΠΈ эффСкты зависания.

23. Board Star

Board Star — это ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½ сноубордов.Π•Π³ΠΎ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ…Π°Ρ€Π°ΠΊΡ‚Π΅Ρ€Π½Ρ‹ΠΉ ΡΡ‚ΠΈΠ»ΡŒ Ρ€Π΅Ρ‚Ρ€ΠΎ-Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятный список ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ для прСдоставлСния Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°.

24. Porsche

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

25. Audi

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

26. Sony Play Station

Sony Play Station ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΆΠΈΠΌΠ°Ρ‚ΡŒ, ΠΈ всС Π΅Π³ΠΎ подмСню состоят ΠΈΠ· ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΆΠΈΡ€Π½Ρ‹Ρ… Π·Π½Π°Ρ‡ΠΊΠΎΠ². ΠŸΡ€Π΅ΠΊΡ€Π°ΡΠ½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ создания ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ графичСского мСню.

27. Mr Clean

Mr Clean ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ чистыС ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρ‹ ΠΈ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ.На Π΅Π³ΠΎ ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΌ Π²Π΅Π±-сайтС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½ΠΎΠ΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, состоящСС ΠΈΠ· ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ² ΠΈ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΡ… этикСток.

28. KFC

KFC ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню для ΠΏΠΎΠΌΠΎΡ‰ΠΈ Π² Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. Анимация подмСню Ρ‚ΠΎΠΆΠ΅ ΠΎΡ‡Π΅Π½ΡŒ крутая.

29. Taco Bell

Taco Bell ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ быстро Π½Π°ΠΉΡ‚ΠΈ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ вкусныС мСню ΠΈΠ»ΠΈ Π±Π»ΠΈΠ·Π»Π΅ΠΆΠ°Ρ‰ΠΈΠ΅ ΠΌΠ°Π³Π°Π·ΠΈΠ½Ρ‹. На Π΅Π³ΠΎ Π²Π΅Π±-сайтС Π΅ΡΡ‚ΡŒ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰Π°Ρ боковая панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ΡΡ мСню.

30.Bern Tourism

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

10 совСтов ΠΏΠΎ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌΡƒΡΡ мСню, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ

ПослС просмотра всСх этих ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ…ΡΡ мСню Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°Ρ…ΠΎΡ‚Π΅Ρ‚ΡŒ ΡƒΠ·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π²ΠΎΠΎΠ±Ρ‰Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΌ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌΡΡ мСню ΠΈ ΠΊΠ°ΠΊΠΈΠΌ совСтам Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню. Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню.

Π˜Ρ‚Π°ΠΊ, ΠΌΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ собрали 10 Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊ для Π΄ΠΈΠ·Π°ΠΉΠ½Π° Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ…ΡΡ мСню, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±ΡŠΡΡΠ½ΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊΠΈΠΌ совСтам Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ быстро ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΈ эффСктивный Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ мСню:

1. Π”Π΅Ρ€ΠΆΠΈΡ‚Π΅ мСню мСньшС Π΄Π²ΡƒΡ… ΡƒΡ€ΠΎΠ²Π½ΠΈ Π³Π»ΡƒΠ±ΠΎΠΊΠΈΠ΅

Блишком Π΄Π»ΠΈΠ½Π½Ρ‹Π΅ ΠΈΠ»ΠΈ слоТныС Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ΡΡ мСню ΠΌΠΎΠ³ΡƒΡ‚ Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ нСудобства ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ, Π° ΠΈΠ½ΠΎΠ³Π΄Π° Π΄Π°ΠΆΠ΅ Π·Π°ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΈΡ… Ρ‚Π΅Ρ€ΡΡ‚ΡŒ фокус Π² мСню. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π²Ρ‹ всСгда Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ΡΡ мСню Π½ΠΈΠΆΠ΅ Π΄Π²ΡƒΡ… ΡƒΡ€ΠΎΠ²Π½Π΅ΠΉ.

Π’ΠΎΠ·ΡŒΠΌΠ΅ΠΌ Π² качСствС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Π²Π΅Π±-сайт Slack. Он ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π΄Π²ΡƒΡ…ΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню для Ρ‡Π΅Ρ‚ΠΊΠΎΠ³ΠΎ ΠΈ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятного прСдставлСния ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎ рСсурсах.

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, Ссли Π²Π°ΠΌ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½ΡƒΠΆΠ½ΠΎ мСню с Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅ΠΌ двумя уровнями, эффСкт навСдСния ΠΈΠ»ΠΈ Π²Ρ‹Π±ΠΎΡ€Π° ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ Π½Π°ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, позволяя ΠΈΠΌ быстро Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ Π½ΡƒΠΆΠ½Ρ‹Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ мСню.

НапримСр, WooCommerce ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ эффСкты ΡƒΠΌΠ½ΠΎΠ³ΠΎ навСдСния для пошагового отобраТСния ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню.

2. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Ρ‡Π΅Ρ‚ΠΊΠΈΡ… ΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠΎ структурированных Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ…ΡΡ мСню

ΠŸΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ мСню ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½ΠΎ ΠΈΠΌΠ΅Ρ‚ΡŒ чистый, Ρ…ΠΎΡ€ΠΎΡˆΠΎ структурированный ΠΈ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹ΠΉ список элСмСнтов.Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ этого, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ мноТСство Ρ„Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ², Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚, чСткая Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠ°, достаточный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» ΠΈ Π΄Π°ΠΆΠ΅ аккуратная структура / ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΈ Ρ‚. Π”.

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

3. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ эффСкты навСдСния ΠΈΠ»ΠΈ выдСлСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ эффСктивноС Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½, Π΄Π²Π° ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ эффСкты навСдСния ΠΈΠ»ΠΈ выдСлСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ.

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

Π’Π°ΠΊΠΆΠ΅ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π²Ρ‹ всСгда Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΎΡΡ€Π΅Π΄ΠΎΡ‚Π°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ Π½Π° Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ закрытия эффСкта навСдСния. Блишком Π΄Π»ΠΈΠ½Π½ΠΎΠ΅ ΠΈΠ»ΠΈ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΎΠ΅ ΠΈ Ρ‚ΠΎ ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ.

4. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π·Π½Π°Ρ‡ΠΊΠΈ ΠΈΠ»ΠΈ изобраТСния для обогащСния Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ…ΡΡ мСню.

НС сущСствуСт фиксированного способа создания Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ мСню.Помимо использования Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ², Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ ΠΈ Ρ†Π²Π΅Ρ‚ΠΎΠ², Π²Ρ‹ всС Ρ€Π°Π²Π½ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ собствСнныС Π·Π½Π°Ρ‡ΠΊΠΈ ΠΈ изобраТСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±ΠΎΠ³Π°Ρ‚ΠΈΡ‚ΡŒ свои мСню.

Как ΠΈ Π½Π° Π²Π΅Π±-сайтС JetBlue Π½ΠΈΠΆΠ΅, Π²Ρ‹ всС Ρ€Π°Π²Π½ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π±ΠΎΠ³Π°Ρ‚Ρ‹Π΅ изобраТСния, Π·Π½Π°Ρ‡ΠΊΠΈ ΠΈ тСксты для создания Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΈ эффСктивного Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ мСню.

5. ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΠΉΡ‚Π΅ Π΅Π΄ΠΈΠ½ΠΎΠΎΠ±Ρ€Π°Π·ΠΈΠ΅ стилСй мСню

ΠŸΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ мСню слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΡ…ΠΎΠΆΠΈΠ΅ стили, Ρ„ΠΎΠ½ ΠΈ изобраТСния мСню, Ρ‡Ρ‚ΠΎΠ±Ρ‹ всС мСню Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΎ ΠΊΠ°ΠΊ Π΅Π΄ΠΈΠ½ΠΎΠ΅ Ρ†Π΅Π»ΠΎΠ΅.

Π’ качСствС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° возьмСм ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΉ Π½ΠΈΠΆΠ΅ Π²Π΅Π±-сайт, посвящСнный ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°ΠΌ Dell. Он ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π΄Π²ΡƒΡ…ΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹Π΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ΡΡ мСню с ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌΠΈ стилями тСкста ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ для привлСчСния посСтитСлСй.

6. НСвозмоТныС ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню Π²Ρ‹Π΄Π΅Π»Π΅Π½Ρ‹ сСрым

Когда Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρ‹ ΠΈΠ»ΠΈ услуги ΠΎΡ‚ΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‚ Π² Π½Π°Π»ΠΈΡ‡ΠΈΠΈ ΠΈΠ»ΠΈ Π²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ нСдоступны, слСпоС ΡƒΠ΄Π°Π»Π΅Π½ΠΈΠ΅ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π°Ρ€ΡƒΡˆΠΈΡ‚ΡŒ всю ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΡƒ, Ρ‡Ρ‚ΠΎ затрудняСт просмотр ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌΠΈ. Π’ этот ΠΌΠΎΠΌΠ΅Π½Ρ‚ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ сразу ΠΈΡ… Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ сСрым, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ.

НСпосрСдствСнноС Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ сСрым Ρ†Π²Π΅Ρ‚ΠΎΠΌ ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню Π½Π΅ повлияСт Π½Π° вСсь ΠΌΠ°ΠΊΠ΅Ρ‚, сэкономив Π²Π°ΠΌ большС Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π½Π° ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ нСдоступных ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ².

7. Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ быстрой Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅ΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π±Ρ‹ΡΡ‚Ρ€ΡƒΡŽ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ скольТСния, затухания, ΠΏΡ€Ρ‹ΠΆΠΊΠ° ΠΈΠ»ΠΈ вращСния) для привлСчСния ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ.

НапримСр, Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ Π²Π΅Π±-сайтС Mediate Template ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Π°Ρ ΡΠΊΠΎΠ»ΡŒΠ·ΡΡ‰Π°Ρ анимация для привлСчСния ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ:

8.Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΏΠΎΠ»ΡƒΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ Ρ„ΠΎΠ½, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ вашС мСню.

Π§Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ ΠΈΠ· Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ мСню, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡƒΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ Ρ„ΠΎΠ½.

На ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ Π²Π΅Π±-сайтС Econsultancy ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΏΠΎΠ»ΡƒΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ Ρ„ΠΎΠ½ для Π»Π΅Π³ΠΊΠΎΠ³ΠΎ выдСлСния всСго Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ мСню:

9. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° для выдСлСния своих мСню

ВмСсто ΠΏΠΎΠ»Ρƒ-Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Ρ„ΠΎΠ½Π° Ρ†Π²Π΅Ρ‚Π½ΠΎΠΉ Π€ΠΎΠ½ мСню Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΎΡ‚Π»ΠΈΡ‡Π°Ρ‚ΡŒ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ΡΡ мСню ΠΎΡ‚ Ρ„ΠΎΠ½Π°.

И этот Π²Π΅Π±-сайт МСбСли Π΄Π°Π΅Ρ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню Π΄Ρ€ΡƒΠ³ΠΈΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ Ρ„ΠΎΠ½Π°:

10. РСгулярно ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡΡ‚ΡŒ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню

Π§Ρ‚ΠΎ Π±Ρ‹ Π½ΠΈ ΡΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ, Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ всСгда Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡΡ‚ΡŒ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню. рСгулярно ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΠΉΡ‚Π΅ мСню, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΎ всСгда Ρ…ΠΎΡ€ΠΎΡˆΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚.

Π’ Ρ†Π΅Π»ΠΎΠΌ, ΠΌΡ‹ надССмся, Ρ‡Ρ‚ΠΎ эти творчСскиС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΈ ΠΏΠ΅Ρ€Π΅Π΄ΠΎΠ²Ρ‹Π΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ вас Π²Π΄ΠΎΡ…Π½ΠΎΠ²ΠΈΡ‚ΡŒ.

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню?

Если Π²Ρ‹ всС Π΅Ρ‰Π΅ Π½Π΅ Π·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню с нуля, Π΅ΡΡ‚ΡŒ Π΄Π²Π° доступных способа:

1.Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ шаблона HTML / CSS

Для Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² UI / UX самый быстрый способ — ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ шаблон Π΄ΠΈΠ·Π°ΠΉΠ½Π° Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ мСню. Π’ Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ доступно мноТСство шаблонов HTML / CSS . Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ свободно ΠΈΡΠΊΠ°Ρ‚ΡŒ Ρ‚ΠΎΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Π°ΠΌ Π½ΡƒΠΆΠ΅Π½.

2. Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнта Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

Однако, Ссли Π²Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ΅Π½ шаблон, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ инструмСнт Π΄ΠΈΠ·Π°ΠΉΠ½Π° для Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΈΠ΄Π΅ΠΉ мСню. Mockplus , ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Π°Ρ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ° для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ², — Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ для вас.Он позволяСт с Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒΡŽ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΡ‹ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ…ΡΡ мСню, Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ взаимодСйствия, Ρ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ Ρ‡Π΅Ρ€Π΅Π· Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚.

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

Π₯ΠΎΡ€ΠΎΡˆΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΌΠ°Π½Π½ΠΎΠ΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ эффСктивно ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ UX. ΠœΡ‹ надССмся, Ρ‡Ρ‚ΠΎ эти Π»ΡƒΡ‡ΡˆΠΈΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ…ΡΡ мСню, ΠΏΠ΅Ρ€Π΅Π΄ΠΎΠ²Ρ‹Π΅ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΈ ΠΈ совСты ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ Π²Π΅Π±-сайт / ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.

МСню — Pure

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ мСню Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅.ΠœΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΡΡ‚ΠΈΠ»ΡŒ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΈ сСлСкторы с Π½ΠΈΠ·ΠΊΠΎΠΉ ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΡ‡Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ ΠΈΡ…. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ элСмСнты мСню Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‚ 100% ΡˆΠΈΡ€ΠΈΠ½Ρ‹ своСго ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, поэтому Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΡ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ мСню ΠΈΠ»ΠΈ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ мСню: inline-block.

  <ΡΡ‚ΠΈΠ»ΡŒ>
    .custom-limited-width {
        / * Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΡ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ мСню содСрТимым мСню: * /
        дисплСй: встроСнный Π±Π»ΠΎΠΊ;
        / * Или явно Π·Π°Π΄Π°ΠΉΡ‚Π΅ ΡˆΠΈΡ€ΠΈΠ½Ρƒ: * /
        / * ΡˆΠΈΡ€ΠΈΠ½Π°: 10em; * /
    }

  

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ мСню, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ имя класса pure-menu-horizontal .

    

Π’Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Π΅ ΠΈ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹Π΅ элСмСнты

ΠžΡ‚ΠΌΠ΅Ρ‚ΡŒΡ‚Π΅ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹ΠΉ элСмСнт списка, Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΠΊ элСмСнту списка класс pure-menu-selected .Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ ссылку ΠΊΠ°ΠΊ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π½ΡƒΡŽ, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ имя класса pure-menu-disabled Π² элСмСнт списка. ΠžΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹Π΅ элСмСнты выглядят Π±Π»Π΅ΠΊΠ»Ρ‹ΠΌΠΈ ΠΈ Π½Π΅ Π½Π°ΡΠ»Π΅Π΄ΡƒΡŽΡ‚ стили навСдСния.

    

Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠ΅ списки

ΠœΡ‹ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ подмСню с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JavaScript для обСспСчСния доступности.Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ, ΠΏΡ€ΠΈΠΌΠ΅Ρ€ сцСнария, написанный Π½Π° ванильном JS, обСспСчиваСт ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ ARIA, ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΡƒΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ ΠΏΠΎ подмСню с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ клавиш со стрСлками ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π·Π°ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ мСню с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ внСшнСго события ΠΈΠ»ΠΈ клавиши ESC. Но Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΉΡ‚ΠΈ дальшС, Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠ΅Π½ΠΈΠ΅ ΠΊΡ€Π°Π΅Π², ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡΠ½ΡƒΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ клавиш со стрСлками ΠΈ ΠΏΠΎΠ»ΠΈΡ„ΠΈΠ»Ρ‹ для совмСстимости со старыми Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ.

Π”Π°ΠΆΠ΅ с установлСнным JavaScript Π²Ρ‹ всС Ρ€Π°Π²Π½ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ подмСню ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора. ΠŸΡ€ΠΎΡΡ‚ΠΎ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ pure-menu-allow-hover Π² элСмСнт списка pure-menu-has-children .Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΡƒΠ΄ΠΎΠ±Π½ΠΎ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ΠΎΠ² ΠΈ являСтся Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²ΠΎΠΉ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π±Π΅Π· JavaScript.

    

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

    

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ мСню с Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ имя класса pure-menu-scrollable .Когда мСста нСдостаточно, ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠ»ΠΈΡΡ‚Ρ‹Π²Π°Ρ‚ΡŒ. Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠ΅ мСню Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ. Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½Π° ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° Π½Π° основС ΠΈΠΌΠΏΡƒΠ»ΡŒΡΠ°, ΠΌΡ‹ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ JS, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ scrollbooster, для добавлСния Ρ‚Π°ΠΊΠΈΡ… эффСктов.

    

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅ΠΌΠΎΠ΅ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ мСню, ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΡŒΡ‚Π΅ высоту вашСго мСню, Π° Π·Π°Ρ‚Π΅ΠΌ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ имя класса pure-menu-scrollable .ΠŸΡƒΠ½ΠΊΡ‚Ρ‹ мСню ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠ»ΠΈΡΡ‚Ρ‹Π²Π°Ρ‚ΡŒ. ПодмСню Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ.

  <ΡΡ‚ΠΈΠ»ΡŒ>
    / * Настройка для ограничСния высоты мСню * /
    .custom-limited {
        высота: 160 пиксСлСй;
        ΡˆΠΈΡ€ΠΈΠ½Π°: 150 пиксСлСй;
        Π³Ρ€Π°Π½ΠΈΡ†Π°: 1 пиксСль сплошного сСрого Ρ†Π²Π΅Ρ‚Π°;
        радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹: 4 пиксСля;
    }

  

ΠžΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с нашими ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Pure Π² качСствС основы для Π±ΠΎΠ»Π΅Π΅ слоТных мСню, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

 

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

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