На цій сторінці знаходяться приклади для створення горизонтальних меню сайту за допомогою HTML і CSS. Крім того, що посилання в цих меню розташовуються по горизонталі, їх об'єднує ще одна особливість - текст всередині посилань - це дійсно текст, укладений в тег . а не зображення, де текст є частиною картинки.
Звичайною практикою є створення навігації на основі списків, тому тут ми також розглянемо саме ці варіанти. Заради скорочення коду, в прикладах не використовуватимуться якісь декоративні вишукування на зразок заокруглення кутів, але ви повинні пам'ятати, що посилання в CSS можна змінювати дуже багатьма способами. Тому, якщо потрібно, можна з легкістю додати в CSS-код необхідні стилі, щоб отримати горизонтальне меню, яке вам необхідно.
І ще один момент. У всіх прикладах вам буде потрапляти пункт меню з class = "current" (поточний), який не містить посилання. Він є демонстраційним і позначає те, як повинен виглядати пункт меню, який відповідає тій сторінці, на якій знаходиться користувач. Справа в тому, що в інтернеті хорошим тоном вважається відсутність посилань на сторінці, які посилаються на неї саму і, до речі, про це ж говорять представники пошукових систем (Яндекс, Google і т.д.).
Просте горизонтальне меню
Найпростіше горизонтальне меню без будь-яких надмірностей.
Приклад HTML і CSS: просте горизонтальне меню
опис прикладу
- Створюємо маркований список (тег
- ), В який поміщаємо HTML-посилання (тег ). Прибираємо у цього списку і у його пунктів маркери (CSS list-style), а також зовнішні поля (CSS margin) і внутрішні відступи (CSS padding).
- щоб теги
- вишикувалися по горизонталі - робимо їх вбудованими (inline) за допомогою властивості CSS display: inline.
- Так як елементи списку у нас тепер рівня рядки, то ми легко їх можемо вирівнювати по лівому або правому краю блоку, використовуючи CSS text-align.
Розташувати елементи меню в один рядок і вирівняти їх можна і іншим способом - замінивши останні два пункти опису на властивість CSS float із значенням left або right. Але тут треба розуміти, що при значенні left елементи візьмуть правильний порядок, а ось при right (як треба в нашому прикладі) вони візьмуть зворотний порядок і доведеться міняти місцями посилання.
Блочне горизонтальне меню (float)
У цьому меню посилання являють собою блоки, у яких можна змінювати ширину і висоту, якщо це необхідно.
Приклад HTML і CSS: блочне горизонтальне меню з float
опис прикладу
- За допомогою властивості CSS float: left вибудовуємо елементи списку по горизонталі і додаємо кожному з них праве поле (CSS margin-right), щоб вони не прилягали один до одного.
- Робимо з посилань вбудовані блоки (CSS display: inline-block), щоб при необхідності у них можна було змінювати розміри. В кінці задаємо всіх елементів горизонтального меню необхідне оформлення.
Так як пункти меню у нас спливають вліво, то HTML-елементи, які будуть перебувати нижче навігації, зможуть також її обтечь. Щоб цього не сталося, можна зробити переривання обтікання за допомогою властивості CSS clear або встановити у блоку з class = "menu" таку висоту, яка гарантовано буде більше висоти посилань.
Блочне горизонтальне меню (display)
Зробимо ще одне блочне меню, але трохи іншим способом.
Приклад HTML і CSS: блочне горизонтальне меню з display
опис прикладу
- Для вибудовування пунктів меню в горизонтальну рядок знову застосовуємо display: inline. Це згодом дозволяє нам вирівняти елементи списку по центру.
- Ну а посилання і тег з class = "current" перетворимо у вбудовані блоки, щоб у них можна було явно вказувати і змінювати ширину (CSS width) і висоту (CSS height), якщо буде потрібно.
- Задаємо всіх елементів необхідне оформлення у вигляді рамок, кольору тексту, фону і т.д.
Горизонтальне меню з вкладками
Давайте трохи змінимо наш попередній приклад і зробимо меню, яке буде схоже на вкладки. Подібні речі досить часто використовуються на сайтах.
Приклад HTML і CSS: блочне горизонтальне меню з вкладками
опис прикладу
Цей приклад схожий на попередній, тому розглянемо тільки відмінності.
- Ми залишаємо у основного блоку нашого горизонтального меню тільки нижню межу рамки (CSS border-bottom), а також змінюємо внутрішні відступи (CSS padding) таким чином, щоб елементи списку притиснулися до цієї межі. Цього разу ми не будемо вирівнювати пункти меню з якої-небудь зі сторін або по центру, а просто поставимо великий відступ зліва у основного блоку, щоб він трохи відсунув їх від краю.
- В результаті дій першого етапу, наші пункти меню, а, отже, і посилання притиснулися до нижньої межі основного блоку. Однак нам треба, щоб вони не просто притиснулися, а сталося накладення нижніх частин рамок посилань на цю межу. Для цього задаємо елементам списку відносне позиціонування (CSS position: relative) і зміщуємо їх вниз на відстань рівне товщині рамок (у нас це 2px). Зсув робимо за допомогою властивості CSS bottom.
- Для елемента "current" і посилань в момент наведення на них курсора миші (CSS: hover) переобумовленої колір нижньої межі рамки (CSS border-bottom-color) і робимо його таким же, як і фон цих елементів. Так ми приховуємо нижню межу в місцях накладення посилань і отримаємо ефект вкладок.
- Як зробити сайт
Самому безкоштовно - Підручник HTML
Для початківців - Підручник CSS
Для новаків - Довідники
За HTML і CSS - приклади
HTML і CSS - посилання
Корисні сайти для веб-майстрів - інструментарій
Програми для створення сайтів