ЀиксированноС css мСню – Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ мСню для сайта. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ мСню с фиксированной ΠΏΠΎΠ·ΠΈΡ†ΠΈΠ΅ΠΉ Π½Π° страницС срСдствами CSS ΠΈ jQuery

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

Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ фиксированноС Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ΅ мСню | HTML/xHTML

ЀиксированноС Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ΅ мСню часто Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ Β«Π»ΠΈΠΏΠΊΠΈΠΌΒ» мСню, ΠΏΠΎΡ‚ΠΎΠΌΡƒ ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΡΡƒΡ‚ΡŒ, ΠΏΠΎΠΌΠΈΠΌΠΎ самой Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΎ всСгда остаСтся Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π½Π° страницС, нСзависимо ΠΎΡ‚ скроллинга ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.

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

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

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ я ΠΏΠΎΠΊΠ°ΠΆΡƒ Π²Π°ΠΌ простой CSS-ΠΏΡ€ΠΈΠ΅ΠΌ для внСдрСния Π² сайт Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Β«Π»ΠΈΠΏΠΊΠΎΠ³ΠΎΒ» Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ мСню.

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

НиТС я ΠΏΡ€ΠΈΠ²ΠΎΠΆΡƒ нСсколько ссылок.

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


Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π° 99U встроили Π² Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΡƒΡŽ панСль мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. Π’ΠΎ врСмя чтСния новости ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ рСсурса ΠΈΠΌΠ΅Π΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΌΠΎΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° Π² Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΉ Π΅ΠΌΡƒ Ρ€Π°Π·Π΄Π΅Π» сайта:


Π‘Π°ΠΉΡ‚ Forbes.com располоТил мСню, систСму поиска ΠΏΠΎ сайту ΠΈ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ для Π°Π²Ρ‚ΠΎΡ€ΠΈΠ·Π°Ρ†ΠΈΠΈ Π½Π° фиксированной ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, прСдоставив ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ, Ρ‡ΠΈΡ‚Π°ΡŽΡ‰Π΅ΠΌΡƒ новости удобство быстрого доступа.

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


И, ΠΊΠ°ΠΊ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅Π³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°, навигационная панСль сущСствСнно ΠΏΠΎΠ²Ρ‹ΡˆΠ°Π΅Ρ‚ ΡŽΠ·Π°Π±ΠΈΠ»ΠΈΡ‚ΠΈ сайта с мноТСством Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°.

Навигационная панСль это ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ способ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΉ ΡΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ врСмя, ΠΏΠΎΡ‚Ρ€Π°Ρ‡Π΅Π½Π½ΠΎΠ΅ Π½Π° ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΎΡ‚ ΠΎΠ΄Π½ΠΎΠΉ Π·Π°Π΄Π°Ρ‡ΠΈ ΠΊ Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ с сайтом (поиск, авторизация, ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ ΠΏΠΎ структурС). Говоря ΠΏΠΎ-сущСству, этот элСмСнт Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΏΠΎΠ²Ρ‹ΡˆΠ°Π΅Ρ‚ ΡΡ„Ρ„Π΅ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ сайта, примСняя Π·Π°ΠΊΠΎΠ½Ρ‹ Ѐиттса:

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ просмотрСли достаточно ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² ΠΈ осознали прСимущСства Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ Ρ‚ΠΈΠΏΠ°, приступим, нСпосрСдствСнно, ΠΊ ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½ΠΈΡŽ эффСктивности Ρ€Π°Π±ΠΎΡ‚Ρ‹ нашСго ΠΎΠ½Π»Π°ΠΉΠ½ β€” рСсурса.

НиТС дСмонстрационный ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ это выглядит Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅:


ΠŸΠ ΠžΠ‘ΠœΠžΠ’Π Π•Π’Π¬ Π”Π•ΠœΠž
БКАЧАВЬ ИБΠ₯ΠžΠ”ΠΠ˜ΠšΠ˜ Π‘ GITHUB

ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ GitHub Repository

Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° трСбуСтся минимальная β€” элСмСнт Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вСрстки, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ помСстим содСрТимоС фиксированной Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ:

<nav>   <!-- Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ --> </nav>

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

Но Ссли Π²Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ nav, Ρ‚ΠΎ ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ‚ любой ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ элСмСнт, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ div. Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ inline-элСмСнт, Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ span, Π½ΠΎ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ Π΅ΠΌΡƒ Π² CSS-ΠΊΠΎΠ΄Π΅ свойство display: block.

Π’ΠΎΡ‚ CSS-ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ заставляСт Π½Π°ΡˆΡƒ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΡƒΡŽ панСль Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² ΠΎΠ΄Π½ΠΎΠΌ мСстС:

