Код мСню для сайта html: МСню для сайта html ΠΈ css Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ β€” 11 Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² мСню

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

CSS мСню для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… / Π₯Π°Π±Ρ€

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

Ѐон для мСню

Для Π½Π°Ρ‡Π°Π»Π° создадим background, я ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ Π½Π΅ мастСр PhotoShop’a, Π½ΠΎ Π²ΠΎΡ‚ Ρ‡Ρ‚ΠΎ Ρƒ мСня ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ Π·Π° ΠΏΠ°Ρ€Ρƒ ΠΌΠΈΠ½ΡƒΡ‚:


ГрафичСскиС ΠΊΠ½ΠΎΠΏΠΎΡ‡ΠΊΠΈ

Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ изобраТСния ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρƒ нас Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ ссылки Π² мСню. Для этого Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡΡ PhotoShop’ом:

  • Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ Π½ΠΎΠ²Ρ‹ΠΉ Ρ„Π°ΠΉΠ» Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ этак 144x58px. (Ρ€Π°Π·ΠΌΠ΅Ρ€ ссылки для ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ элСмСнта Π² мСню)
  • НаполняСм графичСским содСрТимым сСй ΠΏΡƒΠ½ΠΊΡ‚ мСню (Ρƒ мСня это лишь надпись выполнСнная Π·Π°Π±Π°Π²Π½Ρ‹ΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ):
  • Π”Π°Π»Π΅Π΅ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΏΠΎΠ»ΠΎΡ‚Π½Π° Π² Π΄Π²Π° Ρ€Π°Π·Π°
  • И дорисуСм внСшний Π²ΠΈΠ΄ элСмСнта мСню для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ события hover

    Как сия конструкция Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ? Π”Π° ΠΎΡ‡Π΅Π½ΡŒ просто β€” ссылкС ΠΌΡ‹ явно ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€ 144x58px, Π° Π½ΠΎ событиС mouseover ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Π΅ΠΌ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π²Π΅Ρ€Ρ…:
  • Π‘ΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π½ΠΎΠ²Ρ‹ΠΉ Ρ„Π°ΠΉΠ» с ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½Ρ‹ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ ΠΈ тСкстом β€” это Π±ΡƒΠ΄Π΅Ρ‚ наша подсказка ΠΊ ссылкС
  • ΠŸΠΎΠ²Ρ‚ΠΎΡ€ΠΈΠΌ всС ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠ΅ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ для создания всСх ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню, Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ Π°Π½Π°ΡˆΠΈΡ… манипуляций Ρƒ нас Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ Π²ΠΎΡ‚ Ρ‚Π°ΠΊΠΎΠΉ Π½Π°Π±ΠΎΡ€ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ:
     

 

 

HTML ΠΊΠΎΠ΄

Π—Π°ΠΊΠΎΠ½Ρ‡ΠΈΠ»ΠΈ ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΈΠ· сСбя Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ², ΠΏΠΎΡ€Π° Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ΠΈΡ‚ΡŒ β€” создадим Π½Π΅ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список β€” <ul>:

  • элСмСнту <ul> присвоСим id=Β«menuΒ»
  • ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ссылкС <a> присвоим ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ имя класса
  • Π’Π½ΡƒΡ‚Ρ€ΡŒ тэга <a> Π·Π°ΠΊΠΈΠ½Π΅ΠΌ пустой тэг <span> (ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ подсказок ΠΊ ссылкам)

<ul id=Β«menuΒ»>
<li><a href=Β»#Β» class=Β«homeΒ»>Home <span></span></a></li>
<li><a href=Β»#Β» class=Β«aboutΒ»>About <span></span></a></li>
<li><a href=Β»#Β» class=Β«rssΒ»>RSS <span></span></a></li>
</ul>

 

CSS ΠΊΠΎΠ΄

 
 #menu 
 Π”ля Π½Π°Ρ‡Π°Π»Π° ΡƒΠ±ΠΈΡ€Π°Π΅ΠΌ padding ΠΈ margin Ρƒ мСню, list-style выставляСм Π² none, position ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ ΠΊΠ°ΠΊ relative. Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ высоту ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρƒ мСню (см. Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ menu-bg.jpg). ДобавляСм Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.
 

 #menu {
list-style: none;
padding: 0;
margin: 0;
width: 774px;
height: 210px;
background: url(images/menu-bg.jpg) no-repeat;
position: relative;
}

 
 #menu span 

 Π”ля элСмСнтов span ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ display выставляСм Π² none (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ). Π’Π°ΠΊ ΠΆΠ΅ выставляСм position ΠΊΠ°ΠΊ absolute.

