Навигация html – Как правильнее верстать навигацию с точки зрения семантики? — Хабр Q&A — Вебджем.рф

Содержание

HTML5 | Создание панели навигации

Создание панели навигации

Последнее обновление: 27.04.2016

Панель навигации играет важную роль на сайте, так как обеспечиват переходы между страницами сайта или на внешние ресурсы. Рассмотрим, как создать простенькую панель навигации.

Фактически панель навигации — это набор ссылок, часто в виде ненумерованного списка. Панели навигации бывают самыми различными: вертикальными и горизонтальными, одноуровневыми и многоуровневыми, но в любом случае в центре каждой навигации находится элемент <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>

СSS Панель навигации

Демонстрация: панелей навигации

Горизонтальная

Панель навигации

Наличие простой в использовании навигации важно для любого веб сайта.

С помощью CSS вы можете превратить скучные HTML меню в красивые навигационные панели

Панель авигации = список ссылок

Панель навигации нуждается в стандартном HTML в качестве основы.

В наших примерах мы построим панель навигации из стандартного HTML списка.

Панель навигации — это в основном список ссылок, поэтому использование элементов <ul> и естественно <li>:

Пример

<ul>
<li><a href=»index.php»>Главная</a></li>
<li><a href=»news.php»>Новости</a></li>
<li><a href=»contact.php»>Контакты</a></li>
<li><a href=»about.php»>О Нас</a></li>
</ul>

Редактор кода »

Теперь давайте удалим маркеры, поля и отступы из списка:

Пример объяснение:

list-style-type: none; — Убирает маркеры. В панели навигации не нужны маркеры для списка
Установить margin: 0; и padding: 0; чтобы удалить настройки браузера по умолчанию

Код в приведенном выше примере — это стандартный код, используется как на вертикальной, так и на горизонтальной панели навигации.

Вертикальная панель навигации

Чтобы создать вертикальную панель навигации, нужно задать стиль элемента <a> в списке, к дополнению коду выше:

Объяснение примера:

display: block; — Отображение ссылок в виде элементов блока составляет область кликабельных ссылок (не только текст), и позволяет указать ширину (и отступы, поля, высота и т. д. какие вы хотите)
width: 60px; — Элементы блока занимают всю ширину, доступную по умолчанию. Мы хотим задать ширину 60 пикселей

Вы также можете установить ширину <ul> и удалить ширину <a>, поскольку они будут занимать всю ширину, доступную при отображении в виде элементов блока. Это приведет к тому же результату, что и в предыдущем примере:

Пример

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 70px;
}

li a {
display: block;
}

Редактор кода »

Пример вертикальной панели навигации

Создание базовой вертикальной панели навигации с серым цветом фона и изменение цвета фона ссылок при наведении курсора мыши на них:

Пример

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}

Редактор кода »

Активная и текущая ссылка навигации

Добавьте класс .active к текущей ссылке, чтобы пользователь знал, на какой странице он находится:

Центральные ссылки и добавить границы

Добавить выравнивание text-align:center в <li> или <a>ссылки по центру.

Добавить свойство border в <ul>. Добавить границы вокруг навигации. Если Вы также хотите установить границы внутри панели, нужно добавить

border-bottom во все элементы <li>, за исключением последнего:

Пример

ul {
border: 1px solid #555;
}

li {
text-align: center;
border-bottom: 1px solid #555;
}

li:last-child {
border-bottom: none;
}

Редактор кода »

Фиксированная вертикальная навигация

Создать в полную в высоту, «фиксированную» боковую панель навигации:

Пример

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    height: 100%; /* Полная высота */
    position: fixed; /* Сделайте его придерживаться, даже на прокрутки */
    overflow: auto; /* Включить прокрутку, если sidenav имеет слишком много содержимого */
}

Редактор кода »

Примечание: Этот пример может работать неправильно на мобильных устройствах.

Горизонтальная панель навигации

Существует два способа создания горизонтальной панели навигации. Использование встроенных или плавающих элементов списка.

Встроенные элементы списка

Одним из способов построения горизонтальной панели навигации является указание элементов <li> как встроенные, кроме того в «стандартные» в коде выше:

Объяснение примера:

display: inline; — По умолчанию, элементы <li> — это элементы блока. Здесь мы удалим разрывы строк до и после каждого элемента списка, чтобы отобразить их на одной линии

Плавающие элементы списка

Другой способ создания горизонтальной навигации, плавают элементы <li> им нужно указать расположение для навигационных ссылок:

Пример

li {
    float: left;
}
a {
    display: block;
    padding: 8px;
    background-color: #dddddd;
}

Редактор кода »

Объяснение примера:

float: left; — Используйте поплавок, чтобы заставить элементы блока плавать рядом друг с другом

display: block; — Отображение ссылок в виде элементов блока составляет всю область кликабельных ссылок (не только текст), позволяет нам указывать отступы (и высоту, ширину, поля и т.д. если вы хотите)
padding: 8px; — Поскольку элементы блока занимают всю доступную ширину, они не могут плавать рядом друг с другом. Поэтому, укажите некоторые дополнения, чтобы сделать их выглядеть красиво
background-color: #dddddd; — Добавить серый фон цвета к каждому элементу

Совет: Добавить background-color: #dddddd; в <ul> для каждого элемента <a>, чтобы цвет фона был на всю ширину:

Примеры горизонтальной панели навигации

Создание базовой горизонтальной панели навигации с темным цветом фона и изменение цвета фона ссылок при наведении курсора мыши на них:

Пример

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Измените цвет ссылки на #111 (черный) при наведении */
li a:hover {
background-color: #111;
}

Редактор кода »

Активная и текущая ссылка навигации

Добавьте класс .active к текущей ссылке, чтобы пользователь знал, на какой странице он находится:

Выравнивание списка по правому краю

Выравнивание ссылок по правому краю путем перемещения элементов списка вправо float:right;:

Пример

<ul>
<li><a href=»#home»>Главная</a></li>
<li><a href=»#news»>Новости</a></li>
<li><a href=»#contact»>Контакты</a></li>
<li><a class=»active» href=»#about»>О Нас</a></li>
</ul>

Редактор кода »

Разделители границ списка

Добавить свойство border-right в <li> для создания разделителей ссылок:

Пример

/* Добавление серой правой границы ко всем элементам списка, кроме последнего (последний ребенок) */
li {
border-right: 1px solid #bbb;
}

li:last-child {
border-right: none;
}

Редактор кода »

Фиксированные горизонтальные панели навигации

Сделайте так, чтобы панель навигации оставалась вверху или внизу страницы, даже когда пользователь прокручивает страницу:

Фиксированная навигация сверху

ul {
    position: fixed;
    top: 0;
    width: 100%;
}

Редактор кода »

Фиксированная навигация снизу

ul {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Редактор кода »

Примечание: Фиксированная позиция может работать неправильно на мобильных устройствах.

Серая горизонтальная панель навигации

Пример серой горизонтальной панели навигации, с тонкой серой границей:

Липкая панель навигации

Использовать position: sticky; в <li>, чтобы создать липкую навигацию.

Липкий элемент переключается между относительным и фиксированным в зависимости от положения прокрутки. Он позиционируется относительно до тех пор, пока заданное положение смещения не будет выполнено в видимом экране — тогда он «прилипает» на месте (например, position:fixed).

Примечание: Internet Explorer, Edge 15 и более ранние версии не поддерживают фиксированное позиционирование. Safari требует префикс -webkit- (см. пример выше). Необходимо также указать по крайней мере одно из top, right, bottom или left для липкое позиционирование работы.

Еще примеры

Отзывчивая верхняя навигация

Как использовать медиа запросы CSS для создания адаптивной верхней навигации.

Редактор кода »

Отзывчивая боковая навигация

Как использовать медиа запросы CSS для создания адаптивной навигации по сайту.

Редактор кода »

Выпадающий список навигации

Как добавить выпадающее меню в панели навигации.

Редактор кода »

Тег | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	6.0+	10.6+	5.0+	4.0+	2.1+	3.0+

Спецификация

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Тег <nav> задает навигацию по сайту. Если на странице несколько блоков ссылок, то в <nav> обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов <nav> в документе. Запрещается вкладывать <nav> внутрь <address>.

Синтаксис

<nav>ссылки</nav>

Атрибуты

Нет.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>nav</title>
 </head> 
 <body>
  <header>
    <h2>Чебурашка и крокодил Гена</h2>
  </header>
  <nav><a href="1.html">Чебурашка</a> | <a href="2.html">Гена</a> |
       <a href="3.html">Шапокляк</a> | <a href="4.html">Лариска</a></nav>
  <article>
    <h3>Добро пожаловать!</h3>
  </article>
 </body> 
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Навигация по сайту

Браузеры

Internet Explorer до версии 8.0 включительно игнорирует тег <nav>, но отображает его содержимое. Также в этом браузере любые стили не применяются к селектору NAV.

Firefox полностью поддерживает этот тег начиная с версии 4.0, но версии 3.0 и старше также корректно отображают содержимое тега.

Тег | HTML справочник

HTML теги

Значение и применение

Тег <nav> (навигация) используется для обозначения содержимого в виде основных навигационных ссылок. Документ может иметь несколько элементов <nav>, например, один для навигации по сайту, а второй для навигации по странице.

<nav> <!-- начало навигации -->
	<ul> <!-- маркированный список -->
		<li><a href = "#">Домой</a></li> <!-- ссылка в элементе списка -->
		<li><a href = "#">HTML</a></li> <!-- ссылка в элементе списка -->
		<li><a href = "#">CSS</a></li> <!-- ссылка в элементе списка -->
	</ul> <!--конец списка-->
</nav> <!-- конец навигации -->

Пример размещения тега <nav> на странице.

Обратите внимание, что не все ссылки в документе следует помещать внутрь тега <nav>, элемент предназначен только для крупных навигационных блоков. Не используйте элемент <nav> внутри тега <footer> (нижний колонтитул). Программы чтения с экрана для пользователей с ограниченными возможностями, могут использовать этот элемент, чтобы определить, нужно ли опустить начальную визуализацию этого содержимого.

Тег <div> имеет довольно общий характер — это просто элемент на уровне блока, используемый для разбиения страницы на разделы. Одна из целей HTML 5 заключается в предоставлении в распоряжение разработчиков широкого выбора из других, семантически более осмысленных тегов.

Рис. 43 Человек, который использует только тег <div>.

HTML 5 включает в себя множество различных тегов, чьи имена отражают тип их содержимого, и эти теги могут использоваться вместо тега <div>. HTML 5 предлагает новые блочные семантические элементы для определения различных частей веб-страницы, вы можете детально с ними познакомиться в статье учебника HTML 5 «Теги разметки страницы».

Поддержка браузерами

Пример использования

Рассмотрим пример в котором сделаем простую разметку для сайта, используя современный стандарт гипертекстовой разметки HTML5.

<!DOCTYPE html>
<html>
	<head>
		<title>Разметка страницы</title>
	</head>
	<body>
		<header style = "background-color:khaki; height:100px">
			<p>Верхний колонтитул (тег <header>)</p>
		</header>
		<nav style = "background-color:coral; height:75px">
			<a href = "#">Ссылка 1</a> |
			<a href = "#">Ссылка 2</a> |
			<a href = "#">Ссылка 3</a> |
		<p>Панель навигации (тег <nav>)</p>
		</nav>
		<aside style  = "float:right; width:200px; height:250px; background-color:tan">
			<p>Справа мы разместили тег <aside></p>
		</aside>
		<main style = "height:250px">
			<h2>Главный заголовок сайта</h2>
			<p>Основное содержимое (тег <main>)</p>
			<section style = "background-color:grey; height:75px">
				<h3>Заголовок второго уровня</h3>
				<p>Раздел 1 (тег <section>)</p>
			</section>
			<section style = "background-color:grey; height:75px">
				<h3>Заголовок второго уровня</h3>
				<p>Раздел 2 (тег <section>)</p>
			</section>
		</main>
		<footer style = "background-color:khaki; height:80px">
			<p>Нижний колонтитул (подвал) тег <footer></p> 
			<address>Пример с сайта basicweb.ru</address>
		</footer>
	</body>
</html>

Обратите внимание, что практически к каждому элементу для демонстрации мы применили встроенный CSS стиль, применение встроенных стилей не является хорошей практикой, научиться грамотно применять стили вы можете после изучения языка HTML 5 в Учебнике CSS 3.

И так по порядку, что мы сделали в этом документе:

Для элемента <header> (верхний колонтитул) мы задали цвет заднего фона khaki и установили высоту элемента равную 100 пикселям.
Следующим на странице мы разместили элемент <nav> (навигация), для которого задали те же встроенные CSS свойства, но указали цвет заднего фона coral, а высоту элемента 75 пикселей.
Далее мы разместили элемент <aside>, который мы сделали плавающим и сместили в правую сторону (CSS свойство float со значением right), задали ему цвет заднего фона (tan), ширину (200 пикселей) и высоту (250 пикселей). Как вы можете заметить другие элементы его обтекают, не смотря на то, что они блочные. Таким образом происходит верстка плавающими элементами. Подробно изучить работу с плавающими элементами вы можете в учебнике CSS в статье «Плавающие элементы».
Добавили на страницу элемент <main> в который мы добавили заголовок первого уровня (тег <h2>). Прдеполагается, что внутри этого элемента будет содержаться основной контент.
Внутри элемента <main> мы добавили два тематических раздела (тег <section>), поместили внутри этих элементов заголовки второго уровня (тег <h3>), задали им цвет заднего фона grey и высоту блоков по 75 пикселей.
После основного содержимого мы разместили элемент <footer> (нижний колонтитул), по аналогии с предыдущими элементами задали ему цвет заднего фона (khaki) и высоту (80 пикселей). Внутри него разместили тег <address>, в котором указали контактные данные, которые по умолчанию отображаются курсивом.

Результат нашего примера:

Разметка страницы на HTML 5.

Значение CSS по умолчанию

nav {
display: block;
}

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

Атрибуты событий

Элемент поддерживает «атрибуты событий».

HTML теги

Навигация для сайта.

html

Привет, Уважаемые подписчики!

Только закончил работу над очередным проектом. В нем помимо основного меню, присутствовала так же и навигация. И я решил, что неплохо было бы показать вам, как подобные вещи делаются буквально в несколько строк кода. Причем делается это исключительно средствами html и css.

html

Такая навигация ставится обычно слева на сайте. Ничего сложного при ее разработке нет. Каждый пункт навигации заключаем в тег <h3>…</h3>. В него ставится ссылка.

PSD макет данной вещи для тренировки можно скачать тут.

Так же данный урок доступен в видео версии, которую можно скачать здесь:

Качаем виде версию урока.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Ну, в общем все! Давайте посмотрим на код, и все станет ясно окончательно.

<div>
 <h3><a href="#">О ЦЕНТРЕ</a></h3>
 <h3><a href="#">ФОТОГАЛЕРЕЯ</a></h3>
 <h3><a href="#">ПРЕЙСКУРАНТ ЦЕН</a></h3>
 <h3><a href="#">КОНТАКТЫ</a></h3>
 </div>

Все остальное будем делать с помощью стилей.

Для класса .bar-menu назначаются стили, которые нужны исходя из расположения соседних блоков. У меня в примере ничего кроме этой навигации на странице нет, поэтому я просто задам ему ширину.

Поскольку текст располагается по центу, то проще всего его отцентрировать, задав для тега <h3> выравнивание текста по центру.

Далее нам нужно вырезать картинки, которые поставим фоном для ссылок.

Вырезаем фон для обычной ссылки:

img17-1

И для ссылки в наведенном состоянии:

html

Картинки вырезаны, принимаемся писать css код для навигации. Точнее для ссылок навигации! Остальные стили у нас уже есть.

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

.bar-menu h3 a{
 background:url(images/bg-menu-main.jpg) center center;
font-family:Tahoma;
font-size:10px;
color:#056e04;
font-weight:bold;
 }

И что ж мы увидим?

html

Почему так? Дело в том, что фоновая картинка расположилась в ссылке ровно на столько, сколько ей позволяет это сделать текст. То есть ширина и высота ссылки определяется лежащим в ней текстом. Это кстати явный признак строчных тегов. Давайте укажем ширину и высоту:

.bar-menu h3 a{
background:url(images/bg-menu-main.jpg) center center;
 font-family:Tahoma;
font-size:10px;
color:#056e04;
font-weight:bold;
width:190px;
height:27px;
}
 Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
 Узнать подробнее

По-прежнему ничего не изменилось.

html

Мы не перевели ссылку из строчного типа в блочный. За это отвечает свойство display со значением block. Добавим это свойство:

.bar-menu h3 a{
background:url(images/bg-menu-main.jpg) center center;
font-family:Tahoma;
font-size:10px;
color:#056e04;
font-weight:bold;
width:190px;
 height:27px;
display:block;
 }

Вроде начинает навигация принимать нужный нам вид:

img17-1

Добавляем отступ снизу у каждой из ссылок. Так же добавляем padding-top для каждой из ссылок и незабываем его вычесть из высоты:

.bar-menu h3 a{
 background:url(images/bg-menu-main.jpg) center center;
 font-family:Tahoma;
 font-size:10px; color:#056e04;
 font-weight:bold;
 width:190px;
 height:21px;
 display:block;
 margin-bottom:10px;
 padding-top:6px;
 }

Получаем то, что нужно:

html

Доделываем ссылку в состоянии hover. В общем, копируем код для обычной ссылки и меняем значение фона, цвета текста ссылки и делаем текст не подчеркнутым. Остальное оставляем без изменения:

.bar-menu h3 a:hover{
 background:url(images/bg-menu.jpg) center center; 
 font-family:Tahoma;
 font-size:10px;
 color:#ffffff;
 font-weight:bold;
 width:190px;
 height:21px;
 display:block;
 margin-bottom:10px;
 padding-top:6px;
 text-decoration:none;
 }

Вот и получилась наше навигационное меню:

html

Надеюсь, урок будет полезен. С вами был Андрей. Спасибо за внимание. До встречи в очередных уроках!

Автор: Андрей Бернацкий.

E-mail:[email protected]

Проект webformyself.com — Как создать свой сайт. Основы самостоятельного сайтостроения

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее html

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Навигационные карты. Учебник html.

Глава 8

Мы с Вами уже говорили о том как сделать рисунок ссылкой.. в этой главе поговорим о том как сделать фрагмент, область рисунка ссылкой на тот или иной документ, а так же о том как сделать различные области одного и того же рисунка ссылками на различные документы.

Для осуществления данной задачи нам не обойтись без так называемых навигационных карт.

Предположим, у нас имеется такой рисунок:

..и нам необходимо сделать, так что бы пользователь, нажав на одну из этих «кнопок» переходил по ссылке в тот или иной документ.. что нам для этого нужно?

В первую очередь обозначим наш рисунок не как обыкновенное графическое изображение, а как навигационную карту присвоив этому рисунку своё индивидуальное имя. Делается это при помощи атрибута usemap тега <img> (я думаю Вам не стоит напоминать о том что тег <img> имеет обязательный атрибут src который указывает путь к той или иной картинке <img src=»knopki.jpg»> )

Назовём наш рисунок/карту именем panel. Это будет выглядеть так:

<img src=»knopki.jpg» usemap=»#panel»>

Не забываем по правилам синтаксиса поставить знак #решётки перед именем..

Ну а теперь, собственно, составим навигационную карту. Она задаётся тегом <map> у которого есть атрибут name — имя.. улавливаете к чему я веду? Ну как Вы наверное уже догадались, укажем на базе какого рисунка мы будем строить нашу навигационную карту указав его имя..

<map name=»panel»>
</map>

Теперь займемся тем, что укажем браузеру области рисунка которые будут являться ссылками, а заодно пропишем пути переходов по этим ссылкам. Эту задачу берет на себя тег <area>, закрывающего тега он не требует, и имеет следующие атрибуты, с которыми мы будем работать:

href — указывает путь к открываемому документу (точно так же как в теге <a>)
shape — форма области рисунка которая будет служить ссылкой. Может иметь одно из трёх значений:

rect — прямоугольная область
poly — область представляет собой некий многоугольник
circle — область заданная окружностью

coords — координаты формы

Теперь наша карта приобретает такой вид:

<map name=»panel»>
<area href=»primer1.html» shape=»rect» coords=»15,15,82,82″>
</map>

По сути теперь «зелёная» квадратная кнопка стала рабочей.

В чем Вы можете убедится нажав на неё в этом примере:

Немного поспешил с примером толком не объяснив суть написанного.. Заострим внимание на атрибутах тега <area>.

href=»primer1.html» — здесь думаю понятно, это путь к документу, который должен открыться при нажатии на «зелёную кнопку».

Так как кнопка у нас квадратная, а квадрат как известно это «правильный» прямоугольник, форму области рисунка назначаем прямоугольной shape=»rect».

А теперь самое интересное coords=»15,15,82,82″ — координаты.. Для прямоугольника они задаются двумя точками по принципу «Х1,У1,Х2,У2» Где Х1,У1- первая точка и соответственно Х2,У2 -вторая. Координаты указываются в пикселях.. Наш рисунок/карта имеет размеры 300 на 100 пикселей, её самый верхний левый пиксель имеет координаты Х=0,У=0, а самый нижний правый Х=300,У=100. Если не понятно, окунёмся в геометрию за пятый класс..

Взгляните на рисунок:

Так, выбрав прямоугольную форму shape=»rect» для нашей области в виде квадратной кнопки мы указали координаты ёё верхнего левого и нижнего правого пикселей.. которых вполне достаточно для обозначения «рабочей» области всей кнопки.

Займёмся «жёлтой кнопкой», она у нас представлена в виде треугольника. Для того чтобы выделить её «рабочую» область из нашего рисунка, присвоим атрибуту shape значение poly — полигон, которое определит эту область как некий многоугольник, где координаты через запятую будут являться его вершинами, их может быть сколь угодно много «Х1,У1,Х2,У2,Х3,У3,Х4,У4… Х124,У124» фигура образованная этими точками вершинами углов может иметь вид любого многоугольника как правильного, так и неправильного. В нашем случае угла всего три, на то он и треугольник, следовательно его координаты будут заданы тремя парами значений «Х1,У1,Х2,У2,Х3,У3»

Значит всё вместе пишем так:

<area href=»primer2.html» shape=»poly» coords=»148,15,185,82,110,82″>

А вот рисунок который наглядно показывает откуда берутся координаты точек..

Пример:

<html>
<head>
<title>Навигационная карта</title>
</head>
<body>
<center>
<img src=»karta.jpg» usemap=»#panel»>
</center>
<map name=»panel»>
<area href=»primer1.html» shape=»rect» coords=»15,15,82,82″>
<area href=»primer2.html» shape=»poly» coords=»148,15,185,82,110,82″>
</map>
</body>
</html>

Ну и последняя «красная кнопка» она у нас круглая.. значит форма области будет круглой shape= «circle». На сей раз с координатами дело обстоит немного иначе. Нам понадобится три значения Х,У,R. Х и У это координаты центра нашей окружности, а R — это длина радиуса в пикселях.

Вот рисунок:

А вот пример:

Теперь немного о том, что ещё желательно было бы сделать с нашей картой прежде чем «монтировать» её в какую либо страницу.

Определим фиксированные размеры рисунка-карты атрибутами width и height

Напишем альтернативный текст, как для всего рисунка карты, так и для её отдельных областей используя атрибут alt, а также описание элементов атрибутом title.

Избавимся от рамки бордюра.. сделаем border=»0″..(ну если Вам с бордюром больше нравится, можете этого не делать.. я не настаиваю..)

В конце должно выглядеть примерно вот так:

<html>
<head>
<title>Навигационная карта</title>
</head>
<body>
<center>
<img src=»karta.jpg» usemap=»#panel» width=»300″ border=»0″ alt=»Панель управления» title=»Панель управления»>
</center>
<map name=»panel»>
<area href=»primer1.html» shape=»rect» coords=»15,15,82,82″ alt=»Зелёная кнопка» title=»Зелёная кнопка»>
<area href=»primer2.html» shape=»poly» coords=»148,15,185,82,110,82″ alt=»Жёлтая кнопка» title=»Жёлтая кнопка»>
<area href=»primer3.html» shape=»circle»coords=»250,50,33″ alt=»Красная кнопка» title=»Красная кнопка»>
</map>
</body>
</html>

Иногда удобно формировать «рабочую» область изображения «смешивая» разные формы..

Предположим, наша очередная кнопка имеет такой вид:

Конечно, можно определить форму как многоугольник, но придется задать уйму координат для округлой части такой кнопки (ну это если нужна особая точность в навигационной карте).

А можно определить в этом примере две формы прямоугольник rect и окружность circle как показано на рисунке:

А в коде указать путь к одному и тому же документу:

Пример:

<html>
<head>
<title>Навигационная карта</title>
</head>
<body>
<center>
<img src=»karta1.jpg» usemap=»#panel1″ border=»0″ alt=»Панель управления»>
</center>
<map name=»panel1″>
<area href=»primer4.html» shape=»circle»coords=»206,50,33″ title=»Синяя кнопка»>
<area href=»primer4.html» shape=»rect» coords=»80,17,206,83″ title=»Синяя кнопка»>
</map>
</body>
</html>

Однако стоит помнить о том, что если бы ссылки с разных форм вели к разным документам, то нажимая на область пересечения наших фигур посетитель будет переходить по той ссылке, чья область в коде указана первой.. в нашем случае это окружность.

Рассмотрим на примере.. предположим необходимо изготовить вот такую кнопку:

Как быть с отверстием в ней?

Тег <area> помимо атрибута href имеет противоположенный по значению атрибут nohref — неактивная область, то есть если пользователь нажмет на такую область, то ровным счетом ничего не произойдёт, чего нам собственно и необходимо добиться при изготовлении «отверстия» в нашей карте.

Карта будет задана двумя областями, неактивной окружностью circle и активной прямоугольной областью rect и как показано на рисунке чертеже иметь следующие координаты:

Как уже говорилось ранее, при пересечении областей наибольшим приоритетом будет пользоваться та область, которая в коде внутри тега <map> указана первой

Следовательно, пример будет иметь такой вид:

<html>
<head>
<title>Навигационная карта</title>
</head>
<body>
<center>
<img src=»karta2.jpg» usemap=»#panel2″ border=»0″ alt=»Панель управления»>
</center>
<map name=»panel2″>
<area nohref shape=»circle» coords=»76,74,35″ title=»дырка»>
<area href=»primer5.html» shape=»rect» coords=»25,22,126,124″ title=»Дырявая кнопка»>
</map>
</body>
</html>

Отрывок из справочника (атрибуты тега <img>):

usemap — изображение является навигационной картой на стороне клиента.
ismap — изображение является навигационной картой на сервере.

Непонятно? Тогда читаем..

С атрибутом usemap мы вроде бы разобрались.. Смотрите, пользователь (клиент) открыв Вашу страницу, одновременно со всем остальным содержанием, загружает «на свою сторону» как сам рисунок, так и навигационную карту к нему и всё это дело обрабатывается его браузером.

А вот атрибут ismap тега <img> говорит браузеру о том, что к данному изображению на сервере, ну там где Вы выложили или собираетесь выложить свой сайт (читаем статью: «Публикация сайта»), есть навигационная карта. И теперь, когда посетитель (клиент) кликнет по какой либо области рисунка с таким атрибутом, браузер запомнит координаты этого клика и отправит их на сервер, где специальная программка обработает эти данные и перенаправит пользователя на тот адрес который указан в карте на сервере, в соответствии с полученными от браузера клиента координатами точки.

Пишется так:

<a href=»http://www.site.ru/imagemaps/karta»><img srs=»knopki.jpg» ismap></a>

Где <a href=»http://www.site.ru/imagemaps/karta»> адрес навигационной карты на каком либо сайте.. размещённом на том или ином сервере..

Всё равно непонятно? Если да, то тогда не стоит заморачивотся по этому поводу.. используйте usemap, на мой взгляд такое решение будет лучшим в большинстве случаев при использовании навигационных карт.

Что бы без труда определить координаты той или иной точки на Вашей навигационной карте откройте рисунок графическим редактором тем же Paint к примеру.. там, когда будете двигать указателем по рисунку, увидите две меняющиеся цифры, это и есть координаты пикселя Х и У на данном рисунке. В Paint эта панелька расположена в нижней части экрана.
При создании страницы с навигационной картой тег <img> всегда должен быть выше самой карты <map> То есть писать вот так:
<map name=»panel»>
<area href=»primer1.html» shape=»rect» coords=»20,20,80,80″>
</map>
<img src=»knopki.jpg» usemap=»#panel»>
..можно, но не нужно.. потому что при загрузке страницы могут возникнуть проблемы, так как карта с разметкой уже загрузилась, а самого рисунка ещё нет..
И ещё что касается загрузки..
<img src=»knopki.jpg» usemap=»#panel»>
В этом месте кода может быть всё что угодно длинный текст, таблицы, графика.. но всё же лучше здесь ничего не писать
<map name=»panel»>
<area href=»primer1.html» shape=»rect» coords=»20,20,80,80″>
</map>
А писать здесь, так как во время загрузки страницы, пользователь не дождавшись её окончания, может пытаться нажимать на кнопки указанные в навигационной карте которая к этому времени еще не загрузилась..

CSS Навигационная панель. Уроки для начинающих. W3Schools на русском

Демо: панель навигации

Вертикальный навбар

Горизонтальный навбар

Навигационные панели (навбары)

Простая в использовании навигация важна для любого веб-сайта.

С помощью CSS вы можете превратить скучные меню HTML в красивые навигационные панели.

Панель навигации = Список ссылок

Панель навигации требует стандартного HTML в качестве основы.

В наших примерах мы будем строить панель навигации из стандартного списка HTML.

Панель навигации представляет собой список ссылок, поэтому использование элементов <ul> и <li> имеет смысл:

Пример

<ul>
<li><a href=»default.asp»>Home</a></li>
<li><a href=»news.asp»>News</a></li>
<li><a href=»contact.asp»>Contact</a></li>
<li><a href=»about.asp»>About</a></li>
</ul>

Попробуйте сами »

Теперь давайте удалим маркеры, поля и отступы из списка:

Объяснение примера:

list-style-type: none; — Удаляет маркеры. Панель навигации не нуждается в маркерах списка.
Установите margin: 0; и padding: 0;, чтобы удалить настройки браузера по умолчанию.

Код в приведенном выше примере является стандартным кодом, используемым как в вертикальной, так и в горизонтальной панелях навигации.

Вертикальная панель навигации

Чтобы построить вертикальную панель навигации, вы можете стилизовать элементы <a> внутри списка, в дополнение к приведенному выше коду:

Объяснение примера:

display: block; — Отображение ссылок в виде элементов блока делает всю область ссылок кликабельной (не только текст), и это позволяет нам указать ширину (отступы, поля, высоту и т.д., если хотите).
width: 60px; — Блочные элементы занимают всю ширину, доступную по умолчанию. Мы указываем ширину 60 пикселей.

Вы также можете установить ширину <ul>, и удалить ширину <a>, так как они будут занимать всю ширину, доступную при отображении в виде элементов блока. Это даст тот же результат, что и в нашем предыдущем примере:

Примеры вертикальной навигационной панели

Создайте базовую вертикальную панель навигации с серым цветом фона и измените цвет фона ссылок, когда пользователь наводит на них курсор мыши:

Пример

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}