.fixed-nav-bar {   position: fixed;   top: 0;   left: 0;   z-index: 9999;   width: 100%;   height: 50px;   background-color: #00a087; }

Π Π°Π½Π΅Π΅, ΠΌΡ‹ присвоили Π½Π°ΡˆΠ΅ΠΌΡƒ HTML-элСмСнту класс fixed-nav-bar, поэтому сСйчас просто ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌ ΠΊ Π΄Π°Π½Π½ΠΎΠΌΡƒ сСлСктору Π½ΡƒΠΆΠ½Ρ‹Π΅ стили.

ЗначСния Ρ‚Ρ€Π΅Ρ… послСдних свойств (width, height ΠΈ background-color) мСняйтС Π½Π° подходящиС для вашСго сайта.

Π”Π°Π²Π°ΠΉΡ‚Π΅ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ рассмотрим ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ эти Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ Π²ΠΎΠ»ΡˆΠ΅Π±Π½Ρ‹Ρ… CSS-свойства, отвСтствСнных Π·Π° магию:

Когда ΠΌΡ‹ устанавливаСм Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ position Ρ€Π°Π²Π½Ρ‹ΠΌ fixed панСль позиционируСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ области просмотра. Π­Ρ‚ΠΎ ΠΈ позволяСт ΠΏΠ°Π½Π΅Π»ΠΈ ΠΎΡΡ‚Π°Π²Π°Ρ‚ΡŒΡΡ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ мСстС:

top: 0; left: 0; right: 0;

Устанавливая свойства top, left ΠΈ right Π² 0, ΠΌΡ‹ ΠΈΠ·Π±Π΅Π³Π°Π΅ΠΌ Π½Π΅ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ появлСния отступов ΠΏΠΎ сторонам ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.

Подсказка: Ссли Π½ΡƒΠΆΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ панСль Π² Β«ΠΏΠΎΠ΄Π²Π°Π»Π΅Β» области просмотра Ρ‚ΠΎ, Π½ΡƒΠΆΠ½ΠΎ просто Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ top: 0 Π½Π° bottom: 0:

Π’Π°ΠΊΠΎΠ΅ большоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ z-index ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ появлСния Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ элСмСнта HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ ΠΏΠΎΠ²Π΅Ρ€Ρ… фиксированной ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ (Ссли ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ Π½Π΅ появится элСмСнта со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ z-index большС, Ρ‡Π΅ΠΌ 9999).

На этом, ΠΏΠΎΠΆΠ°Π»ΡƒΠΉ, всС.

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

Π˜ΡΡΠ»Π΅Π΄ΡƒΠΉΡ‚Π΅ исходный ΠΊΠΎΠ΄, Ссли Π²Π°ΠΌ станСт интСрСсно, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ эта Ρ‡Π°ΡΡ‚ΡŒ (Ссли Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡƒΡ‚ нСпонятныС ΠΌΠΎΠΌΠ΅Π½Ρ‚Ρ‹, просто Π΄Π΅Π»Π°ΠΉΡ‚Π΅ tweet ΠΈ я Π±ΡƒΠ΄Ρƒ счастлив ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ).

Ѐиксированная панСль Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ довольно проста Π² Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ. Она Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ минимальной HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ ΠΈ всСго нСсколько CSS-свойств, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ с Π²Π°ΠΌΠΈ рассмотрСли.

ΠžΠ±ΡΡƒΠΆΠ΄Π°Π΅ΠΌΡ‹ΠΉ Π² этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΠ΅Ρ‚ΠΎΠ΄ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½ΡƒΡŽ ΠΊΡ€ΠΎΡΡΠ±Ρ€Π°ΡƒΠ·Π΅Ρ€Π½ΡƒΡŽ ΡΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΎΠ²Π΅Ρ€Π΅Π½Π½Ρ‹Π΅ ΠΈ Π½Π°Π΄Π΅ΠΆΠ½Ρ‹Π΅ свойства CSS, ΠΈ, Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Π΄Π°ΠΆΠ΅ Π² самых Π΄Ρ€Π΅Π²Π½ΠΈΡ… Π²Π΅Π±-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Ссли обратная ΡΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒ сильно Π²Π°ΠΆΠ½Π° для Π²Π°ΡˆΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ², Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΎ Π·Π°ΠΌΠ΅Π½Π΅ nav (ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ относится ΠΊ HTML5) Π½Π° div.

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

Данная публикация прСдставляСт собой ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ ΡΡ‚Π°Ρ‚ΡŒΠΈ Β«How to Create a Fixed Navigation BarΒ» , ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²Π»Π΅Π½Π½ΠΎΠΉ Π΄Ρ€ΡƒΠΆΠ½ΠΎΠΉ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ.Ρ€Ρƒ

ЀиксированноС мСню ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ страницы Π½Π° CSS

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

Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим ΠΊΠ°ΠΊ всС ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ.

ВсС Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒΡΡ с ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ³ΠΎ CSS, возьмСм Π·Π° основу Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ.

Код

<div><ul>
<li><a href=»http://zornet.ru/news/»>ZORNET.RU</a></li>
<li><a href=»http://zornet.ru/load/81″>Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹</a></li>
<li><a href=»http://zornet.ru/load/142″>Π¨Π°Π±Π»ΠΎΠ½Ρ‹</a></li>
<li><a href=»http://zornet.ru/load/145″>Π”ΠΈΠ·Π°ΠΉΠ½ для сайта</a></li>
</ul>
</div>


Вся ΡΡƒΡ‚ΡŒ Π΅Π³ΠΎ Π·Π°ΠΊΡ€Π΅ΠΏΠ»Π΅Π½ΠΈΠ΅ зависит ΠΎΡ‚ этого.

Код

.menuskived {position:fixed;top:0px;left:0px; width:100%;padding:5px 0;}


Настройка:

position:fixed; — ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π·Π° Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π½ΠΈΠ΅ свСрху.

top:0px; — Π—Π°Π΄Π°Π΅ΠΌ ΠΈΠ»ΠΈ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ, Π³Π΄Π΅ запросы Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ самого Π²Π²Π΅Ρ€Ρ….

left:0px; — ВыполняСм сдвиг ΠΏΠΎ Π»Π΅Π²ΡƒΡŽ сторону.

ΠŸΠΎΠ»Π½Ρ‹ΠΉ CSS:

Код

.menuskived {position:fixed;top:0px;left:0px;width:100%;padding:7px 0;text-transform: uppercase;text-align: left;line-height: 61px;background: #3c6d9e;}
.menuskived ul {padding:0; margin:0;}
.menuskived li{display: inline;}
.menuskived li a {padding: 5px 20px; color: #f1f1f1;text-decoration: none;}


Π’ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ смотрСтся:

Π’ΠΎΡ‚ ΡƒΠΆΠ΅ полноцСнная функция, которая Π·Π°ΠΊΡ€Π΅ΠΏΠ»Π΅Π½Π°, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈΠ»ΠΈ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΌΠΈΠ½ΠΈ ΠΏΡ€ΠΎΡ„ΠΈΠ»ΡŒ, здСсь ΠΏΡ€ΠΎΡ€Π°Π±ΠΎΡ‚ΠΎΠΊ ΠΌΠ½ΠΎΠ³ΠΎ.

ЀиксированноС мСню для сайта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS3

/*====================

Β 

ЦвСтовая схСма мСню

===============================*/

body {

background: #000000 url(header.jpg) no-repeat center top;

color: #666;

font: 14px/18px ‘Lato’, Arial, sans-serif;

text-align: justify;

}

/* Π¦Π²Π΅Ρ‚ строки мСню */

#navigation,

#nav li ul li,

#nav li ul li a{

background: #000;

}

Β 

/* Π¦Π²Π΅Ρ‚ ΠΏΡƒΠ½ΠΊΡ‚Π° мСню */

#nav li a,

#nav li a:hover,

#nav li ul li,

#nav li ul li a,

#nav li ul li a:hover {

color: #fff;

}

Β 

/* Π¦Π²Π΅Ρ‚ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ*/

#nav li a:hover,

#nav li ul li a:hover {

background: #9ACD32;

}

