Π‘Π°ΠΉΡ‚

МСню для сайта: ΠšΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΡ… мСню для сайта | html, css ΠΈ javascript (jQuery)

03.06.2018

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

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ мСню с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS ΠΈ HTML

Если ваш Π²Π΅Π±-сайт Π½Π΅ ограничиваСтся ΠΎΠ΄Π½ΠΎΠΉ Π²Π΅Π±-страницСй, Ρ‚ΠΎ стоит ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ (мСню). МСню β€” Ρ€Π°Π·Π΄Π΅Π» Π²Π΅Π±-сайта, ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½Ρ‹ΠΉ ΠΏΠΎΠΌΠΎΠ³Π°Ρ‚ΡŒ ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŽ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΏΠΎ сайту. Π›ΡŽΠ±ΠΎΠ΅ мСню прСдставляСт собой список ссылок, Π²Π΅Π΄ΡƒΡ‰ΠΈΡ… Π½Π° Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ страницы сайта. Π‘Π°ΠΌΡ‹ΠΌ простым способом Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π½Π° сайт являСтся созданиС мСню с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS ΠΈ HTML.

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

ΠŸΠ΅Ρ€Π²Ρ‹ΠΌ шагом создания Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню Π±ΡƒΠ΄Π΅Ρ‚ созданиС ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка. Π’Π°ΠΊΠΆΠ΅ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ список, поэтому ΠΌΡ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΊ Π½Π΅ΠΌΡƒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ id с ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ Β«navbarΒ». ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт <li> нашСго списка Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΉ ссылкС:

<ul>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#">ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹</a></li>
  <li><a href="#">О нас</a></li>
</ul>

Наша ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π°Ρ Π·Π°Π΄Π°Ρ‡Π° Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² сбросС стилСй списка, установлСнных ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. Нам Π½ΡƒΠΆΠ½ΠΎ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ внСшниС ΠΈ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы Ρƒ самого списка ΠΈ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ Ρƒ ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² списка. Π—Π°Ρ‚Π΅ΠΌ Π·Π°Π΄Π°Π΄ΠΈΠΌ Π½ΡƒΠΆΠ½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ:

#navbar {
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 100px;
}

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΡ€ΠΈΡˆΠ»ΠΎ врСмя ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ сами ссылки. ΠœΡ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΊ Π½ΠΈΠΌ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠΌ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ тСкста: Ρ†Π²Π΅Ρ‚, Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ Π½Π°ΡΡ‹Ρ‰Π΅Π½Π½ΠΎΡΡ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚Π°, ΡƒΠ±Π΅Ρ€Π΅ΠΌ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅, Π΄ΠΎΠ±Π°Π²ΠΈΠΌ нСбольшиС отступы ΠΈ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠΌ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ элСмСнта <a> со строчного Π½Π° Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ. Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π±Ρ‹Π»ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ‹ лСвая ΠΈ ниТняя Ρ€Π°ΠΌΠΊΠΈ ΠΊ ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌ списка.

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

#navbar a {
  background-color: #949494;
  color: #fff;
  padding: 5px;
  text-decoration: none;
  font-weight: bold;
  border-left: 5px solid #33ADFF;
  display: block;
}
#navbar li {
  border-left: 10px solid #666;
  border-bottom: 1px solid #666;
}

ΠœΡ‹ объСдинили вСсь ΠΊΠΎΠ΄, описанный Π²Ρ‹ΡˆΠ΅, Π² ΠΎΠ΄ΠΈΠ½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ, Π½Π°ΠΆΠ°Π² Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π½Π° страницу с ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ ΠΈ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>НазваниС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°</title>
    <style>
      #navbar {
        margin: 0;
        padding: 0;
        list-style-type: none;
        width: 100px;
      }
      #navbar li {
        border-left: 10px solid #666;
        border-bottom: 1px solid #666;
      }
	  #navbar a {
        background-color: #949494;
        color: #fff;
        padding: 5px;
        text-decoration: none;
		font-weight: bold;
        border-left: 5px solid #33ADFF;
		display: block;
      }
    </style>
  </head>

  <body>
  
    <ul>
      <li><a href="#">Главная</a></li>
      <li><a href="#">Новости</a></li>
      <li><a href="#">ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹</a></li>
      <li><a href="#">О нас</a></li>
    </ul>

  </body>
</html>
ΠŸΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Β»

ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ Π½Π° ΠΏΡƒΠ½ΠΊΡ‚ мСню Π΅Π³ΠΎ внСшний Π²ΠΈΠ΄ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ, привлСкая ΠΊ сСбС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ эффСкт ΠΌΠΎΠΆΠ½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ псСвдо-класса :hover.

ВСрнСмся ΠΊ рассмотрСнному Ρ€Π°Π½Π΅Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π² Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ:

#navbar a:hover {
  background-color: #666;
  border-left: 5px solid #3333FF;
}
ΠŸΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Β»

Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ мСню

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

Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ мСню ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΡƒΡ‚Π΅ΠΌ стилизации ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ³ΠΎ списка. Бвойству display для элСмСнтов <li> Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΈΡΠ²ΠΎΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ inline, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ списка Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Π»ΠΈΡΡŒ Π΄Ρ€ΡƒΠ³ Π·Π° Π΄Ρ€ΡƒΠ³ΠΎΠΌ.

Для размСщСния ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, сначала создадим ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список с ссылками:

<ul>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#">ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹</a></li>
  <li><a href="#">О нас</a></li>
</ul>

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

#navbar {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#navbar li { display: inline; }
ΠŸΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Β»

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π°ΠΌ ΠΎΡΡ‚Π°Π»ΠΎΡΡŒ лишь ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ стилСвоС ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ для нашСго Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню:

#navbar {
  margin: 0;
  padding: 0;
  list-style-type: none;
  border: 2px solid #0066FF;
  border-radius: 20px 5px;
  width: 550px;
  text-align: center;
  background-color: #33ADFF;
}
#navbar a {
  color: #fff;
  padding: 5px 10px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  width: 100px;
}
#navbar a:hover {
  border-radius: 20px 5px;
  background-color: #0066FF;
}
ΠŸΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Β»

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

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

Π‘Π½Π°Ρ‡Π°Π»Π° Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ HTML-структуру нашСго мСню. ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ ссылки ΠΌΡ‹ помСстим Π² ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список:

<ul>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#">ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹</a></li>
  <li><a href="#">О нас</a></li>
</ul>

ΠŸΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ ΠΌΡ‹ размСстим Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΌ спискС, Π²Π»ΠΎΠΆΠΈΠ² Π΅Π³ΠΎ Π² элСмСнт <li>, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ содСрТит Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΡƒΡŽ ссылку ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ². Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ ΠΈΠΌΠ΅Π΅ΠΌ Ρ‡Π΅Ρ‚ΠΊΡƒΡŽ структуру нашСй Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ:

<ul>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#">ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹</a>
    <ul>
      <li><a href="#">АдрСс</a></li>
      <li><a href="#">Π’Π΅Π»Π΅Ρ„ΠΎΠ½</a></li>
      <li><a href="#">Email</a></li>
    </ul>
  </li>
  <li><a href="#">О нас</a></li>
</ul>
ΠŸΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Β»

Π’Π΅ΠΏΠ΅Ρ€ΡŒ приступим ΠΊ написанию CSS ΠΊΠΎΠ΄Π°. Для Π½Π°Ρ‡Π°Π»Π° Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ список с ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ объявлСния display: none;, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ Π½Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»ΠΈΡΡŒ Π½Π° Π²Π΅Π±-страницС всС врСмя. Для отобраТСния ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° элСмСнт <li> список снова Π±Ρ‹Π» ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ Π² Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ элСмСнт:

#navbar ul { display: none; }
#navbar li:hover ul { display: block; }

Π£Π±ΠΈΡ€Π°Π΅ΠΌ Ρƒ ΠΎΠ±ΠΎΠΈΡ… списков отступы ΠΈ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹, установлСнныС ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ списка с Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΌΠΈ ссылками Π΄Π΅Π»Π°Π΅ΠΌ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΌΠΈ, формируя Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ мСню, Π½ΠΎ для элСмСнтов списка, содСрТащих ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ Π·Π°Π΄Π°Π΅ΠΌ float: none;, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»ΠΈΡΡŒ Π΄Ρ€ΡƒΠ³ ΠΏΠΎΠ΄ Π΄Ρ€ΡƒΠ³ΠΎΠΌ.

#navbar, #navbar ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#navbar li { float: left; }
#navbar ul li { float: none; }

Π—Π°Ρ‚Π΅ΠΌ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ нашС Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ подмСню Π½Π΅ смСщало ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, располоТСнный ΠΏΠΎΠ΄ панСлью Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, Π²Π½ΠΈΠ·. Для этого ΠΌΡ‹ Π·Π°Π΄Π°Π΄ΠΈΠΌ ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌ списка position: relative;, Π° списку, содСрТащСму ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ position: absolute; ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ свойство top со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ 100%, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ подмСню ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»ΠΎΡΡŒ Ρ‚ΠΎΡ‡Π½ΠΎ ΠΏΠΎΠ΄ ссылкой.

#navbar ul {
  display: none;
  position: absolute;
  top: 100%;
}
#navbar li {
  float: left;
  position: relative;
}
#navbar { height: 30px; }
ΠŸΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Β»

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

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π°ΠΌ ΠΎΡΡ‚Π°Π»ΠΎΡΡŒ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±Π° Π½Π°ΡˆΠΈΡ… списка ΠΈ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Π±ΡƒΠ΄Π΅Ρ‚ Π³ΠΎΡ‚ΠΎΠ²ΠΎ:

#navbar ul {
  display: none;
  background-color: #f90;
  position: absolute;
  top: 100%;
}
#navbar li:hover ul { display: block; }
#navbar, #navbar ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#navbar {
  height: 30px;
  background-color: #666;
  padding-left: 25px;
  min-width: 470px;
}
#navbar li {
  float: left;
  position: relative;
  height: 100%;
}
#navbar li a {
  display: block;
  padding: 6px;
  width: 100px;
  color: #fff;
  text-decoration: none;
  text-align: center;
}
#navbar ul li { float: none; }
#navbar li:hover { background-color: #f90; }
#navbar ul li:hover { background-color: #666; }
ΠŸΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Β»

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΡ‚ΠΎΠ΅ мСню сайта

Из этой ΡΡ‚Π°Ρ‚ΡŒΠΈ Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅:

  • Каким Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ идСальноС мСню сайта
  • КакиС Π²ΠΈΠ΄Ρ‹ мСню для сайта Ρ€Π°Π·Π»ΠΈΡ‡Π°ΡŽΡ‚
  • Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ мСню сайта
  • Как ΠΎΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π²Π»ΠΈΡΡ‚ΡŒ Π½Π° ΠΏΡ€ΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ Π² поисковиках
  • КакиС Π½ΡŽΠ°Π½ΡΡ‹ ΡƒΡ‡Π΅ΡΡ‚ΡŒ Π² процСссС

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

РазбСрСмся, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΡƒΠ΄ΠΎΠ±Π½ΡƒΡŽ ΠΈ ΠΏΠΎΠ»Π΅Π·Π½ΡƒΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΡƒΡŽ систСму.

Π§Ρ‚ΠΎ собой прСдставляСт мСню сайта


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

Основная Ρ€ΠΎΠ»ΡŒ мСню Π³Π»Π°Π²Π½ΠΎΠΉ страницы сайта – навигационная, ΠΎΠ½ΠΎ ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ ΠΈ ускоряСт ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Π² ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π΅, ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ Π½Π°ΠΉΡ‚ΠΈ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, Π½Π΅ тратя врСмя Π½Π° ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅ страниц, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π² Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ Π΅ΠΌΡƒ Π½Π΅ Π½ΡƒΠΆΠ½Ρ‹.

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ красивоС мСню для сайта, Π²Π΅Π±-мастСра ΠΏΡ€ΠΈΠ±Π΅Π³Π°ΡŽΡ‚ ΠΊ ΠΏΠΎΠΌΠΎΡ‰ΠΈ CSS. МоТно Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΌΠΈ шаблонами, скачав ΠΈΡ… со спСциализированных рСсурсов. Π“Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ скрипта Π½Π° Π±Π°Π·Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² осущСствляСтся Π² ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… ΠΎΠ½Π»Π°ΠΉΠ½-сСрвисах.

ΠŸΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ΅ мСню сайта Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΎΡ‚Π²Π΅Ρ‡Π°Ρ‚ΡŒ нСскольким Π²Π°ΠΆΠ½Ρ‹ΠΌ трСбованиям:

  1. Π”ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ. Π­Ρ‚ΠΎΡ‚ элСмСнт слуТит Π½Π°Π²ΠΈΠ³Π°Ρ‚ΠΎΡ€ΠΎΠΌ ΠΏΡ€ΠΈ Β«ΠΏΡƒΡ‚Π΅ΡˆΠ΅ΡΡ‚Π²ΠΈΠΈΒ» ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΏΠΎ Ρ€Π°Π·Π΄Π΅Π»Π°ΠΌ рСсурса, позволяСт ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π°. Для удобства посСтитСлСй мСню Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ страницС Π²Π΅Π±-сайта ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡ‚ΡŒ Π΄Π΅Π»Π°Ρ‚ΡŒ шаг Π½Π°Π·Π°Π΄ для Π²ΠΎΠ·Π²Ρ€Π°Ρ‚Π° Π½Π° ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠΉ URL.
  2. Π˜Π½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятноС ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Ρ†Π΅Π½ΠΈΡ‚ рСсурсы, настроСнныС Π΄Ρ€ΡƒΠΆΠ΅Π»ΡŽΠ±Π½ΠΎ, Ρ€Π°Π±ΠΎΡ‚Π° с ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ проста ΠΈ Π»ΠΎΠ³ΠΈΡ‡Π½Π°. Об этом Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ структуры ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π° мСню.
  3. Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ. ΠŸΡ€ΠΎΠ΄ΡƒΠΌΠ°Π½Π½Π°Ρ структура Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ систСмы слуТит Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΌ ΠΏΡƒΡ‚Π΅Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»Π΅ΠΌ, благодаря Π΅ΠΉ Π»Π΅Π³ΠΊΠΎ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΡƒΠ΅ΡˆΡŒΡΡ Π² содСрТимом. Π€ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π» мСню Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅Ρ‚ΡΡ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Β«Ρ…Π»Π΅Π±Π½Ρ‹Ρ… ΠΊΡ€ΠΎΡˆΠ΅ΠΊΒ» – ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΌΠ΅Ρ‚ΠΎΠΊ, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ Π½Π° ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠ΅ страницы ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π΅ мСстополоТСниС.
  4. Π‘Π±Π°Π»Π°Π½ΡΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΡΡ‚ΡŒ структуры. Π‘Π»ΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, сколько ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΉ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Π³Π»Π°Π²Π½ΠΎΠ΅ мСню сайта. ΠžΡ‚ создатСлСй рСсурса трСбуСтся ΡƒΠΌΠ΅Π½ΠΈΠ΅ Π΄ΠΎΡΡ‚ΠΈΠ³Π°Ρ‚ΡŒ баланса ΠΌΠ΅ΠΆΠ΄Ρƒ количСством основных Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ² ΠΈ числом ΠΏΠΎΠ΄ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΉ.
  5. Грамотная организация элСмСнтов. Π˜Π΅Ρ€Π°Ρ€Ρ…ΠΈΡ ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΉ выстраиваСтся Π² Π²ΠΈΠ΄Π΅ ΠΏΠ΅Ρ€Π΅Π²Π΅Ρ€Π½ΡƒΡ‚ΠΎΠΉ ΠΏΠΈΡ€Π°ΠΌΠΈΠ΄Ρ‹: Π²Π²Π΅Ρ€Ρ…Ρƒ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ ΠΎΠ±Ρ‰ΠΈΠ΅ Ρ€Π°Π·Π΄Π΅Π»Ρ‹, с ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ шагом Π²Π½ΠΈΠ· информация дСтализируСтся.
  6. ΠŸΠΎΠ½ΡΡ‚Π½Ρ‹Π΅ названия. Π”Ρ€ΡƒΠΆΠ΅Π»ΡŽΠ±Π½ΠΎΡΡ‚ΡŒ рСсурса Π΄ΠΎΠ»ΠΆΠ½Π° ΠΏΡ€ΠΎΡΠ²Π»ΡΡ‚ΡŒΡΡ ΠΈ Π² создании доступных Π½Π°ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΠΉ для Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ². Π’Π΅Ρ€ΠΌΠΈΠ½ΠΎΠ² ΠΈ ΡƒΠ·ΠΊΠΎΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΉ лСксики Π»ΡƒΡ‡ΡˆΠ΅ ΠΈΠ·Π±Π΅Π³Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΈ дублирования ΠΎΠ΄Π½ΠΎΠΉ ΠΈ Ρ‚ΠΎΠΉ ΠΆΠ΅ надписи Π½Π° страницС.
  7. Π‘Π»Π΅Π΄ΠΎΠ²Π°Π½ΠΈΠ΅ Π΅Π΄ΠΈΠ½ΠΎΠΉ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΈ. НСобходимо ΡΡ‚Ρ€Π΅ΠΌΠΈΡ‚ΡŒΡΡ ΠΊ ΡΠΎΡ…Ρ€Π°Π½Π΅Π½ΠΈΡŽ Π΅Π΄ΠΈΠ½ΠΎΠ³ΠΎ Π²ΠΈΠ΄Π° элСмСнтов ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ уровня Π²ΠΎ врСмя пСрСмСщСния ΠΏΠΎ Π²Π΅Π±-сайту ΠΈ ΠΎΠ΄Π½ΠΎΠΎΠ±Ρ€Π°Π·Π½ΠΎΠΉ Ρ€Π΅Π°ΠΊΡ†ΠΈΠΈ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора. Для элСмСнтов ΠΎΠ΄Π½ΠΎΠ³ΠΎ уровня подбираСтся ΠΎΠ±Ρ‰ΠΈΠΉ ΡΡ‚ΠΈΠ»ΡŒ.
  8. Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ страницы. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅Ρ‚ΡŒ доступ ΠΊ свСдСниям ΠΎ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ, ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π°ΠΌ ΠΈ Ρ€Π°Π·Π΄Π΅Π»Ρƒ ΠΏΠΎΠΌΠΎΡ‰ΠΈ с любой Π²ΠΊΠ»Π°Π΄ΠΊΠΈ рСсурса. Они ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΡ‚ΡŒΡΡ Π² ΠΎΠ±Ρ‰Π΅ΠΌ Π±Π»ΠΎΠΊΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ осущСствлялся Π² ΠΎΠ΄ΠΈΠ½ ΠΊΠ»ΠΈΠΊ.
Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ
Β«Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° Π΄ΠΈΠ·Π°ΠΉΠ½Π° сайта: ΠΎΡ‚ Π²Ρ‹Π±ΠΎΡ€Π° стиля Π΄ΠΎ получСния ΠΌΠ°ΠΊΠ΅Ρ‚Π°Β» ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ Π²ΠΈΠ΄Ρ‹ мСню сайта + ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹

  • Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅.


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

Для сайтов с Ρ€Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚ΠΎΠΉ структурой Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ считаСтся Π»ΡƒΡ‡ΡˆΠΈΠΌ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ.

  • Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅.


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

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅, ΠΈΠ»ΠΈ Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ мСню для сайта, Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния Π΄Π»ΠΈΠ½Ρ‹ входящих Π² Π½Π΅Π³ΠΎ элСмСнтов: ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚Π΅Π½ΠΈΠ΅ слСдуСт ΠΎΡ‚Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠΌ наимСнованиям, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ‡Π΅Π½ΡŒ Π½Π΅ выглядСл слишком ΡˆΠΈΡ€ΠΎΠΊΠΈΠΌ.

  • Ѐиксированный Ρ…Π΅Π΄Π΅Ρ€.


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

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π² фиксированный Ρ…Π΅Π΄Π΅Ρ€ ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΈ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ° сдСлаСт Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ Π΅Ρ‰Π΅ Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠΌΡ„ΠΎΡ€Ρ‚Π½ΠΎΠΉ для посСтитСлСй.


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


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

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, сущСствуСт ΠΎΠΏΠ°ΡΠ½ΠΎΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π½Π΅ всС смогут ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Ρ€Π°ΡΡˆΠΈΡ„Ρ€ΠΎΠ²Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΎΠΊ, поэтому Ρ‚Π°ΠΊΠΎΠΉ способ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ Π½Π° тСматичСских сайтах для ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π‘Π΅Ρ‚ΠΈ.

  • НиТнСС мСню сайта.


Для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ Π½Π΅ боится экспСримСнтов ΠΈ Π³ΠΎΡ‚ΠΎΠ² Π½Π° смСлыС шаги, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊ своСму ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρƒ, Π΅ΡΡ‚ΡŒ Π½Π΅ΠΎΠΆΠΈΠ΄Π°Π½Π½ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ – ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ список ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² Π²Π½ΠΈΠ·Ρƒ. Для сайтов, Π³Π΄Π΅ главная страница ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½Π° ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΉ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ, это Π»ΡƒΡ‡ΡˆΠΈΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π½Π΅ ΠΌΠ΅ΡˆΠ°Π΅Ρ‚ Π²ΠΎΡΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

Π§Ρ‚ΠΎΠ±Ρ‹ посСтитСли Π½Π΅ испытывали Π·Π°Ρ‚Ρ€ΡƒΠ΄Π½Π΅Π½ΠΈΠΉ с поиском Π½Π°Π·Π²Π°Π½ΠΈΠΉ Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ², Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ этого Π±Π»ΠΎΠΊΠ°.

Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ
«ИдСальная шапка сайта: ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΈ содСрТаниС» ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

Π‘ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ мСню сайта

  • Π”Π²Π° Ρ€Π°Π·Π½Ρ‹Ρ… мСню: ΠΎΠ΄Π½ΠΎ располагаСтся Π²Π²Π΅Ρ€Ρ…Ρƒ страницы, Π΄Ρ€ΡƒΠ³ΠΎΠ΅ появляСтся ΠΏΡ€ΠΈ скроллС.

ΠŸΠ΅Ρ€Π²ΠΎΠ΅ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ, названия Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ² ΠΈ ссылки Π½Π° ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ сСти. Π’ процСссС ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ появляСтся вторая Ρ€Π°Π·Π½ΠΎΠ²ΠΈΠ΄Π½ΠΎΡΡ‚ΡŒ: с Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠΌ, ΠΏΡ€ΠΈΠ·Ρ‹Π²ΠΎΠΌ ΡΠΎΠ²Π΅Ρ€ΡˆΠΈΡ‚ΡŒ Ρ†Π΅Π»Π΅Π²ΠΎΠ΅ дСйствиС ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ для Π·Π°ΠΊΠ°Π·Π° Π·Π²ΠΎΠ½ΠΊΠ°.

  • МСню Β«Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Β».


Выглядит ΠΊΠ°ΠΊ Ρ‚Ρ€ΠΈ полоски, Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½Π½Ρ‹Π΅ Π² ΡƒΠ³Π»Ρƒ экрана. Полная вСрсия становится доступна послС ΠΊΠ»ΠΈΠΊΠ° ΠΏΠΎ Π½ΠΈΠΌ. Π’Π°ΠΊΠΎΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ примСняСтся для привлСчСния внимания ΠΊ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Ρƒ ΠΈ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΎΡ‚Π²Π»Π΅ΠΊΠ°ΡŽΡ‰ΠΈΡ… Ρ„Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ².

Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌΡ‹Π΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ ΠΏΠΎ Π΄Π°Π½Π½ΠΎΠΉ Ρ‚Π΅ΠΌΠ΅:

РаспространСно ΠΏΡ€ΠΈ создании ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… вСрсий Π²Π΅Π±-сайтов. ΠžΠ±Ρ‹Ρ‡Π½ΠΎΠΌΡƒ мСню присваиваСтся Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ Β«Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°Β», Π° Β«Π±ΡƒΡ€Π³Π΅Ρ€ΡƒΒ» – Β«Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ…Β».

  • ΠœΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ΅ мСню.


НаТатиС ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ Π½Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ Π²Ρ‹ΠΏΠ°Π΄Π΅Π½ΠΈΠ΅ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ списка. Π‘Π΅Π· Ρ‚Π°ΠΊΠΎΠ³ΠΎ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ нСпросто ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ, ΠΊΠΎΠ³Π΄Π° рСсурс ΠΈΠΌΠ΅Π΅Ρ‚ ΡΠ»ΠΎΠΆΠ½ΡƒΡŽ структуру ΠΈ содСрТит большоС количСство ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ.

  • Π’ΠΊΠ»Π°Π΄ΠΊΠΈ (Ρ‚Π°Π±Ρ‹).


ΠŸΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΏΡ€ΠΈ нСобходимости Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ элСмСнт ΠΈΠ· ряда ΠΎΠ΄Π½ΠΎΡ‚ΠΈΠΏΠ½Ρ‹Ρ…. НапримСр, Π² ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ подсвСчиваСтся Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Ρ€Π°Π±ΠΎΡ‚Ρ‹, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΊΠ»ΠΈΠΊΠ½ΡƒΠ» ΠΌΡ‹ΡˆΠΊΠΎΠΉ.

Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ
«ВСрстка сайта: Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ инструмСнты для создания ΠΈ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈΒ» ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

Какой Π²ΠΈΠ΄ мСню для сайта Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ


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

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

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


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

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

Π‘ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ Π½Π΅Ρ€Π°Π·Ρ€Ρ‹Π²Π½ΠΎ связана рСализация ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½Ρ‹ΠΌΠΈ срСдствами. НаиболСС простым ΠΈ доступным Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠΌ являСтся мСню для сайта Π½Π° HTML, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Javascript ΠΈ Flash. Π§Ρ‚ΠΎΠ±Ρ‹ индСксация рСсурса поисковыми Ρ€ΠΎΠ±ΠΎΡ‚Π°ΠΌΠΈ Π±Ρ‹Π»Π° ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½ΠΎΠΉ, ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚Π΅Π½ΠΈΠ΅ ΠΎΡ‚Π΄Π°ΡŽΡ‚ мСню сайта Π½Π° HTML ΠΈ CSS.


ΠŸΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ структуры ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠΈ: ΠΎΡ‚ ΠΎΠ±Ρ‰Π΅Π³ΠΎ ΠΊ Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΌΡƒ. Π’ΠΎ ΠΈΠ·Π±Π΅ΠΆΠ°Π½ΠΈΠ΅ излишнСй громоздкости Π½Π΅ стоит слишком сильно Β«ΡƒΠ³Π»ΡƒΠ±Π»ΡΡ‚ΡŒΒ» мСню, Ρ‚Ρ€Π΅Ρ… ΡƒΡ€ΠΎΠ²Π½Π΅ΠΉ Π²ΠΏΠΎΠ»Π½Π΅ достаточно для ΠΊΠΎΠΌΡ„ΠΎΡ€Ρ‚Π½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΏΠΎ сайту.

Π’ особых случаях, ΠΊΠΎΠ³Π΄Π° спСцифика рСсурса Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ большСй Π³Π»ΡƒΠ±ΠΈΠ½Ρ‹ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½Π°Ρ…), примСняСтся структура Β«Ρ€Π΅ΡˆΠ΅Ρ‚ΠΊΠ°Β».

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

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

Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ
Β«Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° Π²Π΅Π±-сайтов: способы, инструмСнты ΠΈ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹Β» ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

ВлияниС мСню сайта Π½Π° ΠΏΡ€ΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅


Главная Ρ†Π΅Π»ΡŒ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ стрСмятся Π΄ΠΎΡΡ‚ΠΈΡ‡ΡŒ собствСнники рСсурсов, – мСсто Π² Ρ‚ΠΎΠΏΠ΅ поисковой Π²Ρ‹Π΄Π°Ρ‡ΠΈ. ΠŸΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π² Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΈ этой Π·Π°Π΄Π°Ρ‡ΠΈ соблюдСниС ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… условий:

  1. Удобная навигация ΠΈ грамотная ΠΏΠ΅Ρ€Π΅Π»ΠΈΠ½ΠΊΠΎΠ²ΠΊΠ°. ВнутрСнняя оптимизация Π² ΠΈΡ‚ΠΎΠ³Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ†Π΅Π½Π΅Π½Π° ΠΏΠΎ достоинству ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌΠΈ, ΠΈ поисковыми Ρ€ΠΎΠ±ΠΎΡ‚Π°ΠΌΠΈ. ΠŸΠ΅Ρ€Π΅Π»ΠΈΠ½ΠΊΠΎΠ²ΠΊΠ° ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΡ€ΠΈ ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ посСтитСлСй Π² ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π΅ рСсурса, позволяСт Π»Π΅Π³ΠΊΠΎ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΏΠΎ ссылкам Π² Π½ΡƒΠΆΠ½Ρ‹Π΅ Ρ€Π°Π·Π΄Π΅Π»Ρ‹. ΠŸΡ€Π°Π²ΠΈΠ»ΠΎ Ρ‚Ρ€Π΅Ρ… ΠΊΠ»ΠΈΠΊΠΎΠ² Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΡ‚Π°Ρ‚ΡŒ основным ΠΏΡ€ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΏΠΎ сайту.
  2. Π˜Π½Ρ‚Π΅Ρ€Π΅ΡΠ½Ρ‹Π΅ названия Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ² ΡΠΏΠΎΡΠΎΠ±ΡΡ‚Π²ΡƒΡŽΡ‚ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΡŽ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŒ ΠΏΡ€ΠΎΠ²Π΅Π΄Π΅Ρ‚ Π½Π° страницах ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. Для поисковиков это ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΡ€ΠΈΡ‚Π΅Ρ€ΠΈΠΉ ΠΏΡ€ΠΈ ΠΎΡ†Π΅Π½ΠΊΠ΅ повСдСнчСских Ρ„Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ².
  3. Грамотная Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° сайта ΠΏΠΎΠ΄Ρ€Π°Π·ΡƒΠΌΠ΅Π²Π°Π΅Ρ‚ созданиС сСмантичСского ядра. Для этого ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ собираСтся ΠΈ анализируСтся информация ΠΎ тСматичСских поисковых Ρ„Ρ€Π°Π·Π°Ρ…. Названия Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ² Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ собой самыС частотныС ΠΈΠ· ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… запросов. Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ мСню Π½ΡƒΠΆΠ½ΠΎ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ Π² тСсном ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π΅ с SEO-спСциалистом.
  4. ГрафичСскиС элСмСнты Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ½Π°Π±Π΄ΠΈΡ‚ΡŒ alt ΠΈ title, Ρ‡Ρ‚ΠΎΠ±Ρ‹ поисковики ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Π»ΠΈ ΠΈΡ… ΠΏΡ€ΠΈ индСксации рСсурса.
Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ
Β«Π‘Ρ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€Π° сайта: схСмы, совСты ΠΏΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅, ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹Β» ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

ΠŸΠ°Ρ€Π° слов ΠΎ ΠΏΡƒΠ½ΠΊΡ‚Π°Ρ… мСню сайта


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

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

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

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

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ мСню сайта

Π‘ тСхничСской Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния Ρ€Π΅Ρ‡ΡŒ ΠΈΠ΄Π΅Ρ‚ ΠΎ спискС ссылок, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΡ… ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π½Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΡƒΡŽ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΡŽΡŽ страницу рСсурса. ΠŸΡ€ΠΎΡ‰Π΅ всСго ΠΏΠΎΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ‚Π°ΠΊΡƒΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΡƒΡŽ систСму с использованиСм CSS ΠΈ HTML.

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


Π’ ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ создаСм ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ, Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΊ Π½Π΅ΠΌΡƒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ id с ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ Β«navbarΒ». ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ‚ <li> ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ²ΡˆΠ΅Π³ΠΎΡΡ списка Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΉ ссылкС:

<ul>

  <li><a href=Β»#Β»>Главная</a></li>

  <li><a href=Β»#Β»>Новости</a></li>

  <li><a href=Β»#Β»>ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹</a></li>

  <li><a href=Β»#Β»>О нас</a></li>

</ul>

Π”Π°Π»Π΅Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ±Ρ€ΠΎΡΠΈΡ‚ΡŒ стили списка, установлСнныС ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, ΡƒΠ±Ρ€Π°Ρ‚ΡŒ внСшниС ΠΈ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы ΠΈ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ². Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ шаг – Π·Π°Π΄Π°Ρ‚ΡŒ Ρ‚Ρ€Π΅Π±ΡƒΠ΅ΠΌΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ:

#navbar {

  margin: 0;

  padding: 0;

  list-style-type: none;

  width: 100px;

}

ΠŸΡ€ΠΈΡΡ‚ΡƒΠΏΠ°Π΅ΠΌ ΠΊ стилизации ссылок. Для этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π°, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² тСкста (Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, Ρ†Π²Π΅Ρ‚Π° ΠΈ насыщСнности ΡˆΡ€ΠΈΡ„Ρ‚Π°), ΡƒΠ΄Π°Π»Π΅Π½ΠΈΠ΅ подчСркивания. Π—Π°Ρ‚Π΅ΠΌ оформляСм отступы ΠΈ пСрСопрСдСляСм ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ элСмСнта <a> ΡΠΎ строчного Π½Π° Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ. Π•Ρ‰Π΅ ΠΎΠ΄Π½ΠΎ дСйствиС – Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π»Π΅Π²ΠΎΠΉ ΠΈ Π½ΠΈΠΆΠ½Π΅ΠΉ Ρ€Π°ΠΌΠΊΠΈ ΠΊ ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌ пСрСчня.

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

#navbar a {

  background-color: #949494;

  color: #fff;

  padding: 5px;

  text-decoration: none;

  font-weight: bold;

  border-left: 5px solid #33ADFF;

  display: block;

}

#navbar li {

  border-left: 10px solid #666;

  border-bottom: 1px solid #666;

}

ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΠΌ вСсь ΠΊΠΎΠ΄ мСню сайта, располоТСнный Π²Ρ‹ΡˆΠ΅, Π² Π²ΠΈΠ΄Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°:

<!DOCTYPE html>

<html>

  <head>

    <meta charset=Β»utf-8β€³>

    <title>НазваниС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°</title>

    <style>

      #navbar {

        margin: 0;

        padding: 0;

        list-style-type: none;

        width: 100px;

      }

      #navbar li {

        border-left: 10px solid #666;

        border-bottom: 1px solid #666;

      }

      #navbar a {

        background-color: #949494;

        color: #fff;

        padding: 5px;

        text-decoration: none;

        font-weight: bold;

        border-left: 5px solid #33ADFF;

        display: block;

      }

    </style>

  </head>

 

  <body>

   

    <ul>

      <li><a href=Β»#Β»>Главная</a></li>

      <li><a href=Β»#Β»>Новости</a></li>

      <li><a href=Β»#Β»>ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹</a></li>

      <li><a href=Β»#Β»>О нас</a></li>

    </ul>

 

  </body>

</html>

ΠŸΡ€ΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ эффСкта, ΠΊΠΎΠ³Π΄Π° ΠΏΡƒΠ½ΠΊΡ‚ мСняСт внСшний Π²ΠΈΠ΄ послС навСдСния Π½Π° Π½Π΅Π³ΠΎ курсора ΠΌΡ‹ΡˆΠΈ. Для этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ псСвдо-класс :hover.

ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»Π΅Π½Π½Ρ‹ΠΉ Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎΠΌ для Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй:

#navbar a:hover {

  background-color: #666;

  border-left: 5px solid #3333FF;

}

Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ мСню


Навигационный Π±Π»ΠΎΠΊ, располоТСнный ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ Π²Π²Π΅Ρ€Ρ…Ρƒ страницы, считаСтся самым распространСнным Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠΌ. Рассмотрим созданиС Ρ‚Π°ΠΊΠΎΠ³ΠΎ мСню сайта Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅.

Для этого стилизуСм ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ список. Π”ΠΎΠ±ΠΈΡ‚ΡŒΡΡ располоТСния ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² Π΄Ρ€ΡƒΠ³ Π·Π° Π΄Ρ€ΡƒΠ³ΠΎΠΌ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ присвоСниС свойству display Π΄Π»Ρ элСмСнтов <li> значСния inline.

ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ шаг – созданиС ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка со ссылками:

<ul>

  <li><a href=Β»#Β»>Главная</a></li>

  <li><a href=Β»#Β»>Новости</a></li>

  <li><a href=Β»#Β»>ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹</a></li>

  <li><a href=Β»#Β»>О нас</a></li>

</ul>

Избавимся ΠΎΡ‚ стиля для списков ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΈ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠΌ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ с Π±Π»ΠΎΡ‡Π½Ρ‹Ρ… Π½Π° строчныС, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΏΠ°Ρ€Ρƒ ΠΏΡ€Π°Π²ΠΈΠ»:

#navbar {

  margin: 0;

  padding: 0;

  list-style-type: none;

}

#navbar li { display: inline; }

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ шаг – ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ стилСвого оформлСния для Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню сайта:

#navbar {

  margin: 0;

  padding: 0;

  list-style-type: none;

  border: 2px solid #0066FF;

  border-radius: 20px 5px;

  width: 550px;

  text-align: center;

  background-color: #33ADFF;

}

#navbar a {

  color: #fff;

  padding: 5px 10px;

  text-decoration: none;

  font-weight: bold;

  display: inline-block;

  width: 100px;

}

#navbar a:hover {

  border-radius: 20px 5px;

  background-color: #0066FF;

}

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


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

НачинаСм с создания HTML-структуры Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ пСрСчня Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ². Π‘Π°Π·ΠΎΠ²Ρ‹Π΅ элСмСнты объСдиняСм Π² ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список:

<ul>

  <li><a href=Β»#Β»>Главная</a></li>

  <li><a href=Β»#Β»>Новости</a></li>

  <li><a href=Β»#Β»>ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹</a></li>

  <li><a href=Β»#Β»>О нас</a></li>

</ul>

Бписок ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² Π²ΠΊΠ»Π°Π΄Ρ‹Π²Π°Π΅ΠΌ Π² элСмСнт <li>, содСрТащий Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΡƒΡŽ ссылку. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ выстраиваСтся структура Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню для сайта:

<ul>

  <li><a href=Β»#Β»>Главная</a></li>

  <li><a href=Β»#Β»>Новости</a></li>

  <li><a href=Β»#Β»>ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹</a>

    <ul>

      <li><a href=Β»#Β»>АдрСс</a></li>

      <li><a href=Β»#Β»>Π’Π΅Π»Π΅Ρ„ΠΎΠ½</a></li>

      <li><a href=Β»#Β»>Email</a></li>

    </ul>

  </li>

  <li><a href=Β»#Β»>О нас</a></li>

</ul>

ПишСм CSS ΠΊΠΎΠ΄. Π§Ρ‚ΠΎΠ±Ρ‹ список с ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌΠΈ Π½Π΅ отобраТался Π½Π° страницС постоянно, скрываСм Π΅Π³ΠΎ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ объявлСния display: none;. Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° элСмСнт <li> ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ Π² Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ элСмСнт:

#navbar ul { display: none; }

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

УстановлСнныС ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ отступы ΠΈ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ ΠΎΠ±ΠΎΠΈΡ… списков удаляСм. Из элСмСнтов с Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΌΠΈ ссылками Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΠ΅ΠΌ ΠΏΠ»Π°Π²Π°ΡŽΡ‰Π΅Π΅ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ мСню, Π° ΠΎΡ‚ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² добиваСмся отобраТСния Π΄Ρ€ΡƒΠ³ ΠΏΠΎΠ΄ Π΄Ρ€ΡƒΠ³ΠΎΠΌ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ float: none;.

#navbar, #navbar ul {

  margin: 0;

  padding: 0;

  list-style-type: none;

}

#navbar li { float: left; }

#navbar ul li { float: none; }

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰Π°Ρ Π·Π°Π΄Π°Ρ‡Π°, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ, – Π½Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ΡŒ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅ΠΉ части ΡΠ΄Π²ΠΈΠ³Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, находящийся ΠΏΠΎΠ΄ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΌ Π±Π»ΠΎΠΊΠΎΠΌ. Π”ΠΎΠ±ΠΈΡ‚ΡŒΡΡ этого ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ присвоСниС ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌ основного списка position: relative;, Π° ΠΏΠ΅Ρ€Π΅Ρ‡Π½ΡŽ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² – position: absolute;.

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ свойства top ΡΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ 100 % обСспСчит ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ подмСню Ρ‚ΠΎΡ‡Π½ΠΎ ΠΏΠΎΠ΄ ссылкой.

#navbar ul {

  display: none;

  position: absolute;

  top: 100%;

}

#navbar li {

  float: left;

  position: relative;

}

#navbar { height: 30px; }

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

ПослС стилизации ΠΎΠ±ΠΎΠΈΡ… списков Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню для сайта ΠΌΠΎΠΆΠ½ΠΎ ΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΌ:

#navbar ul {

  display: none;

  background-color: #f90;

  position: absolute;

  top: 100%;

}

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

#navbar, #navbar ul {

  margin: 0;

  padding: 0;

  list-style-type: none;

}

#navbar {

  height: 30px;

  background-color: #666;

  padding-left: 25px;

  min-width: 470px;

}

#navbar li {

  float: left;

  position: relative;

  height: 100%;

}

#navbar li a {

  display: block;

  padding: 6px;

  width: 100px;

  color: #fff;

  text-decoration: none;

  text-align: center;

}

#navbar ul li { float: none; }

#navbar li:hover { background-color: #f90; }

#navbar ul li:hover { background-color: #666; }

Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ
«ВсС ΠΏΡ€ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΊΠ½ΠΎΠΏΠΎΠΊ для сайта: ΠΎΡ‚ истории ΠΈ Π΄ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ³ΠΎ создания» ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

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

  1. ΠžΡ‚Ρ…ΠΎΠ΄ ΠΎΡ‚ стандартов.

  2. Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΈΠ»ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ располоТСниС Π±Π»ΠΎΠΊΠ° Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡Π½ΠΎ ΠΈ понятно Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. ИмСнно здСсь ΠΎΠ½ΠΈ ΠΈΡ‰ΡƒΡ‚ названия Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ² рСсурса, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ†Π΅Π½ΠΈΡ‚ΡŒ Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΡƒ ΠΈ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΡƒΡŽ ΠΏΠΎΠ»ΡŒΠ·Ρƒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

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

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

  3. Π£Π½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹Π΅ названия Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ².
  4. Π’Π΅Ρ€Π½Ρ‹ΠΉ способ ΠΎΡ‚ΠΏΡƒΠ³Π½ΡƒΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ – ΠΏΡ€ΠΈΡΠ²ΠΎΠΈΡ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌ мСню слишком ΠΎΠ±Ρ‰ΠΈΠ΅, Π±Π΅Π·Π»ΠΈΠΊΠΈΠ΅ ΠΈΠΌΠ΅Π½Π°, вСдь ΠΎΠ½ΠΈ Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, Π΅ΡΡ‚ΡŒ Π»ΠΈ Π½Π° сайтС нуТная информация, Ρ‚ΠΎΠ²Π°Ρ€Ρ‹ ΠΈ услуги. Π’Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ дСмонстрируСт Π±Π΅Π·Ρ€Π°Π·Π»ΠΈΡ‡ΠΈΠ΅ ΠΊ посСтитСлям: ΠΏΠΎ словам Β«ΠŸΡ€ΠΎΠ΄ΡƒΠΊΡ†ΠΈΡΒ», Β«Π’Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈΒ», «БСрвис» слоТно ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ скрываСтся Π·Π° Π½ΠΈΠΌΠΈ.

    Π’ΠΎΡ‡Π½Ρ‹Π΅ названия Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ², ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΠΈΠΊΠ°ΡŽΡ‰ΠΈΠ΅ΡΡ с запросами ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, ΡΠ΄Π΅Π»Π°ΡŽΡ‚ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ Π±ΠΎΠ»Π΅Π΅ доступной, Π° сайт – ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ для поисковых Ρ€ΠΎΠ±ΠΎΡ‚ΠΎΠ².

    Π›ΡŽΠ΄ΠΈ Π½Π΅ ΠΈΡ‰ΡƒΡ‚ Π² Π‘Π΅Ρ‚ΠΈ абстрактныС Ρ‚ΠΎΠ²Π°Ρ€Ρ‹ ΠΈΠ»ΠΈ услуги, ΠΎΠ½ΠΈ вводят Ρ‚ΠΎΡ‡Π½ΠΎΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΏΡ€Π΅Π΄ΠΌΠ΅Ρ‚Π° поиска, поэтому Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² ΠΏΠΎΠ΄ ΠΈΡ… оТидания.

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

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

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

    Для ΠΌΠ½ΠΎΠ³ΠΈΡ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ это вСсьма Ρ€Π°Π·Π΄Ρ€Π°ΠΆΠ°ΡŽΡ‰ΠΈΠΉ Ρ„Π°ΠΊΡ‚ΠΎΡ€, Π²Ρ‹Π½ΡƒΠΆΠ΄Π°ΡŽΡ‰ΠΈΠΉ Π·Π°ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ страницу ΠΈ ΡƒΡ…ΠΎΠ΄ΠΈΡ‚ΡŒ Π½Π° Π΄Ρ€ΡƒΠ³ΠΈΠ΅ сайты, Π³Π΄Π΅ Π½Π΅Ρ‚ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Ρ… ΠΈΠ³Ρ€ Π² прятки.

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

    Π‘ Π΄Ρ€ΡƒΠ³ΠΎΠΉ стороны, для ΠΏΠ»ΠΎΡ‰Π°Π΄ΠΎΠΊ с большим количСством Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ² ΠΈ ΠΏΠΎΠ΄ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΉ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½ΠΎΠ²) этот нСдостаток оборачиваСтся достоинством: ΡŽΠ·Π°Π±ΠΈΠ»ΠΈΡ‚ΠΈ сайта ΠΏΠΎΠ²Ρ‹ΡˆΠ°Π΅Ρ‚ΡΡ, посСтитСлям ΠΏΡ€ΠΎΡ‰Π΅ Π½Π°ΠΉΡ‚ΠΈ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡƒΡŽ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ срСди мноТСства Π΄Ρ€ΡƒΠ³ΠΈΡ….

  7. Блишком ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ².

  8. Когда-Ρ‚ΠΎ это ΡΡ‡ΠΈΡ‚Π°Π»ΠΎΡΡŒ Π½ΠΎΡ€ΠΌΠΎΠΉ, Π½ΠΎ сСгодня ΠΎΡ‚ Ρ‡Ρ€Π΅Π·ΠΌΠ΅Ρ€Π½ΠΎ большого количСства ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² ΠΏΠΎΡ€Π° ΠΎΡ‚ΠΎΠΉΡ‚ΠΈ. НС Π·Π°Π±Ρ‹Π²Π°Π΅ΠΌ ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»Π΅ сСми элСмСнтов: ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ наша кратковрСмСнная ΠΏΠ°ΠΌΡΡ‚ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ.

    Π’ ΠΈΠ΄Π΅Π°Π»Π΅ ΠΈΡ… число Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ°Ρ‚ΡŒ пяти. Π’Π°ΠΊΠΎΠΉ объСм ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π΅Ρ‚ Π·Π½Π°Ρ‡ΠΈΠΌΠΎΡΡ‚ΡŒ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ, Π½Π΅ Π΄Π°Π΅Ρ‚ вниманию Ρ€Π°ΡΠΏΡ‹Π»ΡΡ‚ΡŒΡΡ ΠΈ позволяСт ΡΠΊΠΎΠ½Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π½Π° самом Π²Π°ΠΆΠ½ΠΎΠΌ.

    Π­Ρ‚ΠΎ относится Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ систСмС сайта, Π½ΠΎ ΠΈ ΠΊΠΎ всСму ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Ρƒ Π² Ρ†Π΅Π»ΠΎΠΌ. Блишком ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ – Π½Π΅ всСгда прСимущСство ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ рСсурса, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ Β«Π·Π°Π±Π»ΡƒΠ΄ΠΈΡ‚ΡŒΡΡΒ» Π² поисках Π½ΡƒΠΆΠ½Ρ‹Ρ… свСдСний ΠΈ Π² ΠΈΡ‚ΠΎΠ³Π΅ ΠΏΠΎΠΊΠΈΠ½ΡƒΡ‚ΡŒ ΠΏΠ»ΠΎΡ‰Π°Π΄ΠΊΡƒ.

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

  9. НСудачный Π²Ρ‹Π±ΠΎΡ€ мСста для ΠΊΠ½ΠΎΠΏΠΊΠΈ оформлСния Π·Π°ΠΊΠ°Π·Π°.

  10. Π’ ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… ΠΎΠ΄Π½ΠΎΠ³ΠΎ списка Ρ‚ΠΎΠΆΠ΅ Π΄Π΅ΠΉΡΡ‚Π²ΡƒΡŽΡ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ ΠΏΡ€Π°Π²ΠΈΠ»Π° запоминания элСмСнтов. ΠŸΡΠΈΡ…ΠΎΠ»ΠΎΠ³ΠΈ, ΠΎΠΏΠΈΡ€Π°ΡΡΡŒ Π½Π° Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ ΠΏΡ€ΠΎΡ„ΠΈΠ»ΡŒΠ½Ρ‹Ρ… исслСдований, ΡƒΡ‚Π²Π΅Ρ€ΠΆΠ΄Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΡ‰Π΅ всСго ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠ° ΠΊ ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ (эффСкт пСрвичности) ΠΈ послСдним (эффСкт Π½ΠΎΠ²ΠΈΠ·Π½Ρ‹) ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌ любого пСрСчня.

    ВсС, Ρ‡Ρ‚ΠΎ находится Π²Π½ΡƒΡ‚Ρ€ΠΈ списка, ΠΊΠ°ΠΊ Π±Ρ‹ размываСтся ΠΈ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ усилий для сохранСния Π² памяти. Π’ психологии это явлСниС извСстно ΠΊΠ°ΠΊ «кривая сСрийных ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΉΒ».

    Π˜ΡΡ…ΠΎΠ΄Ρ ΠΈΠ· этого, Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½Ρ‹Π΅ элСмСнты мСню Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎ краям, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π² Π½Π°Ρ‡Π°Π»Π΅ ΠΈ ΠΊΠΎΠ½Ρ†Π΅ списка. Для второстСпСнных ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ‚ располоТСниС Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅. ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½Ρ‹Π΅ свСдСния Π»ΡƒΡ‡ΡˆΠ΅ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π² ΠΏΡ€Π°Π²ΠΎΠΌ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΠ³Π»Ρƒ, Π³Π΄Π΅ ΠΈΡ… ΠΎΠΆΠΈΠ΄Π°Π΅Ρ‚ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ.

МСню ΠΈΠ³Ρ€Π°Π΅Ρ‚ Π²Π°ΠΆΠ½ΡƒΡŽ Ρ€ΠΎΠ»ΡŒ для свободной ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ посСтитСлСй Π²Π½ΡƒΡ‚Ρ€ΠΈ сайта, ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π»Π΅Π³ΠΊΠΎ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΈ обСспСчиваСт ΠΊΠΎΠΌΡ„ΠΎΡ€Ρ‚Π½ΠΎΠ΅ ΠΏΡ€Π΅Π±Ρ‹Π²Π°Π½ΠΈΠ΅ Π½Π° страницах.

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

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


Ρ‡Ρ‚ΠΎ это Ρ‚Π°ΠΊΠΎΠ΅, ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, Π²ΠΈΠ΄Ρ‹ оформлСния Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ…

Π•ΡΡ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с Ρ€Π°Π½ΠΆΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ, ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π½Π΅ растСт, Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ своих спСциалистов ΠΏΠΎ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΡŽ? Π—Π°ΠΊΠ°ΠΆΠΈΡ‚Π΅ ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ Π°ΡƒΠ΄ΠΈΡ‚ Π² Π‘Π΅ΠΌΠ°Π½Ρ‚ΠΈΠΊΠ΅

ΠŸΠΎΠ»ΡƒΡ‡ΠΈ Π½Π°ΡˆΡƒ ΠΊΠ½ΠΈΠ³Ρƒ Β«ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚-ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΈΠ½Π³ Π² ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтях: Как Π·Π°ΡΠ΅ΡΡ‚ΡŒ Π² Π³ΠΎΠ»ΠΎΠ²Ρƒ подписчиков ΠΈ Π²Π»ΡŽΠ±ΠΈΡ‚ΡŒ ΠΈΡ… Π² свой Π±Ρ€Π΅Π½Π΄Β».

Подпишись Π½Π° рассылку ΠΈ ΠΏΠΎΠ»ΡƒΡ‡ΠΈ ΠΊΠ½ΠΈΠ³Ρƒ Π² ΠΏΠΎΠ΄Π°Ρ€ΠΎΠΊ!

МСню сайта β€” это сгруппированный Π½Π°Π±ΠΎΡ€ ссылок с названиями Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ², ΠΎΠ±Π»Π΅Π³Ρ‡Π°ΡŽΡ‰ΠΈΠΉ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ Π½Π° Π΄Ρ€ΡƒΠ³ΠΈΠ΅ страницы.

Они Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌΠΈ мСню ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°Ρ‚ΡŒΡΡ тСкстом ΠΈΠ»ΠΈ графичСскими Π·Π½Π°Ρ‡ΠΊΠ°ΠΌΠΈ β€” ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ.

МСню Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ сайта. Оно Π΄Π°Π΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΠΎΠΏΠ°ΡΡ‚ΡŒ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ€Π°Π·Π΄Π΅Π»Π° Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ, ΡƒΠ·Π½Π°Ρ‚ΡŒ, какая Π΅Ρ‰Π΅ Π΅ΡΡ‚ΡŒ информация, ΠΈ Ρ‡Ρ‚ΠΎ интСрСсного ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ. Π‘ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹ΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΏΡ€ΠΈΠ²Ρ‹ΠΊ всС ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ быстро, ΠΈ ΠΏΡ€ΠΎΠ΄ΡƒΠΌΠ°Π½Π½Ρ‹Π΅ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€Ρ‹ Π½Π° сайтС β€” Π·Π°Π»ΠΎΠ³ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ останСтся с Π²Π°ΠΌΠΈ дольшС.

Главная Π·Π°Π΄Π°Ρ‡Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² β€” ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΎΡ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ структуру ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡƒΠ΄ΠΎΠ±Π½ΡƒΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Ρ‚Π΅Ρ€ΠΌΠΈΠ½ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ΅ мСню сайта Π² контСкстС Π΅Π³ΠΎ основного прСдназначСния.

Π’ΠΈΠ΄Ρ‹ мСню сайта

Π Π°Π·Π½Ρ‹Π΅ Π²ΠΈΠ΄Ρ‹ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°ΡŽΡ‚ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏ ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ мСню Π½Π° Π²Π΅Π±-сайтС. Π’ΠΎΡ‚ Π΄Π²Π΅ основных разновидности, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹Π΄Π΅Π»ΡΡŽΡ‚ Π² зависимости ΠΎΡ‚ объСма ΠΈ Π·Π°Π΄Π°Ρ‡ рСсурса:

Π“Π»Π°Π²Π½ΠΎΠ΅

Π“Π»Π°Π²Π½ΠΎΠ΅ мСню сайта, это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ отобраТаСтся Π² Π»ΡŽΠ±Ρ‹Ρ… Ρ€Π°Π·Π΄Π΅Π»Π°Ρ… рСсурса, основноС, Π²Π΅Ρ€Ρ…Π½Π΅ΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ΅. Но для ΠΊΡ€ΡƒΠΏΠ½Ρ‹Ρ… ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² с мноТСством страниц ΠΎΠ΄Π½ΠΎΠ³ΠΎ уровня Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ нСдостаточно.

ВторостСпСнноС

Π’ случаС слоТной структуры Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ мСню Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ уровня, ΠΈΠ»ΠΈ второстСпСнноС.

По способу Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π²Ρ‹Π΄Π΅Π»ΡΡŽΡ‚:

  • Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню для сайта, Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π² цСлях экономии мСста Π½Π° страницС. ΠΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½ΠΎ, Ссли Ρƒ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΏΠΎΡ€Ρ‚Π°Π»Π° слоТная многоуровнСвая организация, ΠΈ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ максимально ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠ²Π½ΡƒΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ. ΠŸΠΎΠ½ΡΡ‚Π½ΠΎ, Ρ‡Ρ‚ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ Π² 5 рядов – Π½Π΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚. ΠŸΡ€ΠΈΠ½Ρ†ΠΈΠΏ Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ: ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора Π½Π° Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΏΡƒΠ½ΠΊΡ‚Π° ΠΈΠ· Π½Π΅Π³ΠΎ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‚ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Ρ‹.

  • Π’ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌΡΡ мСню Π²Ρ‹Π²ΠΎΠ΄ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΏΠΎΠ»Π΅ΠΉ происходит ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡƒ.

Π’ зависимости ΠΎΡ‚ ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ мСню для сайта.

ΠŸΠ΅Ρ€Π²ΠΎΠ΅ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Π²Π²Π΅Ρ€Ρ…Ρƒ. ΠœΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π½Π° ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΠΌ Ρ„ΠΎΠ½Π΅, Π»ΠΈΠ±ΠΎ статично Π·Π°ΠΊΡ€Π΅ΠΏΠ»Π΅Π½Π½Ρ‹ΠΌ.

Π’Ρ‚ΠΎΡ€ΠΎΠ΅ Π±Ρ‹Π²Π°Π΅Ρ‚ Π»Π΅Π²Ρ‹ΠΌ Π»ΠΈΠ±ΠΎ ΠΏΡ€Π°Π²Ρ‹ΠΌ, Π»ΠΈΠ±ΠΎ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΠ΅ΠΉ ΠΎΠ±ΠΎΠΈΡ….

Π’Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Π΄ΠΈΠ·Π°ΠΉΠ½Π° мСню

Π‘Ρ‚ΠΈΠ»ΠΈ ΠΎΡ‚Π²Π΅Ρ‡Π°ΡŽΡ‚ Π·Π° внСшний Π²ΠΈΠ΄, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π·Π° Ρ‚ΠΎ, ΠΊΠ°ΠΊ Π²ΠΈΠ΄ΠΈΠΌ элСмСнты ΠΌΡ‹ с Π²Π°ΠΌΠΈ. Π’Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ оформлСния мСню сайта:

  • с динамичСскими эффСктами ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ;
  • с ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ, ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ;
  • ΡΡ‚ΠΈΠ»ΡŒ Β«ΠΌΠ΅Ρ‚Ρ€ΠΎΒ»;
  • Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½.

МСню β€” ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΠΆΠ½Ρ‹Ρ… структурных ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… элСмСнтов web-сайта. Оно Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΎΠ±Π»Π°Π΄Π°Ρ‚ΡŒ Π½Π°Π±ΠΎΡ€ΠΎΠΌ качСств ΠΈ характСристик, ΡƒΠ΄ΠΎΠ²Π»Π΅Ρ‚Π²ΠΎΡ€ΡΡŽΡ‰ΠΈΡ… потрСбности посСтитСлСй ΠΈ Ρ€Π΅ΡˆΠ°ΡŽΡ‰ΠΈΡ… Π·Π°Π΄Π°Ρ‡ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-рСсурса.

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ ΠΏΡ€Π°Π²ΠΈΠ»Π° ΠΈ ошибки

  • МСню Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Π·Π°ΠΌΠ΅Ρ‚Π½Ρ‹ΠΌ. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ ΠΈΠ»ΠΈ Ρ†Π²Π΅Ρ‚ΠΎΠΌ. Бсылки, ΠΈΠΊΠΎΠ½ΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΊΠΎΠ½Ρ‚Ρ€Π°ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с Ρ„ΠΎΠ½ΠΎΠΌ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈ считывании Π½Π΅ Π²ΠΎΠ·Π½ΠΈΠΊΠ»ΠΎ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ. ΠžΡ‚ΠΊΠ°ΠΆΠΈΡ‚Π΅ΡΡŒ ΠΎΡ‚ скрытого ΠΈΠ»ΠΈ нСдостаточно контрастного мСню, Π΄Π°ΠΆΠ΅ Ссли ΠΎΡ‡Π΅Π½ΡŒ хочСтся Π²ΠΎΠΏΠ»ΠΎΡ‚ΠΈΡ‚ΡŒ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΡƒΡŽ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΡΠΊΡƒΡŽ ΠΌΡ‹ΡΠ»ΡŒ. Если Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π»ΠΈ, ΠΎΡ†Π΅Π½ΠΈΡ‚Π΅ ΠΏΠΎ счСтчикам Π°Π½Π°Π»ΠΈΡ‚ΠΈΠΊΠΈ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΎΡ‚ΠΊΠ°Π·ΠΎΠ², просмотритС ΠΏΠΎ Π²Π΅Π±Π²ΠΈΠ·ΠΎΡ€Ρƒ, ΠΊΠ°ΠΊ люди Π²Π΅Π΄ΡƒΡ‚ сСбя Π½Π° сайтС. И Ρ€Π°ΡΡΡ‚Π°Π²ΡŒΡ‚Π΅ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚Ρ‹: супСр-ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ² ΠΈΠ»ΠΈ понятный Π΄Ρ€ΡƒΠΆΠ΅Π»ΡŽΠ±Π½Ρ‹ΠΉ интСрфСйс.
  • Π”ΠΈΠ·Π°ΠΉΠ½. Π Π°Π·Π½Ρ‹Π΅ срСдства: Ρ†Π²Π΅Ρ‚, ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹, Ρ‚Π΅Π½ΠΈβ€” ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ удобства восприятия. ΠŸΡ€ΠΈ этом ΠΏΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ элСмСнт Π·Π°ΠΌΠ΅Ρ‚Π½Ρ‹ΠΌ, Π° Π½Π΅ пСстрым ΠΈ аляповатым.
  • Единство оформлСния. На всСх страницах рСсурса ΡΡ‚ΠΈΠ»ΡŒ мСню Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡΡ‚Π°Π²Π°Ρ‚ΡŒΡΡ Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½Ρ‹ΠΌ. Π Π°Π·Π½Ρ‹Π΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ ΡΠ±ΠΈΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, ΡƒΡ…ΡƒΠ΄ΡˆΠ°Ρ‚ΡŒ восприятиС ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ.
  • Π‘Ρ‚Π°Π½Π΄Π°Ρ€Ρ‚Ρ‹ вСрстки. РасполагайтС мСню Π² общСпринятых мСстах: Π²Π²Π΅Ρ€Ρ…Ρƒ, справа, слСва. Π’Π½ΠΈΠ·Ρƒ Π² Ρ„ΡƒΡ‚Π΅Ρ€Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π΄ΡƒΠ±Π»ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠ΅ ссылки, Π½ΠΎ Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ СдинствСнный элСмСнт Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Π΅Π³ΠΎ ΠΈΡΠΊΠ°Ρ‚ΡŒ, ΠΎΠ½ΠΈ просто ΡƒΠΉΠ΄ΡƒΡ‚. Π‘Ρ‹Π» ΠΏΡ€ΠΈΠΌΠ΅Ρ€ размСщСния элСмСнта ΠšΠΎΡ€Π·ΠΈΠ½Π° Π½Π° сайтС Π½Π΅ Π² стандартном ΠΏΡ€Π°Π²ΠΎΠΌ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΠ³Π»Ρƒ, Π° Π² Π»Π΅Π²ΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ. Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ β€” Π΅Π΅ просто Π½Π΅ Π½Π°Ρ…ΠΎΠ΄ΠΈΠ»ΠΈ.
  • ВСстированиС. Если Π½Π° стартС Ρ‚Ρ€ΡƒΠ΄Π½ΠΎ ΠΎΡ†Π΅Π½ΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊΠΎΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌ, подсмотритС Ρƒ Π»ΠΈΠ΄Π΅Ρ€ΠΎΠ² Π² Ρ‚ΠΎΠΏΠ΅. ΠŸΡ€ΠΈ Π²Π²ΠΎΠ΄Π΅ ΡΠ΅Ρ€ΡŒΠ΅Π·Π½Ρ‹Ρ… ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹Ρ… Π²Π΅Π±-ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² ΠΏΠΎΠ»Π΅Π·Π½ΠΎ ΠΏΡ€ΠΎΠ²ΠΎΠ΄ΠΈΡ‚ΡŒ тСсты Π½Π° ΠΏΡ€Π΅Π΄ΠΌΠ΅Ρ‚ доступности, удобства ΠΈ Ρ‚.Π΄.
  • Π˜Π½Π΄ΠΈΠΊΠ°Ρ†ΠΈΡ. Настройка отобраТСния мСню Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŒ ориСнтировался, Π² ΠΊΠ°ΠΊΠΎΠΌ Ρ€Π°Π·Π΄Π΅Π»Π΅ находится. Для этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΏΡƒΠ½ΠΊΡ‚Π° Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠΉ ΠΈΠ»ΠΈ Ρ†Π²Π΅Ρ‚ΠΎΠΌ.

  • Π§Π΅Ρ‚ΠΊΠΈΠ΅ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€Ρ‹. Π›ΡŽΠ΄ΠΈ приходят Π½Π΅ всСгда сразу Π½Π° Π³Π»Π°Π²Π½ΡƒΡŽ, ΠΌΠΎΠ³ΡƒΡ‚ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒ с любого ΠΏΠΎΠ΄Ρ€Π°Π·Π΄Π΅Π»Π°. Π“Ρ€Π°ΠΌΠΎΡ‚Π½ΠΎΠ΅ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ΅ мСню Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ, Π³Π΄Π΅ ΠΎΠ½ΠΈ сСйчас ΠΈ ΠΊΠ°ΠΊ ΠΏΠΎΠΏΠ°ΡΡ‚ΡŒ Π² Ρ€Π°Π·Π΄Π΅Π» любого уровня. Π Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ ссылки/ΠΈΠΊΠΎΠ½ΠΊΠΈ Π½Π° Π³Π»Π°Π²Π½ΡƒΡŽ страницу Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΌ URL Π² Π·Π°ΠΌΠ΅Ρ‚Π½ΠΎΠΌ мСстС ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ.
  • МСню Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ понятным. НС ΠΏΠΈΡˆΠΈΡ‚Π΅ нСизвСстныС Π°Π±Π±Ρ€Π΅Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹, сокращСния, иностранныС Π°Π½Π°Π»ΠΎΠ³ΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΠΊΠΎΡ€ΠΎΡ‡Π΅ ΠΈ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½Π΅Π΅ смотрятся. ΠŸΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŒ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π΄ΠΎΠ³Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ скрываСтся Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ Print: пСчатная продукция ΠΈΠ»ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Π² прСссС. Если рассчитываСтС Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Π·Π°ΠΈΠ½Ρ‚Ρ€ΠΈΠ³ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ ΠΏΠ΅Ρ€Π΅ΡˆΠ΅Π» ΠΈ посмотрСл, ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ ΠΎΡ‚ΠΊΠ°Π·ΠΎΠ² ΠΏΠΎΠ΄ 100.
  • Удобство. Если вашС мСню ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ΅ с Π²Ρ‹ΠΏΠ°Π΄Π°ΠΉΠΊΠ°ΠΌΠΈ, ΠΏΠΎΠ·Π°Π±ΠΎΡ‚ΡŒΡ‚Π΅ΡΡŒ ΠΎ настройкС, ΠΏΡ€ΠΈΠ΅ΠΌΠ»Π΅ΠΌΠΎΠΉ скорости отобраТСния Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… сСкций. Иногда ΠΎΡ‡Π΅Π½ΡŒ слоТно со ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒΡŽ свСта ΡƒΠ»ΠΎΠ²ΠΈΡ‚ΡŒ всю Ρ†Π΅ΠΏΠΎΡ‡ΠΊΡƒ ΠΈΠ· 4 ΠΏΠΎΠ΄Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ². Π‘Ρ‚Π°Π²ΡŒΡ‚Π΅ сСбя Π½Π° мСсто Π²Π°ΡˆΠΈΡ… ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ². Π”Π°ΠΆΠ΅ Ссли ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² ΠΌΠ½ΠΎΠ³ΠΎ, ΠΎΡΡ‚Π°Π²ΡŒΡ‚Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ основныС.
  • НС ΠΌΠ΅Π»ΡŒΡ‡ΠΈΡ‚Π΅, ΡˆΡ€ΠΈΡ„Ρ‚ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹ΠΌ, высота ΠΈ ΡˆΠΈΡ€ΠΈΠ½Π° плашСк достаточной для ΠΊΠΎΠΌΡ„ΠΎΡ€Ρ‚Π½ΠΎΠ³ΠΎ попадания ΠΏΠΎ Π½ΠΈΠΌ курсором. Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΉ список Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡƒΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒΡΡ Π² высоту ΠΎΠ΄Π½ΠΎΠ³ΠΎ экрана. Π’ ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС Π½Π΅ всС Π±ΡƒΠ΄ΡƒΡ‚ Π½Π°ΠΏΡ€ΡΠ³Π°Ρ‚ΡŒΡΡ, ΠΏΡ‹Ρ‚Π°ΡΡΡŒ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ ΡƒΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ ΠΈ ΠΎΡΡƒΡ‰Π΅ΡΡ‚Π²Π»ΡΡ‚ΡŒ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ.
  • БСгодня ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π³ΠΎ Ρ‚ΠΎΠ½Π° – Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ сайты с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… вСрсий ΠΏΠΎΠ΄ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ устройства с ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΠΌΠΈ.
  • Π‘Ρ‚Π°Ρ‚ΠΈΡ‡Π½ΠΎΠ΅ мСню. Если настройки ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ это Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ, Π·Π°ΠΊΡ€Π΅ΠΏΠΈΡ‚Π΅ панСль Π½Π° страницС Π½Π΅ΠΏΠΎΠ΄Π²ΠΈΠΆΠ½ΠΎ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. Π’Π°ΠΊ навигация всСгда Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅Π΄ Π³Π»Π°Π·Π°ΠΌΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΈ ΠΈΠ·Π±Π°Π²ΠΈΡ‚ ΠΎΡ‚ нСобходимости Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π· Π½Π°Π²Π΅Ρ€Ρ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π² Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ€Π°Π·Π΄Π΅Π». Или ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π·Π°ΠΌΠ΅Ρ‚Π½Ρ‹Π΅ Π·Π½Π°Ρ‡ΠΊΠΈ, ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π½Π° ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ экран.

Роль мСню Π² процСссС продвиТСния сайта

На ΠΈΡ‚ΠΎΠ³ΠΎΠ²Ρ‹Π΅ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ Π²Ρ‹Π΄Π°Ρ‡ΠΈ Π² поискС ΠΌΠΎΠ³ΡƒΡ‚ Π²Π»ΠΈΡΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΊΡ€ΠΈΡ‚Π΅Ρ€ΠΈΠΈ:

  • Удачная навигация ΠΈ грамотная внутрСнняя ΠΏΠ΅Ρ€Π΅Π»ΠΈΠ½ΠΊΠΎΠ²ΠΊΠ° ΡΠ²Π»ΡΡŽΡ‚ΡΡ Ρ„Π°ΠΊΡ‚ΠΎΡ€Π°ΠΌΠΈ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅ΠΉ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ. Π­Ρ‚ΠΎ удобство для людСй ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ ΠΎΡ†Π΅Π½ΠΊΠ° ΠΎΡ‚ поисковиков. ΠŸΠΎΠ½ΡΡ‚Π½Π°Ρ ΠΏΠ΅Ρ€Π΅Π»ΠΈΠ½ΠΊΠΎΠ²ΠΊΠ° ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ ΡΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ, ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ссылки Π½Π° интСрСсныС Ρ€Π°Π·Π΄Π΅Π»Ρ‹. Π£Π΄ΠΎΠ±Π½Ρ‹ΠΌ считаСтся Ρ‚Π°ΠΊΠΎΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚, ΠΊΠΎΠ³Π΄Π° Π΄ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ Π΄ΠΎ Π½ΡƒΠΆΠ½ΠΎΠ³ΠΎ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π° ΠΌΠΎΠΆΠ½ΠΎ Π² 3 ΠΊΠ»ΠΈΠΊΠ°.
  • Если содСрТимоС заинтСрСсовало, Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ ΠΏΡ€ΠΎΠ²Π΅Π΄Π΅Ρ‚ Π½Π° Π²Π΅Π±-сайтС дольшС Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ. ΠŸΠΎΠΈΡΠΊΠΎΠ²Ρ‹Π΅ систСмы ΡƒΡ‡Ρ‚ΡƒΡ‚ это, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ для повСдСнчСских Ρ„Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ².
  • Π•ΡΡ‚ΡŒ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π²Π°ΠΆΠ½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚. Π’ web-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ сайтов ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ считаСтся Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ структуру Π½Π° основС сСмантичСского ядра. Π’ΠΎ Π΅ΡΡ‚ΡŒ, сначала Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ±Ρ€Π°Ρ‚ΡŒ ΠΈ ΡΡ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎΠ±ΠΎ всСх тСматичСских поисковых запросах. Π‘Π°ΠΌΡ‹Π΅ высокочастотныС лягут Π² основу Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ². БоотвСтствСнно, названия ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню Π»ΡƒΡ‡ΡˆΠ΅ Π½Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π΅Ρ‚Π°Ρ‚ΡŒ с ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌ ΠΊΠΎΠΏΠΈΡ€Π°ΠΉΡ‚Π΅Ρ€ΠΎΠΌ, Π° ΡΠΎΠ³Π»Π°ΡΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ с seo-спСциалистом. Он подскаТСт, насколько часто люди ΠΈΡ‰ΡƒΡ‚ Ρ‚Ρƒ ΠΈΠ»ΠΈ ΠΈΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, это ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятныС названия.
  • Если ссылки ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½Ρ‹ Π² Π²ΠΈΠ΄Π΅ графичСских элСмСнтов, Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ alt ΠΈ title ΠΊ ссылкам. Π’ΠΎΠ³Π΄Π° Ρ€ΠΎΠ±ΠΎΡ‚Ρ‹ ΠΏΡ€ΠΈ индСксации смогут ΡƒΡ‡Π΅ΡΡ‚ΡŒ эти ΠΏΡƒΠ½ΠΊΡ‚Ρ‹.

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ мСню сайта

Если Π²Ρ‹ Π²Π»Π°Π΄Π΅Π»Π΅Ρ† бизнСса, ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡƒΡ‡Π°ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° этапС сбора ΠΈ структурирования ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎ вашСм бизнСсС ΠΈ услугах. НуТно ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π½Π° основныС сцСнарии взаимодСйствия покупатСля с ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠΌ. НапримСр, для ΠΌΠ°Π³Π°Π·ΠΈΠ½Π° ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹:

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

ВСхничСская Ρ‡Π°ΡΡ‚ΡŒ ляТСт Π½Π° программиста. Если сайт Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ Π½Π° Π±Π°Π·Π΅ cms ΠΈ шаблона, Π²Ρ‹ ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ вашС Π±ΡƒΠ΄ΡƒΡ‰Π΅Π΅ мСню, ΠΊΠ°ΠΊΠΎΠ³ΠΎ ΠΎΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Ρ†Π²Π΅Ρ‚Π°.

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

Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ мСню для сайта Π½Π° HTML+CSS Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ | Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ красивоС Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню с ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ

Π”ΠΎΠ±Ρ€ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ суток, Π΄ΠΎΡ€ΠΎΠ³ΠΈΠ΅ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΠΈ. БСгодня ΠΌΡ‹ Ρ€Π°Π·Π±Π΅Ρ€Π΅ΠΌ Ρ‚Π΅ΠΌΡƒ Β«ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ мСню ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ HTML ΠΈ CSSΒ». МСню, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, находится Π² шапкС сайта ΠΈ являСтся ΠΏΠ΅Ρ€Π΅Ρ‡Π½Π΅ΠΌ ссылок Π½Π° самыС Π²Π°ΠΆΠ½Ρ‹Π΅ страницы, Π΅Π³ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ Π³Π»Π°Π²Π½Ρ‹ΠΌ мСню. Π”Π°Π½Π½Ρ‹Π΅ ссылки ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ постоянно Π½Π°ΠΆΠΈΠΌΠ°Ρ‚ΡŒ. Π’ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ ΠΈΡ… располоТитС ΠΈ ΠΊΠ°ΠΊΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π²Ρ‹ Π·Π°Π΄Π°Π΄ΠΈΡ‚Π΅ мСню Π±ΡƒΠ΄Π΅Ρ‚ Π²Π»ΠΈΡΡ‚ΡŒ Π½Π° ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, ΠΊΠΎΠ½Π²Π΅Ρ€ΡΠΈΡŽ, ΠΈΡ… ΠΎΠ±Ρ‰Π΅Π΅ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅ ΠΎΡ‚ вашСго сайта ΠΈ, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π½Π° seo-ΠΏΡ€ΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅.

HTML-ΠΊΠΎΠ΄ для Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню

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

Для создания мСню ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Ρ‚Π΅Π³ΠΈ <ul>, <li> ΠΈ <a>.

Если Π²Π°ΠΌ Π½Π΅ совсСм понятно, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ эти html-Ρ‚Π΅Π³ΠΈ, css, Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, Ρ‚ΠΎ ΠΏΠΎΡ‡ΠΈΡ‚Π°ΠΉΡ‚Π΅ ΠΎΠ± основных тСхнологиях для создания сайта.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования html Ρ‚Π΅Π³ΠΎΠ² для создания мСню Π² ΠΊΠΎΠ΄Π΅ Π½ΠΈΠΆΠ΅:

<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Π¦Π΅Π½Ρ‹</a></li>
<li><a href="#">ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹</a></li>
</ul>

Π‘Ρ‚Π°Π½Π΄Π°Ρ€Ρ‚Π½Ρ‹Π΅ CSS стили для Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню

ul {
  list-style: none; /*ΡƒΠ±ΠΈΡ€Π°Π΅ΠΌ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ списка*/
  margin: 0; /*ΡƒΠ±ΠΈΡ€Π°Π΅ΠΌ отступы*/
  padding-left: 0; /*ΡƒΠ±ΠΈΡ€Π°Π΅ΠΌ отступы*/
}
a {
  text-decoration: none; /*ΡƒΠ±ΠΈΡ€Π°Π΅ΠΌ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ тСкста ссылок*/
}
li {
  float:left; /*Π Π°Π·ΠΌΠ΅Ρ‰Π°Π΅ΠΌ список Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎ для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ мСню*/
  margin-right:5px; /*ДобавляСм отступ Ρƒ ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню*/
}

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

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ каркаса (шаблона) вашСго Π±ΡƒΠ΄ΡƒΡ‰Π΅Π³ΠΎ мСню

ΠŸΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ всС достаточно ΠΏΡ€ΠΎΡΡ‚Π΅Π½ΡŒΠΊΠΎ, Π²Ρ‹ ,ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅, Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ сразу красивоС Π³Π»Π°Π²Π½ΠΎΠ΅ мСню, Π½ΠΎ Π±Π΅Π· понимания основ Ρƒ вас просто Π½Π΅ получится ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π΅ мСню Π±Π΅Π· ошибок Π² html ΠΈ css.

БущСствуСт Ρ‚Π°ΠΊ ΠΆΠ΅ нСсколько Π΄Ρ€ΡƒΠ³ΠΈΡ… CSS ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ мСню Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎΠΌΠΈΠΌΠΎ float:left;, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, display:inline-block; ΠΈΠ»ΠΈ display:flex;, Π½ΠΎ рСкомСндуСтся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ способ описанный Π²Ρ‹ΡˆΠ΅.

Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΆΠ΅ Π½Π°ΠΏΠΎΠ»Π½ΠΈΠΌ наш шаблон ΠΌΠ΅Π½ΡŽ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ стилями ΠΈ сдСлаСм Π΅Π³ΠΎ красивым.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ красивого Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню для сайта

БСйчас я ΠΏΡ€ΠΈΠ²Π΅Π΄Ρƒ нСсколько Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² с Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню.

ВсС «красивости» Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ для своСго сайта сами, Π° Π½Π΅ ΠΈΡΠΊΠ°Ρ‚ΡŒ Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅. ΠŸΡ€ΠΎΡ‰Π΅ всСго это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ взяв Π·Π° основу ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π½ΠΈΠΆΠ΅

ΠŸΡ€ΠΎΡΡ‚ΠΎΠ΅ мСню синСго Ρ†Π²Π΅Ρ‚Π° с Ρ€Π°Π·Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌΠΈ

CSS стили Β«Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎΒ» мСню

НиТС располоТСны стили Π΄Π°Π½Π½ΠΎΠ³ΠΎ мСню. HTML остаСтся Ρ‚Π΅ΠΌ ΠΆΠ΅, Ρ‡Ρ‚ΠΎ ΠΈ Π² «каркасС» мСню.

ul {
  list-style: none; /*ΡƒΠ±ΠΈΡ€Π°Π΅ΠΌ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ списка*/
  margin: 0; /*ΡƒΠ±ΠΈΡ€Π°Π΅ΠΌ отступы*/
  padding-left: 0; /*ΡƒΠ±ΠΈΡ€Π°Π΅ΠΌ отступы*/
  margin-top:25px; /*Π΄Π΅Π»Π°Π΅ΠΌ отступ свСрху*/
}
a {
  text-decoration: none; /*ΡƒΠ±ΠΈΡ€Π°Π΅ΠΌ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ тСкста ссылок*/
  background:#30A8E6; /*добавляСм Ρ„ΠΎΠ½ ΠΊ ΠΏΡƒΠ½ΠΊΡ‚Ρƒ мСню*/
  color:#fff; /*мСняСм Ρ†Π²Π΅Ρ‚ ссылок*/
  padding:10px; /*добавляСм отступ*/
  font-family: arial; /*мСняСм ΡˆΡ€ΠΈΡ„Ρ‚*/
  border-radius:4px; /*добавляСм скруглСниС*/
  -moz-transition: all 0.3s 0.01s ease; /*Π΄Π΅Π»Π°Π΅ΠΌ ΠΏΠ»Π°Π²Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄*/
  -o-transition: all 0.3s 0.01s ease;
  -webkit-transition: all 0.3s 0.01s ease;
}
a:hover {
  background:#1C85BB;/*добавляСм эффСкт ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ*/
}
li {
  float:left; /*Π Π°Π·ΠΌΠ΅Ρ‰Π°Π΅ΠΌ список Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎ для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ мСню*/
  margin-right:5px; /*ДобавляСм отступ Ρƒ ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню*/
  
}

Π“Π»Π°Π²Π½ΠΎΠ΅ мСню, располоТСнноС Π½Π° Ρ†Π²Π΅Ρ‚Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ с красным Ρ„ΠΎΠ½ΠΎΠΌ

CSS стили мСню Π½Π° Ρ†Π²Π΅Ρ‚Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ
ul {
  list-style: none; /*ΡƒΠ±ΠΈΡ€Π°Π΅ΠΌ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ списка*/
  margin: 0; /*ΡƒΠ±ΠΈΡ€Π°Π΅ΠΌ отступы*/
  padding-left: 0; /*ΡƒΠ±ΠΈΡ€Π°Π΅ΠΌ отступы*/
  margin-top:25px; /*Π΄Π΅Π»Π°Π΅ΠΌ отступ свСрху*/
  background:#FF4444; /*добавляСм Ρ„ΠΎΠ½ всСму мСню (Π·Π°ΠΌΠ΅Π½ΠΈΠ² этот ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€, Π²Ρ‹ помСняСтС Ρ†Π²Π΅Ρ‚ всСго мСню)*/
  height: 50px; /*Π·Π°Π΄Π°Π΅ΠΌ высоту*/
}
a {
  text-decoration: none; /*ΡƒΠ±ΠΈΡ€Π°Π΅ΠΌ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ тСкста ссылок*/
  background:#FF4444; /*добавляСм Ρ„ΠΎΠ½ ΠΊ ΠΏΡƒΠ½ΠΊΡ‚Ρƒ мСню (Π·Π°ΠΌΠ΅Π½ΠΈΠ² этот ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€, Π²Ρ‹ помСняСтС Ρ†Π²Π΅Ρ‚ всСх ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню)*/
  color:#fff; /*мСняСм Ρ†Π²Π΅Ρ‚ ссылок*/
  padding:0px 15px; /*добавляСм отступ*/
  font-family: arial; /*мСняСм ΡˆΡ€ΠΈΡ„Ρ‚*/
  line-height:50px; /*ровняСм мСню ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ*/
  display: block; 
  border-right: 1px solid #F36262; /*добавляСм Π±ΠΎΡ€Π΄ΡŽΡ€ справа*/
  -moz-transition: all 0.3s 0.01s ease; /*Π΄Π΅Π»Π°Π΅ΠΌ ΠΏΠ»Π°Π²Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄*/
  -o-transition: all 0.3s 0.01s ease;
  -webkit-transition: all 0.3s 0.01s ease;

}
a:hover {
  background:#D43737;/*добавляСм эффСкт ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ*/
}
li {
  float:left; /*Π Π°Π·ΠΌΠ΅Ρ‰Π°Π΅ΠΌ список Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎ для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ мСню*/
}

Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Π½Π° HTML+CSS

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

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ создания простого Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню

HTML ΠΊΠΎΠ΄ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню
<ul>
    <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></li>
        </ul>
    </li>  
    <li><a href="#">Π¦Π΅Π½Ρ‹</a></li>
    <li><a href="#">ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹</a></li>
</ul>
Π‘Ρ‚ΠΈΠ»ΠΈ CSS Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню
ul {
  list-style: none; /*ΡƒΠ±ΠΈΡ€Π°Π΅ΠΌ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ списка*/
  margin: 0; /*ΡƒΠ±ΠΈΡ€Π°Π΅ΠΌ отступы*/
  padding-left: 0; /*ΡƒΠ±ΠΈΡ€Π°Π΅ΠΌ отступы*/
  margin-top:25px; /*Π΄Π΅Π»Π°Π΅ΠΌ отступ свСрху*/
  background:#819A32; /*добавляСм Ρ„ΠΎΠ½ всСму мСню*/
  height: 50px; /*Π·Π°Π΄Π°Π΅ΠΌ высоту*/
}
a {
  text-decoration: none; /*ΡƒΠ±ΠΈΡ€Π°Π΅ΠΌ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ тСкста ссылок*/
  background:#819A32; /*добавляСм Ρ„ΠΎΠ½ ΠΊ ΠΏΡƒΠ½ΠΊΡ‚Ρƒ мСню*/
  color:#fff; /*мСняСм Ρ†Π²Π΅Ρ‚ ссылок*/
  padding:0px 15px; /*добавляСм отступ*/
  font-family: arial; /*мСняСм ΡˆΡ€ΠΈΡ„Ρ‚*/
  line-height:50px; /*ровняСм мСню ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ*/
  display: block; 
  border-right: 1px solid #677B27; /*добавляСм Π±ΠΎΡ€Π΄ΡŽΡ€ справа*/
  -moz-transition: all 0.3s 0.01s ease; /*Π΄Π΅Π»Π°Π΅ΠΌ ΠΏΠ»Π°Π²Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄*/
  -o-transition: all 0.3s 0.01s ease;
  -webkit-transition: all 0.3s 0.01s ease;

}
a:hover {
  background:#D43737;/*добавляСм эффСкт ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ*/
}
li {
  float:left; /*Π Π°Π·ΠΌΠ΅Ρ‰Π°Π΅ΠΌ список Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎ для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ мСню*/
  position:relative; /*Π·Π°Π΄Π°Π΅ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ для позиционирования*/
}
     
    /*Π‘Ρ‚ΠΈΠ»ΠΈ для скрытого Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню*/
    li > ul {
        position:absolute;
        top:25px;
        display:none;   
    }
     
    /*Π”Π΅Π»Π°Π΅ΠΌ ΡΠΊΡ€Ρ‹Ρ‚ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ*/
    li:hover > ul {
        display:block; 
        width:250px;  /*Π—Π°Π΄Π°Π΅ΠΌ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню*/      
    }
   li:hover > ul > li {
        float:none; /*Π£Π±ΠΈΡ€Π°Π΅ΠΌ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅*/
    }

А Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊΠΈΠ΅ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρƒ вас Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ услуги ΠΈ ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ с ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠΌ: составлСниС структуры ΠΈ сСмантичСского ядра.

Π― постарался максимально ΠΊΡ€Π°Ρ‚ΠΊΠΎ Ρ€Π°ΡΡΠΊΠ°Π·Π°Ρ‚ΡŒ Π²Π°ΠΌ ΠΎ Ρ‚ΠΎΠΌ ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π³Π»Π°Π²Π½ΠΎΠ΅ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ мСню, ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ нСсколько шаблонов, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊ Π½Π΅ΠΌΡƒ простыС стили ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ симпатичнСС, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню для вашСго сайта. Для удобства я собрал всС мСню, прСдставлСнныС Π²Ρ‹ΡˆΠ΅, Π² ΠΎΠ΄Π½ΠΎΠΌ html-Ρ„Π°ΠΉΠ»Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π½ΠΈΠΆΠ΅. Выглядит это ΠΊΠ°ΠΊ Π½Π° ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚Π΅: ΠŸΠΎΠ΄Π±ΠΎΡ€ΠΊΠ° красивых Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Ρ… мСню Π½Π° html+css

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚Π΅ΡΡŒ Π² ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй ΠΈ скачиваниС сразу ΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ доступно.

Π‘Π»Π°Π³ΠΎΠ΄Π°Ρ€ΡŽ Π·Π° Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅.

МСню для сайта – Ρ‡Ρ‚ΠΎ это ΠΈ Π΅Π³ΠΎ Π²ΠΈΠ΄Ρ‹.

Π£ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ сайта (ΠΈ Π΄Π°ΠΆΠ΅ ΠΈΠ½ΠΎΠ³Π΄Π° Ρƒ одностраничников) Π΅ΡΡ‚ΡŒ мСню – это ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ список Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ² сайта, Π½Π°ΠΆΠ°Π² Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ осущСствляСт ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ ΠΊ Π½ΠΈΠΌ. Π˜Π½Ρ‹ΠΌΠΈ словами, это список ссылок Π½Π° ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ сайта.

Π‘ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ высоко цСнят ΠΊΠΎΠΌΡ„ΠΎΡ€Ρ‚ ΠΈ своС врСмя. ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ трСбования, Π²Ρ‹Π΄Π²ΠΈΠ³Π°Π΅ΠΌΡ‹Π΅ ΠΊ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-страницам – быстрый поиск Π½ΡƒΠΆΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΈ высокая ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ. ΠšΠ»ΠΈΠ΅Π½Ρ‚Ρ‹ цСнят структуру, ΠΊΠΎΠ³Π΄Π° Ρ‚ΠΎΠ²Π°Ρ€Π½Ρ‹Π΅ прСдлоТСния Ρ€Π°Π·Π»ΠΎΠΆΠ΅Π½Ρ‹ ΠΏΠΎ ΠΏΠΎΠ»ΠΊΠ°ΠΌ, ΠΈ ΠΈΡ… всСгда ΠΌΠΎΠΆΠ½ΠΎ быстро Π½Π°ΠΉΡ‚ΠΈ ΠΎΠ΄Π½ΠΈΠΌ ΠΊΠ»ΠΈΠΊΠΎΠΌ ΠΌΡ‹ΡˆΠΈ.

Основная Ρ€ΠΎΠ»ΡŒ элСмСнта – навигация, поэтому часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Ρ‚Π΅Ρ€ΠΌΠΈΠ½ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ΅ мСню.

МСню для сайта

Π’ΠΈΠ΄Ρ‹ мСню

Π‘ΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π²ΠΈΠ΄Ρ‹ Π² зависимости ΠΎΡ‚:

  • ОбъСма – Π³Π»Π°Π²Π½ΠΎΠ΅ ΠΈ второстСпСнноС. ΠŸΠ΅Ρ€Π²ΠΎΠ΅ находится Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части страницы ΠΈ прСдоставляСт Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ² ΠΏΠΎ основным катСгориям. ВторостСпСнноС Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ΅ мСню для сайта – Π΄ΠΎΠ±Π°Π²ΠΎΡ‡Π½Ρ‹ΠΉ элСмСнт для слоТноструктурированных ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² – созданиС списка ссылок Π½Π° ΠΏΠΎΠ΄ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ
  • Бпособа Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ – Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ (ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ для экономии пространства экрана, появляСтся ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора) ΠΈ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ (ΠΏΠΎΠ΄ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΡŽ)
  • ΠžΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ – Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ (Π² Π»Π΅Π²ΠΎΠΉ ΠΈΠ»ΠΈ ΠΏΡ€Π°Π²ΠΎΠΉ части) ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ (вСрхняя Ρ‡Π°ΡΡ‚ΡŒ – шапка сайта, Ρ…Π΅Π΄Π΅Ρ€)
  • Π”ΠΈΠ·Π°ΠΉΠ½Π° – с эффСктами, ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ, ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ, Π³Π°Ρ€ΠΌΠΎΡˆΠΊΠ°ΠΌΠΈ ΠΈ Ρ‚.Π΄.

Π—Π°Ρ‡Π΅ΠΌ мСню сайту?

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

  • Удобство ΠΈ ΠΊΠΎΠΌΡ„ΠΎΡ€Ρ‚ – быстрая навигация ΠΈ ΠΏΠ΅Ρ€Π΅Π»ΠΈΠ½ΠΊΠΎΠ²ΠΊΠ° страниц. ВсС это относится ΠΊ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅ΠΉ SEO-ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ. Π˜Π΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ – Π² 3 наТатия ΠΌΡ‹ΡˆΠΊΠΎΠΉ ΠΊΠ»ΠΈΠ΅Π½Ρ‚ Π΄ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π΄ΠΎ любой ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Π½Π° сайтС
  • ΠŸΠΎΠ²Π΅Π΄Π΅Π½Ρ‡Π΅ΡΠΊΠΈΠ΅ Ρ„Π°ΠΊΡ‚ΠΎΡ€Ρ‹ – эффСктивноС мСню ΠΏΠΎΠ²Ρ‹ΡˆΠ°Π΅Ρ‚ врСмя нахоТдСния Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠ° Π½Π° сайтС, ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ ΠΎΡ‚ ΠΎΠ΄Π½ΠΎΠΉ страницы ΠΊ Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ ΠΈ интСрСсны ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ
  • Π‘Ρ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΡΡ‚ΡŒ – мСню создаСтся Π½Π° основании сСмантичСского ядра, ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ запросы ΠΊΠ»Π°ΡΡ‚Π΅Ρ€ΠΈΠ·ΡƒΡŽΡ‚ΡΡ Π² Π³Ρ€ΡƒΠΏΠΏΡ‹. ИмСнно Ρ‚Π°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ½ΡΡ‚ΡŒ спСцифику Ρ‚ΠΎΠ²Π°Ρ€Π½ΠΎΠ³ΠΎ прСдлоТСния Π³Π»Π°Π·Π°ΠΌΠΈ покупатСля
  • Alt ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ – этот ΠΏΡƒΠ½ΠΊΡ‚ касаСтся Ρ‚Π΅Ρ… мСню, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ.

ΠŸΡ€Π°Π²ΠΈΠ»Π° оформлСния мСню

  • Π—Π°ΠΌΠ΅Ρ‚Π½ΠΎΡΡ‚ΡŒ – элСмСнт Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Π²ΠΈΠ΄Π΅Π½ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ с ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ взгляда. НСзамСтноС мСню сбиваСт с Ρ‚ΠΎΠ»ΠΊΡƒ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ Π΅Π³ΠΎ ΡƒΡ…ΠΎΠ΄Ρƒ Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΊΠΎΠ½ΠΊΡƒΡ€ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ Π²Π΅Π±-рСсурс
  • ΠŸΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ – Π½Π΅ Π΄Π΅Π»Π°ΠΉΡ‚Π΅ мСню аляпистым ΠΈ ярким. Оно Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π»Π°ΠΊΠΎΠ½ΠΈΡ‡Π½ΠΎ Π²ΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒΡΡ Π² ΠΎΠ±Ρ‰ΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌ ΠΏΠΎ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΡŽ Π½Π° всСх страницах сайта.
  • Π‘Ρ‚Π°Π½Π΄Π°Ρ€Ρ‚Π½ΠΎΠ΅ мСсторасполоТСниС – располагайтС мСню для сайта Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ Π΅Π³ΠΎ части ΠΈΠ»ΠΈ Π½Π° Π±ΠΎΠΊΠΎΠ²ΠΈΠ½Π°Ρ…. Π”ΡƒΠ±Π»ΠΈΡ€ΡƒΡŽΡ‰Π΅Π΅ мСню часто Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ Π²Π½ΠΈΠ·Ρƒ сайта (Β«ΠΏΠΎΠ΄Π²Π°Π»Β») – прСдоставляСт доступ ΠΊ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°ΠΌ, скролящих Π΄ΠΎ самого Π½ΠΈΠ·Π°
  • Π˜Π½Π΄ΠΈΠΊΠ°Ρ†ΠΈΡ – ΠΊΠ»ΠΈΠ΅Π½Ρ‚ Ρ…ΠΎΡ‡Π΅Ρ‚ Π·Π½Π°Ρ‚ΡŒ ΠΎΡ‚Π²Π΅Ρ‚ Π½Π° свой вопрос: Π² ΠΊΠ°ΠΊΠΎΠΌ Ρ€Π°Π·Π΄Π΅Π»Π΅ ΠΎΠ½ находится
  • ΠŸΠΎΠ½ΡΡ‚Π½ΠΎΡΡ‚ΡŒ – Π² качСствС Π½Π°Π·Π²Π°Π½ΠΈΠΉ Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ² Π²Ρ‹Π±ΠΈΡ€Π°ΠΉΡ‚Π΅ понятныС слова ΠΈΠ»ΠΈ Ρ„Ρ€Π°Π·Ρ‹
  • Удобство – Ссли мСню ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ΅, ΠΏΡ€ΠΎΠ΄ΡƒΠΌΠ°ΠΉΡ‚Π΅ Π΅Π³ΠΎ Π΄ΠΎ ΠΌΠ΅Π»ΠΎΡ‡Π΅ΠΉ, сдСлайтС ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½ΡƒΡŽ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ появлСния ΠΈ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ ясноС ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ²
  • Π§ΠΈΡ‚Π°Π±Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ – Π²Ρ‹Π±ΠΈΡ€Π°ΠΉΡ‚Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ², Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ смогли ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΉ ΠΈΠ»ΠΈ Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ²
  • ΠΠ΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ – мСню Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΠΎ для всСх устройств – мобильного Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π°, ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Π°, Π½ΠΎΡƒΡ‚Π±ΡƒΠΊΠ°.

Π“Π΄Π΅ Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ΅ мСню для сайта?

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ сайта – кропотливая Ρ€Π°Π±ΠΎΡ‚Π°, Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‰Π°Ρ большого ΠΎΠΏΡ‹Ρ‚Π° ΠΈ внимания ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ элСмСнту Π²Π΅Π±-рСсурса. Β«ArtStudioDesignΒ» β€” создаСт, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΈ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ³Π°Π΅Ρ‚ сайты большС 12 Π»Π΅Ρ‚. АдаптивноС мСню для сайта, ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, Π±Π΅Π·Π³Ρ€Π°Π½ΠΈΡ‡Π½Ρ‹ΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π» – ΠΌΠ°Π»Ρ‹ΠΉ список прСимущСств Π½Π°ΡˆΠΈΡ… Ρ€Π°Π±ΠΎΡ‚. Π—Π²ΠΎΠ½ΠΈΡ‚Π΅ ΠΈ Π·Π°ΠΊΠ°Π·Ρ‹Π²Π°ΠΉΡ‚Π΅!


мСню Β» Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ для сайтов

3 467 Codepen

Π‘ΠΎΠΊΠΎΠ²ΠΎΠ΅ Π²Ρ‹Π΅Π·ΠΆΠ°ΡŽΡ‰Π΅Π΅ мСню

ΠŸΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° ΠΈΠΊΠΎΠ½ΠΊΡƒ стрСлки Π²Ρ‹Π΅Π·ΠΆΠ°Π΅Ρ‚ боковая панСль с Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠ΅ΠΉ. Анимация сдСлана с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ GSAP.

Π‘ΠΎΠΊΠΎΠ²ΠΎΠ΅ Π²Ρ‹Π΅Π·ΠΆΠ°ΡŽΡ‰Π΅Π΅ мСню 6 373 Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Menu & Nav

Π­Ρ„Ρ„Π΅ΠΊΡ‚ зачСркивания ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π² мСню

Π­Ρ„Ρ„Π΅ΠΊΡ‚ зачСркивания ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΏΡƒΠ½ΠΊΡ‚ Π² Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΌ мСню. НаиболСС эффСктно Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒΡΡ Π½Π° Π»Π΅Π½Π΄ΠΈΠ½Π³Π°Ρ…, Π³Π΄Π΅ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ мСню располоТСно ΠΏΠΎΠ²Π΅Ρ€Ρ… Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния.

Π­Ρ„Ρ„Π΅ΠΊΡ‚ зачСркивания ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π² мСню 14 022 Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Menu & Nav

Slinky β€” Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ΅ мСню

Π›Π΅Π³ΠΊΠΈΠΉ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ³ΠΎ мСню. МСню большС ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах.

Slinky β€” Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ΅ мСню 4 430 Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Menu & Nav

Π“ΠΈΠ±ΠΊΠΎΠ΅ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ мСню

НСбольшой скрипт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π² создании Π±ΠΎΠ»Π΅Π΅ эстСтичСского Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню. Если Ρ€Π°Π·ΠΌΠ΅Ρ€ экрана Π½Π΅ позволяСт ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ всС ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню, Ρ‚ΠΎ Π΄Π°Π½Π½Ρ‹ΠΉ скрипт ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Π΅Ρ‚ эти ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ Π² Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню β€” Β«Ρ‚Ρ€ΠΈ Ρ‚ΠΎΡ‡ΠΊΠΈΒ». ИспользованиС этого скрипта, ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΡƒΡŽ ΠΈΠΊΠΎΠ½ΠΊΡƒ (Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€), Ρ‚ΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ сами это Ρ€Π΅ΡˆΠΈΡ‚Π΅, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ мСню Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ всСгда ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒΡΡ Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½ΠΎ.

Π“ΠΈΠ±ΠΊΠΎΠ΅ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ мСню 7 615 Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Menu & Nav

Slide out sidebar мСню

  Плавно Π²Ρ‹Π΄Π²ΠΈΠ³Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ. Π Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π΄Π°Π½Π½ΠΎΠ³ΠΎ мСню ΡƒΠΆΠ΅ нСсколько Π»Π΅Ρ‚, ΠΎΠ΄Π½Π°ΠΊΠΎ ΠΌΡ‹ Ρ€Π΅ΡˆΠΈΠ»ΠΈ Π²ΡΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ ΠΎ Π½Ρ‘ΠΌ ΠΈ ΠΏΡ€ΠΈΠΊΡ€ΡƒΡ‚ΠΈΡ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠΈ font-awesome, ΡˆΡ€ΠΈΡ„Ρ‚ roboto ΠΈ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ modernizr.

Slide out sidebar мСню 5 750 Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Menu & Nav

Mega dropdown мСню

Mega dropdown мСню β€” jQuery ΠΏΠ»Π°Π³ΠΈΠ½ для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ большого Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню с мноТСством ΠΏΠΎΠ΄ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΉ для сайтов с большим количСством ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°.

Mega dropdown мСню 11 028 Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Accordion

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ accordion мСню

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ΅ мСню Ρ‚ΠΈΠΏΠ° Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½, Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡƒ Π½Π° стрСлкС.  

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ accordion мСню 3 881 Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Accordion

Flat accordion menu β€” Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню Ρ‚ΠΈΠΏΠ° Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ Π² стилС flat design. ΠŸΡ€ΠΎΡΡ‚ΠΎΠ΅ Π² ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠΈ ΠΈ стилизации.

Flat accordion menu - Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ 4 749 Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Menu & Nav

Π”ΠΈΠ°Π³ΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ΅ мСню Π½Π° CSS

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ возмоТности CSS3 Π² этом ΡƒΡ€ΠΎΠΊΠ΅ сдСлаСм диагональноС мСню, ΠΈ напишСм media queries, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ΄Π°Ρ‚ΡŒ Π΅ΠΌΡƒ адаптивности.

Π”ΠΈΠ°Π³ΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ΅ мСню Π½Π° CSS 3 181 Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Menu & Nav

Lavalamp мСню на CSS3

Π‘ΠΊΠΎΠ»ΡŒΠ·ΡΡ‰ΠΈΠΉ эффСкт для мСню ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΠΎΠ»Π΅Π΅ извСстСн, ΠΊΠ°ΠΊ lavalamp эффСкт. Π­Ρ„Ρ„Π΅ΠΊΡ‚ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° CSS с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ transitions ΠΈ сСлСктора ~.

Lavalamp мСню Π½Π° CSS3 3 696 Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Menu & Nav

Анимированный border с мСню

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ off-canvas (Π²Π½Π΅ основной страницы) Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ с Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ border эффСктом.

Анимированный border с мСню 12 507 Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Menu & Nav

АдаптивноС ΠΌΠ½ΠΎΠ³ΠΎ-ΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ΅ мСню

БСгодня сдСлаСм Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ΅ ΠΌΠ½ΠΎΠ³ΠΎ-ΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ΅ мСню. Для мобильной вСрсии Π΄ΠΎΠ±Π°Π²ΠΈΠΌ нСсколько строчСк jΠ°vascript ΠΊΠΎΠ΄Π°. Для Π»ΡƒΡ‡ΡˆΠ΅Π³ΠΎ восприятия ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, Π΄ΠΎΠ±Π°Π²ΠΈΠΌ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠΊΠΎΠ½ΠΊΠΈ, воспользовавшись ΡƒΠΆΠ΅ Π·Π½Π°ΠΊΠΎΠΌΡ‹ΠΌ Π½Π°ΠΌ ΠΏΠΎ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠΌ ΡƒΡ€ΠΎΠΊΠ°ΠΌ β€” font-awesome.css

АдаптивноС ΠΌΠ½ΠΎΠ³ΠΎ-ΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ΅ мСню

ΠžΠ±Π·ΠΎΡ€ 30 Π»ΡƒΡ‡ΡˆΠΈΡ… бСсплатных jQuery мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ

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

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ возмоТностСй JQuery ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π² динамичСскоС мСню. Π₯отя сСйчас для создания динамичСской Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS3, JQuery Π΄Π΅Π»Π°Π΅Ρ‚ мСню Π΅Ρ‰Π΅ Π±ΠΎΠ»Π΅Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌ.

Помимо динамичСских Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ, Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠ³Ρ€Π°Π΅Ρ‚ Π½Π΅ΠΌΠ°Π»ΠΎΠ²Π°ΠΆΠ½ΡƒΡŽ Ρ€ΠΎΠ»ΡŒ. Π₯отя Π±Ρ‹ ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ посСтитСли видят Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ, ΠΊΠΎΠ³Π΄Π° заходят Π½Π° ваш сайт.

Если мСню Π±ΡƒΠ΄Π΅Ρ‚ Π½Π΅ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Π±Π΅Π»ΡŒΠ½Ρ‹ΠΌ, это даст ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΏΠ»ΠΎΡ…ΠΎΠΉ ΠΎΠΏΡ‹Ρ‚ взаимодСйствия. Π₯ΠΎΡ€ΠΎΡˆΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ мСню Π² свою ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ качСство вашСго сайта, ΠΈ даст Π»ΡƒΡ‡ΡˆΠΈΠΉ ΠΎΠΏΡ‹Ρ‚ взаимодСйствия ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ.

БСгодня я ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽ Π²Π°ΠΌ 30 ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² JQuery мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.


Pushy Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ΅, Π½Π΅ привязанноС ΠΊ холсту мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰Π΅Π΅ прСобразования ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ CSS. Оно ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ посмотритС Π΄Π΅ΠΌΠΎ, ΠΈ ΠΎΠ½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎ Π²Π°ΠΌ понравится.

Π”Π΅ΠΌΠΎ | Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ


Π­Ρ‚ΠΎ Π΅Ρ‰Π΅ ΠΎΠ΄Π½ΠΎ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ΅ JQuery-мСню для создания красивых ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅ΠΌΡ‹Ρ… списков Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. Π•Π³ΠΎ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Ρ‡Π΅Ρ€Ρ‚ΠΎΠΉ являСтся ΠΌΠ°Π»Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ исходных Ρ„Π°ΠΉΠ»ΠΎΠ².

Π”Π΅ΠΌΠΎ | Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ


Π­Ρ‚ΠΎ простоС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ мСню с ΠΎΡ‡Π΅Π½ΡŒ интСрСсными функциями. ΠŸΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ΠΈΠΊΠΎΠ½ΠΊΡƒ мСню, всплываСт ΠΎΠΊΠ½ΠΎ мСню с ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ элСмСнтов. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Π΄Π΅ΠΌΠΎ.

Π”Π΅ΠΌΠΎ | Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ


Slidebars β€” JQuery Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ для быстрой ΠΈ простой Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ стилСй прилоТСния Π±Π΅Π· привязки ΠΊ холсту. Slidebars Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ измСнСния ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ².

Π”Π΅ΠΌΠΎ | Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ


JQuery мСню, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½ΠΎΠ΅ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ мСню сайта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JQuery ΠΈ CSS3. Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ Π² этом, посмотрСв Π΄Π΅ΠΌΠΎ.

Π”Π΅ΠΌΠΎ | Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ


Π­Ρ‚ΠΎ jQuery мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ страницу Π² 3D мСню. ИдСя Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ мобильного прилоТСния, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ ΠΏΠΎ ΠΈΠΊΠΎΠ½ΠΊΠ΅ мСню, содСрТимоС страницы сдвигаСтся Π² сторону, Π° мСню выводится Π½Π° ΠΏΠ΅Ρ€Π΅Π΄Π½ΠΈΠΉ ΠΏΠ»Π°Π½.

Π”Π΅ΠΌΠΎ | Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ


Плагин для создания Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ мобильного jQuery мСню с нСсколькими уровнями ΠΈ Π³ΠΈΠ±ΠΊΠΎΠΉ, Π½ΠΎ простой настройкой. БовмСстим с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Π° навигация с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹.

Π”Π΅ΠΌΠΎ | Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ


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

Π”Π΅ΠΌΠΎ | Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ


jQuery ΠΏΠ»Π°Π³ΠΈΠ½ для создания мСню ΠΈ простого добавлСния Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Sidr Π²Ρ‹ смоТСтС ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ элСмСнты своСго сайта, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅ мСню.

Π”Π΅ΠΌΠΎ | Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ


slimMenu β€” это нСбольшой jQuery ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ…, ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹Ρ… мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. Π§Ρ‚ΠΎ самоС классноС Π² Π½Π΅ΠΌ, Ρ‚Π°ΠΊ это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠΌΠ΅Ρ‚ΡŒ нСсколько Ρ€Π°Π·Π½Ρ‹Ρ… мСню, ΠΈ всС ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹.

Π”Π΅ΠΌΠΎ | Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ


jQuery мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰Π΅Π΅ Π·Π°Π΄Π°Ρ‚ΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ мСню ΠΏΠΎ всСй ΡˆΠΈΡ€ΠΈΠ½Π΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого ΠΏΠ»Π°Π³ΠΈΠ½Π° это дСлаСтся ΠΎΡ‡Π΅Π½ΡŒ просто. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ для IE7.

Π”Π΅ΠΌΠΎ | Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ


Π­Ρ‚ΠΎ mobile-first ΠΏΡ€ΠΈΠΌΠ΅Ρ€ использования ΠΌΠ΅Π΄ΠΈΠ° запросов ΠΈ JavaScript для создания ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ³ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ³ΠΎ мСню с ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ сСнсорных экранов, эффСктов навСдСния ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹.

Π”Π΅ΠΌΠΎ | Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ


jQuery мСню, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ запускаСт события ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ Π½Π° Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΉ элСмСнт мСню. ИдСально ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для создания Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΡ… мСню, ΠΊΠ°ΠΊ Π½Π° Amazon.

Π”Π΅ΠΌΠΎ | Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ


Плагин jQuery мСню, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ простой ΠΈ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½Ρ‹ΠΉ способ Π²Ρ‹Π²ΠΎΠ΄Π° мСню. Π‘ΠΎΠ·Π΄Π°Π΅Ρ‚ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅ списки мСню. Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π° всСх устройствах!

Π”Π΅ΠΌΠΎ | Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ


Shifter β€” простой Π² использовании mobile-first jQuery ΠΏΠ»Π°Π³ΠΈΠ½ для создания слайд-мСню, Π²Ρ‹Π΅Π·ΠΆΠ°ΡŽΡ‰ΠΈΡ… с ΠΏΡ€Π°Π²ΠΎΠΉ стороны ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ. Для настройки сущСствуСт Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½Π° опция maxWidth. Она позволяСт Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅/ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств.

Π”Π΅ΠΌΠΎ | Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ


Hamburger β€” это jQuery ΠΏΠ»Π°Π³ΠΈΠ½ для создания слайд-мСню Π² стилС Android App, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ экрана размСщаСтся Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ мСню. ΠŸΡ€ΠΈ раскрытии мСню Π² ΠΏΠΎΠ»Π½ΠΎΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€Π΅, ΠΎΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, Π½ΠΎ Π½Π΅ панСль дСйствий.

Π”Π΅ΠΌΠΎ | Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ


Focucss β€” jQuery мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ создаСтся Π½Π΅ привязанноС ΠΊ холсту мСню Π² сайдбарС с ΠΊΡ€ΡƒΡ‚Ρ‹ΠΌΠΈ функциями размытости, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π½Π° основныС Ρ€Π°Π·Π΄Π΅Π»Ρ‹ сайта ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΌΠ΅Π½Π΅Π΅ Π·Π°ΠΌΠ΅Ρ‚Π½Ρ‹ΠΌΠΈ Π½Π΅ слишком ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Π΅ Ρ€Π°Π·Π΄Π΅Π»Ρ‹.

Π”Π΅ΠΌΠΎ | Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ


Drawer β€” jQuery ΠΏΠ»Π°Π³ΠΈΠ½ для создания Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ, Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ мСню, Π²Ρ‹Π΅Π·ΠΆΠ°ΡŽΡ‰Π΅Π³ΠΎ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ ΠΈΠ· Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ области экрана. ΠŸΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ Π² Android-прилоТСниях.

Π”Π΅ΠΌΠΎ | Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ


Datmenu β€” ΠΏΡ€Π΅ΠΌΠΈΡƒΠΌ jQuery Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ΅ мСню с Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ функциями CSS3 Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π§Ρ‚ΠΎ самоС Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π² этом ΠΏΠ»Π°Π³ΠΈΠ½Π΅, Ρ‚Π°ΠΊ это Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΠΎΠ»Π½ΠΎΠΉ настройки с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ js-ΠΎΠΏΡ†ΠΈΠΉ.

Π”Π΅ΠΌΠΎ | Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ


jPanelMenu β€” красивоС ΠΈ соврСмСнноС jQuery мСню, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰Π΅Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ панСльноС мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ с функциями ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ² CSS3 Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Π‘Ρ‚ΠΈΠ»ΡŒ jPanelMenu Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°Π΅Ρ‚ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ вСрсии Facebook ΠΈ Google. Плагин ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·Π½Ρ‹Ρ… ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

Π”Π΅ΠΌΠΎ | Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ


Fly Side Menu β€” ΠΊΡ€ΡƒΡ‚ΠΎΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ CSS3 для создания Π±ΠΎΠΊΠΎΠ²ΠΎΠ³ΠΎ мСню с 3D прСобразованиями ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π°ΠΌΠΈ.

Π”Π΅ΠΌΠΎ | Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ


PageScroll β€” настраиваСмоС мобильноС jQuery-мСню, Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π½Π½ΠΎΠ΅ для использования Π½Π° Π»ΡŽΠ±Ρ‹Ρ… Π²Π΅Π±-сайтах, Π° Ρ‚Π°ΠΊΠΆΠ΅ Ρ†Π΅Π»Π΅Π²Ρ‹Ρ… страницах.

Π”Π΅ΠΌΠΎ | Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ


DD Icon Menu β€” это jQuery ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ мСню ΠΈΠΊΠΎΠ½ΠΎΠΊ, располоТСнноС Π½Π° ΠΊΡ€Π°ΡŽ экрана с Ρ€Π°Π·Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°ΡŽΡ‰ΠΈΠΌΠΈΡΡ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌΠΈ мСню.

Π”Π΅ΠΌΠΎ | Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ


jQuery мСню, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰Π΅Π΅ ΠΎΡΡƒΡ‰Π΅ΡΡ‚Π²Π»ΡΡ‚ΡŒ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ ΠΏΠΎ Π΄Π°Ρ‚Π°ΠΌ Π² Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅ (нСдСля, мСсяц ΠΈΠ»ΠΈ Π³ΠΎΠ΄). ИдСально для запросов ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π²Ρ‹Π·ΠΎΠ²ΠΎΠ² AJAX.

Π”Π΅ΠΌΠΎ | Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ


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

Π”Π΅ΠΌΠΎ | Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

26. Multi-Level Push Menu


Multi-Level Push Menu β€” это Javascript Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°, созданная MARY LOU ΠΈΠ· Codrops. Она создаСт ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹Π΅ мСню, Π²Ρ‹Π΅Π·ΠΆΠ°ΡŽΡ‰ΠΈΠ΅ с Π»Π΅Π²ΠΎΠΉ стороны экрана ΠΈ ΡΠ΄Π²ΠΈΠ³Π°ΡŽΡ‰ΠΈΠ΅ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π²ΠΏΡ€Π°Π²ΠΎ.

Π”Π΅ΠΌΠΎ | Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ


Box Lid β€” простой jQuery ΠΏΠ»Π°Π³ΠΈΠ½. ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΉ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ с 3D-эффСктами β€˜Box Lid’, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠΌΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ ΠΈ прСобразования CSS3.

Π”Π΅ΠΌΠΎ | Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ


jQuery слайд-мСню, внСшнС ΠΏΠΎΡ…ΠΎΠΆΠ΅Π΅ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ мСню Facebook ΠΈ Path.

Π”Π΅ΠΌΠΎ | Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ


scrollNav β€” это jQuery ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π²Π΅Π±-страницы, разбивая Π΅Π³ΠΎ Π½Π° логичСскиС Ρ€Π°Π·Π΄Π΅Π»Ρ‹ ΠΈ создавая настраиваСмый слайд сайдбар Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.

Π”Π΅ΠΌΠΎ | Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ


DoubleTapToGo β€” это jQuery ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΡƒΠ΄ΠΎΠ±Π½ΠΎΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ΅ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню.

Π”Π΅ΠΌΠΎ | Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π’ΠΎΡ‚ ΠΈ всС! ВсС эти jQueryΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ обСспСчат ΠΊΡ€ΡƒΡ‚ΠΎΠΉ ΠΈ приятный Π΄ΠΈΠ·Π°ΠΉΠ½ Π²Π°ΡˆΠΈΡ… мСню. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… Π² своих ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ произвСсти Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅ Π½Π° своих посСтитСлСй. Если Π²Π°ΠΌ извСстны Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Π΅ jQuery мСню, Π½Π°ΠΏΠΈΡˆΠΈΡ‚Π΅ ΠΎΠ± этом Π² коммСнтариях.

Данная публикация прСдставляСт собой ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ ΡΡ‚Π°Ρ‚ΡŒΠΈ Β«The Listed Voyage: 30 Free jQuery Navigation MenusΒ» , ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²Π»Π΅Π½Π½ΠΎΠΉ Π΄Ρ€ΡƒΠΆΠ½ΠΎΠΉ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ.Ρ€Ρƒ

шаблонов мСню | Hugo

Hugo Π½Π΅ Π΄Π΅Π»Π°Π΅Ρ‚ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊΠΈΠΌ Π±ΡƒΠ΄Π΅Ρ‚ ваш Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ HTML. структурированы. ВмСсто этого ΠΎΠ½ прСдоставляСт всС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π°ΠΌ понадобятся Π² состоянии ΠΏΠΎΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ своС мСню, ΠΊΠ°ΠΊ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅.

НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ absLangURL ΠΈΠ»ΠΈ relLangURL , Ссли ваша Ρ‚Π΅ΠΌΠ° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΌΠ½ΠΎΠ³ΠΎΡΠ·Ρ‹Ρ‡Π½ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ. Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ absURL ΠΈ relURL , эти Π΄Π²Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ URL-адрСс ΠΊ URL-адрСсу.

МСню Ρ€Π°Π·Π΄Π΅Π»Π° для Π»Π΅Π½ΠΈΠ²Ρ‹Ρ… Π±Π»ΠΎΠ³Π³Π΅Ρ€ΠΎΠ²

Π§Ρ‚ΠΎΠ±Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ это мСню, настройтС sectionPagesMenu Π½Π° своСм сайтС config :

  sectionPagesMenu = "main"
  

НазваниС мСню ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π»ΡŽΠ±Ρ‹ΠΌ, Π½ΠΎ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ это Ρ‚Π°ΠΊΠΎΠ΅.

Π­Ρ‚ΠΎ создаст мСню со всСми Ρ€Π°Π·Π΄Π΅Π»Π°ΠΌΠΈ Π² качСствС ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню ΠΈ всСми страницами Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ² Π² качСствС Β«Ρ‚Π΅Π½Π΅Π²Ρ‹Ρ… Ρ‡Π»Π΅Π½ΠΎΠ²Β». ВСнь ΠΏΠΎΠ΄Ρ€Π°Π·ΡƒΠΌΠ΅Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ страницы Π½Π΅ прСдставлСны самим элСмСнтом мСню, Π½ΠΎ это позволяСт Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ мСню Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ уровня, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

  

Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²Ρ‹ΡˆΠ΅ ΠΏΡƒΠ½ΠΊΡ‚Π΅ мСню помСчаСтся ΠΊΠ°ΠΊ Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ, Ссли ΠΎΠ½ находится Π½Π° страницС списка Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π³ΠΎ Ρ€Π°Π·Π΄Π΅Π»Π° ΠΈΠ»ΠΈ Π½Π° страницС Π² этом Ρ€Π°Π·Π΄Π΅Π»Π΅.

МСню Site Config

Π’Ρ‹ΡˆΠ΅ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ β€” это всС, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ. Но Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ИзмСняя вСс, имя ΠΈΠ»ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ссылки, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΈΡ… Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ Π² Ρ„Π°ΠΉΠ»Π΅ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ сайта:

config.

toml JSON
  мСню:
  основной:
  - ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€: Π±Π»ΠΎΠ³
    имя: это Ρ€Π°Π·Π΄Π΅Π» Π±Π»ΠΎΠ³Π°
    Π½Π°Π·Π²Π°Π½ΠΈΠ΅: Ρ€Π°Π·Π΄Π΅Π» Π±Π»ΠΎΠ³Π°
    URL: / Π±Π»ΠΎΠ³ /
    вСс: -110
  
  [мСню]

  [[Menu.main]]
    identifier = "Π±Π»ΠΎΠ³"
    name = "Π­Ρ‚ΠΎ Ρ€Π°Π·Π΄Π΅Π» Π±Π»ΠΎΠ³Π°"
    title = "Ρ€Π°Π·Π΄Π΅Π» Π±Π»ΠΎΠ³Π°"
    url = "/ blog /"
    вСс = -110
  
  {
   "мСню": {
      "основной": [
         {
            Β«ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Β»: Β«Π±Π»ΠΎΠ³Β»,
            "name": "Π­Ρ‚ΠΎ Ρ€Π°Π·Π΄Π΅Π» Π±Π»ΠΎΠ³Π°",
            "title": "Ρ€Π°Π·Π΄Π΅Π» Π±Π»ΠΎΠ³Π°",
            "url": "/ blog /",
            «вСс»: -110
         }
      ]
   }
}
  

Π˜Π΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠΌΠ΅Π½ΠΈ Ρ€Π°Π·Π΄Π΅Π»Π°.

ΠŸΡƒΠ½ΠΊΡ‚Ρ‹ мСню с ΠΏΠ΅Ρ€Π΅Π΄Π½Π΅ΠΉ стороны страницы

Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню со страницы (Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Ρ„Π°ΠΉΠ» .md ).

Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ yaml :

  ---
title: Π¨Π°Π±Π»ΠΎΠ½Ρ‹ мСню
linktitle: Π¨Π°Π±Π»ΠΎΠ½Ρ‹ мСню
мСню:
  Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹:
    title: «Как ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ мСню Π² ΡˆΠ°Π±Π»ΠΎΠ½Π°Ρ…Β»
    Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒ: "ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹"
    вСс: 130
---
...
  

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ мСню. Π­Ρ‚ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ комплСксным Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ, МСню Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ строкой, массивом строк ΠΈΠ»ΠΈ массивом комплСксных Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ. ΠΊΠ°ΠΊ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π²Ρ‹ΡˆΠ΅.

ИспользованиС .Page в мСню

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

Π­Ρ‚Π° пСрСмСнная устанавливаСтся, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ссли ΠΏΡƒΠ½ΠΊΡ‚ мСню ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ Π² Π½Π°Ρ‡Π°Π»Π΅ страницы. ΠŸΡƒΠ½ΠΊΡ‚Ρ‹ мСню ΠΈΠ· ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ сайта Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ Π·Π½Π°ΡŽΡ‚ ΠΎ . Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π° .

Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ шаблон go с ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹ΠΌ словом ΠΈΠ»ΠΈ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅ Π½Π° вашСм языкС шаблонов.

Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

  
.

МСню сайта β€” ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ°

МСню сайта β€” это список ссылок, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π² качСствС основной Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ для вашСго сайта. РасполоТСниС мСню ΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°Ρ€ΡŒΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² зависимости ΠΎΡ‚ вашСй Ρ‚Π΅ΠΌΡ‹, Π° Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‚Π΅ΠΌΡ‹ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ мСню, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ мСню ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… ссылок.

ОглавлСниС

Π­Ρ‚ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню Π² Ρ‚Π΅ΠΌΠ΅ Rivington

  1. НаТмитС Мой сайт (Ρ‹) , Π·Π°Ρ‚Π΅ΠΌ Π”ΠΈΠ·Π°ΠΉΠ½ πŸ ’ НастройтС .
  2. Π’ настройщикС Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ МСню .
  3. Если ваша Ρ‚Π΅ΠΌΠ° ΡƒΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ стандартноС / основноС мСню, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ ΠΏΠΎ Π½Π΅ΠΌΡƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅.
Custom Menus - Menu Locations Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Основной , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ элСмСнты Π² вашС мСню.
  1. Если ваша Ρ‚Π΅ΠΌΠ° Π΅Ρ‰Π΅ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ стандартного ΠΈΠ»ΠΈ основного мСню, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½ΠΎΠ²ΠΎΠ΅ мСню
  2. ΠŸΡ€ΠΈΡΠ²ΠΎΠΉΡ‚Π΅ Π²Π°ΡˆΠ΅ΠΌΡƒ мСню имя
  3. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ мСсто, Π³Π΄Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ мСню (ваши ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ Π·Π°Π²ΠΈΡΠ΅Ρ‚ΡŒ ΠΎΡ‚ вашСй Ρ‚Π΅ΠΌΡ‹)
  4. НаТмитС Π”Π°Π»Π΅Π΅ , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ‡Π°Ρ‚ΡŒ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ элСмСнты Π² Π½ΠΎΠ²ΠΎΠ΅ мСню

ΠŸΡƒΠ½ΠΊΡ‚Ρ‹ мСню , доступныС Π² Ρ‚Π΅ΠΌΠ΅ Π ΠΈΠ²ΠΈΠ½Π³Ρ‚ΠΎΠ½Π°, β€” это основноС мСню ΠΈ мСню ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… ссылок .

Π‘ΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ ссылки МСню стили мСню элСмСнтов Π² Π²ΠΈΠ΄Π΅ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ. Π’ этом случаС ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Primary Menu.

Custom Menus - Create New Menu Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½ΠΎΠ²ΠΎΠ΅ мСню НазовитС мСню ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ мСстополоТСниС мСню

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

Π’ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ ΡƒΠΆΠ΅ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½Π½Ρ‹ΠΌ страницам Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ нСсколько Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ‚ΠΈΠΏΠΎΠ² ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню Π² своС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ΅ мСню:

  • ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠ°Ρ ссылка β€” ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ URL, ΡΡΡ‹Π»Π°ΡŽΡ‰ΠΈΠΉΡΡ Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ сайт.
  • Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Ρ‹ β€” ссылка Π½Π° Π΄Ρ€ΡƒΠ³ΡƒΡŽ страницу вашСго сайта.
  • ΠŸΠΎΡΡ‚ΠΎΠ² β€” пост Π² Π±Π»ΠΎΠ³Π΅ Π½Π° вашСм сайтС.
  • ΠžΡ‚Π·Ρ‹Π²Ρ‹ β€” ссылка Π½Π° ΠΎΡ‚Π·Ρ‹Π²Ρ‹.
  • ΠŸΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ β€” ссылка Π½Π° страницу вашСго ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ².
  • ΠšΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ β€” Π»Π΅Π½Ρ‚Π° Π±Π»ΠΎΠ³ΠΎΠ² ΠΈΠ· Π΄Π°Π½Π½ΠΎΠΉ ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ.
  • Π’Π΅Π³ΠΈ β€” Π»Π΅Π½Ρ‚Π° Π±Π»ΠΎΠ³ΠΎΠ² ΠΈΠ· Π΄Π°Π½Π½ΠΎΠ³ΠΎ Ρ‚Π΅Π³Π°.
  • Π’ΠΈΠΏΡ‹ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² β€” ссылка Π½Π° ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΉ Ρ‚ΠΈΠΏ ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.
  • Π’Π΅Π³ΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° β€” ссылка Π½Π° ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΉ Ρ‚Π΅Π³ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ.

Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· этих ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню:

  1. НаТмитС ΠΊΠ½ΠΎΠΏΠΊΡƒ + Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€Ρ‹
  2. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ‚ΠΈΠΏ ΠΏΡƒΠ½ΠΊΡ‚Π° мСню ΠΈΠ· списка. НапримСр: Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Ρ‹ .
  3. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ², ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡ‹Ρ… для этого Ρ‚ΠΈΠΏΠ°. НапримСр, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ + Π”ΠΎΠΌΠ°ΡˆΠ½ΠΈΠΉ , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ссылку Π½Π° свою домашнюю страницу Π² мСню.
  4. Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ элСмСнты Π² своС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ΅ мСню, Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π·Π½Π°Ρ‡ΠΎΠΊ плюс рядом с ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ элСмСнтом.
  5. НаТмитС Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ измСнСния , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ измСнСния.

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½ΠΎΠ²ΡƒΡŽ страницу ΠΈΠ»ΠΈ сообщСниС Π² своС мСню, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π² ΠΏΠΎΠ»Π΅ для Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½ΠΎΠ²ΡƒΡŽ страницу ΠΈΠ»ΠΈ Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½ΠΎΠ²ΡƒΡŽ запись . ΠŸΡƒΡΡ‚Π°Ρ страница / сообщСниС Π±ΡƒΠ΄Π΅Ρ‚ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΎ Π½Π° ваш сайт ΠΈ автоматичСски Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΎ Π² вашС мСню.

Π—Π°Ρ‚Π΅ΠΌ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π½Π° страницу ΠΈΠ»ΠΈ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒ Ρ‡Π΅Ρ€Π΅Π· ваш сайт Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Ρ‹ / БообщСния


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

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ это мСню ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»ΠΎΡΡŒ Π½Π° вашСм сайтС, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ РасполоТСниС мСню .Для основной Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Π°Ρ настройка зависит ΠΎΡ‚ вашСй Ρ‚Π΅ΠΌΡ‹. Часто ΠΎΠ½ ΡƒΠΊΠ°Π·Π°Π½ Π² качСствС основного, Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ ΠΈΠ»ΠΈ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ.

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

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ мСню ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… ссылок здСсь.


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

Π’ ΠΏΡƒΠ½ΠΊΡ‚Π΅ ΠžΠΏΡ†ΠΈΠΈ мСню с установитС Ρ„Π»Π°ΠΆΠΎΠΊ «АвтоматичСски Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π½ΠΎΠ²Ρ‹Π΅ страницы Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ уровня Π² это мСню», Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ вновь созданныС страницы автоматичСски добавлялись Π² мСню.

Custom Menus - Menu Options

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


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

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ порядок элСмСнтов Π² вашСм мСню, пСрСмСститС элСмСнт мСню, Ρ‰Π΅Π»ΠΊΠ½ΡƒΠ² ссылку ΠŸΠ΅Ρ€Π΅ΡƒΠΏΠΎΡ€ΡΠ΄ΠΎΡ‡ΠΈΡ‚ΡŒ :

  1. НаТмитС Π½Π° ссылку Reorder .
  2. НаТимайтС стрСлки Π²Π²Π΅Ρ€Ρ… ΠΈΠ»ΠΈ Π²Π½ΠΈΠ· для пСрСмСщСния элСмСнта мСню Π²Π²Π΅Ρ€Ρ… ΠΈ Π²Π½ΠΈΠ· ΠΏΠΎ мСню.
  3. НаТмитС стрСлки Π²ΠΏΡ€Π°Π²ΠΎ ΠΈ Π²Π»Π΅Π²ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ страницы ΠΏΠΎΠ΄ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ страницами.
  4. НаТмитС Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ измСнСния Π²Π²Π΅Ρ€Ρ…Ρƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ измСнСния.

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚ΡŒ элСмСнт мСню Π½Π° мСсто, Π½Π΅ наТимая ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠŸΠ΅Ρ€Π΅ΡƒΠΏΠΎΡ€ΡΠ΄ΠΎΡ‡ΠΈΡ‚ΡŒ .

Custom Menus - Reorder

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

ΠŸΡ€ΠΈ Π²Π»ΠΎΠΆΠ΅Π½ΠΈΠΈ страницы создаСтся подмСню , Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню ΠΈΠ»ΠΈ .

  1. НаТмитС Π½Π° ссылку Reorder .
  2. НаТмитС ΠΊΠ½ΠΎΠΏΠΊΡƒ со стрСлкой Π²ΠΏΡ€Π°Π²ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Π»ΠΎΠΆΠΈΡ‚ΡŒ страницу ΠΏΠΎΠ΄ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΡƒΡŽ страницу, создав Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню.
  3. Как Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΡƒΠ΄ΠΎΠ²Π»Π΅Ρ‚Π²ΠΎΡ€Π΅Π½Ρ‹ своим Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌΡΡ мСню, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π“ΠΎΡ‚ΠΎΠ²ΠΎ
  4. Π—Π°Ρ‚Π΅ΠΌ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ измСнСния , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ измСнСния.
НаТмитС Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ

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

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню, Π½Π°ΠΆΠ°Π² Π½Π° Π½ΠΈΡ… Π² настройках слСва. Когда Π²Ρ‹ это сдСлаСтС, ΠΎΠ½ΠΈ развСрнутся ΠΈ ΠΎΡ‚ΠΊΡ€ΠΎΡŽΡ‚ Π£Π΄Π°Π»ΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ. НаТмитС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚ мСню.

НаТмитС Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉΡΡ список рядом с ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠΌ мСню, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ссылку Π£Π΄Π°Π»ΠΈΡ‚ΡŒ , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ элСмСнт.

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

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΏΡƒΠ½ΠΊΡ‚Π° мСню Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΎ отобраТаСтся Π½Π° вашСм сайтС, ΠΎΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π² ΠΌΠ΅Ρ‚ΠΊΡƒ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. Для этого Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° элСмСнт Π² настройках Π² Π»Π΅Π²ΠΎΠΉ части настройщика. Он развСрнСтся ΠΈ ΠΏΠΎΠΊΠ°ΠΆΠ΅Ρ‚ ΠΏΠΎΠ»Π΅ для Навигационной ΠΌΠ΅Ρ‚ΠΊΠΈ.

Π—Π΄Π΅ΡΡŒ Π²Π²Π΅Π΄ΠΈΡ‚Π΅ тСкст Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ этот ΠΏΡƒΠ½ΠΊΡ‚ мСню отобраТался Π½Π° вашСм сайтС.

Custom Menus - Rename Menu Item

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

Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ измСнСния

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


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

Часто Π·Π°Π΄Π°Π²Π°Π΅ΠΌΡ‹Π΅ вопросы
Π’ΠΈΠΏ ΠΏΡƒΠ½ΠΊΡ‚Π° мСню, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Ρ…ΠΎΡ‡Ρƒ, Π½Π΅ поддСрТиваСтся, Ρ‡Ρ‚ΠΎ ΠΌΠ½Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ?

Если Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΈ ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ваш Ρ‚ΠΈΠΏ элСмСнта Π½Π΅ поддСрТиваСтся, ΠΈΠ»ΠΈ Π²Ρ‹ Π½Π΅ Π²ΠΈΠ΄ΠΈΡ‚Π΅ Π½ΡƒΠΆΠ½Ρ‹ΠΉ Ρ‚ΠΈΠΏ Π² спискС Ρ‚ΠΈΠΏΠΎΠ², Π²Ρ‹ всС Ρ€Π°Π²Π½ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ эти Ρ‚ΠΈΠΏΡ‹ Π² WP Admin β†’ МСню. Π’ настоящСС врСмя Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ сообщСний Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ Π½Π° Π½ΠΎΠ²ΠΎΠΉ страницС мСню, Π½ΠΎ всС Π΅Ρ‰Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ Π² WP Admin.

Оно ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ мСню, Π½ΠΎ ΠΊΠΎΠ³Π΄Π° я Π·Π°Ρ…ΠΎΠΆΡƒ Π½Π° свой сайт, мСню Ρ‚Π°ΠΌ Π½Π΅Ρ‚, ΠΊΠ°ΠΊ ΠΌΠ½Π΅ это ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ?

Если ваша Ρ‚Π΅ΠΌΠ° Π½Π΅ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ мСню ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ внСсти ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ измСнСния Π² мСню ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ β€” это заставит Ρ‚Π΅ΠΌΡƒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ это мСню.

Π“Π΄Π΅ функция X, которая Π±Ρ‹Π»Π° Ρ‚Π°ΠΌ Ρ€Π°Π½ΡŒΡˆΠ΅?

Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½Ρ‹ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ описаний ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню, классов CSS, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ†Π΅Π»Π΅Π²ΠΎΠ³ΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° ΠΈΠ»ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° β€” ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ WP Admin β†’ МСню.

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΡƒΡŽ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ нСльзя Π½Π°ΠΆΠΈΠΌΠ°Ρ‚ΡŒ, для ΠΌΠΎΠ΅Π³ΠΎ подмСню

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ элСмСнт мСню, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ нСльзя Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ, Π½ΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ элСмСнты подмСню, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ элСмСнт мСню Custom Link ΠΈ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ символ # Π² ΠΏΠΎΠ»Π΅ URL .

menu09


Π‘Π»Π΅Π΄ΡƒΡŽΡ‰Π°Ρ страница: ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ мСню Π² WP Admin

Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Ρ‹: 1 2 3 ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ всС

.
Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ мСню Π²Π΅Π±-сайтов, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π½Π° Π²Π΅Π±-сайтах WordPress Π‘Ρ‚Π°Π½Π΄Π°Ρ€Ρ‚Π½Ρ‹ΠΉ Π·Π½Π°Ρ‡ΠΎΠΊ WordPress Website Navigation Menu

Π”ΠΆΠ΅Π½Π½ΠΈΡ„Π΅Ρ€ Π‘ΠΎΡ€Π½

На самом Π±Π°Π·ΠΎΠ²ΠΎΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅ мСню WordPress прСдставляСт собой Π½Π°Π±ΠΎΡ€ ΠΈΠ»ΠΈ список ссылок. НаиболСС распространСнноС располоТСниС мСню находится Π² области Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΏΠΎ сайту ΠΈΠ»ΠΈ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΈ называСтся Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΌ мСню .

КаТдая ссылка Π² мСню называСтся ΠΏΡƒΠ½ΠΊΡ‚ мСню . НСкоторыС ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² подмСню , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π² Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅ΠΌ мСню .

  • ΠŸΠ Π˜ΠœΠ•Π : ОсновноС мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΏΠΎ Π²Π΅Π±-сайту ΠΌΠΎΠΆΠ΅Ρ‚ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню, ΠΊΠ°ΠΊ О, Услуги, ΠŸΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρ‹, ΠžΡ‚Π·Ρ‹Π²Ρ‹ ΠΈ ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹. ΠŸΡƒΠ½ΠΊΡ‚ мСню «БСрвисы» ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню с ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌΠΈ подмСню «ЧастноС ΠΊΠΎΠ½ΡΡƒΠ»ΡŒΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅Β», Β«Π“Ρ€ΡƒΠΏΠΏΠΎΠ²ΠΎΠ΅ ΠΎΠ±ΡƒΡ‡Π΅Π½ΠΈΠ΅Β», Β«VIP дСнь».

НиТС Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ сайт с основным мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ мСню Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌΡΡ мСню подстраниц Π² ΠΏΡƒΠ½ΠΊΡ‚Π΅ мСню Β«ΠžΡ†Π΅Π½ΠΊΠΈΒ».

How to Use WordPress Website Menus

мСню WordPress ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ практичСски Π² любом мСстС сайта WordPress.

Π’ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ вашСго Π²Π΅Π±-сайта Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ мСню WordPress Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»Π΅, Π½Π° Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ, Π² Π½ΠΈΠΆΠ½Π΅ΠΌ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»Π΅ ΠΈΠ»ΠΈ Π² любой области Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ΠΎΠ².

  • ΠŸΠ Π˜ΠœΠ•Π : На ΠΌΠ΅Π΄ΠΈΠ°-страницС Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ мСню ссылок Π½Π° Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ для ΠΈΠ½Ρ‚Π΅Ρ€Π²ΡŒΡŽ, Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ΠΈ Π²ΠΈΠ΄Π΅ΠΎ.
  • ΠŸΠ Π˜ΠœΠ•Π : Π’ Π½ΠΈΠΆΠ½Π΅ΠΌ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»Π΅ Π²Π΅Π±-сайта Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ мСню ссылок Π½Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ страницы вашСго ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π° ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ ΠΏΡ€ΠΎΠ΄Π°ΠΆ.
  • ΠŸΠ Π˜ΠœΠ•Π : На страницС для Π²Ρ‹ΡΡ‚ΡƒΠΏΠ°ΡŽΡ‰ΠΈΡ… Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ мСню Π½Π° Π±ΠΎΠΊΠΎΠ²ΡƒΡŽ панСль, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ссылаСтся Π½Π° ваши ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΈ SlideShare, Π²ΠΈΠ΄Π΅ΠΎ-выступлСния ΠΈΠ»ΠΈ ΠΎΠ±Π·ΠΎΡ€Ρ‹.

Different Types of WordPress Menus

Π—Π°Ρ‡Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ мСню?

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚Π΅ эту ΠΌΡ‹ΡΠ»ΡŒ, Β«Π”Π°, я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ мСню для ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΌΠΎΠ΅Π³ΠΎ сайта, Π½ΠΎ Π·Π°Ρ‡Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ мСню Π² Π΄Ρ€ΡƒΠ³ΠΎΠΌ мСстС Π½Π° ΠΌΠΎΠ΅ΠΌ сайтС? ΠŸΠΎΡ‡Π΅ΠΌΡƒ Π±Ρ‹ ΠΌΠ½Π΅ просто Π½Π΅ ΠΏΠ΅Ρ€Π΅Ρ‡ΠΈΡΠ»ΠΈΡ‚ΡŒ ссылки?

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

МСню Π΄Π΅Π»Π°ΡŽΡ‚ процСсс Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΡ‰Π΅!

МСню WordPress ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ быстро ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ΅ мСню ΠΈ Π»Π΅Π³ΠΊΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ страницы, записи, Π°Ρ€Ρ…ΠΈΠ²Ρ‹ ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΉ, Π°Ρ€Ρ…ΠΈΠ²Ρ‹ Ρ‚Π΅Π³ΠΎΠ², Π°Ρ€Ρ…ΠΈΠ²Ρ‹ Π°Π²Ρ‚ΠΎΡ€ΠΎΠ² ΠΈΠ»ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ссылки.

На экранС мСню Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ названия ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ Π»ΡŽΠ±Ρ‹Ρ… ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню, Π½Π΅ затрагивая Π΅Π³ΠΎ ΠΏΠΎΡΡ‚ΠΎΡΠ½Π½ΡƒΡŽ ссылку (URL), Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ пСрСтаскивания ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ порядок ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ΡΡ мСню. , ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π° настраиваСмого мСню WordPress Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ настраиваСмоС мСню Π² Π»ΡŽΠ±ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π° Π½Π° своСм Π²Π΅Π±-сайтС β€” Π±Π΅Π· нСобходимости ΠΊΠ°ΡΠ°Ρ‚ΡŒΡΡ HTML!

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

Custom WordPress Website Menu Design

ΠžΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ Π²Π΅Π±-сайт мСню

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

Один ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ распространСнных Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ² ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… мСню β€” это использованиС Β«Π“Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Π°Β» β€” Π·Π½Π°Ρ‡ΠΊΠ°, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‰Π΅Π³ΠΎ Ρ‚Ρ€ΠΈ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠ΅ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Π»ΠΈΠ½ΠΈΠΈ, ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ мСню.ΠŸΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π·Π½Π°Ρ‡ΠΎΠΊ Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Π° раскрываСтся Π²Π½ΠΈΠ·, показывая ΠΏΠΎΠ»Π½ΠΎΠ΅ мСню Π²Π΅Π±-сайта (ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅). Если ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ нСсколько мСню (ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅), Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π»ΠΈ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ мСню ΠΈ ΠΊΠ°ΠΊ это Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ.

Responsive Menu Design For WordPress Websites

ΠΊΠ°ΠΊ насчСт вас?

Π—Π½Π°Π΅Ρ‚Π΅ Π»ΠΈ Π²Ρ‹, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ мСню WordPress Π² Π±ΠΎΠΊΠΎΠ²ΡƒΡŽ панСль, Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ» ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ области Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ΠΎΠ²? Или это новая концСпция? Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ мСню Π½Π° своСм сайтС, для Ρ‡Π΅Π³ΠΎ Π²Ρ‹ использовали мСню, ΠΊΡ€ΠΎΠΌΠ΅ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΏΠΎ Π²Π°ΡˆΠ΅ΠΌΡƒ сайту? ΠœΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Ρ€Π°Π΄Ρ‹ ΡƒΡΠ»Ρ‹ΡˆΠ°Ρ‚ΡŒ ΠΎΡ‚ вас Π² коммСнтариях!

,

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ фиксированноС мСню


Π£Π·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ «фиксированноС» мСню с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS.


ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»


Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ фиксированноС Π²Π΅Ρ€Ρ…Π½Π΅Π΅ мСню

Π¨Π°Π³ 1) Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ HTML:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€


Главная
Новости
ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚


НСкоторыС тСкстовыС, Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ тСкстовыС, Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ тСкстовыС, Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ тСкстовыС.


Π¨Π°Π³ 2) Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ CSS:

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ фиксированноС Π²Π΅Ρ€Ρ…Π½Π΅Π΅ мСню, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ : фиксированныС ΠΈ Π²Π΅Ρ€Ρ…: 0 .ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ фиксированноС мСню Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ ваш Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚. Π§Ρ‚ΠΎΠ±Ρ‹ это ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ margin-top (ΠΊ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΡŽ), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Ρ€Π°Π²Π½ΠΎ ΠΈΠ»ΠΈ большС высоты вашСго мСню.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

/ * ПанСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ * /
.navbar {ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅
: скрыто;
Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # 333;
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: фиксированноС; ΠšΠΎΠΌΠΏΠ»Π΅ΠΊΡ‚ / * навигационная панСль Π² фиксированноС ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ * /
Π²Π²Π΅Ρ€Ρ…Ρƒ: 0; / * Π Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π²Π²Π΅Ρ€Ρ…Ρƒ страницы * /
, ΡˆΠΈΡ€ΠΈΠ½Π° : 100%; / * Полная ΡˆΠΈΡ€ΠΈΠ½Π° * /
}

/ * Бсылки Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ * /
,navbar a {
float: left; ДисплСй
: Π±Π»ΠΎΠΊ;
Ρ†Π²Π΅Ρ‚: # f2f2f2;
Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста: Ρ†Π΅Π½Ρ‚Ρ€;
отступов: 14px 16px;
тСкстовоС ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅: Π½Π΅Ρ‚;
}

/ * Π‘ΠΌΠ΅Π½Π° Ρ„ΠΎΠ½Π° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡ‹ΡˆΠΈ * /
.navbar a: hover {
background: #ddd;
Ρ†Π²Π΅Ρ‚: Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ;
}

/ * Main content * /
.main {
margin-top: 30px; / * Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠΏ ΠΏΠΎΠ»Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ налоТСния ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° * /
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам Β»

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ фиксированноС Π½ΠΈΠΆΠ½Π΅Π΅ мСню

Для создания фиксированного Π½ΠΈΠΆΠ½Π΅Π³ΠΎ мСню ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ : фиксированныС ΠΈ Π²Π½ΠΈΠ·Ρƒ: 0 :

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

/ * ПанСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ * /
.navbar {
позиция: фиксированная; / * Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΡƒΡŽ панСль Π² фиксированноС ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ * /
Π²Π½ΠΈΠ·Ρƒ: 0; / * Π Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π²Π½ΠΈΠ·Ρƒ страницы * /
width: 100%; / * Полная ΡˆΠΈΡ€ΠΈΠ½Π° * /
}

/ * Main содСрТаниС * /
.основная {
margin-bottom: 30px; / * Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½ΠΈΠΆΠ½Π΅Π΅ ΠΏΠΎΠ»Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ налоТСния ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° * /
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам Β»

Π‘ΠΎΠ²Π΅Ρ‚: Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎ панСлях Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΊ Π½Π°ΡˆΠ΅ΠΌΡƒ ΡƒΡ‡Π΅Π±Π½ΠΎΠΌΡƒ пособию ΠΏΠΎ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ CSS.


,

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

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