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

горизонтальный

Навигация Бары

Имея легкий в использовании навигации имеет важное значение для любого веб-сайта.

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

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

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

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

Панель навигации в основном список ссылок, так что с помощью

и
• элементы имеет смысл:

  пример

  
  
  • Home
  
  
  • News
  
  
  • Contact
  
  
  • About
  
  
  Попробуй сам "

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

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

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

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

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

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

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

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

  Вы также можете установить ширину

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

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

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

  пример

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

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

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

  Попробуй сам "

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

  Добавить text-align:center для

  • или к центру ссылки.

    Добавьте border свойство

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

      Полноразмерные Фиксировать вертикально Navbar

      Создание полной высоты, "sticky" боковой навигации:

      пример

      Ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 25%;
      background-color: #f1f1f1;
      height: 100%; /* Full height */
      position: fixed; /* Make it stick, even on scroll */
      overflow: auto; /* Enable scrolling if the sidenav has too much content */
      }

      Попробуй сам "

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

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

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

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

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

    • элементы как встроенные, в дополнение к "standard" коду выше:

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

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

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

      Другой способ создания горизонтальной панели навигации, чтобы плавать на

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

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

      • float: left; - использование с плавающей точкой, чтобы получить блок элементов, чтобы скользить рядом друг с другом
      • display: block; - Отображение ссылок в виде блока элементов делает всю площадь ссылка кликабельным (а не только текст), и это позволяет нам указать отступы (и height, width, margins и т.д. , если вы хотите)
      • 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;
      }

      /* Change the link color to #111 (black) on hover */
      li a:hover {
      background-color: #111;
      }

      Попробуй сам "

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

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

      Щелкните правой кнопкой Align ссылки

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

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

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

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

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

      • Главная
      • Контакты
      • О сайте

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

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

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

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

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

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

      • Главная
      • Блог
      • Контакты
      • О сайте

      inline и inline-block

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

      • Главная
      • Блог
      • Контакты
      • О сайте

      Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню - раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью CSS и HTML .

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

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

      • нашего списка будет содержать по одной ссылке:
        • Главная
        • Новости
        • Контакты
        • О нас

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

        #navbar { margin: 0; padding: 0; list-style-type: none; width: 100px; }

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

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

        #navbar a { background-color: #949494; color: #fff; padding: 5px; text-decoration: none; font-weight: bold; border-left: 5px solid #33ADFF; display: block; } #navbar li { border-left: 10px solid #666; border-bottom: 1px solid #666; }

        Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:

        • Главная
        • Новости
        • Контакты
        • О нас
        Попробовать »

        При наведении курсора мыши на пункт меню его внешний вид может изменяться, привлекая к себе внимание пользователя. Создать такой эффект можно с помощью псевдо-класса:hover.

        Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:

        #navbar a:hover { background-color: #666; border-left: 5px solid #3333FF; } Попробовать »

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

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

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

      • нужно присвоить значение inline, чтобы пункты списка располагались друг за другом.

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

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

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

        #navbar { margin: 0; padding: 0; list-style-type: none; } #navbar li { display: inline; } Попробовать »

        Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:

        #navbar { margin: 0; padding: 0; list-style-type: none; border: 2px solid #0066FF; border-radius: 20px 5px; width: 550px; text-align: center; background-color: #33ADFF; } #navbar a { color: #fff; padding: 5px 10px; text-decoration: none; font-weight: bold; display: inline-block; width: 100px; } #navbar a:hover { border-radius: 20px 5px; background-color: #0066FF; } Попробовать »

        Выпадающее меню

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

        Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:

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

        Подпункты мы разместим в отдельном списке, вложив его в элемент

      • , который содержит родительскую ссылку относительно подпунктов. Теперь мы имеем четкую структуру нашей будущей панели навигации:
        • Главная
        • Новости
        • Контакты
          • Адрес
          • Телефон
          • Email
        • О нас
        Попробовать »

        Теперь приступим к написанию CSS кода. Для начала необходимо скрыть список с подпунктами с помощью объявления display: none;, чтобы они не отображались на веб-странице все время. Для отображения подпунктов нам нужно чтобы при наведении на элемент

      • список снова был преобразован в блочный элемент:

        #navbar ul { display: none; } #navbar li:hover ul { display: block; }

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

        #navbar, #navbar ul { margin: 0; padding: 0; list-style-type: none; } #navbar li { float: left; } #navbar ul li { float: none; }

        Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative; , а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.

        #navbar ul { display: none; position: absolute; top: 100%; } #navbar li { float: left; position: relative; } #navbar { height: 30px; } Попробовать »

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

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

        #navbar ul { display: none; background-color: #f90; position: absolute; top: 100%; } #navbar li:hover ul { display: block; } #navbar, #navbar ul { margin: 0; padding: 0; list-style-type: none; } #navbar { height: 30px; background-color: #666; padding-left: 25px; min-width: 470px; } #navbar li { float: left; position: relative; height: 100%; } #navbar li a { display: block; padding: 6px; width: 100px; color: #fff; text-decoration: none; text-align: center; } #navbar ul li { float: none; } #navbar li:hover { background-color: #f90; } #navbar ul li:hover { background-color: #666; }

        Список

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

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

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

        
        
        • About Us
        
        
        • Our Products
        
        
        • FAQs
        
        
        • Contact
        
        
        • Login
        
        

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

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

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

        #nav {
        width: 100%;
        float: left;
        margin: 0 0 3em 0;
        padding: 0;
        list-style: none; }
        #nav li {
        float: left; }

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

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

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

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

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

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

        #nav {
        width: 100%;
        float: left;
        margin: 0 0 3em 0;
        padding: 0;
        list-style: none;
        background-color: #f2f2f2;
        border-top: 1px solid #ccc; }

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

        #nav li a {
        display: block;
        padding: 8px 15px;
        text-decoration: none;
        font-weight: bold;
        color: #069;
        border-right: 1px solid #ccc; }

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

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

        #nav li a:hover {
        color: #c00;
        background-color: #fff; }

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

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

        #nav {
        width: 100%;
        float: left;
        margin: 0 0 3em 0;
        padding: 0;
        list-style: none;
        background-color: #f2f2f2;
        border-bottom: 1px solid #ccc;
        border-top: 1px solid #ccc; }
        #nav li {
        float: left; }
        #nav li a {
        display: block;
        padding: 8px 15px;
        text-decoration: none;
        font-weight: bold;
        color: #069;
        border-right: 1px solid #ccc; }
        #nav li a:hover {
        color: #c00;
        background-color: #fff; }

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

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

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

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

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

        Что такое навигация? Это набор ссылок, зачастую упорядоченных и сгруппированных по смыслу. Навигационное меню часто создается с использованием HTML-тега списка

        , где в каждом пункте
        • содержится одна ссылка . В HTML5 для навигации ввели отдельный тег