Β 

/* Π’Π΅Π½ΠΈ*/

#nav li a,

#nav li a:hover,

#nav li ul li a:hover {

text-shadow: 0 1px 1px #333;

}

Β 

/* Π¦Π²Π΅Ρ‚Π° Ρ„ΠΎΡ€ΠΌΡ‹ поиска */

.searchform input, .searchform input:not(:focus){

color:#B1B1B1; /*Π¦Π²Π΅Ρ‚ тСкста ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ*/

background: #fff; /*Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ*/

}

.searchfield:focus{

color: #000; /* Π¦Π²Π΅Ρ‚ тСкста ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ */

}

Β 

/*=====================================================================

ΠŸΡƒΠ½ΠΊΡ‚Ρ‹ ΠΎΡ‚Π²Π΅Ρ‡Π°ΡŽΡ‰ΠΈΠ΅ Π·Π° Ρ„ΠΈΠΊΡΠ°Ρ†ΠΈΡŽ мСню

====================*/

Β 

#menu_div{

clear: both;

position: relative;

top: 0;

left: 0;

}

Β 

#navigation {

position: fixed;

}

Β 

#navigation, #menu_div {

width: 100%;

margin: 0 !important;

padding: 0 !important;

}

Β 

#menu_div, #navigation, #menu, #nav{

height: 45px; /* Высота мСню */

}

Β 

#menu_div:hover,

#navigation:hover,

#nav li a:hover, #nav li ul a

{

opacity: 0.95;/* ΠŸΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ мСню ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ*/

}

Β 

#menu_div,

#navigation,

#nav li a,

#menu_div:not(:hover),

#navigation:not(:hover)

{

opacity: 0.8;/* Когда ΡƒΠ±ΠΈΡ€Π°Π΅ΠΌ курсор ΠΌΡ‹ΡˆΠΈ */

}

Β 

#menu {

width: 960px;

margin:0 auto; /*Π¦Π΅Π½Ρ‚Ρ€ мСню*/

padding:0;

position: relative;

}

Β 

#nav{

width: 960px;

margin:0;

padding:0;

position: relative;

font-family: ‘Arial’, Helvetica, sans-serif;

}

Β 

#nav li a,#nav li {

float:left;

}

Β 

#nav li {

list-style:none;

position:relative;

}

Β 

#nav li a {

line-height: 45px;

padding:0 15px;

text-decoration:none;

margin:0;

font-size:12px;

font-weight:700;

text-transform:uppercase;

}

Β 

/*====================

ПодмСню

=====================*/

#nav li ul {

display:none;

position:absolute;

left:0;

top:100%;

padding:0;

margin:0;

} /* Π‘ΠΏΡ€ΡΡ‚Π°Ρ‚ΡŒ мСню*/

Β 

#nav li:hover > ul {

display:block;

} /* ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ подмСню ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ */

Β 

#nav li ul li,#nav li ul li a {

float:none;

height: 35px; /* Высота подмСню*/

min-width: 150px; /* Минимальная ΡˆΠΈΡ€ΠΈΠ½Π° */

line-height: 35px;

border-right: 0;

text-shadow: none;

display:block;

font-size:13px;

font-weight:400;

text-transform:inherit;

}

Β 

#nav li ul li {

_display:inline; /* Для IE */

}

Β 

/* == 12. Под-ΠΏΠΎΠ΄ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ == */

#nav li ul li ul {

display:none;

}

Β 

#nav li ul li:hover ul {

left:100%;

top:0;

}

Β 

/*====================

Π€ΠΎΡ€ΠΌΠ° поиска

====================*/

Β 

.searchform {

position: absolute;

right: 15px;

top: 6px;

display: inline-block;

zoom: 1;

*display: inline;

border: 0;

padding: 0;

}

.searchform input {

font: normal 12px/100% Arial, Helvetica, sans-serif;

}

.searchform .searchfield {

height: 27px;

line-height: 27px;

padding-left: 10px;

padding-right: 10px;

width: 150px;

border: 2px solid #333;

outline: none;

-webkit-border-radius: 2em;

-moz-border-radius: 2em;

border-radius: 2em;

-moz-box-shadow: inset 1px 1px 2px #A1A1A1;

-webkit-box-shadow: inset 1px 1px 2px #A1A1A1;

box-shadow: inner 1px 1px 2px #A1A1A1;

}