Попробуйте сами »

Активная / текущая навигационная ссылка

Добавьте «активный» класс к текущей ссылке, чтобы пользователь знал, на какой странице он / она находится:

Центрирование ссылок & Добавление границ

Добавьте text-align:center к <li> или <a>, чтобы центрировать ссылки.

Добавьте свойство border к <ul>, чтобы добавить границу вокруг навбара. Если вы также хотите границы внутри навбара, добавьте border-bottom ко всем элементам <li>, кроме последнего:

Пример

ul {
border: 1px solid #555;
}

li {
text-align: center;
border-bottom: 1px solid #555;
}

li:last-child {
border-bottom: none;
}

Попробуйте сами »

Фиксированный вертикальный навбар на всю высоту

Создайте «sticky» («липкий») боковой навбар на всю высоту страницы:

Пример

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /* Делает прилепание даже при скроллинге */
overflow: auto; /* Включите скроллинг если сайднав имеет много контента */
}

Попробуйте сами »

Примечание: Этот пример может не работать должным образом на мобильных устройствах.

Горизонтальная панель навигации

Есть два способа создать горизонтальную панель навигации. Использование встроенных или плавающих элементов списка.

Встроенные элементы списка

Один из способов построения горизонтальной панели навигации — указать элементы <li> как встроенные, в дополнение к приведенному выше «стандартному» коду:

Объяснение примера:

display: inline; — По умолчанию элементы <li> являются блочными элементами. Здесь мы удаляем разрывы строк до и после каждого элемента списка, чтобы отобразить их на одной строке

Элементы плавающего списка

Еще один способ создания горизонтальной панели навигации — это плавающие элементы <li> и указание макета для ссылок навигации:

Объяснение примера:

float: left; — используйте float, чтобы элементы блока скользили рядом друг с другом
display: block; — Отображение ссылок как элементов блока делает всю область ссылок кликабельной (не только текст), и это позволяет нам указать отступы (а также, если хотите, высоту, ширину, поля и т.д.)
padding: 8px; — Поскольку блочные элементы занимают всю доступную ширину, они не могут плавать рядом друг с другом. Поэтому, укажите некоторые отступы, чтобы они выглядели хорошо
background-color: #dddddd; — Добавление серого цвета фона для каждого элемента

Совет: добавьте background-color к <ul> вместо каждого элемента <a>, если хотите задать цвет фону на всю ширину:

Примеры горизонтальной панели навигации

Создайте базовую горизонтальную панель навигации с темным цветом фона и измените цвет фона ссылок, когда пользователь наводит на них курсор мыши:

Пример

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* Измените цвет ссылки на #111 (черный) при наведении */
li a:hover {
background-color: #111;
}