#menu span {
display: none;
position: absolute;
}

 
 #menu a 

 Π”ля ссылок Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΏΡ€ΡΡ‚Π°Ρ‚ΡŒ тСкст, для этого ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρƒ text-indent присваиваСм Π½Π΅Π³Π°Ρ‚ΠΈΠ²Π½ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ (-900%), ΠΈ тСкст Π±ΡƒΠ΄Π΅Ρ‚ скрыт.
 

 #menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}

 
 #menu a:hover 

 Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΡΠ΄Π²ΠΈΠ½ΡƒΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π½Π° Π»ΠΈΠ½ΠΊΠ΅ ΠΏΠΎ ΡΠΎΠ±Ρ‹Ρ‚ΠΈΡŽ mouseover, для этого Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π² CSS ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄:
 

 #menu a:hover {
background-position: left bottom;
}
 

 #menu a:hover span 

 Π’Π°ΠΊ ΠΆΠ΅ ΠΏΠΎ ΡΠΎΠ±Ρ‹Ρ‚ΠΈΡŽ mouseover Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ подсказку

#menu a:hover span {
display: block;
}

 
 #menu . home

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

 #menu .home {
width: 144px;
height: 58px;
background: url(images/home.gif) no-repeat;
left: 96px;
top: 96px;
}

 
 #menu .home span 

 Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΡ€ΠΎΠ²Π΅Π΄Π΅ΠΌ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡƒΡŽ ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΡŽ для Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки
 

 #menu .home span {
width: 86px;
height: 14px;
background: url(images/home-over.gif) no-repeat;
left: 28px;
top: -20px;
}

 
 #menu .about 

 ΠšΠΎΠΏΠΈΡ€ΡƒΠ΅ΠΌ всё Ρ‡Ρ‚ΠΎ ΠΌΡ‹ сдСлали для элСмСнта .home ΠΈ ΠΏΠ΅Ρ€Π΅ΠΈΠΌΠ΅Π½ΠΎΠ²Ρ‹Π²Π°Π΅ΠΌ Π² . about. ПодгоняСм Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ располоТСниС, Ρ‚Π°ΠΊ ΠΆΠ΅ замСняСм Ρ„ΠΎΠ½.
 

#menu .about {
width: 131px;
height: 51px;
background: url(images/about.gif) no-repeat;
left: 338px;
top: 97px;
}
#menu .about span {
width: 40px;
height: 12px;
background: url(images/about-over.gif) no-repeat;
left: 44px;
top: 54px;
}

 
 #menu .rss 

ΠŸΠΎΠ²Ρ‚ΠΎΡ€ΠΈΠΌ для .rss

#menu .rss {
width: 112px;
height: 47px;
background: url(images/rss.gif) no-repeat;
left: 588px;
top: 94px;
}
#menu .rss span {
width: 92px;
height: 20px;
background: url(images/rss-over.gif) no-repeat;
left: 26px;
top: -20px;
}

 
Всё Π² ΠΎΠ΄Π½ΠΎΠΌ

#menu {
list-style: none;
padding: 0;
margin: 0;
width: 774px;
height: 210px;
background: url(images/menu-bg. jpg) no-repeat;
position: relative;
}
#menu span {
display: none;
position: absolute;
}
#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
#menu a:hover {
background-position: left bottom;
}
#menu a:hover span {
display: block;
}
 
 #menu .home {
width: 144px;
height: 58px;
background: url(images/home.gif) no-repeat;
left: 96px;
top: 73px;
}
#menu .home span {
width: 86px;
height: 14px;
background: url(images/home-over.gif) no-repeat;
left: 28px;
top: -20px;
}
 
 #menu .about {
width: 131px;
height: 51px;
background: url(images/about.gif) no-repeat;
left: 338px;
top: 97px;
}
#menu . about span {
width: 40px;
height: 12px;
background: url(images/about-over.gif) no-repeat;
left: 44px;
top: 54px;
}
 
 #menu .rss {
width: 112px;
height: 47px;
background: url(images/rss.gif) no-repeat;
left: 588px;
top: 94px;
}
#menu .rss span {
width: 92px;
height: 20px;
background: url(images/rss-over.gif) no-repeat;
left: 26px;
top: -20px;
}

Π­Ρ‚ΠΎ всё, ΠΏΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ мСню ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ‚ΡƒΡ‚, Π° ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚ΡƒΡ‚.

Π’ΠΎΠ»ΡŒΠ½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄: http://www.webdesignerwall.com/tutorials/advanced-css-menu/

ΠšΡ€ΠΎΡΡΠΏΠΎΡΡ‚: CSS мСню Π² стилС Web 2.0

МСню | HTML | CodeBasics

ВСрнёмся ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ ΠΈΠ· ΠΏΡ€ΠΎΡˆΠ»Ρ‹Ρ… ΡƒΡ€ΠΎΠΊΠΎΠ²:

<header>
  <img src="/logo.png" alt="Π›ΠΎΠ³ΠΎΡ‚ΠΈΠΏ"> <!-- Π›ΠΎΠ³ΠΎΡ‚ΠΈΠΏ сайта -->
  <div> <!-- МСню -->
    <ul>
      <li><a href="/">Главная</a></li>
      <li><a href="/about">О нас</a></li>
      <li><a href="/contacts">ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹</a></li>
    </ul>
  </div>
</header>

Π’ Π½Ρ‘ΠΌ мСню сайта Ρ€Π°Π·ΠΌΠ΅Ρ‡Π΅Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ³ΠΎ Ρ‚Π΅Π³Π° <div> с ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ menu. Как извСстно, Ρ‚Π°ΠΊΠΎΠ΅ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ², Π½ΠΎ Π½Π΅ для Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ². Они Π½Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ это мСню, Π° Π½Π΅ просто ΠΎΠ±Ρ‘Ρ€Ρ‚ΠΊΠ° для списка.

Для создания ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½ΠΎΠ³ΠΎ мСню ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΏΠ°Ρ€Π½Ρ‹ΠΉ Ρ‚Π΅Π³ <nav>, Π·Π°Π΄Π°Ρ‡Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ β€” Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ страницы с основным мСню. Π’Π°ΠΊΠΆΠ΅ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ устройства для чтСния с экрана, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ ΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ люди со слабым Π·Ρ€Π΅Π½ΠΈΠ΅ΠΌ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ этот Ρ‚Π΅Π³, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, стоит Π»ΠΈ Π΅Π³ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Π½Π° страницС.

Π—Π°ΠΌΠ΅Π½ΠΈΠΌ <div></div> Π½Π° ΠΈΠ·ΡƒΡ‡Π΅Π½Π½Ρ‹ΠΉ Ρ‚Π΅Π³ <nav>:

<header>
  <img src="/logo.png" alt="Π›ΠΎΠ³ΠΎΡ‚ΠΈΠΏ"> <!-- Π›ΠΎΠ³ΠΎΡ‚ΠΈΠΏ сайта -->
  <nav> <!-- МСню -->
    <ul>
      <li><a href="/">Главная</a></li>
      <li><a href="/about">О нас</a></li>
      <li><a href="/contacts">ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹</a></li>
    </ul>
  </nav>
</header>

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ nav, ΠΊΠ°ΠΊ ΠΈ header Π½Π΅ являСтся ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ для страницы. Π•Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для любого мСню Π½Π° страницС, Π½ΠΎ Π΅ΡΡ‚ΡŒ нСсколько Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΉ:

  1. НСт нСобходимости ΠΎΠ±ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ мСню Π² элСмСнт nav. Π’ основном Ρ‚Π°ΠΊΠΎΠΉ ΠΎΠ±Π»Π°ΡΡ‚ΡŒΡŽ ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ основныС мСню. Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ мСню Π² Ρ„ΡƒΡ‚Π΅Ρ€Π΅, Π½Π΅ ΠΎΠ±ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°ΡŽΡ‚ Π² Ρ‚Π΅Π³ <nav>, хотя это Π½Π΅ Π·Π°ΠΏΡ€Π΅Ρ‰Π΅Π½ΠΎ.
  2. Π₯ΠΎΡ€ΠΎΡˆΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ использования nav β€” навигация ΠΏΠΎ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ страницС.
  3. nav ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ссылки, Π½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΈ тСкст, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π΅ΡΡ‚ΡŒ ссылки. ΠžΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ΡΡŒ Π½Π° Π·Π΄Ρ€Π°Π²Ρ‹ΠΉ смысл. Если навигация являСтся основной для страницы ΠΈΠ»ΠΈ всСго сайта, Ρ‚ΠΎ ΠΎΠ±Π΅Ρ€Π½ΠΈΡ‚Π΅ Π΅Ρ‘ Π² Ρ‚Π΅Π³
    <nav>
    .

Π—Π°Π΄Π°Π½ΠΈΠ΅

Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ «шапки» сайта. РасполоТитС Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΈ мСню ΠΈΠ· Π΄Π²ΡƒΡ… элСмСнтов. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ‚Π΅Π³ <nav> ΠΈ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список

Π£ΠΏΡ€Π°ΠΆΠ½Π΅Π½ΠΈΠ΅ Π½Π΅ ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΡƒ β€” Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ? 😢

Если Π²Ρ‹ зашли Π² Ρ‚ΡƒΠΏΠΈΠΊ, Ρ‚ΠΎ самоС врСмя Π·Π°Π΄Π°Ρ‚ΡŒ вопрос Π² Β«ΠžΠ±ΡΡƒΠΆΠ΄Π΅Π½ΠΈΡΡ…Β». Как ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ вопрос:

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