Β 

.searchfield:focus{

font-weight: 700;

width: 220px;

}

Β 

.searchfield:not(:focus){

width: 150px;

}

Β 

/*========================

ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹

========================*/

Β 

#nav li a:hover,

#nav li ul li a:hover {

-webkit-transition-property:color, background;

-webkit-transition-duration: 0.5s, 0.5s;

-webkit-transition-timing-function: linear, ease-out;

}

Β 

.searchfield:focus,

.searchfield:not(:focus){

-webkit-transition-property:width;

-webkit-transition-duration: 0.5s, 0.5s;

-webkit-transition-timing-function: linear, ease-out;

}

Β 

#menu_div:hover,

#navigation:hover,

#nav li ul a,

#menu_div,

#navigation,

#nav li a,

#menu_div:not(:hover),

#navigation:not(:hover)

{

-webkit-transition-property:opacity;

-webkit-transition-duration: 0.5s, 0.5s;

-webkit-transition-timing-function: linear, ease-out;

}

6 jQuery ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² для создания фиксированного мСню

jQuery ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ JavaScript Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ: Jquery ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ: 6 jQuery ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² для создания фиксированного мСню

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

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

Π‘ΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Ρ‚Π°ΠΊΠΆΠ΅:
jQuery ΠΏΠ»Π°Π³ΠΈΠ½ Ρ„ΠΈΠΊΡΠΈΡ€ΡƒΡŽΡ‰Π΅Π³ΠΎΡΡ Π»ΠΈΠΏΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°
20 jQuery ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² полноэкранного мСню
20 слайд-ΠΏΠ°Π½Π΅Π»Π΅ΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ для сайта
5 Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… мСню для Ρ€Π°Π·Π½Ρ‹Ρ… Π·Π°Π΄Π°Ρ‡
7 jQuery плагинов мСню для Bootstrap

Bootstrap Auto-Hiding Navbar
АдаптивноС, Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ фиксированноС мСню для сайтов Π½Π° css-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ΅ Bootstrap. Π­Ρ‚ΠΎ Π½ΠΎΠ²Ρ‹ΠΉ взгляд Π½Π° саму ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΡŽ фиксированных ΠΏΠ°Π½Π΅Π»Π΅ΠΉ. «Ѐишкой» являСтся Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ скроллингС страницы Π²Π½ΠΈΠ·, панСль Π½Π΅ Π²ΠΈΠ΄Π½ΠΎ, Π½ΠΎ ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΌΡ‹ Π½Π°Ρ‡ΠΈΠ½Π°Π΅ΠΌ ΠΊΡ€ΡƒΡ‚ΠΈΡ‚ΡŒ Ρ€ΠΎΠ»ΠΈΠΊ Π²Π²Π΅Ρ€Ρ…, ΠΎΠ½ΠΎ появляСтся. Если Π²Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ΡΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ Β«ChromeΒ» Π½Π° своСм смартфонС, Ρ‚ΠΎ Π·Π½Π°ΠΊΠΎΠΌΡ‹ с Ρ‚Π°ΠΊΠΈΠΌ эффСктом. Π’Π°ΠΌ ΠΏΠΎ Ρ‚Π°ΠΊΠΎΠΌΡƒ ΠΆΠ΅ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡƒ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ адрСсная строка.
Bootstrap Auto-Hiding Navbar β€” ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… сайтов, вСдь ΠΏΡ€ΠΈ просмотрС сайта фиксированная полоска Π½Π΅ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚.

jQuery ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ JavaScript Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ: Jquery ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ: 10 jQuery ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² фиксированных мСню

Auto-Hide Sticky Header
jQuery ΠΏΠ»Π°Π³ΠΈΠ½ фиксированной Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΏΠΎ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎΠΌΡƒ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡƒ ΠΊΠ°ΠΊ ΠΈ скрипт Π²Ρ‹ΡˆΠ΅, Π½ΠΎ ΠΌΠ΅Π½Π΅Π΅ ΠΏΠ»Π°Π²Π½Ρ‹ΠΉ, хотя, Π½Π° ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ взгляд, Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π»Π΅Π³Ρ‡Π΅. К соТалСнию, Π½Π΅ ΠΌΠΎΠ³Ρƒ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ навигация Π² ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΌΠ΅Ρ€Π΅ адаптивная, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π½Π° ΠΌΠ°Π»Π΅Π½ΡŒΠΊΠΈΡ… экранах ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню становятся просто Ρ†ΠΈΡ„Ρ€Π°ΠΌΠΈ, Ρ‡Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ странно.

jQuery ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ JavaScript Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ: Jquery ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ: 10 jQuery ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² фиксированных мСню

On Scroll Header Effects
ΠœΠΎΡ‰Π½Ρ‹ΠΉ jQuery ΠΏΠ»Π°Π³ΠΈΠ½ фиксированной ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. МоТно Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ Π½Π° страницС ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ ΠΎΡ‚Ρ€Π΅Π·ΠΊΠΈ ΠΈ ΠΏΡ€ΠΈ скроллингС, ΠΏΠΎ Π΄ΠΎΡΡ‚ΠΈΠΆΠ΅Π½ΠΈΡŽ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ…, панСль трансформируСтся ΠΈ способна ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ внСшний Π²ΠΈΠ΄. Π’Π°ΠΊΠΈΡ… ΠΎΡ‚Ρ€Π΅Π·ΠΊΠΎΠ² Π½Π° страницС ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ сколько ΡƒΠ³ΠΎΠ΄Π½ΠΎ.

jQuery ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ JavaScript Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ: Jquery ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ: 10 jQuery ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² фиксированных мСню

On-Scroll Animated Header
Π₯ΠΎΡ€ΠΎΡˆΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π»ΠΈΠΏΠΊΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. Он Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ: Π½Π°Ρ…ΠΎΠ΄ΡΡΡŒ Π½Π° самом Π½Π°Ρ‡Π°Π»Π΅ страницы, ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ Π²Ρ‹ΡΠΎΠΊΡƒΡŽ ΡˆΠ°ΠΏΠΊΡƒ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ находится Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ ΠΈ мСню. ΠŸΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ шапки со всСми элСмСнтами, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Π»ΠΎΠ³ΠΎ ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойств CSS3 ΠΏΠ»Π°Π²Π½ΠΎ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ΡΡ ΠΈ становится ΡƒΠ·ΠΊΠΎΠΉ полоской, ΠΏΡ€ΠΈΠ»ΠΈΠΏΡˆΠ΅ΠΉ ΠΊ Π²Π΅Ρ€Ρ…Ρƒ экрана.

jQuery ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ JavaScript Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ: Jquery ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ: 10 jQuery ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² фиксированных мСню

Headhesive.js
Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ фиксированной ΠΏΠ°Π½Π΅Π»ΠΈ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ мСню. ΠŸΡ€ΠΈΠ½Ρ†ΠΈΠΏ Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π΅Π³ΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ: ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ страницы, шапка ΡƒΡ…ΠΎΠ΄ΠΈΡ‚, Π½ΠΎ вскорС появляСтся панСль. Если Π² ΠΏΠ»Π°Π³ΠΈΠ½Π°Ρ… Π²Ρ‹ΡˆΠ΅ содСрТаниС шапки просто Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Π»ΠΎΡΡŒ, Ρ‚ΠΎ Ρ‚ΡƒΡ‚ ΠΎΠ½ΠΎ появляСтся ΠΊΠ°ΠΊ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ элСмСнт.

jQuery ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ JavaScript Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ: Jquery ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ: 10 jQuery ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² фиксированных мСню

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

jQuery ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ JavaScript Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ: Jquery ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ: 10 jQuery ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² фиксированных мСню

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ мСню Π½Π° CSS – руководство для Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ²

ΠŸΡ€ΠΎΡΡ‚ΠΎΡ€Ρ‹ всСмирной сСти ΡΡ‚Ρ€Π΅ΠΌΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ растут, размСщая ΠΎΠ³Ρ€ΠΎΠΌΠ½ΠΎΠ΅ мноТСство Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π²Π΅Π±-сайтов, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… стрСмится ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ посСтитСлСй ΠΈ Π·Π°ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ….

Бпособы покорСния Π»ΡŽΠ΄ΡΠΊΠΈΡ… сСрдСц Π²Ρ‹Π±ΠΈΡ€Π°ΡŽΡ‚ΡΡ Ρ€Π°Π·Π½Ρ‹Π΅ β€” ΠΎΡ‚ примСнСния Flash Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, использования Π±Π°Π½Π½Π΅Ρ€ΠΎΠ² ΠΈ смСлых дизайнСрских Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ Π΄ΠΎ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π·Π²ΡƒΠΊΠΎΠ²Ρ‹Ρ… ΠΈ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… эффСктов.

Однако Π½Π΅ стоит Π·Π°Π±Ρ‹Π²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ сайт β€” это Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ источник ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, поэтому удобству прСдставлСния ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π½Π° сайтС Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡƒΠ΄Π΅Π»ΡΡ‚ΡŒ особоС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΈ ΠΈΠΌΠ΅Π½Π½ΠΎ поэтому навигация, понятная ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŽ Π½Π° ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅, Ρ‚Π°ΠΊ Π²Π°ΠΆΠ½Π°.

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

На ΠΎΠ±ΡŠΡ‘ΠΌΠ½Ρ‹Ρ… сайтах, содСрТащих Π±ΠΎΠ»Π΅Π΅ 50 страниц, Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΏΠΎΠ»Π½ΠΎΠ΅ мСню для доступа ΠΊΠΎ всСм Ρ€Π°Π·Π΄Π΅Π»Π°ΠΌ.

Π’ Ρ‚Π°ΠΊΠΎΠΌ случаС слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню Π½Π° CSS, ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ссылки Π½Π° ΠΏΠΎΠ΄Ρ€Π°Π·Π΄Π΅Π»Ρ‹.

Разновидности мСню Π² CSS

БущСствуСт сразу нСсколько Π²ΠΈΠ΄ΠΎΠ² ΠΈ Ρ‚ΠΈΠΏΠΎΠ² CSS мСню:

  1. Π“Π»Π°Π²Π½ΠΎΠ΅ мСню. Π­Ρ‚ΠΎ список ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½Ρ‹Ρ… ссылок Π½Π° ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ Ρ€Π°Π·Π΄Π΅Π»Ρ‹ Π²Π΅Π±-сайта.
  2. Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ мСню. Π’Π°ΠΊΠΎΠ΅ мСню ΠΈΠΌΠ΅Π΅Ρ‚ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ структуру ΠΈ Π±Ρ‹Π²Π°Π΅Ρ‚ Ρ‚Ρ€Ρ‘Ρ… Ρ‚ΠΈΠΏΠΎΠ²:
    • Π’Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню. РаскрываСтся ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ Π½Π° ΠΏΡƒΠ½ΠΊΡ‚;
    • Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ мСню сайта. РаскрываСтся ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΠΎΠΌ ΠΏΡƒΠ½ΠΊΡ‚Π΅;
    • БтатичСскоС Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ мСню для CSS. ДрСвовидная структура, прСдставлСнная Π² ΡƒΠΆΠ΅ раскрытом Π²ΠΈΠ΄Π΅.

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

