Содержание

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

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

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

Вертикальная
  • Главная
  • Новости
  • Контакты
  • О нас
Горизонтальная
  • Главная
  • Новости
  • Контакты
  • О нас

  • Главная
  • Новости
  • Контакты
  • О нас

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

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

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

Так как в основе панели навигации должен лежать список ссылок, то элементы <ul> и <li> идеально подходят для этих целей:

Пример

<ul>
  <li><a href="default.asp">Главная</a></li>
  <li><a href="news.asp">Новости</a></li>
  <li><a href="contact. asp">Контакты</a></li>
  <li><a href="about.asp">О нас</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: 60px;
}
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;
}
/* Изменяем цвет ссылки при наведении курсора */
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; /* Разрешаем вывод полосы прокрутки, если в панели будет много контента */
}
Попробовать самому »

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

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

  • Главная
  • Новости
  • Контакты
  • О нас

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

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

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

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

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

Обтекание элементов списка

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

Пример

li {
  float: left;
}
a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}
Попробовать самому »

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

  • float: left; — Используем, чтобы заставить блочные элементы обтекать друг друга
  • display: block; — Позволяет нам определить для ссылок поля (а также высоту, ширину, отступы и т. д.)
  • padding: 8px; — Определяем поля между элементами <a>, чтобы они выглядели красиво
  • background-color: #dddddd; — Добавляем серый фон для элементов <a>
Совет: Если вам нужен фон для всего блока панели, то вы можете добавить 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;
}
Попробовать самому »

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

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

  • Главная
  • Новости
  • Контакты
  • О нас

Выроненные справа ссылки

Можно выровнять ссылки по правому краю.

Для этого задайте обтекание справа для элементов списка (float: right;):

  • Главная
  • Новости
  • Контакты
  • О нас

Пример

<ul>
  <li><a href="#home">Главная</a></li>
  <li><a href="#news">Новости</a></li>
  <li><a href="#contact">Контакты</a></li>
  <li><a href="#about">О нас</a></li>
</ul>
Попробовать самому »

Вертикальный разделитель ссылок

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

  • Главная
  • Новости
  • Контакты
  • О нас

Пример

/* Добавляем серую рамку справа от всех элементов списка */
li {
  border-right: 1px solid #bbb;
}
/* за исключением последнего (last-child) */
li:last-child {
  border-right: none;
}
Попробовать самому »

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

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

или внизу страницы:

Предупреждение: Данные примеры могут работать некорректно на мобильных устройствах.

Прилипающая панель навигации

Чтобы сделать прилипающую панель навигации, добавьте свойство position: sticky; для элемента <ul>.

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

position: fixed).

Пример

ul {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}
Попробовать самому »

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

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

Полупрозрачный текст на фоне изображения

Обзор структуры навигации веб-сайта в SharePoint Server — SharePoint Server

  • Статья

ОБЛАСТЬ ПРИМЕНЕНИЯ:2013 2016 2019 Subscription Edition SharePoint в Microsoft 365

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

Хорошо спланированная стратегия навигации по сайтам упрощает использование сайтов SharePoint Server.

SharePoint Server имеет множество функций, которые используют технологию поиска для предоставления владельцам сайтов способов динамического отображения содержимого на веб-страницах. Дополнительные сведения о сайтах на основе поиска см. в статье Plan for cross-site publishing in SharePoint Server.

Обзор элементов управления навигацией

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

По умолчанию SharePoint Server основывает свою модель навигации на иерархической структуре семейства веб-сайтов. Используя компоненты навигации, вы можете связать любой сайт с любыми другими сайтами в иерархии и со страницами на этих сайтах. Кроме того, можно создавать ссылки на произвольные расположения, например внешний веб-сайт.

Управляемая навигация . При использовании управляемой навигации создается набор терминов, представляющий иерархию навигации, а элементы управления навигацией отображают данные из набора терминов. Иерархию навигации можно изменить, изменив набор терминов. Подробнее см. в статье Overview of managed navigation in SharePoint Server. Управляемая навигация по умолчанию отключена во всех шаблонах сайтов, кроме шаблона семейства веб-сайтов портала публикации.

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

Общие элементы управления навигацией

Эталонная страница определяет внешнюю рамку веб-страниц на сайте. Эталонные страницы содержат элементы, которые должны присутствовать на всех страницах вашего сайта, например фирменная символика; распространенные команды, например поиск; элементы навигации, которые должны быть доступны на всем сайте. Эталонная страница часто содержит верхнюю панель навигации (ссылки в которой представлены в раскрывающихся меню) и вертикальную панель навигации.

Вы можете применять собственные стили к этим элементам управления навигацией с помощью компонента «Дизайнер» и любого HTML-редактора.

Верхняя панель ссылок

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

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

Другие возможности конфигурации верхней панели навигации:

  • создание ссылок на веб-страницы всех сайтов верхнего уровня только в SharePoint Server;

  • создание ссылок на определенные внешние сайты;

  • создание ссылок на определенные сайты или страницы, расположенные в любом месте сайта;

  • упорядочивание ссылок под заголовками только в SharePoint Server;

  • сортировка элементов на верхней панели ссылок вручную;

  • ограничение максимального количества элементов для показа на уровне глобальной структуры навигации только в SharePoint Server.

Все функции верхней панели ссылок, например создание ссылок на внешние сайты, можно уникально настроить для каждого сайта. На верхнем уровне вы можете добавлять, перемещать и переупорядочивать ссылки, нажимая ИЗМЕНИТЬ ССЫЛКИ.

С помощью компонента «Дизайнер» можно дополнительно настраивать внешний вид и функции верхней панели ссылок только в SharePoint Server.

Панель быстрого запуска

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

Возможности настройки панели быстрого запуска:

  • создание ссылок на сайты, расположенные на том же уровне иерархии сайта, что и текущий, только в SharePoint Server;

  • создание ссылок на определенные внешние сайты или страницы на текущем;

  • упорядочение ссылок под заголовками;

  • сортировка элементов в панели быстрого запуска вручную;

  • ограничение максимального количества элементов для показа на уровне структуры навигации только в SharePoint Server.

Если вы хотите добавить, удалить или переупорядочить ссылки, в вертикальной панели навигации нажмите ИЗМЕНИТЬ ССЫЛКИ. Можно также добавлять, удалять, переупорядочивать ссылки и создавать новые заголовки в параметрах сайта. Чтобы включить или отключить панель быстрого запуска, щелкните значок с шестеренкой в верхнем правом углу и выберите Параметры сайта. В области Внешний вид и удобство использования выберите Представление в виде дерева, а затем установите флажок Включить область быстрого запуска.

Аналогично настройке верхней панели навигации можно настраивать внешний вид и функции вертикальной панели навигации, используя «Дизайнер», только в SharePoint Server.

Представление в виде дерева

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

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

Навигация для метаданных

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

Управляемая навигация

Управляемая навигация позволяет определять и поддерживать навигацию на сайте, применяя наборы терминов. Этот метод дополняет существующую навигацию SharePoint, основанную на структуре сайта. Структуру управляемой навигации можно создать, добавляя термины в наборы терминов с помощью средства управления банком терминов. Набор терминов навигации можно скопировать и перевести на языки, используемые для вариантов надписей. Подробнее см. в статье Overview of managed navigation in SharePoint Server.

Веб-части навигации

Веб-часть — это элемент управления, который авторы могут вставить в зону веб-частей на странице и настроить. Для таких элементов управления, как «Сводные ссылки», «Оглавление», «Запрос контента» и «Поиск контента», есть аналоги в виде веб-частей, которые авторы страниц могут вставлять в зоны веб-частей на страницах. Для веб-частей предусмотрены такие же возможности конфигурации и функции, как и для соответствующих им элементов управления. Но они настраиваются при вставке на страницу, а не при добавлении в макет страницы дизайнером сайта. Чтобы авторы страниц могли вставлять на страницы веб-части навигации, добавьте в макет страницы одну или несколько зон веб-частей или включите в страницу элемент управления «Редактор форматированного текста» (это позволит пользователям добавлять веб-части прямо в веб-часть «Редактор форматированного текста»).

Следующие веб-части навигации доступны только для сайтов, не являющихся сайтами публикации:

  • Сведение контента категории отображает категории из каталога веб-сайтов;

  • Сведение контента объединение сайтов отображает выбранные вами сайты;

  • Сведение контента сайты в категории отображает сайты из каталога веб-сайтов в определенной категории;

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

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

Примечание.

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

См. также

Понятия

Обзор управляемой навигации в SharePoint Server

Управление веб-частями в SharePoint Server

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

Содержание

  • 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