Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ мСню Π½Π° CSS — Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ сайт

17

Π”Π΅ΠΊ,2017

БозданиС мСню на CSS

ЗдравствуйтС! Π’ этом ΡƒΡ€ΠΎΠΊΠ΅ рассмотрим ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ мСню Π½Π° CSS. МСню ΠΈΠ»ΠΈ панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΈΠ³Ρ€Π°Π΅Ρ‚ Π²Π°ΠΆΠ½ΡƒΡŽ Ρ€ΠΎΠ»ΡŒ Π½Π° сайтС, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ обСспСчиват ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ ΠΌΠ΅ΠΆΠ΄Ρƒ страницами сайта ΠΈΠ»ΠΈ Π½Π° внСшниС рСсурсы.Β  ЀактичСски панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ β€” это Π½Π°Π±ΠΎΡ€ ссылок, часто Π² Π²ΠΈΠ΄Π΅ Π½Π΅Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка. ПанСли Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π±Ρ‹Π²Π°ΡŽΡ‚ самыми Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ: Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ, ΠΎΠ΄Π½ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹ΠΌΠΈ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Ρ‹ΠΌΠΈ, Π½ΠΎ Π² любом случаС Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ находится элСмСнт <a>. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΏΡ€ΠΈ создании ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡΡ‚ΠΎΠ»ΠΊΠ½ΡƒΡ‚ΡŒΡΡ с рядом трудностСй, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹Ρ‚Π΅ΠΊΠ°ΡŽΡ‚ ΠΈΠ· ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ элСмСнта ссылки. А ΠΈΠΌΠ΅Π½Π½ΠΎ, элСмСнт <a> являСтся строчным, Π° это Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅ΠΌ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ для Π½Π΅Π³ΠΎ ΡˆΠΈΡ€ΠΈΠ½Ρƒ, высоту, отступы. По ΡˆΠΈΡ€ΠΈΠ½Π΅ ссылка автоматичСски Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ Ρ‚ΠΎ мСсто, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π΅ΠΉ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ.

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

РаспространСнноС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ Π΄Π°Π½Π½ΠΎΠΉ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ для создания Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ссылку Π±Π»ΠΎΡ‡Π½Ρ‹ΠΌ элСмСнтом.

<!DOCTYPE html>
<html>
Β Β Β Β <head>
Β Β Β Β Β Β Β Β <meta charset="utf-8">
Β Β Β Β Β Β Β Β <title>ПанСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π² HTML5</title>
Β Β Β Β Β Β Β Β <style>
Β Β Β Β Β Β Β Β Β Β Β Β ul.nav{
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β margin-left: 0px;
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β padding-left: 0px;
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β list-style: none;
Β Β Β Β Β Β Β Β Β Β Β Β }
Β Β Β Β Β Β Β Β Β Β Β Β ul.nav a {
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β display: block;
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β width: 7em;
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β padding:10px;
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β background-color: #f4f4f4;
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β border-top: 1px dashed #333;
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β border-right: 1px dashed #333;
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β border-left: 5px solid #333;
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β text-decoration: none;
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β color: #333;
Β Β Β Β Β Β Β Β Β Β Β Β }
Β Β Β Β Β Β Β Β Β Β Β Β ul.nav li:last-child a {
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β border-bottom: 1px dashed #333;
Β Β Β Β Β Β Β Β Β Β Β Β }
Β Β Β Β Β Β Β Β </style>
Β Β Β Β </head>
Β Β Β Β <body>
Β Β Β Β Β Β Β Β <ul>
Β Β Β Β Β Β Β Β Β Β Β Β <li><a href="#">Главная</a></li>
Β Β Β Β Β Β Β Β Β Β Β Β <li><a href="#">ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹</a></li>
Β Β Β Β Β Β Β Β Β Β Β Β <li><a href="#">О сайтС</a></li>
Β Β Β Β Β Β Β Β </ul>
Β Β Β Β </body>
</html>

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒΒ  ΠΏΡ€ΠΈΠΌΠ΅Ρ€

ПослС установки свойства display: block ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Ρƒ Π±Π»ΠΎΠΊΠ° ссылки ΡˆΠΈΡ€ΠΈΠ½Ρƒ, отступы ΠΈ Ρ‚.

Π΄.

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

Для создания Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню Π΅ΡΡ‚ΡŒ Π΄Π²Π° ΠΌΠ΅Ρ‚ΠΎΠ΄Π°. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ свойства float ΠΈ создании ΠΈΠ· ссылок ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΡ… элСмСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ±Ρ‚Π΅ΠΊΠ°ΡŽΡ‚ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Π° с слСва. И Π²Ρ‚ΠΎΡ€ΠΎΠΉ способ состоит Π² создании строки ссылок с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ установки свойства display: inline-block.

ИспользованиС float

Алгоритм создания ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ float раздСляСтся Π½Π° Π΄Π²Π° этапа. На ΠΏΠ΅Ρ€Π²ΠΎΠΌ этапС Ρƒ элСмСнта li, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½Π° ссылка, устанавливаСтся float: left;. Π­Ρ‚ΠΎ позволяСт Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ всС элСмСнты списка Π² ряд ΠΏΡ€ΠΈ достаточной ΡˆΠΈΡ€ΠΈΠ½Π΅, ΠΊΠΎΠ³Π΄Π° ΠΏΡ€Π°Π²Ρ‹ΠΉ элСмСнт списка ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π΅Ρ‚ Π»Π΅Π²Ρ‹ΠΉ элСмСнт списка.