ΠŸΡ€ΠΈΠ²Π΅Π΄Ρ‘ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ создания простого Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню Π½Π° CSS с пояснСниями.

Код Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню прописываСтся ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

<head>
<title>Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ мСню сайта</title>

<style type="text/css">
.navigation {
   list-style: none; /* ΠžΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ отобраТСния ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ². */
}
.navigation li {
   float: left; /* ВыстраиваниС элСмСнтов списка Π² ΠΎΠ΄ΠΈΠ½ ряд. */
   margin-right: 1px; /* созданиС отступов для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ сливались ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню. */
   font-family: Verdana, Arial, Helvetica, sans-serif; /* Π£ΠΊΠ°Π·Π°Π½ΠΈΠ΅ Ρ‚ΠΈΠΏΠ° ΡˆΡ€ΠΈΡ„Ρ‚Π°. */
   font-size: 14px; /* Π Π°Π·ΠΌΠ΅Ρ€ тСкста Π² ссылках. */
}
.navigation li a {
   display: block; /* ИзмСнСниС отобраТСния Π½Π° Π±Π»ΠΎΡ‡Π½ΠΎΠ΅ для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π·Π°Π΄Π°Ρ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы. */
   padding: 15px 20px;  /* Π’Π½ΡƒΡ‚Ρ€ΠΈ Π±Π»ΠΎΡ‡Π½Ρ‹Π΅ отступы. */
   background: #0db5b5; /* Π¦Π²Π΅Ρ‚ Π±Π»ΠΎΠΊΠΎΠ² мСню. */
   color: #3f3f3f; /* Π¦Π²Π΅Ρ‚ тСкста Π² Π±Π»ΠΎΠΊΠ°Ρ… мСню. */
   text-decoration: none; /* УстранСниС подчёркивания ссылок. */
   position: relative; /* Π­Ρ‚ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΈ использовании Internet Explorer 6 для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ссылка ΠΏΠΎ всСй своСй ΠΏΠ»ΠΎΡ‰Π°Π΄ΠΈ Π±Ρ‹Π»Π° «кликабСльной». */
}
.navigation li a:hover {
   background: #92d3d3; /* Π¦Π²Π΅Ρ‚ Π±Π»ΠΎΠΊΠ° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора. */
   color: #6b6b6b;  /* Π¦Π²Π΅Ρ‚ тСкста ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора. */
}
</style>
</head>
<body>
<ul> 
   <!-- ОписаниС ссылок Π² мСню ΠΈ сами ссылки. -->
   <li><a href="https://www.internet-technologies.ru/news" target="_blank">Новости</a></li>
   <li><a href="https://www.internet-technologies.ru/articles" target="_blank">Π‘Ρ‚Π°Ρ‚ΡŒΠΈ</a></li>
   <li><a href="https://www.internet-technologies.ru/templates/" target="_blank">Π¨Π°Π±Π»ΠΎΠ½Ρ‹</a></li>
   <li><a href="https://www.internet-technologies.ru/books" target="_blank">Книги</a></li>
   <li><a href="https://www.internet-technologies.ru/scripts" target="_blank">Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹</a></li>
   <li><a href="https://www.internet-technologies.ru/lessons" target="_blank">Π’ΠΈΠ΄Π΅ΠΎ</a></li>
   <li><a href="http://talk.internet-technologies.ru/" target="_blank">Π€ΠΎΡ€ΡƒΠΌ</a></li>
</ul>
<body>
</body>
</html>

Π’ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌ ΠΈΡ‚ΠΎΠ³Π΅ получаСтся ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ мСню:


Код Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню записываСтся Ρ‚Π°ΠΊ:

<head>
<title>Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ мСню сайта</title>
<style type="text/css">
.navigation {
   list-style: none; /* ΠžΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ отобраТСния ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ². */
   width: 120px;  /* Π¨ΠΈΡ€ΠΈΠ½Π° мСню. */
}
.navigation li {
   margin-top: 5px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ ΠΌΠ΅ΠΆΠ΄Ρƒ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ ΠΏΠΎ высотС, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΉ для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню Π½Π΅ сливались */
   font-family: Verdana, Arial, Helvetica, sans-serif; /* Π’ΠΈΠΏ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню */
   font-size: 14px; /* Π Π°Π·ΠΌΠ΅Ρ€ тСкста мСню */
}
.navigation li a {
   display: block; /* ИзмСнСниС отобраТСния Π½Π° Π±Π»ΠΎΡ‡Π½ΠΎΠ΅ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π·Π°Π΄Π°Ρ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы.  */
   padding: 4px 15px;  /* ΠžΡ‚ΡΡ‚ΡƒΠΏΡ‹ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π±Π»ΠΎΠΊΠΎΠ². */
   background: #0db5b5; /* Π¦Π²Π΅Ρ‚ Π±Π»ΠΎΠΊΠΎΠ² мСню. */
   color: #3f3f3f; /* Π¦Π²Π΅Ρ‚ тСкста Π² Π±Π»ΠΎΠΊΠ°Ρ… мСню. */
   text-decoration: none; /* УстранСниС подчёркивания ссылок. */
   position: relative; /* Π­Ρ‚ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΈ использовании Internet Explorer 6 для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ссылка ΠΏΠΎ всСй своСй ΠΏΠ»ΠΎΡ‰Π°Π΄ΠΈ Π±Ρ‹Π»Π° «кликабСльной». */
}
.navigation li a:hover {
   background: #92d3d3; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ */
   color: #6b6b6b;  /* Π¦Π²Π΅Ρ‚ тСкста ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ */
}
</style>
</head>
<body>
<!-- ОписаниС ссылок Π² мСню ΠΈ сами ссылки. -->
<ul> 
   <li><a href="https://www.internet-technologies.ru/news" target="_blank">Новости</a></li>
   <li><a href="https://www.internet-technologies.ru/articles" target="_blank">Π‘Ρ‚Π°Ρ‚ΡŒΠΈ</a></li>
   <li><a href="https://www.internet-technologies.ru/templates/" target="_blank">Π¨Π°Π±Π»ΠΎΠ½Ρ‹</a></li>
   <li><a href="https://www.internet-technologies.ru/books" target="_blank">Книги</a></li>
   <li><a href="https://www.internet-technologies.ru/scripts" target="_blank">Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹</a></li>
   <li><a href="https://www.internet-technologies.ru/lessons" target="_blank">Π’ΠΈΠ΄Π΅ΠΎ</a></li>
   <li><a href="http://talk.internet-technologies.ru/" target="_blank">Π€ΠΎΡ€ΡƒΠΌ</a></li>
</ul>
<body>
</body>
</html>

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ мСню, ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½ΠΎΠ΅ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°, выглядит Ρ‚Π°ΠΊ:


Π ΡƒΠΊΠΎΠ²ΠΎΠ΄ΡΡ‚Π²ΡƒΡΡΡŒ всСми Π²Ρ‹ΡˆΠ΅ΠΏΠ΅Ρ€Π΅Ρ‡ΠΈΡΠ»Π΅Π½Π½Ρ‹ΠΌΠΈ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ°ΠΌΠΈ, ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘ΠΌ ΠΊΠΎΠ΄ для простого Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π³ΠΎ мСню:

<ul>
  <li><a href="https://www.internet-technologies.ru/news">Новости</a></li>
  <li><a href="https://www.internet-technologies.ru/articles" target="_blank">Π‘Ρ‚Π°Ρ‚ΡŒΠΈ</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="https://www.internet-technologies.ru/templates/">Π¨Π°Π±Π»ΠΎΠ½Ρ‹</a>
    <ul>
      <li><a href="#">Бсылка 1</a></li>
    </ul>
  </li>
  <li><a href="https://www.internet-technologies.ru/books">Книги</a></li>
  <li><a href="https://www.internet-technologies.ru/scripts">Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹</a></li>
  <li><a href="https://www.internet-technologies.ru/lessons">Π’ΠΈΠ΄Π΅ΠΎ</a></li>
  <li><a href="http://talk.internet-technologies.ru">Π€ΠΎΡ€ΡƒΠΌ</a></li>
</ul>

<style type="text/css">	

#menu {
  background: #0db5b5;
  width: 60%;
  padding:1;
  text-align: center;
  float:left;
  font-family: Verdana, Arial, Helvetica, sans-serif; 
}
#menu a {
  color: #3f3f3f;
  text-decoration: none;
}
#menu a:hover {
  color: #6b6b6b;
}
#menu ul {
  padding:0;
  margin:0;
}
#menu li {
  list-style: none;
  padding: 0 15px 0 0;
  width:100px;
  margin: 0 auto;
  float:left;
  line-height: 50px;
}
#menu li ul { 
  position:absolute;
  display: none;
} 
#menu li ul li {
  float: none;
  display: inline;
  width:100px;
  line-height:35px;
}
#menu li ul li:hover {
  background: #c392b;
}
#menu li:hover ul {
  display:block;
}
#menu li ul li { 
  display: block; 
  background:#92d3d3;
}
</style>

ΠŸΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ Ρ‚Π°ΠΊΠΎΠ΅ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅Π΅ мСню:


Как Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅, достаточно простая HTML Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° ΠΈ всСго нСсколько строк CSS ΠΊΠΎΠ΄Π° ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ простоС, Π½ΠΎ ΡΡ‚ΠΈΠ»ΡŒΠ½ΠΎΠ΅ мСню, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π°ΠΉΠ΄Ρ‘Ρ‚ своС мСсто Π² ΠΊΠ°ΠΊΠΎΠΌ-Π»ΠΈΠ±ΠΎ Π²Π΅Π±-сайтС. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ.

Π–Π΅Π»Π°Π΅ΠΌ ΡƒΠ΄Π°Ρ‡ΠΈ!

ЀиксированноС Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ мСню Π½Π° чистом CSS

Π’ этом постС ΠΌΡ‹ сдСлаСм фиксированноС Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ΅ мСню. Для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ FontAwesome.

Π¨Π°Π³ 1. ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ с ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ, создаСм пустой Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½ΡƒΡŽ ΠΈΠ½Ρ„Ρƒ ΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ со ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ FontAwesome ΠΈ ссылку Π½Π° сам ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ Π² ΠΌΠΎΠ΅ΠΌ постС – Π²ΠΎΡ‚ ссылка.

Π’ΠΎΡ‚ ΠΊΠΎΠ΄ странички с ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹ΠΌΠΈ Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ:


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ЀиксированноС Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ мСню</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
</head>
<body>

</body>
</html>

Π¨Π°Π³ 2. ДобавляСм HTML Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ фиксированного мСню

Π’ΠΎΡ‚ ΠΈ сам ΠΊΠΎΠ΄ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ нашСго фиксированного мСню:


  <nav>
    <ul>
      <li>
        <i></i>
      </li>
      <li>
        <i></i>
      </li>
      <li>
        <i></i>
      </li>
    </ul>
  </nav>

