Сайт

Навигация для сайта html: Тег | htmlbook.ru

25.11.1986

Содержание

HTML5 — Элемент nav — ИТ Шеф

Статья, в которой рассматривается HTML-элемент nav из категории sectioning.

Назначение элемента nav

Элемент nav предназначен для создания секции в документе, содержимое которой представляет собой навигацию.

Навигация — это фрагмент кода, содержащий ссылки на другие страницы сайта или на разделы этой же страницы. Навигацию обычно оформляют в виде маркарированного списка (ul), элементы li которого содержат элементы a (ссылки). Такой образ представления навигации является самым простым и понятным для поисковых роботов.


<!-- Секция на странице, содержащая навигацию -->
<nav>
  <ul>
    <li><a href="/">Главная</a>
    <li><a href="news.html">Новости</a>
    <li><a href="blog.html">Блог</a>
    <li><a href="about.html">О блоге</a>
  </ul>
</nav>

Не все группы ссылок на странице должны находиться в элементе nav. Элемент

nav в первую очередь предназначен для группирования основных блоков навигации.

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

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

Внимание: Элемент nav

не может содержать в качестве своего потомка элемент main.

Применение элемента nav

В качестве примера рассмотрим страницу, содержащую 2 элемента nav. Первый из этих элементов будет представлять навигации по сайту, а второй — навигацию по странице.


<body>
  <h2>Мой сайт</h2>
  <!--Навигация по сайту-->
  <nav>
    <h3>Навигация по сайту</h3>
    <ul>
      <li><a href="/">Главная</a></li>
      <li><a href="html.html">Статьи по HTML</a></li>
      <li><a href="html.html">Статьи по CSS</a></li>
      <li><a href="html.html">Статьи по JavaScript</a></li>
    </ul>
  </nav>
  <!-- Основное содержимое страницы (статья) -->
  <article>
    <!-- Заголовок статьи -->
    <header>
      <h3>Название статьи</h3>
      <p>Дополнительная информация...</p>
    </header>
    <!-- Навигация по этой странице (статье) -->
    <nav>
      <h4>Содержание статьи:</h4>
      <ul>
        <li><a href="#section1">Раздел 1</a></li>
        <li><a href="#section2">Раздел 2</a></li>
        <li><a href="#section3">Раздел 3</a></li>
      </ul>
    </nav>
    <div>
      <!-- 1 раздел статьи -->
      <section>
        <!-- Заголовок раздела -->
        <h4>Раздел 1</h4>
        <!-- Содержимое 1 раздела -->
        <div>.
 
 
 ..</div>
      </section>
      <!-- 2 раздел статьи -->
      <section>
        <!-- Заголовок раздела -->
        <h4>Раздел 2</h4>
        <!-- Содержимое 2 раздела -->
        <div>...</div>
      </section>
      <!-- 3 раздел статьи -->
      <section>
        <!-- Заголовок раздела -->
        <h4>Раздел 3</h4>
        <!-- Содержимое 3 раздела -->
        <div>...</div>
      </section>
    </div>
    <!-- Футер статьи -->
    <footer>
      ...
    </footer>
  </article>
  <!-- Футер страницы -->
  <footer>
    <p>Мой сайт, 2015.</p>
  </footer>
</body>

Элемент nav не обязательно должен содержать навигацию в виде списка. Навигация также может быть представлена другим контентом.

Например, рассмотрим следующий вариант навигации сайта:


<nav>
 <h2>Навигация</h2>
 <p>Вы находитесь на моей главной странице. Это отправная точка, с которой Вы можете путешествовать по моему ресурсу. Если Вы хотите познакомиться с моими записями, то переходите в <a href="blog">"Мой блог"</a>. Если Вам интересны проекты, над которыми я сейчас работаю, то переходите в <a href="laboratory">"Мою лабораторию</a>. А если Вы хотите увидеть мои разработки или  приобрести их, то переходите в раздел <a href="ready">"Готовые решения"</a>.</p>
 <p>У Вас есть вопросы ко мне или Вы хотите узнать больше информации об проектах, то посетите страницу <a href="about">"О блоге"</a>.</p>