Π’Ρ‚ΠΎΡ€ΠΎΠΉ этап Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² установкС Ρƒ элСмСнта ссылки display: block, Ρ‡Ρ‚ΠΎ Π΄Π°Π΅Ρ‚ Π½Π°ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ, отступы, Π²ΠΎΠΎΠ±Ρ‰Π΅ΠΌ всС Ρ‚Π΅ ΠΏΡ€ΠΈΠ·Π½Π°ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ…Π°Ρ€Π°ΠΊΡ‚Π΅Ρ€Π½Ρ‹ для Π±Π»ΠΎΡ‡Π½Ρ‹Ρ… элСмСнтов.

<!DOCTYPE html>
<html>
Β Β Β Β <head>
Β Β Β Β Β Β Β Β <meta charset="utf-8">
Β Β Β Β Β Β Β Β <title>ПанСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π² HTML5</title>
Β Β Β Β Β Β Β Β <style>
Β Β Β Β Β Β Β Β Β Β Β Β ul.
nav{ Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β margin-left: 0px; Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β padding-left: 0px; Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β list-style: none; Β Β Β Β Β Β Β Β Β Β Β Β } Β Β Β Β Β Β Β Β Β Β Β Β .nav li { Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β float: left; Β Β Β Β Β Β Β Β Β Β Β Β } Β Β Β Β Β Β Β Β Β Β Β Β ul.nav a { Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β display: block; Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β width: 5em; Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β padding:10px; Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β margin: 0 5px; Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β background-color: #f4f4f4; Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β border: 1px dashed #333; Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β text-decoration: none; Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β color: #333; Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β text-align: center; Β Β Β Β Β Β Β Β Β Β Β Β } Β Β Β Β Β Β Β Β Β Β Β Β ul.nav a:hover{ Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β background-color: #333; Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β color: #f4f4f4; Β Β Β Β Β Β Β Β Β Β Β Β } Β Β Β Β Β Β Β Β </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>

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒΒ  ΠΏΡ€ΠΈΠΌΠ΅Ρ€

МСню с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ inline ΠΈ inline-block

Для создания Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π½Π°ΠΌ Π½Π°Π΄ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт li строчным, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ для Π½Π΅Π³ΠΎ display: inline. ПослС этого для элСмСнта ссылки, которая располагаСтся Π² элСмСнтС li, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ display: inline-block:

<!DOCTYPE html>
<html>
Β Β Β Β <head>
Β Β Β Β Β Β Β Β <meta charset="utf-8">
Β Β Β Β Β Β Β Β <title>ПанСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π² HTML5</title>
Β Β Β Β Β Β Β Β <style>
Β Β Β Β Β Β Β Β Β Β Β Β ul.nav{
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β margin-left: 0px;
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β padding-left: 0px;
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β list-style: none;
Β Β Β Β Β Β Β Β Β Β Β Β }
Β Β Β Β Β Β Β Β Β Β Β Β .nav li {
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β display: inline;
Β Β Β Β Β Β Β Β Β Β Β Β }
Β Β Β Β Β Β Β Β Β Β Β Β ul.nav a {
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β display: inline-block;
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β width: 5em;
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β padding:10px;
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β background-color: #f4f4f4;
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β border: 1px dashed #333;
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β text-decoration: none;
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β color: #333;
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β text-align: center;
Β Β Β Β Β Β Β Β Β Β Β Β }
Β Β Β Β Β Β Β Β Β Β Β Β ul.nav a:hover{
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β background-color: #333;
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β color: #f4f4f4;
Β Β Β Β Β Β Β Β Β Β Β Β }
Β Β Β Β Β Β Β Β </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>

Если Π²Ρ‹ нашли ΠΎΡˆΠΈΠ±ΠΊΡƒ, поТалуйста, Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚Π΅ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ тСкста ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Ctrl+Enter.

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ

Π’Π²ΠΈΡ‚Π½ΡƒΡ‚ΡŒ

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ

(Visited 220 times, 1 visits today)

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ мСню Π½Π° чистом CSS

Владислав ΠšΠ°Π»Π°Ρ‡Π΅Π²

ΠžΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½ΠΎ Автор: Владислав ΠšΠ°Π»Π°Ρ‡Π΅Π²

9Β 323

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

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

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ HTML ΠΌΠ°ΠΊΠ΅Ρ‚Π°

Для Π½Π°Ρ‡Π°Π»Π° Π½Π°ΠΌ потрСбуСтся ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ саму вСрстку ΠΏΠΎ срСдам HTML Ρ‚Π΅Π³ΠΎΠ². Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΆΠ΅ сдСлаСм это.

		<nav>
            <div>
                <label for="menuToggle">МСню</label>
                <input type="checkbox">
            
            <ul>
                <li><a href="#">Главная</a></li>
                <li><a href="#">Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π°1</a></li>
                <li><a href="#">Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π°2</a></li>
                <li><a href="#">Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π°3</a></li>
                <li><a href="#">О нас</a></li>
            </ul>
           </div>
        </nav>
        <section>
            <div>
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis 
				 autem consequatur eum facere neque. Tenetur laboriosam 
				 repellendus neque fuga, velit, totam, est, aspernatur 
				 sunt sapiente earum quo beatae. Fuga, officia.
             </div>
         </section> 
		 

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ основных CSS стилСй
html{
    height: 100%;
    font-size: 18px;
}
. menu{
    list-style-type: none;
    margin: 0; 
    padding: 0;
}
nav{
    background: #4c3167;
}
.menu li{
    float: left;
}
.menu li a {
    display: inline-block;
    padding: 10px 15px;
    color: #fff;
    text-decoration: none;
}
section{
    padding-top: 10px;
}
.wrapper{
    max-width: 1024px;
    padding: 0 30px;
    margin: 0 auto;
}
.b-content{
    height: 100%;
    background: #c1aaff;
    color: #000;
}
.menuToggle{
    padding: 10px 15px;
    cursor: pointer;
    color: #fff;
    display: none;
}
body{
    height: 100%;
}
nav input{
    display: none;
}
nav label{
    padding: 10px 15px;
    color: #fff;
    display: none;
}

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ стилСй для мобильной вСрсии
@media ( max-width: 670px) {
    nav label{
        display: block;
    }
    #menuToggle:checked + .menu{
        display: block;
        position: absolute;
        background: #4c3167;
        width: 100%;
        margin-left: -30px;
        padding-left: 28px;
    }
    . menu li{
        float: none;
    }
    .menu{
        display: none;
    }
}