Как Π²Ρ‹ Π·Π°ΠΌΠ΅Ρ‚ΠΈΠ»ΠΈ я ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠ» Ρ‚Π΅Π³ <nav> – это элСмСнт Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ html5, Ссли Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ html4, Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ этот Ρ‚Π΅Π³ Π½Π° ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ <div> ΠΈΠ»ΠΈ вовсС Π΅Π³ΠΎ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ, Π° ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ пСрСнСсти ΠΊ списку, Π²ΠΎΡ‚ Ρ‚Π°ΠΊ:


  <ul>
    ...
  </nav>

Π¨Π°Π³ 3. ДобавляСм HTML Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ подмСню


<b></b>
<ul>
  <li><a href="">ВСкст вашСй ссылки</a></li>
  <li><a href="">ВСкст вашСй ссылки</a></li>
  <li><a href="">ВСкст вашСй ссылки</a></li>
</ul>

ПодмСню ΠΊΠ°ΠΊ прСдставляСт собой Ρ‚Π°ΠΊΠΎΠΉ ΠΆΠ΅ список ΠΊΠ°ΠΊ ΠΈ основноС мСню, плюс Ρ‚Π΅Π³ <b class=”fa fa-caret-left”></b>, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ ΠΈΠΊΠΎΠ½ΠΊΡƒ β€œΠΊΠ°Ρ€Π΅Ρ‚ΠΊΠΈ слСва”, выполняСт Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ Π½Π΅ΠΊΠΎΠ³ΠΎ β€œΡ…Π²ΠΎΡΡ‚ΠΈΠΊΠ°β€, Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ Π½ΠΈΠΆΠ΅ πŸ™‚

ЀиксированноС Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½ΡŽΠ€ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ мСню

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

Π¨Π°Π³ 4. ΠŸΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°Π΅ΠΌ стили для фиксированного Π±ΠΎΠΊΠΎΠ²ΠΎΠ³ΠΎ мСню

Код стилСй я постарался ΠΏΡ€ΠΎΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² мСстах Π³Π΄Π΅ это ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅. Π’ Ρ†Π΅Π»ΠΎΠΌ всС Π½Π΅ ΠΏΡ€ΠΎΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ ΠΌΠΎΠΌΠ΅Π½Ρ‚Ρ‹ относятся ΠΊ банальной стилизации Ρ„ΠΎΠ½Π°, Ρ†Π²Π΅Ρ‚Π° ΠΈ Ρ‚.Π΄.


#sidebar-menu {
	position: fixed; /* фиксируСм нашС мСню */
	top: 200px; /* ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ мСню ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ края Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° */
	left: 0; /* ΠΏΡ€ΠΈΠ»ΠΈΠΏΠΈΠ»ΠΈ мСню ΠΊ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ */
	padding: 10px;
	background: #323A45;
	color: #FFF;
	border-radius: 0 8px 8px 0;
}
#sidebar-menu li {
	position: relative;
	cursor: pointer;
}
#sidebar-menu li i {
	/* Π—Π°Π΄Π°Π΅ΠΌ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌ фиксированный Ρ€Π°Π·ΠΌΠ΅Ρ€, height ΠΈ line-height Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌΠΈ */
	width: 27px;
	height: 27px;
	line-height: 27px;
	border-radius: 4px;
	background: #3CB7E7;
	text-align: center;
}

#sidebar-menu li+li {margin-top: 4px;}
#sidebar-menu b {
	display: none;
	position: absolute;
	/* позиция ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ края Ρ€Π°Π²Π½Π° ΡˆΠΈΡ€ΠΈΠ½Π΅ эл-Ρ‚Π° li */
	left: 27px;
	top: 0;
	height: 27px;
	/* ΡˆΠΈΡ€ΠΈΠ½Π° Ρ€Π°Π²Π½Π° Π·Π°Π·ΠΎΡ€Ρƒ ΠΌΠ΅ΠΆΠ΄Ρƒ Π±Π»ΠΎΠΊΠΎΠΌ мСню ΠΈ подмСню */
	width: 16px;
	line-height: 27px;
	background: transparent;
	color: #323A45;
	/* саму ΠΈΠΊΠΎΠ½ΠΊΡƒ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΠ΅ΠΌ Π²ΠΏΡ€Π°Π²ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ ΠΎΠ½Π° ΡΠΌΠΎΡ‚Ρ€Π΅Π»Π°ΡΡŒ вмСстС с Π±Π»ΠΎΠΊΠΎΠΌ подмСню */
	text-align: right;
}

#sidebar-menu li > ul {
	display: none;
	position: absolute;
	top: -10px;
	left: 42px;
	width: 120px;
	padding: 10px;
	background: #323A45;
	border-radius: 8px;
}
#sidebar-menu li:hover b,
#sidebar-menu li:hover ul {display: block;}
#sidebar-menu li a {
	display: block;
	padding: 4px 8px;
	border-radius: 4px;
	color: #FFF;
	-webkit-transition: all .2s;
	   -moz-transition: all .2s;
	    -ms-transition: all .2s;
	     -o-transition: all .2s;
	        transition: all .2s;
}
#sidebar-menu li a:hover {
	display: block;
	background: #3CB7E7;
}

Если ΠΏΠΎ стилизации Ρƒ вас Π΅ΡΡ‚ΡŒ вопросы ΠΏΠΈΡˆΠΈΡ‚Π΅ Π² ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ ΠΊ этому посту, с ΡƒΠ΄ΠΎΠ²ΠΎΠ»ΡŒΡΡ‚Π²ΠΈΠ΅ΠΌ ΠΎΡ‚Π²Π΅Ρ‡Ρƒ.
Π’ΠΎΡ‚ ΠΈ всС! ЀиксированноС Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ мСню Π³ΠΎΡ‚ΠΎΠ²ΠΎ πŸ™‚

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

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