Попробуйте сами »

Активная / текущая навигационная ссылка

Добавьте «активный» класс к текущей ссылке, чтобы пользователь знал, на какой странице он / она находится:

Ссылки выравниваются справа

Выровняйте ссылки по правому краю, перемещая элементы списка вправо (float:right;):

Пример

<ul>
<li><a href=»#home»>Home</a></li>
<li><a href=»#news»>News</a></li>
<li><a href=»#contact»>Contact</a></li>
<li><a class=»active» href=»#about»>About</a></li>
</ul>

Попробуйте сами »

Разделители границы

Добавьте свойство border-right в </li> для создания разделителей ссылок:

Пример

/* Добавьте серую правую границу ко всем элементам списка, кроме последнего (последний-дочерний) */
li {
border-right: 1px solid #bbb;
}

li:last-child {
border-right: none;
}

Попробуйте сами »

Фиксированная панель навигации

Зафиксируйте панель навигации вверху или внизу страницы, даже когда пользователь прокручивает страницу:

Примечание: Фиксированная позиция может не работать должным образом на мобильных устройствах.

Серый горизонтальный навбар

Пример серой горизонтальной панели навигации с тонкой серой границей:

Липкий навбар

Добавьте position: sticky; к <ul> чтобы создать «липкий» навбар.

Липкий элемент переключается между относительным и фиксированным, в зависимости от положения прокрутки. Он позиционируется относительно до тех пор, пока в окне просмотра не будет достигнута заданная позиция смещения — тогда он «залипнет» на месте (как position:fixed).

Примечание: Internet Explorer, Edge 15 и более ранние версии не поддерживают sticky-позиционирование. Safari требует -webkit-prefix (см. Пример выше). Вы также должны указать хотя бы одно из значений: top, right, bottom или left для работы sticky позиционирования.

Больше примеров

Адптивная верхняя панель навигации

Как использовать медиазапросы CSS для создания адаптивной верхней навигации.

Попробуйте сами »

Адаптивная боковая панель навигации

Как использовать медиазапросы CSS для создания адаптивной боковой навигации.

Попробуйте сами »

Выпадающий навбар

Как добавить выпадающее меню внутри панели навигации.

Попробуйте сами »

Больше примеров того, как создавать различные панели навигации вы можете узнать в разделе Как сделать? на нашем сайте.

Пожалуйста, включите JavaScript для просмотра комментариев, предоставленных Disqus.