Създаване на фиксирана навигационното меню, HTML

Отстранен навигационното меню често се нарича "лепкава" меню, защото същността си, в допълнение към навигацията, е, че той винаги остава на същата позиция на страницата, независимо от превъртането на потребителя.

Това е доста често срещана практика, когато навигационната шаблон сайт използва подобно изпълнение опция от менюто, а не само в менюто.

В тази статия ще ви покажа един прост CSS за изпълнение на приетия материал в хоризонталната сайт "лепкава" навигационно меню.

Преди да започнем, ние да разгледаме няколко сайтове, които вече използват фиксирана лента за навигация, за да видим как работи на практика.

По-долу съм изброил няколко връзки.

Разработчиците на онлайн издател 99U, вградени в менюто на лентата за навигация навигация. Докато четете новини ресурс потребителят има възможност веднага да преминете към желаната част от сайта, за да го:

Това позволява на потребителите бързо да скочи на следващата статия след като прочетете предишната. Фиксирана навигационна лента увеличава времето на потребителя, прекарано на сайта, тъй като читателите са постоянно използвани, за да изберете меню прясна новина:

И както може да се види ясно от предишния пример, лентата за навигация значително подобрява използваемостта на сайта с голямо разнообразие от съдържание.

Създаване на фиксираната лента за навигация

По-долу е демонстрация на това как изглежда на практика:

Отиди в GitHub хранилището

Разделяне изисква минимален - елемент блок оформление, в което ще се постави съдържанието на фиксирана лента за навигация:

навигационен елемент е отлично в този случай. Тя предоставя услуги на трети страни (като например такива, че търсачката паяци) без възможност за проблеми, за да се разбере информационната структура на сайта си. навигационен елемент е блок по подразбиране, така че не трябва да напишете допълнителен ред на CSS -code.

Но ако не искате да използвате навигацията, а след това можете да използвате всеки блок елемент по подразбиране като DIV. Можете да използвате и инлайн елемент, като от време. но за да го регистрирате в дисплея на имот CSS код: блок.

Тук е CSS-код, който прави нашата навигационна лента фиксирана на едно място:

По-рано, ние назначен нашия HTML-елемент клас фиксирана навигационно-бар. така че сега се прилага само за инструмента за избор на желания стилове.

Стойностите на последните три свойства (ширина. Височина и фон-цвят) се променят, за да се поберат вашия сайт.

Нека сега разгледаме по-подробно тези четири магия CSS-имот, отговарящ за магията:

Настройка свойства върха. ляво и дясно на 0, ние се избегне нежелан вид на тире от двете страни на лентата за навигация.

Такъв голям Z-индекс стойност се използва, за да се избегне появата на друг член, определен HTML -razmetki горната навигационна лента (освен елемента се появява от стойността на Z-индекс по-голям от 9999).

На тази, може би, всичко.

забележка

В демо примера прилага доста остаряла версия упражняване отзивчив извършва на CSS. навигационното меню. В този си вид тя е концепция, но не е завършена форма. Тъй като в този урок, нашата основна цел е изграждането на фиксирана навигационна лента, която може да бъде контейнер за всички други елементи на страницата, аз няма да се обсъдят в менюто.

Разглеждане на изходния код. ако ще се чудите как тази част (ако има странни моменти, просто се чуруликане и ще се радваме да ви помогне да разберете).

резюмиране

Отстранен навигационна лента е доста лесно да се осъществи. Тя изисква минимум -razmetki HTML и CSS -Properties само няколко, които сме разгледали.

Разглеждане в тази статия, методът е с отлична съвместимост различни браузъри, защото използва само доказани и надеждни свойства на CSS. и по този начин, тя ще работи правилно дори и в най-древните уеб браузъри. Въпреки това, ако обратна съвместимост е много важно за вашите проекти, можете да решите да замените НСА (което се отнася за HTML5) на DIV.

Фиксираната десен контекст навигационна лента може да се подобри използваемостта, защото използването му намалява забавянето при превключване към новата задача, в сравнение с традиционните хоризонтален панел за навигация, която изисква превъртане назад към върха.

Превод на статията «Как да създадете Фиксирана лента за навигация» е изготвен от екип от приятелски Уеб дизайн проект от А до Я.