ВСсты устроСны Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡΡŽΡ‚ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ способами ΠΈ Π½Π° Ρ€Π°Π·Π½Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ…. Часто Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с ΠΎΠ΄Π½ΠΈΠΌΠΈ Π²Ρ…ΠΎΠ΄Π½Ρ‹ΠΌΠΈ Π΄Π°Π½Π½Ρ‹ΠΌΠΈ, Π½ΠΎ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ. Π§Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ с этим ΠΌΠΎΠΌΠ΅Π½Ρ‚ΠΎΠΌ, ΠΈΠ·ΡƒΡ‡ΠΈΡ‚Π΅ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ «ВСсты» ΠΈ Π²Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎ посмотритС Π½Π° Π²Ρ‹Π²ΠΎΠ΄ ошибок, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π΅ΡΡ‚ΡŒ подсказки.

Мой ΠΊΠΎΠ΄ отличаСтся ΠΎΡ‚ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ учитСля πŸ€”

Π­Ρ‚ΠΎ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ πŸ™†, Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ ΠΎΠ΄Π½Ρƒ Π·Π°Π΄Π°Ρ‡Ρƒ ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ мноТСством способов. Если ваш ΠΊΠΎΠ΄ ΠΏΡ€ΠΎΡˆΠ΅Π» ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΡƒ, Ρ‚ΠΎ ΠΎΠ½ соотвСтствуСт условиям Π·Π°Π΄Π°Ρ‡ΠΈ.

Π’ Ρ€Π΅Π΄ΠΊΠΈΡ… случаях Π±Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄ΠΎΠ³Π½Π°Π½ΠΎ ΠΏΠΎΠ΄ тСсты, Π½ΠΎ это Π²ΠΈΠ΄Π½ΠΎ сразу.

ΠŸΡ€ΠΎΡ‡ΠΈΡ‚Π°Π» ΡƒΡ€ΠΎΠΊ β€” Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ понятно πŸ™„

Π‘ΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΎΠ±ΡƒΡ‡Π°ΡŽΡ‰ΠΈΠ΅ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹, понятныС для всСх Π±Π΅Π· ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ, довольно слоТно. ΠœΡ‹ ΠΎΡ‡Π΅Π½ΡŒ стараСмся, Π½ΠΎ всСгда Π΅ΡΡ‚ΡŒ Ρ‡Ρ‚ΠΎ ΡƒΠ»ΡƒΡ‡ΡˆΠ°Ρ‚ΡŒ. Если Π²Ρ‹ встрСтили ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Π°ΠΌ нСпонятСн, ΠΎΠΏΠΈΡˆΠΈΡ‚Π΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ Π² Β«ΠžΠ±ΡΡƒΠΆΠ΄Π΅Π½ΠΈΡΡ…Β». ИдСально, Ссли Π²Ρ‹ сформулируСтС нСпонятныС ΠΌΠΎΠΌΠ΅Π½Ρ‚Ρ‹ Π² Π²ΠΈΠ΄Π΅ вопросов. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ нСсколько Π΄Π½Π΅ΠΉ для внСсСния ΠΏΡ€Π°Π²ΠΎΠΊ.

ΠšΡΡ‚Π°Ρ‚ΠΈ, Π²Ρ‹ Ρ‚ΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡ‡Π°ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π² ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΠΈ курсов: Π²Π½ΠΈΠ·Ρƒ Π΅ΡΡ‚ΡŒ ссылка Π½Π° исходный ΠΊΠΎΠ΄ ΡƒΡ€ΠΎΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ прямо ΠΈΠ· Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.

ПолСзноС

  • ΠžΠ±ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°ΠΉΡ‚Π΅ Π² элСмСнт Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ основныС мСню сайта ΠΈΠ»ΠΈ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ страницы. Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ мСню Π½Π΅ Π½ΡƒΠΆΠ΄Π°ΡŽΡ‚ΡΡ Π² ΠΎΠ±Ρ‘Ρ€Ρ‚ΠΊΠ΅ Π² Ρ‚Π΅Π³ <nav>

  • Навигация ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π² любой области страницы, Π° Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² шапкС сайтС

β†ΠŸΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠΉ

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉβ†’

Нашли ΠΎΡˆΠΈΠ±ΠΊΡƒ? Π•ΡΡ‚ΡŒ Ρ‡Ρ‚ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ? ΠŸΡƒΠ»Ρ€Π΅ΠΊΠ²Π΅ΡΡ‚Ρ‹ ΠΏΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‚ΡΡ https://github.com/hexlet-basics

15 Tailwind Menu

ΠšΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡ бСсплатных ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Tailwind CSS menu ΠΎΡ‚ Codepen ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… рСсурсов.

  1. МСню CSS
  2. МСню Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ
  3. МСню JavaScript
  4. Π Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ МСню
  5. МСню jQuery
О кодС