</nav>
</p>

Настройка глобальной навигации и ссылок меню—ArcGIS Hub

Ссылки меню – это ссылки, добавленные в заголовок. Эти ссылки требуют описательной подписи, которая сообщает посетителям, куда они идут, когда переходят по ссылке. Администраторы и участники команды могут использовать ссылки меню, чтобы облегчить посетителям сайта переход к дополнительным ресурсам, связанным с сайтом или инициативой, например, к другим сайтам и страницам или внешним веб-ссылкам.

Что такое глобальная навигация?

Каждый новый сайт включает в себя глобальную навигацию. Глобальная навигация – это возможность сайта разместить компактную панель над заголовком сайта. Эта панель включает в себя следующие параметры:

Чтобы включить или выключить функцию глобальной навигации см. раздел Взаимодействия.

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

На что я могу ссылаться при создании ссылки в меню?

Вы можете ссылаться на любой внешний сайт, используя URL. Вы также можете выбрать из элементов, принадлежащих вашему ArcGIS Hub. Поддерживаются следующие элементы.

  • Картографические веб-приложения
  • Операционные панели
  • Наборы данных, шейп-файлы и файлы CSV
  • Сайты ArcGIS Hub
  • Страницы ArcGIS Hub
  • Веб-карты
  • Документы
  • Формы Survey123

Полный список поддерживаемых ArcGIS Hub элементов см. в разделе Поддерживаемые ресурсы.

Добавление ссылок меню в заголовок

Согласно общепринятым рекомендациям, 7 – это максимальное количество ссылок меню, которые должны быть включены в заголовок, потому что краткое меню проще всего запомнить. Однако это правило не всегда применяется, если содержание занимает значительную ширину. Если вы хотите добавить много ссылок в меню, обязательно как следует продумайте порядок и значимые подписи.

  1. Войдите в ArcGIS Hub и щелкните Сайты на странице Обзор, чтобы просмотреть список ваших сайтов. Если у вашей организации есть лицензия ArcGIS Hub премиум-класса, вы можете найти свои сайты в списке Инициативы на странице Обзор.
  2. Щелкните, чтобы открыть свой сайт или инициативу.
  3. На панели Настройки щелкните Заголовок.
  4. Щелкните Меню.
  5. Щелкните Добавить связь и выберите одну из следующих двух опций:
    • На существующие ресурсы – выбирает ресурсы, созданные вами, вашей командой, вашей организацией или общественностью.
    • На внешнюю страницу – копирует и вставляет ссылку в поле Местоположение ссылки. Введите имя для ссылки в поле Имя ссылки.
  6. Щелкните Сохранить.

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

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

Подсказка:

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

Изменение подписи ссылки меню

Выполните следующие действия, чтобы изменить имя ссылки в меню.

  1. Откройте сайт, который вы хотите редактировать.
  2. На боковой панели щелкните Заголовок.
  3. Щелкните Меню.
  4. Щелкните кнопку настройки на ссылке, которую вы хотите изменить.
  5. Выберите Редактировать.
  6. Введите новое имя в поле Имя ссылки.
  7. Щелкните Сохранить.

Изменение порядка ссылок меню

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

  1. Откройте сайт, который вы хотите редактировать.
  2. На панели Настройки щелкните Заголовок.
  3. Щелкните Меню.
  4. Щелкните на ссылку меню, чтобы перетащить ее на новое место в списке.
  5. Щелкните Сохранить.

Настроить ссылки в социальных сетях

Добавьте значки для Instagram, Facebook и Twitter в меню сайта.

  1. Откройте сайт, который вы хотите редактировать.
  2. На панели Настройки щелкните Заголовок.
  3. Щелкните Значки социальных сетей.
  4. Щелкните, чтобы включить значки, которые вы хотите отобразить.
  5. Для каждого значка, который вы хотите видеть, вставьте URL для учетной записи, на которую вы хотите сослаться.
  6. Щелкните Сохранить.

Удаление ссылки Меню

