Навігаційні панелі за допомогою CSS. Дуже проста горизонтальна панель навігації Як створити веб-сторінку з навігацією css
Почнемо з ілюстрації типової HTML структури. Перед вами схема типової навігаційної панелі, в якій є кілька посилань.
HTML код гранично простий: блок div та невпорядкований список усередині. Як ви, можливо, знаєте, специфікація HTML5 запровадила новий елемент(nav), який ідентифікує панель навігації. Тег nav замінює загальний тег div, але, як ви можете бачити нижче, загальна структура навігаційної панелі не змінюється.
Організувати навігаційну панель за допомогою невпорядкованого списку (ul) завжди гарна практика, особливо якщо вам потрібно організувати складнішу взаємодію між основними посиланнями та підменю.
Перед вами приклад HTMLрозмітки навігаційної панелі із підменю.
Пропозиції щодо CSS
Зараз давайте звернемо увагу на три моменти, які зроблять ваш CSS код кращим. Висота тега li повинна дорівнювати висоті неупорядкованого списку (ul).
Для ідеального вертикального вирівнювання тексту встановіть значення властивості line-height рівним висоті ul тега.
Для зручної навігації сайтом на всіх сторінках використовують меню, щоб користувачеві було зрозуміло, що і де у вас знаходиться. Практично завжди у верхній частині сторінки (у шапці) мають у своєму розпорядженні горизонтальне менюза розділами (категоріями) сайту, а вертикальне меню прописують у сайтбарі (у колонці) та використовують для навігації за статтями.
Зі статті ви зрозумієте як зробити меню для сайту html, що для цього потрібно прописати, щоб вийшло горизонтальне і вертикальне меню на css, або меню з списком, що випадає.
Для того, щоб зробити меню (будь-яке) ми будемо використовувати маркований список, якому надамо безпосередньо свій class і пропишемо для цього класу свої параметри з необхідними значеннями.
Наприклад, для створення меню ми використовуємо список із класом class="menu" (назва класу будь-яка, тільки латинські літери), і код html виглядатиме так:
У стильового оформлення для менюя вказав обов'язкові властивості з потрібними значеннями:
Обов'язкові параметри та значення CSS
- margin: 0; - прибираємо всі відступи списку, інакше браузер підставить значення за замовчуванням 20px;
- list-style-type: none; - прибираємо маркери у пунктів меню, інакше браузер додасть крапки чи цифри.
Ось таким чином робиться меню на html сторінках, і тепер перейдемо до створення горизонтального меню та розглянемо все на прикладах.
Як зробити горизонтальне меню на CSS
Для відображення горизонтального меню застосовуючи список, нам достатньо прописати до вищевказаного коду лише один параметр display: inline; щоб пункти меню вирівнялися в один рядок і йшли один за одним по горизонталі. А також додамо відступи між пунктами меню за допомогою margin.
І виглядатиме це так:
Горизонтальне меню у нас готове, залишилося надати йому гарний зовнішній вигляд.
Давайте кожному пункту у горизонтальному меню додамо рамку borderі зробимо у неї скошені краї, заповнимо певним кольором background-color (додамо фон пункту меню), і змінимо вигляд посилання.
Відображатиметься горизонтальне меню вже таким чином:
Так як горизонтальне меню в більшості випадків прописують у шапці сайту, то я в прикладі додав у меню фон, який ви зміните під свій колір шапки.
І для наочності зробив пункти меню центром, застосувавши властивість text-align: center; , яке можна видалити (вирівняється автоматично з лівого краю), або задати значення text-align: right; і горизонтальне меню з'явиться праворуч.
До речі ви можете також скористатися, які ви можете там на власні очі подивитися і безкоштовно скачати.
Як зробити вертикальне меню на CSS
Вертикальне меню на CSSробиться і оформляється на сторінці практично так само як і горизонтальне, тільки тут змінюється в .menu-2 li (... параметр зі значенням display: block; (вказує на блоковий елемент), що надає вертикальне відображення пунктів меню.
І ще один додаток до вертикального меню: оскільки воно в більшості випадків знаходиться в бічній колонці сайту, що має фіксовану ширину, то й ми змушені задати ширину width: 100%; наше вертикальне меню, щоб воно повністю займало всю ширину колонки.
Давайте розглянемо вертикальне меню CSSна прикладі:
Ось так вертикальне меню відобразиться на сторінці:
Будьте уважні!
Як зробити випадаюче меню на CSS
Зробити меню, що випадає з допомогою CSSДосить просто. Ми лише додамо до існуючого коду від вертикального меню кілька параметрів, які і відповідатимуть за список пунктів меню, що випадає.
Обов'язково запам'ятайте!
Для того, щоб меню, що випадає, суворо з'являлося навпроти провідного посилання, необхідно в CSS для тега li , де знаходиться це посилання, прописати position: relative; , а для меню position: absolute;
Давайте напишемо html коддля меню, що випадає на CSS.
Подивіться, як виглядатиме на сторінці меню на CSS.
Точно так само прописується випадаюче меню і при горизонтальному розташування навігації. Єдине, це не забувайте змінювати значення параметрів top і left (відступ зверху і зліва).
Подивіться!
Як зробивши всього 3 зміни в CSS, наше вертикальне розташування навігації з меню, що випадає, перетворитися на горизонтальне з меню, що випадає.
Зміни в CSS для меню, що випадає
- Замінити в .saitbar - width: 240px; на width: 100%;
- Замінити на .menu-4 li - display: block; на display: inline-block;
- Замінити на .menu-4 ul.podmenu - top: 0; на top: 34px;
- Замінити в .menu-4 ul.podmenu - left: 214px; на left: 7px;
Одна з найчастіше піддаються адаптації частин веб-сайту це навігація. Ця частина дуже важлива для зручності використання веб-сайту, тому що це один із шляхів, яким користувачі переходять зі сторінки на сторінку.
Для створення адаптивної навігації сайту існує безліч шляхів, і кілька jQuery плагінів навіть здатні зробити це миттєво .
Однак замість того, щоб застосувати готове рішення, в цьому уроці ми пройдемо через процес побудови простої навігації з нуля, використовуючи CSS3 media queries і трохи , щоб правильно показати це на екрані маленького розміру, як у смартфона.
Тож почнемо.
HTML
Стилі
У цьому розділі ми будемо використовувати стилі для навігації. Стиль тут чисто декоративний, можете вибрати будь-які кольори, які забажаєте. Але в цьому випадку body буде ніжний кремовий колір.
Body (background-color : #ece8e5 ; )
Тег nav, який визначає навігацію, буде 100% повної ширини у вікні браузера, у той час як ul, в якому він містить наші основні посилання меню, буде 600px завширшки.
Nav ( height : 40px ; width : 100 % ; background: # 455868 ; font-size: 11pt; font-family: "PT Sans", Arial, sans-serif; font-weight: bold; position: relative; border-bottom : 2px solid # 283744 ; ) nav ul ( padding : 0 ; margin : 0 auto ; width : 600px ; height : 40px ; )
Потім ми застосуємо властивість float вліво до посилань меню, щоб вони були розташовані горизонтально в ряд, але застосування цієї властивості елемента викликає схлопування батьківського елемента.
Nav li (display: inline; float: left;)
Якщо ви помітили з розмітки html вище, ми вже додали clearfix у властивість class для nav і ul, щоб розчистити місце, коли ми розмістимо “плаваючі” елементи всередині нього, використовуючи CSS clearfix hack . Отже, додамо такі правила стилів таблицю стилів.
Clearfix :before , .clearfix :after ( content : " " ; display : table; ) .clearfix :after ( clear : both ; ) .clearfix ( *zoom: 1 ; )
Так як у нас шість посилань меню і ми також призначили контейнеру ширину 600px, кожне посилання меню буде шириною 100px.
Nav a ( color : #fff ; display : inline-block ; width : 100px ; text-align : center ; text-decoration : none ; line-height : 40px ; text-shadow : 1px 1px 0px # 283744 ; }
Посилання меню будуть розділені правою межею завтовшки 1px, крім останньої. Пам'ятаючи про блокову модель з минулого уроку, ширина посилання меню буде збільшена на 1px через додавання кордону, що зробить її 101px, тому тут ми змінимо модель box-sizing на border-box, щоб зберегти ширину посилання меню 100px.
Nav li a ( border-right : 1px solid # 576979 ; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; ) nav li:last-child a ( border-right : 0 ; )
Nav a:hover , nav a:active ( background-color : #8c99a4 ; )
Nav a#pull ( display : none ; )
На цьому етапі ми тільки застосовуємо стилі до блоку навігації, і нічого не станеться, коли змінимо розмір вікна браузера. Тож перейдемо до наступного кроку.
Media Queries
Виведення меню
На даному етапі меню буде все ще захованим і буде видимим тільки тоді, коли воно потрібно після торкання або натискання на посилання «Меню», і ми можемо досягти цього ефекту, використовуючи jQuery slideToggle().
$(function() ( var pull = $("#pull" ) ; menu = $("nav ul" ) ; menuHeight = menu.height () ; $(pull) .on ("click" , function(e) (e.preventDefault(); menu.slideToggle();)));));
Тим не менш, коли Ви змінюєте розмір вікна на маленькому екрані відразу після того, як ви подивилися і сховали меню, меню буде заховано, оскільки стиль display: none, згенерований jQuery, все ще застосовується до елемента.
Отже, нам потрібно видалити цей стиль при зміні розміру вікна таким чином:
$(window) .resize (function() ( var w = $(window) .width () ; if(w > 320 && menu.is (":hidden" ) ) ( menu.removeAttr ("style" ) ; ) ) ) ;
Все, це весь код, який нам потрібен, тепер ми можемо подивитися блок навігації за наступними посиланнями, і рекомендуємо протестувати його інструментом для перевірки адаптивності дизайну, таким як Responsinator , щоб Ви могли побачити різні варіантийого ширина одночасно.
Бонус: альтернативний спосіб
Як було раніше згадано в уроці, є інші способи зробити це, і використання JavaScript бібліотеки SelectNav.js – один з найпростіших шляхів. Це чистий JavaScript, який не залежить від інших сторонніх бібліотек, таких як jQuery.
В принципі, це буде дублювати Ваш список меню та трансформувати його у
Однією з переваг цього способу є те, що нам не потрібно турбуватися про стилі навігаційного блоку, так як меню
Переклад - Чергування
Навігація є на будь-якому хорошому сайті, навіть якщо він односторінковий. Залежно від ситуації, навігаційні посилання можуть вести різні розділи сайту або відправляти до закладці (якорю), розташованої на поточній сторінці. Грамотне складання навігації, в якій не заплутається користувач, потребує певних знань та досвіду. До дизайну навігаційної панелі також потрібно підходити розумно, і в цьому уроці ми розповімо вам, як створити зручне навігаційне меню.
Створення навігації
Що таке навігація? Це набір посилань, часто впорядкованих і згрупованих за змістом. Навігаційне меню часто створюється з використанням HTML-тегу списку
- , де у кожному пункті
- міститься одне посилання . У HTML5 для навігації ввели окремий тег