АнимированныС ΠΈΠΊΠΎΠ½ΠΊΠΈ мСню Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€ΠΎΠ²

ΠšΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€-мСню Tailwind CSS. Волько HTML, Π±Π΅Π· ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ CSS, Π±Π΅Π· JavaScript.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

ВСрсия ΠΏΠΎΠΏΡƒΡ‚Π½ΠΎΠ³ΠΎ Π²Π΅Ρ‚Ρ€Π°: 3.0.18

О кодС

МСгамСню

МСгамСню Π½Π° чистом CSS.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

ВСрсия ΠΏΠΎΠΏΡƒΡ‚Π½ΠΎΠ³ΠΎ Π²Π΅Ρ‚Ρ€Π°: 2.2.19

О кодС

Анимация мСню Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Π°

Анимация открытия ΠΈ закрытия мСню Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ TailwindCSS. НСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ CSS.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

ВСрсия ΠΏΠΎΠΏΡƒΡ‚Π½ΠΎΠ³ΠΎ Π²Π΅Ρ‚Ρ€Π°: 2.0.3

О кодС

МобильноС мСню ΠŸΠΎΠΏΡƒΡ‚Π½Ρ‹ΠΉ Π²Π΅Ρ‚Π΅Ρ€

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

ВСрсия ΠΏΠΎΠΏΡƒΡ‚Π½ΠΎΠ³ΠΎ Π²Π΅Ρ‚Ρ€Π°: 2. 0.3

О кодС

МСню Biings

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

ВСрсия ΠΏΠΎΠΏΡƒΡ‚Π½ΠΎΠ³ΠΎ Π²Π΅Ρ‚Ρ€Π°: 2.0.0+

О кодС

Lo-Fi Tailwind CSS Mega Menu

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

ВСрсия ΠΏΠΎΠΏΡƒΡ‚Π½ΠΎΠ³ΠΎ Π²Π΅Ρ‚Ρ€Π°: 1.8.10

О кодС

ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ

ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

ВСрсия ΠΏΠΎΠΏΡƒΡ‚Π½ΠΎΠ³ΠΎ Π²Π΅Ρ‚Ρ€Π°: 1.4.6

О кодС

Π’Π΅ΠΌΠ½Ρ‹ΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚

Π’Π΅ΠΌΠ½Ρ‹ΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Tailwind CSS.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

ВСрсия ΠΏΠΎΠΏΡƒΡ‚Π½ΠΎΠ³ΠΎ Π²Π΅Ρ‚Ρ€Π°: 1. 4.6

О кодС

ПанСль мСню GSAP + Tailwind 3D

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: vue.js, gsap.js

ВСрсия ΠΏΠΎΠΏΡƒΡ‚Π½ΠΎΠ³ΠΎ Π²Π΅Ρ‚Ρ€Π°: 1.4.6

О кодС

ΠœΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню с Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ

Π’Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню. ПолСзно ΠΏΡ€ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. Π’ΠΎΡΡ…ΠΈΡ‚ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

ВСрсия ΠΏΠΎΠΏΡƒΡ‚Π½ΠΎΠ³ΠΎ Π²Π΅Ρ‚Ρ€Π°: 1.2.0

О кодС

ΠœΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹ΠΉ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉΡΡ список

ΠœΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹ΠΉ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉΡΡ список для Tailwind CSS.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

ВСрсия ΠΏΠΎΠΏΡƒΡ‚Π½ΠΎΠ³ΠΎ Π²Π΅Ρ‚Ρ€Π°: 1.2.0

О кодС

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΏΠ°ΠΏΠΊΠΈ

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: alpine. js

ВСрсия ΠΏΠΎΠΏΡƒΡ‚Π½ΠΎΠ³ΠΎ Π²Π΅Ρ‚Ρ€Π°: 1.2.0

О кодС

ΠŸΡ€ΠΎΡΡ‚Π°Ρ панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ

ΠžΡ‡Π΅Π½ΡŒ простая панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ для быстрого создания Π²Π΅Π±-сайтов ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

ВСрсия ΠΏΠΎΠΏΡƒΡ‚Π½ΠΎΠ³ΠΎ Π²Π΅Ρ‚Ρ€Π°: 0.3.0

О кодС

Мобильная навигация Dribbble

ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Dribbble с Tailwind CSS. Π‘Π΅Π· Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ CSS.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: boxicons.css

ВСрсия ΠΏΠΎΠΏΡƒΡ‚Π½ΠΎΠ³ΠΎ Π²Π΅Ρ‚Ρ€Π°: 1.1.2

О кодС

Airbnb-подобная панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ

Навигационная панСль Π² стилС Airbnb для Tailwind CSS.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

ВСрсия ΠΏΠΎΠΏΡƒΡ‚Π½ΠΎΠ³ΠΎ Π²Π΅Ρ‚Ρ€Π°: 0. 3.0

68 мСню JavaScript

ΠšΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡ бСсплатных Π²Π°Π½ΠΈΠ»ΡŒΠ½Ρ‹Ρ… Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… мСню JavaScript ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² ΠΊΠΎΠ΄Π°: ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹Ρ…, Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ…, Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΡ…, Π»ΠΈΠΏΠΊΠΈΡ… ΠΈ полностраничных . ОбновлСниС ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ апрСля 2020 Π³ΠΎΠ΄Π°. 35 Π½ΠΎΠ²Ρ‹Ρ… ΠΏΡ€Π΅Π΄ΠΌΠ΅Ρ‚ΠΎΠ².

  1. МСню Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ
  2. МСню CSS
  3. МСню jQuery
  4. Π Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ МСню
  5. МСню ΠΏΠΎΠΏΡƒΡ‚Π½ΠΎΠ³ΠΎ Π²Π΅Ρ‚Ρ€Π°
О кодС

Progress Nav Concept с использованиСм Intersection Observer API

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

О кодС

Π’Ρ‹Π±ΠΎΡ€ Π²Π΅ΠΊΡ‚ΠΎΡ€Π°/ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

О кодС

ЦСлСвая страница туристичСского Π²ΠΈΠ΄Π΅ΠΎ

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

О кодС

Боковая панСль Π’Π²ΠΈΡ‚Ρ‚Π΅Ρ€Π°

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: gsap. js

О кодС

ВыдвиТная навигация с GSAP 3

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: gsap.js

О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

Π‘ ΠΊΠΎΠ΄

Навигация Endless Wheel, созданная с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ AlpineJS ΠΈ TailwindCSS

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: tailwind.css, alpine.js

О кодС

МСню для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅ΠΉ страницы с Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ сСтки

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

О кодС

ΠŸΠΎΠ»Π½ΠΎΡΠΊΡ€Π°Π½Π½Π°Ρ панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

О кодС

Анимация Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΏΠΎ мСню

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: gsap. js

О кодС

ЦСлСвая страница Π²Π΅Π±-сайта для ΠΏΡƒΡ‚Π΅ΡˆΠ΅ΡΡ‚Π²ΠΈΠΉ/отслСТивания

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

О кодС

ΠšΠΎΠ½Ρ‚Π΅ΠΊΡΡ‚Π½ΠΎΠ΅ мСню

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

О кодС

Модная навигация

ΠŸΡ€ΠΈΡ‡ΡƒΠ΄Π»ΠΈΠ²Π°Ρ навигация с эффСктами навСдСния.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

О кодС

Навигация ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ изобраТСния

Π”Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π²ΡΡ‚ΡƒΠΏΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ мСняСтся. ΠžΡ‚ΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΠ΅ полоТСния ΠΌΡ‹ΡˆΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Ρ… CSS. ΠšΠΎΠ½Ρ‚ΡƒΡ€ тСкста раскрываСтся ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

О кодС

Анимация Ρ‚Ρ€Π΅Ρ…ΠΌΠ΅Ρ€Π½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

О кодС

ΠŸΡ€Ρ‹Π³Π°ΡŽΡ‰Π°Ρ липкая навигация

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: gsap. js

О кодС

Навигация Π² полноэкранном Ρ€Π΅ΠΆΠΈΠΌΠ΅

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

О кодС

Навигация Stretch

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: gsap.js

О кодС

Жирная анимация ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Splitting.js

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ Splitting.js, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π³Π»ΡƒΠΏΡ‹Π΅ ΠΈΠ΄Π΅ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: splitting.css, splitting.js

О кодС

ВзаимодСйствиС ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ссылки

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: splitting.js

О кодС

ВзаимодСйствиС ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ мСню

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: Π»ΠΎΠΊΠΎΠΌΠΎΡ‚ΠΈΠ²-scroll. css, imagesloaded.js, Π»ΠΎΠΊΠΎΠΌΠΎΡ‚ΠΈΠ²-scroll.js, gsap.js

О кодС

Анимация изобраТСния мСню ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

Π­Ρ„Ρ„Π΅ΠΊΡ‚ навСдСния для мСню, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ изобраТСния с Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ элСмСнта.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

О кодС

Навигация ΠΏΠΎ сСткС

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: gsap.js

О кодС

ΠšΠΎΠ½Ρ‚Π΅ΠΊΡΡ‚Π½ΠΎΠ΅ мСню

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

О кодС

БСсконСчно ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅ΠΌΠΎΠ΅ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ мСню

ΠšΡ€Π°Ρ‚ΠΊΠΈΠΉ ΠΎΠ±Π·ΠΎΡ€ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ мСню с бСсконСчной ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ, основанноС Π½Π° иллюзии цикличСской ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΊΠ»ΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… элСмСнтов.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

О кодС

Адаптивная навигация с Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: font-awesome. css

О кодС

Π Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΠΎΠ΅ мСню

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

О кодС

ΠŸΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: β€”

О кодС

ВСкстовоС мСню мигания Π² ΡˆΠ°Ρ…ΠΌΠ°Ρ‚Π½ΠΎΠΌ порядкС

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: β€”

О кодС

SVG-навигация

Tinker с синтаксисом SVG, элСмСнт textPath ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ startOffset для создания ΠΈΠ½Ρ‚Ρ€ΠΈΠ³ΡƒΡŽΡ‰Π΅ΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. Анимировано с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ anime.js.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: Π°Π½ΠΈΠΌΠ΅.js

О кодС

МСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΏΠΎ кусочкам Π±ΡƒΠΌΠ°Π³ΠΈ

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: gsap. js

О кодС

ΠŸΠΎΠ»Π½ΠΎΡΡ‚Ρ€Π°Π½ΠΈΡ‡Π½Π°Ρ навигация

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: gsap.js

О кодС

Навигация ΠΏΠΎ ΠΎΠΊΠΎΠ½Π½ΠΎΠΉ ΡˆΡ‚ΠΎΡ€ΠΊΠ΅

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

О кодС

ΠŸΠΎΠ»Π½ΠΎΡΡ‚Ρ€Π°Π½ΠΈΡ‡Π½Π°Ρ навигационная анимация

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

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

О кодС

ΠŸΠΎΠ»Π½ΠΎΡΡ‚Ρ€Π°Π½ΠΈΡ‡Π½Π°Ρ навигация

Π‘ΠΎΠ·Π΄Π°Π½Π° полностраничная навигация с использованиСм anime.js ΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… SVG.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: Π°Π½ΠΈΠΌΠ΅. js

О кодС

ΠŸΠ΅Ρ€Π΅ΠΊΠΈΠ΄Π½Π°Ρ навигация

НСмного ΠΏΠΎΠ΄Ρ‚ΠΎΡ€ΠΌΠ°ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π²ΠΎΠΌ пСрСворотС…

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: β€”

О кодС

Sticky ScrollSpy Navigation

Плавная ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° Π»ΠΈΠΏΠΊΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΏΠΎ скроллингу.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: β€”

О кодС

Анимация Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ CSS

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: font-awesome.css

О кодС

ΠŸΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π² мобильной Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ

ИдСя этой Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ большС Π½Π΅ ΠΏΠΎΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ Π² Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ ящик/ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½ΡƒΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ. Π₯ΠΈΡ‚Ρ€ΠΎΡΡ‚ΡŒ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π΄Π°Ρ‚ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΡƒ Π·Π°Π΄Π°Π½Π½ΡƒΡŽ высоту ΠΈ Ρ€Π°Π·Ρ€Π΅ΡˆΠΈΡ‚ΡŒ пСрСнос элСмСнтов Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, Π½ΠΎ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅. Π—Π°Ρ‚Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ JavaScript, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ всС элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±Ρ‹Π»ΠΈ Π·Π°Π²Π΅Ρ€Π½ΡƒΡ‚Ρ‹, ΠΈ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΈΡ… Π² ящикС/мобильной Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: resizeobserver.js

О кодС

МСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ с ΠΊΡ€ΡƒΠ³ΠΎΠ²ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: β€”

О кодС

ВзаимодСйствиС с мСню

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: β€”

О кодС

Навигация ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ навигация

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: Π°Π½ΠΈΠΌΠ΅.js

О кодС

Π©Π΅Π»Ρ‡ΠΊΠΎΠ²ΠΎΠ΅ мСню

Π©Π΅Π»Ρ‡ΠΊΠΎΠ²Ρ‹Π΅ мСню: доступноС ΠΈ постоянно ΡƒΠ»ΡƒΡ‡ΡˆΠ°Π΅ΠΌΠΎΠ΅ мСню с Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌΠΈΡΡ списками.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

О кодС

ΠŸΠ΅Ρ€Π΅Ρ‚Π°ΡΠΊΠΈΠ²Π°Π΅ΠΌΠΎΠ΅ мСню с ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ просмотром сСтки ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

ΠŸΠ΅Ρ€Π΅Ρ‚Π°ΡΠΊΠΈΠ²Π°Π΅ΠΌΠΎΠ΅ встроСнноС мСню с Ρ€Π°Π·Ρ€ΠΎΠ·Π½Π΅Π½Π½Ρ‹ΠΌΠΈ эскизами ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ просмотра сСтки ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: imagesloaded.js, charm.js, tweenmax.js, draggabilly.js

О кодС

Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ ΠΊΡ€ΡƒΠ³ΠΎΠ²ΠΎΠ΅ мСню

Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ Ρ€Π°Π΄ΠΈΠ°Π»ΡŒΠ½ΠΎΠ΅ мСню Π² HTML, CSS ΠΈ JS.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: font-awesome.css

О кодС

ΠšΡ€Π΅Π°Ρ‚ΠΈΠ²Π½ΠΎΠ΅ мСню для Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€ΠΎΠ²

Π“Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€-мСню с использованиСм Π½ΠΎΠ²ΠΎΠ³ΠΎ свойства CSS clip-path .

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge (частично), Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

О кодС

ΠšΡ€Π°ΡΠΈΠ²Ρ‹ΠΉ эффСкт для Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ

ΠžΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ эффСкт навСдСния ΠΈ Ρ‰Π΅Π»Ρ‡ΠΊΠ° для ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: β€”

О кодС

Навигация с SVG

SVG ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ ΡΡ€Π°Π±Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈ ΠΊΠ»ΠΈΠΊΠ΅.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: tweenmax.js

О кодС

Π›Π΅Π½Ρ‚ΠΎΡ‡Π½ΠΎΠ΅ мСню

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: β€”

О кодС

Π–Π΅Π»Π΅ΠΉΠ½ΠΎΠ΅ мСню

ΠšΠΎΠ½Ρ†Π΅ΠΏΡ‚ ΠΆΠ΅Π»Π΅ΠΉΠ½ΠΎΠ³ΠΎ мСню Π² HTML, CSS ΠΈ JS.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge (частично), Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: β€”

О кодС

Кнопки Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ

Кнопки Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: font-awesome. css

О кодС

КодовоС мСню

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

О кодС

ПанСли мСню сСтки CSS

АнимированныС ΠΏΠ°Π½Π΅Π»ΠΈ мСню Π½Π° основС сСтки CSS. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡƒΠ³Π»Ρƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π΅Π³ΠΎ Π² дСйствии.

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π΄Π°

Зависимости: β€”

О кодС

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

ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню.

О кодС

Адаптивная боковая панСль/навигационная панСль

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Π°Ρ/Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Π°Ρ адаптивная боковая панСль/навигационная панСль.

О кодС

Навигация Π²Π½Π΅ холста с ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π°ΠΌΠΈ страниц

Π‘ΠΎΠ»ΡŒΡˆΠ΅ экспСримСнтов с ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π°ΠΌΠΈ ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠ΅ΠΉ. РСшил Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ для ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ² страниц.

О кодС

Π¨Π°Π±Π»ΠΎΠ½ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ

Π¨Π°Π±Π»ΠΎΠ½ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ с Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΌ мСню Π½Π° основС Bootstrap.

О кодС

Π˜Π½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ

Π‘ΠΎΠΊΠΎΠ²ΠΎΠ΅ мСню с ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π°ΠΌΠΈ.

О кодС

ΠšΡ€ΡƒΠ³ΠΎΠ²Π°Ρ навигация

Π­ΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ для тСхничСского сайта. Π‘ΠΎΠ·Π΄Π°Π½ Π½Π° ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅ GreenSock Animation ΠΈ SVG.

О кодС

ПодмСню Π Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ

Π˜Π³Ρ€ΠΈΠ²Π°Ρ анимация, Ρ€Π°ΡΡˆΠΈΡ€ΡΡŽΡ‰Π°Ρ подмСню Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов Π² Π²Π΅Π±-прилоТСниях. ΠŸΠ΅Ρ€Π΅Π²ΠΎΠ΄ΠΈΡ‚, Π·Π°Ρ‚ΡƒΡ…Π°Π΅Ρ‚ ΠΈ трансформируСт ΠΈΠΊΠΎΠ½ΠΊΠΈ SVG. Π’Π΄ΠΎΡ…Π½ΠΎΠ²Π»Π΅Π½Π½Ρ‹ΠΉ Π’ΠΈΡ€Π΄ΠΆΠΈΠ»ΠΎΠΌ Панасом, ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ Π² подмСню Π½Π° Π΄Ρ€ΠΈΠ±Π±Π»Π΅.

О кодС

Кнопка вкладки Morphing со списком

Кнопка ΠΌΠΎΡ€Ρ„ΠΈΠ½Π³Π° с Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΌ списком ΠΏΠΎΠ΄ Π½Π΅ΠΉ.

О кодС

ВСкстовый Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ES6/контСкстноС мСню

БовмСстимыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹: Chrome, Edge, Firefox, Opera, Safari

ΠžΡ‚Π²Π΅Ρ‚: Π½Π΅Ρ‚

Зависимости: font-awesome.css,

О кодС

Π­Ρ„Ρ„Π΅ΠΊΡ‚ подсвСтки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ CSS, Π½ΠΎ всС Ρ€Π°Π²Π½ΠΎ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ выглядит Π±Π΅Π· Π½ΠΈΡ….

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

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