Выполните следующие действия, чтобы удалить ссылку Меню из заголовка сайта.

  1. Откройте сайт, который вы хотите редактировать.
  2. На панели Настройки щелкните Заголовок.
  3. Щелкните Меню.
  4. Щелкните кнопку настройки на ссылке, которую вы хотите изменить.
  5. Выберите Редактировать.
  6. Щелкните Удалить ссылку.
  7. Щелкните Сохранить.

Отзыв по этому разделу?

Выравнивание навигационного блока по центру страницы

Вы здесь

Главная → Блог → CSS → Выравнивание навигации по страницам

Дата:31.12.15 в 14:21

Раздел: 

В статье рассказывается о нескольких способах, с помощью которых можно выровнять навигационный блок с неизвестным количеством элементов по центру страницы.

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

Такая навигация обычно формируется посредством не маркированного списка – тег ul, элементы которого являются блочными контейнерами – li.

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

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

HTML

<div>
	<ul>
		<li>1</li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
	</ul>
</div>

CSS

.navigation {
	width: 100%;
	text-align: center; /*пробуем центровать навигацию*/
	padding: 20px 0;
	background: #63beef; 
	float: left; 
}
ul {
	list-style: none;
	font-size: 12px;
	margin: 0 auto; 
	padding: 0;
}
li {
	float: left; /*блочные элементы в 1 строку*/
	margin-right: 4px;
	width: 23px;
	height: 19px;
	overflow: hidden;
	text-align: center;
	color: #63beef;
	font-weight: bold;
	position: relative; 
	background:#ddf3ff; 
	cursor: default;
	padding-top: 3px;
	border-radius:50%;
}
li a {
	color: #63beef;
	text-decoration: none;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	background:#fff;
	text-align: center;
	width: 23px;
	height: 22px;
	padding-top: 3px;
}

В примере этого кода мы попробовали выровнять блок с навигацией стандартным способом, используя для дочернего элемента свойство text-align. Однако, если прогоним наш код через браузер, то убедимся, что традиционное центрование не срабатывает. Это происходит из-за того, что ширина блока четко не определена.

Решение возникшей проблемы

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

HTML

<div>
	<span>
		<ul>
			<li>1</li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
		</ul>
	</span>
</div>

CSS

.navigation {
	width: 100%;
	text-align: center; 
	padding: 20px 0;
	background: #63beef; 
	float: left; 
}
ul {
	display: table; /* это определит
 зависимость ширины от содержимого */
	width: auto;
	margin: 0 auto; 
	list-style: none;
	font-size: 12px;
	padding: 0;
}
* html .navigation span {/*хак для IE*/
	display: inline-block;
}
*:first-child+html . navigation span {/*хак для IE*/
	display: inline-block;
}
li {
	float: left; /*блочные элементы в 1 строку*/
	margin-right: 4px;
	width: 23px;
	height: 19px;
	overflow: hidden;
	text-align: center;
	color: #63beef;
	font-weight: bold;
	position: relative; 
	background:#ddf3ff; 
	cursor: default;
	padding-top: 3px;
	border-radius:50%;
}
li a {
	color: #63beef;
	text-decoration: none;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	background:#fff;
	text-align: center;
	width: 23px;
	height: 22px;
	padding-top: 3px;
}

По итогу получаем навигацию по центру страницы, как показано на рисунке

Из кода видно, что проблемная ситуация с IE снова повторяется, впрочем, ничего удивительного. Единственное, что следует отметить по этому поводу, это то, что в реальных условиях при использовании такого кода, костыли для старичка нужно вставлять через условные комментарии.

Также следует отметить серьезный недостаток этого метода. Наш код не сможет пройти проверку на влидацию, так как, в соответствии со спецификацией, строчный элемент не должен содержать в себе блочные теги. Замена вспомогательного строчного элемента span на блочный не допустима, так как IE не переопределит навигацию в центре страницы в таком случае.

Валидное решение

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

HTML

<div>
	<span>
		<ul>
			<b>1</b>
			<a href="#">2</a>
			<a href="#">3</a>
			<a href="#">4</a>
		</ul>
	</span>
</div>

CSS

