Как сделать навигационное меню в html и css горизонтальное

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

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

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

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

Пример

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

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

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

Пример

a <
display: block;
padding: 8px;
background-color: #dddddd;
>

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

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

Пример

Примеры горизонтального навбара

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

Пример

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

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; ):

Пример

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

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

Пример

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

li:last-child <
border-right: none;
>

Фиксированный навбар

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

Зафиксировать вверху

Зафиксировать внизу

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

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

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

Пример

ul <
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
>

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

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

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

Пример

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

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

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

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

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

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

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

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

Раскрывающаяся (выпадающая) панель навигации

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

ПАЛИТРА ЦВЕТОВ
ПРИСОЕДИНЯЙТЕСЬ!

Получите ваш
Сертификат сегодня!

Связь с админом

Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:

Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты

Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.

Очень простая горизонтальная панель навигации

Сегодняшний урок всецело посвящен созданию простой горизонтальной панели навигации.

Список

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

Вот наш пример HTML:

Вот и все, что для этого нужно! Заметьте, что я использовал один идентификатор, чтобы мы могли отличить нашу навигационную панель от всех других неупорядоченных списков на странице. Но если бы он был помещен в div с его собственным идентификатором (например, div “banner” или “header”), возможно, идентификатор не будет нужен. И да, я мог бы добавить еще больше идентификаторов и классов, если бы хотел усложнить пример, но сегодняшний урок посвящен простоте.

Как сделать его горизонтальным

По умолчанию наш список вертикальный. Итак, давайте сделаем его горизонтальным:

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

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

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

На данный момент наша панель навигации выглядит так:

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

Во-первых, мы зададим фон и границы для нашей панели навигации, изменив наш #nav в CSS таким образом:

Теперь давайте определим тегом “якорь” немного свободного места и зададим стиль:

Здесь я задаю “якорям” тип отображения “block”, чтобы убедиться, что они заполняют весь элемент списка и делают всю площадь активной. Затем я добавляю заполнение, чтобы немного растянуть их. Я также удаляю подчеркивание, делаю шрифт жирным, задаю красивый голубой цвет и добавляю границу с правой стороны от этого элемента, равную той, что мы добавили в верхней и нижней части нашего неупорядоченного списка.

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

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

А тут в одном месте собраны все CSS:

Это полезная основа для дальнейшей работы. 90% панелей навигации начинаются почти в точности как эта. Нужный вид панели – это всего лишь вопрос оформления.

Спасибо за внимание. Впереди еще очень много уроков на разные темы! Оставайтесь с нами! 🙂

P.S. По сравнению с другими меню, данное меню выглядит очень просто, но не надо об этом кричать в комментариях :). Это основа, используя которую, можно сделать нечто большее.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.cssnewbie.com
Перевел: Максим Шкурупий
Урок создан: 9 Октября 2009
Просмотров: 68953
Правила перепечатки

5 последних уроков рубрики "Для сайта"

Эффекты блочного раскрытия

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

15 полезных .htaccess сниппета для сайта на WordPress

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

20 бесплатных тем для WordPress в стиле Material Design

Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.

20 сайтов с креативным MouseOver эффектом

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

45+ бесплатных материалов для веб дизайнеров за август 2016

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

Горизонтальное меню для сайта. Создание горизонтального анимированного меню с фиксированной позицией на странице средствами CSS и jQuery

wordpress seo

От автора: Часто бывает так, что на одной странице необходимо разместить текст большого объема – какую-нибудь научную статью или что-то в этом роде. При этом может возникнуть требование отказаться от разделения статьи на страницы в силу технических ограничений или специфики текста. Казалось бы – и что в этом такого? Небольшой дискомфорт вызывает необходимость постоянно возвращаться (прокручивать) вверх страницы для того, чтобы добраться до навигации сайта и перейти в интересующий раздел. Попробуем решить эту проблему. Создадим горизонтальное анимированное меню с фиксированной позицией на странице средствами CSS и jQuery.

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

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

Шаг1. Разметка HTML

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

Все должно выглядеть приблизительно так:

Как видим, пункты навигационного меню собраны в неупорядоченный (маркированный) список. Далее идет простая форма поиска с одной кнопкой и одним полем для ввода текста (форма «упакована» в дополнительный блок div – это может понадобиться для CSS). В конце идет элемент span, который содержит текст для «ярлыка». Все это заключено в «контейнер» <div с целью более удобного позиционирования.

Шаг 2. CSS

Стили начнем прописывать, начиная с главного «контейнера» навигационной панели <div >

Сначала мы задаем фиксированную позицию контейнера position: fixed; – это ключевой момент для всей конструкции. Теперь меню будет на одном месте, несмотря на прокручивание страницы. Свойства left и top задают жесткое позиционирование контейнера относительно краев клиенской области браузера. Два свойства background: -moz-linear-gradient(top, #454545, #737373); и background: -webkit-gradient(linear, center top, center bottom from(#454545,), to(#737373)); позволяют сделать задний фон панели градиентным, перед этим мы определяем свойство background: #454545; чтобы обеспечить совместимость с браузерами без поддержки CSS3. Следующее свойство CSS3 – border-radius. С его помощью мы делаем нижний и верхний правые углы закругленными с радиусом закругления 10 пикселей. Определив при помощи свойства border внешнюю границу (рамку) толщиной 1 пиксель, далее при помощи CSS3-свойств box-shadow создам внешнюю тень от панели – таким образом, достигая более эффектного обрамления.

Далее прописываем свойства для списка элементов навигационной панели <ul >

Тот, кто хотя бы раз в жизни превращал маркированный HTML-список в горизонтальное навигационное меню при помощи CSS, должен понять предназначение этих определений стилей. Свойство margin-left носит «подстроечный» характер – с его помощью можно «подгонять» левый край первого элемента меню к левой границе области содержимого страницы. Использование border-left в данном конкретном случае носит спорный характер – о нем мы поговорим немного позже.

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

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

С помощью этого свойства можно «выдрать» элемент из общего потока отображения HTML-страницы и заставить его вести себя так, как нужно нам. В данном случае нам надо, чтобы ссылки, которые являются по умолчанию строчными (inline) элементами вели себя как блочные элементы (block) чтобы мы могли задать для них ширину и высоту, а также внутренние поля и внешние отступы. Свойства border-right и border-left позволяют имитировать эффектную границу – она как будто выгравирована на панели; это достигается за счет разницы цветов границ соседних элементов. Но тут возникает проблема – крайние элементы меню слева и справа будут иметь только одну границу:

(обратите внимание на правую границу крайнего справа элемента меню)

Для крайней правой границы это можно решить просто – сразу за ней будет идти блок с формой поиска, для него можно задать левую границу как для элемента меню и на этом дело казалось бы в шляпе, но ведь крайний левый элемент первый в списке, до него нет ни одного элемента, которому можно было бы задать правую границу border-right: 1px solid #333; но границу можно задать для левого края самого списка – помните, для селектора #navigation мы задавали правило border-left: 1px solid #333; &#8212; теперь вам должно стать понятно его предназначение. Решение, как я уже говорил, спорное, но ничего не мешает нам его применить, пока список и его верхний (в меню – левый) элемент не имеют внешних отступов и внутренних полей. При помощи псевдокласса CSS :hover создаем эффект визуального выделения пункта меню при наведении на него курсора:

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

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