Π­Ρ‚ΠΎ всС Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ для для создания мСню Π½Π° чистом CSS. Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ рассмотрим ΠΊΠ°ΠΊ это всС Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚. Π£ нас Π΅ΡΡ‚ΡŒ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ список Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΌΡ‹ Ρ…Ρ€Π°Π½ΠΈΠΌ мСню. ΠœΡ‹ добавляСм checkbox с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Ρ…Ρ€Π°Π½ΠΈΡ‚ΡŒ состояния ΠΈ Ρ‚Π΅Π³ <label> ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ Ρƒ нас Π² Ρ€ΠΎΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ мСню Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах.

        <label for="menuToggle">МСню</label>
        <input type="checkbox">
            

Π‘ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ сам checkbox ΠΈ оставляСм смСну состояния Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚Π΅Π³ΡƒΒ <label>.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ добавляСм стили ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ мСню Ссли ΠΌΡ‹ ΠΊΠ»ΠΈΠΊΠ°Π΅ ΠΏΠΎΒ Ρ‚Π΅Π³ΡƒΒ <label> ΠΈ ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΏΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΌΡƒ ΠΊΠ»ΠΈΠΊΡƒ.

	#menuToggle:checked + .menu{
        display: block;
        position: absolute;
        background: #4c3167;
        width: 100%;
        margin-left: -30px;
        padding-left: 28px;
    }

Β 

Данная ΡΡ‚Π°Ρ‚ΡŒΡ подошла ΠΊ ΠΊΠΎΠ½Ρ†Ρƒ. Π’ΡƒΡ‚ я оставил для вас исходник Π½Π° GitHub. БСгодня ΠΌΡ‹ рассмотрСли ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚ΠΎΠ³ΠΎ ΠΊΠ°ΠΊ Π½Π° Π½Π°Ρ‚ΠΈΠ²Π½ΠΎΠΌ CSS Β c использованиС checkbox ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½ΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ΅ мСню для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств. C Π²Π°ΠΌΠΈ Π±Ρ‹Π» Corvax. Π”Π° Π½ΠΎΠ²Ρ‹Ρ… встрСч!

ΠŸΠΎΠ΄ΠΏΠΈΡΡ‹Π²Π°ΠΉΡ‚Π΅ΡΡŒ Π½Π° наш ΠΊΠ°Π½Π°Π» Π² Telegram ΠΈ Π½Π° YouTube для получСния самой послСднСй ΠΈ Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ.

Π ΡƒΠ±Ρ€ΠΈΠΊΠΈFront-end, CSS, junior, ВСрстка
Π’Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΡ‚ΡŒΡΡ

Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ² мСню Css, Ρ‚Π΅ΠΌ, шаблонов ΠΈ Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅ΠΌΡ‹Ρ… графичСских элСмСнтов Π½Π° Dribbble

  1. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π‘Ρ€ΡƒΠ½ΠΎ Навигация

    Π‘Ρ€ΡƒΠ½ΠΎ НавигСйшн

  2. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π±ΠΎΠΊΠΎΠ²ΡƒΡŽ панСль Twitter

    Боковая панСль Twitter

  3. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π»Π΅Π³ΠΊΡƒΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ

    ЛСгкая навигация

  4. ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ πŸ” 3D-ΠΊΠ½ΠΎΠΏΠΊΠ°

    πŸ” Кнопка 3D

  5. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ мСню

    Анимация мСню

  6. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ мСню smartalpha. ro

    анимация мСню smartalpha.ro

  7. ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ взаимодСйствия с Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌΡΡ мСню

    ВзаимодСйствиС с Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΌ мСню

  8. View HaveStar β€” Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ΅ ΠΌΠ΅Π³Π°-мСню ΠΈ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню

    HaveStar β€” Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ΅ ΠΌΠ΅Π³Π°-мСню ΠΈ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню

  9. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€ΠΎΠ²

    Анимация ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€ΠΎΠ²

  10. ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π°ΠΊΡ‚ΠΈΠ²Π½ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ ΠΏΠ°Π½Π΅Π»ΠΈ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ

    Активная анимация ΠΏΠ°Π½Π΅Π»ΠΈ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ

  11. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ 6 Meridian Mobile Nav

    6 ΠœΠ΅Ρ€ΠΈΠ΄ΠΈΠ°Π½ Мобайл Нав

  12. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ

    ΠŸΠΎΡ€Ρ‚Ρ„Π΅Π»ΡŒ

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

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

  14. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ мСню

    Анимация мСню

  15. ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΠ°Π½Π΅Π»ΠΈ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ

    Активная анимация ΠΏΠ°Π½Π΅Π»ΠΈ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ

  16. ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ взаимодСйствия с мСню

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

  17. ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ закрытия мСню

    Анимация закрытия мСню

  18. ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ эффСктов искаТСния изобраТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠ² SVG

    Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ искаТСния изобраТСния с Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°ΠΌΠΈ SVG

  19. ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ эффСктов искаТСния изобраТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠ² SVG

    Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ искаТСния изобраТСния с Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°ΠΌΠΈ SVG

  20. ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΠ°Π½Π΅Π»ΠΈ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ

    Активная анимация ΠΏΠ°Π½Π΅Π»ΠΈ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ

  21. ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ ΠΏΡ€Π΅Π²ΡŒΡŽ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… сСток

    ΠŸΡ€Π΅Π²ΡŒΡŽ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΉ сСтки

  22. ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ эффСктов искаТСния изобраТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠ² SVG

    Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ искаТСния изобраТСния с Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°ΠΌΠΈ SVG

  23. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹

    ВриплСкс

  24. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ 3 стиля мСгамСню

    3 стиля мСгамСню