.navigation {
	width: 100%;
	text-align: center; 
	padding: 20px 0;
	background: #63beef; 
}
span {
	display: table; 
	width: auto;
	margin: 0 auto; 
	font-size: 12px;
	padding: 0;
}
* html .navigation span {/*хак для IE*/
	display: inline-block;
}
*:first-child+html .navigation span {/*хак для IE*/
	display: inline-block;
}
a, b {
	float: left; /*блочные элементы в 1 строку*/
	margin-right: 4px;
	width: 23px;
	height: 19px;
	overflow: hidden;
	text-align: center;
	color: #63beef;
	font-weight: bold;
	position: relative; 
	background:#ddf3ff; 
	cursor: default;
	padding-top: 3px;
	border-radius:50%;
	display: inline;
	text-decoration:none;
}

Результат данного способа будет совпадать с предыдущим примером. Стоит отметить следующую особенность данного решения: такая центровка будет слегка не точной, так как имеются лишние отступы. Если определены правые отступы, то его значение нужно обнулить у последнего элемента навигации, а если левые – то у первого.

Альтернативное решение без вспомогательных тегов и валидным кодом

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

Итак, это решение не нуждается в вспомогательных тегах для определения ориентации по центру. В тоже время код можно назвать семантичным и с валидацией тоже не возникает никаких проблем. Мы просто берем наш блочный не маркированный список и присваиваем ему свойство строчного элемента, воспользовавшись значением inline-block свойства display:

HTML

<div>
	<ul>
		<li>1</li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
	</ul>
</div>

CSS

. navigation {
	width: 100%;
	text-align: center; 
	padding: 20px 0;
	background: #63beef;  
}
ul {
	display: inline-block; 
	//display: inline; /*для IE*/
    zoom: 1; /*присваиваем ему layout*/
	list-style: none;
	font-size: 12px;
	padding: 0;
}
li {
	float: left; /*блочные элементы в 1 строку*/
	display: inline;/*для IE*/
	margin-right: 4px;
	width: 23px;
	height: 23px;
	overflow: hidden;
	text-align: center;
	color: #63beef;
	font-weight: bold;
	background:#ddf3ff; 
	cursor: default;
	border-radius:50%;
	line-height: 23px;
}
li a {
	color: #63beef;
	text-decoration: none;
	display:block;
	background:#fff;
	text-align: center;
	width: 23px;
	height: 23px;
}

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

И еще раз напоминаю, что хак для IE нужно скрывать через условные комментарии, чтобы не нарушить валидацию кода.

В каких браузерах работает?

6.0+5.0+9.5+3.0+3.0+

Оценок: 3 (средняя 5 из 5)

Оценка: 

Ключевые слова: 

CSS приемы

Понравилась статья? Расскажите о ней друзьям:

Еще интересное

Создание нескольких страниц с меню навигации

Содержание

  • 1 Введение
  • 2 меню HTML5
  • 3 Инструменты главного HTML-меню — ссылки, якоря и списки
  • 4 Потребность в гибкости
  • 5 Различные типы меню
    • 5.1 Внутристраничная навигация (оглавление)
    • 5.2 Навигация по сайту
      • 5.2.1 Создание у посетителей ощущения «Вы здесь»
      • 5.2.2 Сколько опций вы должны предоставить пользователям одновременно?
    • 5.3 Контекстные меню
    • 5.4 Файлы Sitemap
    • 5.5 Пагинация
  • 6 Когда списков недостаточно — карты изображений и формы
    • 6. 1 Настройка горячих точек с картами изображений
    • 6.2 Экономия места на экране и предотвращение перегрузки ссылок формами
  • 7 Куда поместить меню и предложить варианты его пропуска
  • 8 Резюме
  • 9 вопросов для упражнений

Введение

В этой статье учебного плана по веб-стандартам мы поговорим о навигации по веб-сайту и меню. Вы узнаете о различных типах меню и о том, как их создавать в HTML. Мы также коснемся темы удобства использования и доступности меню. Мы пока не будем углубляться в стилизацию меню, но в этой статье мы заложим основы. К этой статье можно загрузить примеры кода — мы будем ссылаться на них на протяжении всего руководства.

HTML5

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *