Как сделать верхнюю панель в html

Как сделать верхнюю панель в html

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

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

Вертикальное меню

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

После установки свойства display: block мы можем определить у блока ссылки ширину, отступы и т.д.

Горизонтальное меню

Для создания горизонтального меню есть два метода. Первый заключается в применении свойства float и создании из ссылок плавающих элементов, которые обтекают друг друга с слева. И второй способ состоит в создании строки ссылок с помощью установки свойства display: inline-block .

Использование float

Алгоритм создания панели навигации с помощью float разделяется на два этапа. На первом этапе у элемента li , в который заключена ссылка, устанавливается float: left; . Это позволяет расположить все элементы списка в ряд при достаточной ширине, когда правый элемент списка обтекает левый элемент списка.

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

inline и inline-block

Для создания горизонтальной панели навигации нам надо сделать каждый элемент li строчным, то есть установить для него display: inline . После этого для элемента ссылки, которая располагается в элементе li , мы можем установить display: inline-block :

Создаем фиксированное навигационное меню

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

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

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

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

Обновлено: 2014-09-18 11:06:30 Сергей Бензенко автор материала

Примеры

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

Ниже я привожу несколько ссылок.

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

Разработчики онлайн-публикатора 99U встроили в навигационную панель меню навигации. Во время чтения новости пользователь ресурса имеет возможность моментального перехода в необходимый ему раздел сайта:

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

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

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

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

Создание фиксированной навигационной панели

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

Ниже демонстрационный пример того, как это выглядит на практике:

HTML

Разметка требуется минимальная — элемент блочной верстки, в который мы поместим содержимое фиксированной навигационной панели:

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

Но если вы не хотите использовать nav, то подойдет любой по умолчанию блочный элемент, например div . Также можно использовать inline -элемент, такой как span , но прописать ему в CSS -коде свойство display: block .

CSS

Вот CSS -код, который заставляет нашу навигационную панель фиксироваться в одном месте:

.fixed-nav-bar

Ранее, мы присвоили нашему HTML -элементу класс fixed-nav-bar , поэтому сейчас просто применим к данному селектору нужные стили.

Значения трех последних свойств ( width , height и background-color ) меняйте на подходящие для вашего сайта.

Давайте теперь рассмотрим подробнее эти четыре волшебных CSS -свойства, ответственных за магию:

position: fixed;

Когда мы устанавливаем значение position равным fixed панель позиционируется относительно области просмотра. Это и позволяет панели оставаться на одном месте:

top: 0; left: 0; right: 0;

Устанавливая свойства top , left и right в 0, мы избегаем нежелательного появления отступов по сторонам панели навигации.

Подсказка : если нужно разместить панель в » подвале » области просмотра то, нужно просто заменить top: 0 на bottom: 0 :

z-index: 9999;

Такое большое значение z-index используется, чтобы избежать появления другого элемента HTML -разметки поверх фиксированной панели навигации ( если конечно не появится элемента со значением z-index больше, чем 9999 ).

На этом, пожалуй, все.

Примечание

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

Исследуйте исходный код, если вам станет интересно, как работает эта часть ( если возникнут непонятные моменты, просто делайте tweet и я буду счастлив помочь вам разобраться ).

Подводя итоги

Фиксированная панель навигации довольно проста в реализации. Она требует минимальной HTML -разметки и всего несколько CSS -свойств, которые мы с вами рассмотрели.

Обсуждаемый в этой статье метод имеет отличную кроссбраузерную совместимость, потому как использует только проверенные и надежные свойства CSS , и, таким образом, будет работать должным образом даже в самых древних веб-браузерах. Тем не менее, если обратная совместимость сильно важна для ваших проектов, вы можете принять решение о замене nav ( который относится к HTML5 ) на div .

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

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

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

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

Вертикальная

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

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

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

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

и
идеально подходят для этих целей:

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

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

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

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

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

 li a

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

 ul < list-style-type: none; margin: 0; padding: 0; width: 60px; >li 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; >/* Изменяем цвет ссылки при наведении курсора */ li a:hover

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

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

 .active

Центрирование ссылок и добавление рамок

. Если также нужна рамка внутри панели навигации, добавьте свойство border-bottom для всех элементов
, кроме последнего:

 ul < border: 1px solid #555; >li < text-align: center; border-bottom: 1px solid #555; >li:last-child

Вертикальная панель навигации, зафиксированная на всю высоту

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

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

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

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

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

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

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

 li < float: left; >a

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

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

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

 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

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

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

 .active

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

Можно выровнять ссылки по правому краю. Для этого задайте обтекание справа для элементов списка ( float: right; ):

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

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

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

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

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

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

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

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

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

Как сделать — Верхнюю панель навигации

Узнать, как создать верхнюю панель навигации с помощью CSS.

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

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

Шаг 1) Добавить HTML:

Пример

Пример

/* Добавить черный цвет фона для верхней навигации */
.topnav background-color: #333;
overflow: hidden;
>

/* Стиль ссылок внутри панели навигации */
.topnav a float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
>

/* Изменение цвета ссылок при наведении курсора */
.topnav a:hover background-color: #ddd;
color: black;
>

/* Добавить цвет для активной/текущей ссылки */
.topnav a.active background-color: #4CAF50;
color: white;
>

Совет: Чтобы создать удобные для мобильных устройств, отзывчивые навигационные панели, прочитайте наш Как сделать — Отзывчивая верхняя навигация учебник.

Совет: Зайдите на наш CSS Навигация Учебник чтобы узнать больше о навигационных панелях.