Π—Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΡƒΠΉΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ Π²ΠΎΠΉΠ΄ΠΈΡ‚Π΅ Π² систСму

Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° СщС…

НавигационноС мСню Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°

  • 15 ΠΌΠΈΠ½ чтСния
  • Π’Π΄ΠΎΡ…Π½ΠΎΠ²Π΅Π½ΠΈΠ΅, Π’ΠΈΡ‚Ρ€ΠΈΠ½Ρ‹, Π’Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½, Навигация
  • ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Π² Twitter, LinkedIn
Об Π°Π²Ρ‚ΠΎΡ€Π΅

ΠœΡΡ‚Ρ‚ ΠšΡ€ΠΎΠ½ΠΈΠ½ β€” заядлый графичСский Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€, Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€/Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ, программист Cocoa, Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„, Ρ†ΠΈΡ„Ρ€ΠΎΠ²ΠΎΠΉ Ρ…ΡƒΠ΄ΠΎΠΆΠ½ΠΈΠΊ ΠΈ Ρ‚. ΠΏ. Он Ρ‚Π°ΠΊΠΆΠ΅ Π»ΡŽΠ±ΠΈΡ‚ ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΈ дСлаСт… Π‘ΠΎΠ»ΡŒΡˆΠ΅ ΠΎ ΠœΡΡ‚Ρ‚ ↬

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

ΠΈ популярныС ΡΡ‚Π°Ρ‚ΡŒΠΈ Smashing Magazine, связанныС с Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠ΅ΠΉ Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΈ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½Π½Ρ‹Π΅ здСсь Π½Π° протяТСнии ΠΌΠ½ΠΎΠ³ΠΈΡ… Π»Π΅Ρ‚.

Когда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΈΡ‰ΡƒΡ‚ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, Ρƒ Π½ΠΈΡ… Π΅ΡΡ‚ΡŒ Ρ†Π΅Π»ΡŒ ΠΈ ΠΎΠ½ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡŽΡ‚ миссию. Π•Ρ‰Π΅ Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ Π½Π°Ρ‡Π°Π»ΠΈ Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ эту ΡΡ‚Π°Ρ‚ΡŒΡŽ, скорСС всСго, Π²Ρ‹ сдСлали это ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ Ρƒ вас Π±Ρ‹Π»Π° нСявная Ρ†Π΅Π»ΡŒ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π½ΠΎΠ²ΠΎΠ³ΠΎ Π² Smashing Magazine, ΠΈΠ»ΠΈ явная Ρ†Π΅Π»ΡŒ β€” Π½Π°ΠΉΡ‚ΠΈ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ Β«Π”ΠΈΠ·Π°ΠΉΠ½Π΅ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈΒ».

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

Π•Ρ‰Π΅ послС ΠΏΡ€Ρ‹ΠΆΠΊΠ°! ΠŸΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ΡŒ Ρ‡Ρ‚Π΅Π½ΠΈΠ΅ ниТС ↓

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅…

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

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

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅…

Π₯ΠΎΡ€ΠΎΡˆΠ°Ρ навигация β€” ΠΊΡ€Π°Π΅ΡƒΠ³ΠΎΠ»ΡŒΠ½Ρ‹ΠΉ камСнь эффСктивного Π²Π΅Π±-сайта. На ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅, ΠΎΠ΄Π½Π°ΠΊΠΎ, часто слоТно ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ осмыслСнный ΠΈ нСдвусмыслСнный способ ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ, упорядочивания ΠΈ отобраТСния ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ; Π΄Π° ΠΈ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ интСрСсноС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ Π·Π°Ρ‡Π°ΡΡ‚ΡƒΡŽ Π½Π°ΠΉΡ‚ΠΈ Π½Π΅ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΡ‰Π΅. Широкая адаптация Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ JavaScript, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ jQuery, ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π²ΠΈΠ΄ΠΎΠ² изящной Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.

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

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅…

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

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

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅…

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

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

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅…

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

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

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅…

Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ΅ мСню стало основой Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°. МоТно с ΡƒΠ²Π΅Ρ€Π΅Π½Π½ΠΎΡΡ‚ΡŒΡŽ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π² настоящСС врСмя Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Π²Π΅Π±-сайтов ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Ρ‚Ρƒ ΠΈΠ»ΠΈ ΠΈΠ½ΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ числа 9.0287 Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Π°Ρ навигация для облСгчСния просмотра ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° . ΠŸΡ€Π΅ΠΎΠ±Π»Π°Π΄Π°Π½ΠΈΠ΅ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π½Π°Π΄ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ (Ρ‚. Π΅. Π²Π½ΠΈΠ· ΠΏΠΎ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ), ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ, связано с ограничСниями Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ содСрТания послСднСй. ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Ρ‡Ρ‚ΠΎ CNN ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ»Π° эти ограничСния, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒΡΡ с Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π½Π° Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ нСсколько Π»Π΅Ρ‚ Π½Π°Π·Π°Π΄.

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

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅…

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

Π˜Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ навигация с Π²ΠΊΠ»Π°Π΄ΠΊΠ°ΠΌΠΈ ? Ну, ΠΏΠΎ сути это Π½Π°Π±ΠΎΡ€ ΠΊΠ½ΠΎΠΏΠΎΠΊ, Ρ‡Π°Ρ‰Π΅ всСго установлСнных Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎ. Π’ΠΊΠ»Π°Π΄ΠΊΠΈ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‚ мноТСству Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΉ ΠΏΠΎ ΡΡ‚ΠΈΠ»ΡŽ. Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, Π½Π°Π±ΠΎΡ€ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½ ΠΊ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρƒ ΠΈΠ»ΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ выступаСт ΠΈΠ· Π½Π΅Π³ΠΎ, ΠΊΠ°ΠΊ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π½ΠΈΠΆΠ΅. Π’Π°ΠΊΠΆΠ΅ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ открытая Π²ΠΊΠ»Π°Π΄ΠΊΠ° соотвСтствуСт Ρ†Π²Π΅Ρ‚Ρƒ Ρ„ΠΎΠ½Π° ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, Π° ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Ρ‚Π΅ΠΌΠ½Π΅Π΅. Π­Ρ‚ΠΎ Π΅Ρ‰Π΅ ΠΎΠ΄Π½ΠΎ ΠΎΠ±Ρ‰Π΅Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ стиля.

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

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅…

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

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

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

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅…

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

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

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

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅…

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

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

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅…

НиТС ΠΌΡ‹ прСдставляСм Π±ΠΎΠ»Π΅Π΅ 50 ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Ρ… Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… мСню β€” это дизайнСрскиС Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ Π½Π° основС CSS, мСню Π½Π° основС CSS+JavaScript ΠΈ Flash-Π΄ΠΈΠ·Π°ΠΉΠ½Ρ‹. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Ρƒ всСх Π½ΠΈΡ… Π΅ΡΡ‚ΡŒ ΠΊΠΎΠ΅-Ρ‡Ρ‚ΠΎ ΠΎΠ±Ρ‰Π΅Π΅: ΠΎΠ½ΠΈ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, Π½ΠΎ ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹ ΠΈ идСально подходят ΠΊ ΡΡ‚ΠΈΠ»ΡŽ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… Π²Π΅Π±-сайтов.

ΠšΡ€Π°ΡΠΎΡ‡Π½ΠΎΠ΅ мСню, Π΄ΠΎΠΏΠΎΠ»Π½ΡΡŽΡ‰Π΅Π΅ Π²Π΅Π±-сайт.

Π‘Ρ‚ΠΈΠ²Π΅Π½ ВиттСнс смотрит Π½Π° мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ с довольно Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния.

Π’Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ Ledger ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ΅ мСню; Π΅Π³ΠΎ большой Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡƒΠ΄ΠΎΠ±Π΅Π½, Π½ΠΎ Π½Π΅ ΠΌΠ΅ΡˆΠ°Π΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΡŽ.

UX Booth ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΡΡ‚ΠΈΠ»ΡŒΠ½ΠΎΠ΅ тСкстовоС ΠΏΠΎΠ»Π΅ ΠΏΠΎΠ΄ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠ΅ΠΉ Π² качСствС своСго Ρ€ΠΎΠ΄Π° подтСкста для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΡƒΠ½ΠΊΡ‚Π° мСню.

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ мСню ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΠΎΡ‡Π΅Π½ΡŒ Ρ€Π΅Π΄ΠΊΠΎ ΠΏΠΎ простой ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π΅: ΠΈΠΌΠΈ слоТнСС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ. Однако Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ Ρ€ΠΈΡΠΊΡƒΡŽΡ‚ нСстандартными ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π°ΠΌΠΈ. Nopoko Graphics ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ стрСлку ΠΈ эффСкт навСдСния для Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.

Π­Ρ‚ΠΎΡ‚ Π²Π΅Π±-сайт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ большоС мСню Π½Π° основС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ страницС. Π’Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΎΠ±Ρ€Π°Ρ‰Π΅Π½ΠΎ нСпосрСдствСнно Π½Π° это большоС мСню, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ Π΅Π³ΠΎ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ.

Π­Ρ‚ΠΎ большоС ΠΈ красочноС мСню ΠΎΡ‡Π΅Π½ΡŒ Π·Π°ΠΌΠ΅Ρ‚Π½ΠΎ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π»Π΅Π³ΠΊΠΈΠΉ эффСкт навСдСния для Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅Ρ‚ΠΊΠΎΠ³ΠΎ опрСдСлСния ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню.

Π˜Π½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½Π°Ρ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π°ΡΡΡ навигация, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ эффСктивно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ 2 Ρ†Π²Π΅Ρ‚Π° для обозначСния Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΈ пассивных элСмСнтов Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.

АмСриканский Π·Π²ΡƒΠΊΠΎΠ·Π°ΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Π»Π΅ΠΉΠ±Π» прСдставляСт своС Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ΅ мСню Π² Π²ΠΈΠ΄Π΅ Ρ‚Π°ΠΊ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΠΎΠ³ΠΎ Space Echo Roland SE-201.

Π”ΠΎΠ²ΠΎΠ»ΡŒΠ½ΠΎ слоТно Π½Π°ΠΉΡ‚ΠΈ красивоС Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню. Π­Ρ‚ΠΎ красивоС ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅.

Clearleft ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΏΠ°Ρ€Ρƒ Π±ΡƒΠΌΠ°ΠΆΠ΅ΠΊ для Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.

ΠŸΡ€ΠΎΡΡ‚Π°Ρ, чистая ΠΈ красивая навигация с приятным эффСктом навСдСния.

ΠžΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π±Π»ΠΎΡ‡Π½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ, насколько эффСктивно ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ «говорящиС» эффСкты навСдСния с понятным ΠΈ простым мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.

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

Π˜Ρ€ΠΆΠΈ Π’Π²Ρ€Π΄Π΅ΠΊ прСдставляСт возмоТности Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ своСго сайта Π² Π²ΠΈΠ΄Π΅ Π»ΠΈΡΡ‚ΡŒΠ΅Π² Π½Π° Π΄Π΅Ρ€Π΅Π²Π΅. ΠšΡ€Π΅Π°Ρ‚ΠΈΠ²Π½ΠΎ, Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈ Π·Π°ΠΏΠΎΠΌΠΈΠ½Π°ΡŽΡ‰ΠΈΠΌΡΡ.

ΠŸΠ°Ρ‚Ρ€ΠΈΡΠΈΡ Π­Π±Π±ΠΎΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΏΡ€ΠΈΡ‰Π΅ΠΏΠΊΠΈ для Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.

ΠœΡΡ‚Ρ‚ ДСмпси выдСляСт ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΌΠ°Π·ΠΊΠΎΠΌ кисти.

НаТата тСкущая опция Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ β€” чСткая ΠΈ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятная.

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΠΎΡ‡Π΅Π½ΡŒ Ρ€Π΅Π΄ΠΊΠΎ. Но ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ!

Π­Ρ‚ΠΎΡ‚ Π²Π΅Π±-сайт, ΠΏΠΎΡ…ΠΎΠΆΠ΅, Π»ΡŽΠ±ΠΈΡ‚ ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΊΠΈ Β«Π“ΠΎΡ‚ΠΎΠ²ΠΎΒ»…

Π”ΠΆΠ΅Ρ„Ρ„ Π‘Π°Ρ€ΠΌΠΈΠ΅Π½Ρ‚ΠΎ ΠŸΠΎΡ‡Π΅ΠΌΡƒ Π±Ρ‹ врСмя ΠΎΡ‚ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π½Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Π½Π°ΠΊΠ»ΠΎΠ½Π½ΡƒΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ?

Π”Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ΅ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ΅ мСню, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ для ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ своСго Ρ€ΠΎΠ΄Π° ΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½Π°Ρ ΠΊΠ°Ρ€Ρ‚Π°. И, ΠΊΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ нарисовано ΠΎΡ‚ Ρ€ΡƒΠΊΠΈ!

Π’ΠΎΠ½ΠΊΠΎΠ΅, Π½ΠΎ Ρ‡Π΅Ρ‚ΠΊΠΎΠ΅ мСню, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π½Π΅ ΠΌΠ΅ΡˆΠ°Π΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΡŽ. ΠžΡ‚Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ†Π²Π΅Ρ‚Π° ΠΈ приятный эффСкт навСдСния Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ Π² мСню.

Π­Ρ‚ΠΎΡ‚ ΠΏΠΎΡ€Ρ‚ΡƒΠ³Π°Π»ΡŒΡΠΊΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ рукописный Π²Π²ΠΎΠ΄ ΠΈ лист Π±ΡƒΠΌΠ°Π³ΠΈ для основной Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.

НСкоторыС Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΡƒΡŽΡ‚ ΠΏΠ΅Ρ‡Π°Ρ‚ΡŒ Π² ΠΎΠΏΡ†ΠΈΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΏΠΎ ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π°ΠΌ.

На этом Π²Π΅Π±-сайтС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ большиС ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ эффСкт навСдСния.

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ большого ΠΈ чистого мСню. Π’ этом ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π·Π½Π°Ρ‡ΠΊΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΡŽ Ρ€Π°ΡΠΏΠΎΠ·Π½Π°Ρ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ элСмСнта.

Π­Ρ‚ΠΎ мСню ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‡Π΅Ρ‚ΠΊΡƒΡŽ ΠΈ ΠΏΠ»Π°Π²Π½ΡƒΡŽ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΡƒ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ΅ подмСню, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ, ΠΎΡ‚Π΄Π΅Π»ΡΡŽΡ‰Π°Ρ Π΅Π³ΠΎ ΠΎΡ‚ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ мСню.

Π—Π½Π°Ρ‡ΠΊΠΈ ΡƒΡΠΈΠ»ΠΈΠ²Π°ΡŽΡ‚ элСмСнты мСню Π½Π° этом Π²Π΅Π±-сайтС ΠΈ Π΄Π΅Π»Π°ΡŽΡ‚ Π°ΠΊΡ†Π΅Π½Ρ‚ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΎΠΏΡ†ΠΈΠΈ.

Π­Ρ‚ΠΎΡ‚ Π²Π΅Π±-сайт Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ Π² Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½ΠΎΠΌ стилС Π³Ρ€Π°Π½ΠΆ, Π° мСню идСально вписываСтся Π² ΠΌΠ°ΠΊΠ΅Ρ‚.

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

Π­Ρ‚Π° навигация ΠΈΠΌΠ΅Π΅Ρ‚ довольно ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΡΡ‚ΠΈΠ»ΡŒ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π΅Ρ‚ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Π΅ элСмСнты. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΌΠ°ΠΊΠ΅Ρ‚ мСню остаСтся Π΅Π΄ΠΈΠ½Ρ‹ΠΌ Π½Π° всСм Π²Π΅Π±-сайтС.

Tutorial9 Π½Π΅Π΄Π°Π²Π½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ» приятный Ρ€Π΅Π΄ΠΈΠ·Π°ΠΉΠ½, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ появилось ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ΄ΠΎΠ±Π½ΠΎΠ΅ ΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π½ΠΎΠ΅ мСню.

Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΠΈΠ½ΠΎΠ³Π΄Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки для Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. Однако Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки ΠΈ Ρ†Π²Π΅Ρ‚ морской Π²ΠΎΠ»Π½Ρ‹ β€” довольно Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ΅ сочСтаниС.

ΠŸΡ€Π΅ΠΊΡ€Π°ΡΠ½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π½ΡƒΠΆΠ½ΠΎ ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ ΠΎΠ³Ρ€ΠΎΠΌΠ½ΠΎΠ΅ количСство ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π² Ρ‡Π΅Ρ‚ΠΊΠΈΠ΅ ΠΈ Π»Π΅Π³ΠΊΠΎ Ρ€Π°Π·Π»ΠΈΡ‡ΠΈΠΌΡ‹Π΅ Ρ€Π°Π·Π΄Π΅Π»Ρ‹. Π’Π°ΠΊΠΆΠ΅ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню.

AppStorm β€” это Π½ΠΎΠ²Ρ‹ΠΉ Π²Π΅Π±-сайт Envato. Π­Ρ„Ρ„Π΅ΠΊΡ‚ jQuery ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для создания ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ³ΠΎ ΠΈ ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню.

Π­Ρ€ΠΈΠΊ Йоханссон, Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ ΠΈΠ· Π¨Π²Π΅Ρ†ΠΈΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ для Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ высокиС Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈ ΠΈ изобраТСния.

Π­Ρ‚ΠΎ ΡƒΠ΄ΠΎΠ±Π½ΠΎ располоТСнноС мСню ΠΈΠΌΠ΅Π΅Ρ‚ красивый эффСкт навСдСния. ПодмСню ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ ΠΈ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚.

Dragon Interactive ΠΈΠΌΠ΅Π΅Ρ‚ красочноС мСню Π½Π° основС jQuery с Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½Ρ‹ΠΌ эффСктом.

Π― большой ΠΏΠΎΠΊΠ»ΠΎΠ½Π½ΠΈΠΊ этого ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. МнС нравится, ΠΊΠ°ΠΊ мСню вписываСтся Π² Ρ‚Π΅ΠΌΡƒ Π³Ρ€Π°Π½ΠΆ. Он Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉΡΡ эффСкт jQuery.

Π’ Ρ…ΠΎΠ΄Π΅ Π½Π΅Π΄Π°Π²Π½Π΅Π³ΠΎ Ρ€Π΅Π΄ΠΈΠ·Π°ΠΉΠ½Π° Abduzeedo Π΄ΠΎΠ±Π°Π²ΠΈΠ»Π° Π² Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ jQuery.

ΠšΡ€Π°ΡΠΎΡ‡Π½Π°Ρ наклонная навигация Π½Π° основС Flash ΠΎΡ‚ индийского агСнтства Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Ρ€Π°Π·Π²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π²Π΅Π±-сайтов ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Flash ΠΈ Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ мСню, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. На этой, ΠΌΠΎΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ классикС, элСмСнты Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ вынСсСны Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ.

Nick Tones, с Π΄ΠΈΠ½Π°ΠΌΠΈΡ‡Π½Ρ‹ΠΌ, красочным ΠΈ, Ρ‚Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΌ мСню.

Π­Ρ‚ΠΎ аргСнтинскоС дизайнСрскоС агСнтство ставит Π½Π° стол ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚-диски ΠΈ ΠΊΠ½ΠΈΠ³ΠΈ, каТдая ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ…, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, прСдставляСт собой Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. ΠŸΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡ‹ΡˆΠΈ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ Π²Π½ΡƒΡ‚Ρ€ΠΈ.

Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ этого Flash-сайта ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Π»ΠΈ Π½Π΅Ρ‡Ρ‚ΠΎ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΠΎΠ΅. НавигационноС мСню вынСсСно Π½Π° Π»Π΅Π½Ρ‚Ρƒ; ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ приятный ΠΈ простой эффСкт навСдСния: ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π·Π½Π°Ρ‡ΠΎΠΊ ΠΎΠ½ замСняСтся ΠΎΠ±Π»Π°ΡΡ‚ΡŒΡŽ сайта, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Π·Π½Π°Ρ‡ΠΎΠΊ. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ для этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки, здСсь Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄. Π’Ρ‹Π΄Π°ΡŽΡ‰ΠΈΠΉΡΡ!

ΠšΡ€Π°ΡΠΈΠ²ΠΎΠ΅ ΠΈ ΠΎΡ‡Π΅Π½ΡŒ красочноС Flash-мСню, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ являСтся Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ прСвосходного удобства использования.

Π­Ρ‚ΠΎΡ‚ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π²Π΅Π±-сайт ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ Π² использовании Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ.

Π’ этом Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΌ ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ ΠΎΡ‡Π΅Π½ΡŒ продуманная ΠΈ удобная навигация.

Π­Ρ‚ΠΎΡ‚ Π²Π΅Π±-сайт ΠΈΠΌΠ΅Π΅Ρ‚ красивоС ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΈ мСню с Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½Ρ‹ΠΌΠΈ эффСктами.

ΠŸΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ большой ΠΈ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ для пСрСмСщСния ΠΏΠΎ новостям.

ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ страницС этого Π²Π΅Π±-сайта ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‡Ρ€Π΅Π·Π²Ρ‹Ρ‡Π°ΠΉΠ½ΠΎ ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ, Π½ΠΎ ΡƒΠ΄ΠΎΠ±Π½ΡƒΡŽ ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΡŽ.

Π­Ρ‚ΠΎ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰Π΅Π΅ ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ Π½Π° основС Flash ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΡƒ содСрТимого Π² Π²ΠΈΠ΄Π΅ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π°, поэтому Π½ΠΎΠ²Ρ‹Π΅ страницы Π½Π΅ Π·Π°Π³Ρ€ΡƒΠΆΠ°ΡŽΡ‚ΡΡ. ΠšΡ€ΡƒΠΏΠ½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π΅Ρ‚ Π²Π°ΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню.

Π£ Colourpixel ΠΎΡ‡Π΅Π½ΡŒ интСрСсноС ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ. Он ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ‚ всС свои Ρ€Π°Π·Π΄Π΅Π»Ρ‹ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ страницС ΠΈ позволяСт ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт ΠΏΠΎ ТСланию ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.

Π•Ρ‰Π΅ ΠΎΠ΄Π½ΠΎ прСвосходноС ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ Π½Π° основС Flash. На этом Π²Π΅Π±-сайтС всС элСмСнты Π³Π°Π»Π΅Ρ€Π΅ΠΈ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½Π΅Π½Ρ‹ Π² интСрСсный постоянно обновляСмый список.

Π­Ρ‚ΠΎΡ‚ ΠΏΠΎΡ€Ρ‚Ρ„Π΅Π»ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ извСстСн своим красивым ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ. Π­Ρ„Ρ„Π΅ΠΊΡ‚ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π° позволяСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΏΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°ΠΌ ΠΈ элСмСнтам ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ.

Π’Π΅Π±-сайт Porsche Canada ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ΄ΠΎΠ±Π½ΡƒΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ ΠΈ мноТСство ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΡƒΠ½ΠΊΡ‚Π° мСню. Удобство ΠΈ ΡŽΠ·Π°Π±ΠΈΠ»ΠΈΡ‚ΠΈ этого мСню Π½Π° высотС.

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

Firstborn, извСстная студия Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅ΠΌΡƒΡŽ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΡƒΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ для своСго ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ€Π΅ΠΆΠΈΠΌΠ°Ρ…, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π² Π²ΠΈΠ΄Π΅ эскизов, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ Π΅Π³ΠΎ Π΅Ρ‰Π΅ Π»ΡƒΡ‡ΡˆΠ΅.

Π­Ρ‚ΠΎΡ‚ ΠΏΠΎΡ€Ρ‚Ρ„Π΅Π»ΡŒ ΠΈΠΌΠ΅Π΅Ρ‚ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ автоматичСски пСрСмСщаСтся ΠΏΠΎ ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌ мСню. МногиС ΠΊΡ€ΡƒΠΏΠ½Ρ‹Π΅ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½Ρ‹ вмСстС Π² Π΅Π΄ΠΈΠ½ΠΎΠΌ свСтящСмся мСню.

Π•Ρ‰Π΅ ΠΎΠ΄Π½ΠΎ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰Π΅Π΅ ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ с творчСской Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠ΅ΠΉ, Π½Π° этот Ρ€Π°Π· с Β«Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹ΠΌΠΈ ΠΎΠ±Ρ€Π°Π·Ρ†Π°ΠΌΠΈΒ» Π½Π° основС Flash Π½Π° Π²Ρ‹Π±ΠΎΡ€. ΠŸΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅ элСмСнты сгруппированы вмСстС.

АккордСоны ΠΏΠΎΠ»Π΅Π·Π½Ρ‹, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ ΠΏΡ‹Ρ‚Π°Π΅Ρ‚Π΅ΡΡŒ Π²Ρ‚ΠΈΡΠ½ΡƒΡ‚ΡŒ мноТСство ΠΏΡ€Π΅Π΄ΠΌΠ΅Ρ‚ΠΎΠ² Π² малСнькоС пространство. ДТСйсон Π ΠΈΠ΄ использовал ΡΡ‚ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½ Π² своСм ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³Π»ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΏΠΎ страницам.

Π•Ρ‰Π΅ ΠΎΠ΄Π½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠ΅ мСню-Π³Π°Ρ€ΠΌΠΎΡˆΠΊΠ°, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΡƒΠ΅Ρ‚ элСмСнты ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ.

Π’Π΅Π±-сайт Дэнни Блэкмана часто ΡΡ‡ΠΈΡ‚Π°ΡŽΡ‚ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ, отчасти ΠΈΠ·-Π·Π° ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ.

Π­Ρ‚ΠΎΡ‚ Π²Π΅Π±-сайт прСдставляСт собой Π΅Ρ‰Π΅ ΠΎΠ΄Π½ΠΎ ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Π°Ρ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ° для Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… страниц Π² ΠΎΠ΄Π½Ρƒ, Ρ‡Ρ‚ΠΎ позволяСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ€Π°Π·Π΄Π΅Π»Π°ΠΌΠΈ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ.

Π€ΠΎΠ»Π»Π» ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΡƒΡŽ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΡƒ с красивым ΠΈΠ»Π»ΡŽΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ ΠΏΠ΅ΠΉΠ·Π°ΠΆΠ½Ρ‹ΠΌ Ρ„ΠΎΠ½ΠΎΠΌ.

Mediocore β€” ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ΅ ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ. На Π΅Π³ΠΎ страницах Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ большС элСмСнтов, Ρ‡Π΅ΠΌ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ, Π½ΠΎ всС Ρ€Π°Π²Π½ΠΎ ΠΎΠ½ выглядит прСвосходно.

FreelanceSwitch упорядочиваСт свои ΡΡ‚Π°Ρ‚ΡŒΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡƒΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ мСню.

Π Π΅Π΄ΠΈΠ·Π°ΠΉΠ½ Fubiz приносит ΠΎΡ‚Π»ΠΈΡ‡Π½ΡƒΡŽ Π±ΠΎΠΊΠΎΠ²ΡƒΡŽ панСль. Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ слайда ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для размСщСния большого количСства ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π½Π° нСбольшой Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ.

Checkout ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠΉ Π²Π΅Π±-сайт. Π§Ρ€Π΅Π·Π²Ρ‹Ρ‡Π°ΠΉΠ½ΠΎ чистоС мСню Π² Π²ΠΈΠ΄Π΅ списка Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ приятныС Π·Π½Π°Ρ‡ΠΊΠΈ.

Автор записи

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

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