СSS Панель навигации. Создание панели навигации Как сделать меню навигации в html

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

Примечание: результат урока полноценно работает в браузерах, поддерживающих CSS3.

Разметка HTML

Для каждого отдельного слайда, который будет содержать либо набор ссылок, либо информацию, либо подслайд, создадим элемент div с классом cn-slide . Для подслайдов, которые содержат две ссылки в строке, будем использовать другой класс cn-slide-sub . Слайд с информацией просто будет иметь класс cn-slide .

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

Подслайды и слайды с информацией содержат ссылки на предыдущий слой.

CSS

Основной контейнер имеет свойства min-width и max-width , которые позволяют нам использовать для задания ширины проценты в условиях ганатии, что элемнет не станет слишком большим или маленьким:

Cn-container{ width: 60%; min-width: 300px; max-width: 820px; margin: 10px auto 0 auto; text-align: left; position: relative; }

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

Cn-container h2{ font-family: "PT Sans Narrow", "Arial Narrow", Arial, sans-serif; font-variant: small-caps; font-weight: 700; color: #fff; position: absolute; z-index: 1000; text-shadow: 0 0 1px rgba(255,255,255,0.8), 1px 1px 1px rgba(0,0,0,0.2); font-size: 80px; line-height: 80px; top: 0px; right: 200px; white-space: nowrap; opacity: 0; -webkit-transition: all 0.3s linear 0.4s; -moz-transition: all 0.3s linear 0.4s; -o-transition: all 0.3s linear 0.4s; -ms-transition: all 0.3s linear 0.4s; transition: all 0.3s linear 0.4s; } .cn-container .cn-slide:target h2{ right: 0px; opacity: 1; }

Слайды также позиционируются абсолютно. Начальная непрозрачность слайдов устанавливается равной 0. Они выводятся только тогда, когда являются целью:

Cn-slide{ text-align: center; position: absolute; left: -100%; padding-top: 80px; margin: 0 5%; width: 90%; opacity: 0; -webkit-transition: left 0.4s linear, opacity 0.4s linear; -moz-transition: left 0.4s linear, opacity 0.4s linear; -o-transition: left 0.4s linear, opacity 0.4s linear; -ms-transition: left 0.4s linear, opacity 0.4s linear; transition: left 0.4s linear, opacity 0.4s linear; } .cn-slide:target{ left: 0px; opacity: 1; }

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

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

Cn-slide nav a{ text-align: left; display: block; font-family: "PT Sans Narrow", "Arial Narrow", Arial, sans-serif; font-variant: small-caps; font-weight: 700; border: 8px solid #fff; padding: 2%; font-size: 66px; letter-spacing: 7px; text-shadow: 0px 0px 10px rgba(255,255,255,0.9); color: rgba(255,255,255,0.1); line-height: 66px; margin: 0 0 10px 0; outline: none; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); background: #fff url(../images/1.jpg) no-repeat center center; -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; background-clip: padding-box; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .cn-slide nav a:hover{ box-shadow: 1px 3px 7px rgba(0,0,0,0.25); text-shadow: 1px 1px 1px rgba(0,0,0,0.1); color: rgba(255,255,255,0.9); }

Cn-slide-sub nav a{ width: 42%; display: inline-block; font-size: 40px; }

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

Cn-slide-sub nav a:nth-child(odd){ margin-right: 5px; }

Слайд с информацией является конечной точкой переходов:

Cn-content{ background: #80B8CE url(../images/1.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; text-align: left; padding: 20px 20px 5px; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); border: 8px solid #fff; margin-top: 5px; cursor: pointer; }

Каждая область с содержанием соответствует блоку ссылки. Фоновое изображение будет установлено позже:

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

Cn-content:active p{ opacity: 0; } .cn-content p{ line-height: 24px; text-shadow: 1px 1px 1px rgba(255,255,255,0.9); color: rgba(103,59,77,0.9); padding: 15px 20px; margin-bottom: 10px; background: rgba(255,255,255,0.96); font-style: italic; border-top: 7px solid rgba(103,59,77,0.6); -webkit-transition: opacity 0.3s linear; -moz-transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; -ms-transition: opacity 0.3s linear; transition: opacity 0.3s linear; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

Стрелка возврата выскальзывает слева. Сначала она имеет положение -100px, а при активации слайда выдвигается в положение 3px:

Cn-back{ outline: none; text-indent: -9000px; width: 49px; height: 42px; background: transparent url(../images/arrow.png) no-repeat center center; position: absolute; top: 22px; left: -100px; cursor: pointer; opacity: 0; -webkit-transition: all 0.4s ease-in-out 0.5s; -moz-transition: all 0.4s ease-in-out 0.5s; -o-transition: all 0.4s ease-in-out 0.5s; -ms-transition: all 0.4s ease-in-out 0.5s; transition: all 0.4s ease-in-out 0.5s; } .cn-slide:target .cn-back{ left: 3px; opacity: 1; }

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

/* Основные пункты */ .cn-slide nav a{ background-image: url(../images/1.jpg); } .cn-slide nav a{ background-image: url(../images/2.jpg); } .cn-slide nav a{ background-image: url(../images/3.jpg); } /* Пункты и подпункты для слайда 1*/ .cn-slide nav a, #slide-1-1 .cn-content { background-image: url(../images/4.jpg); } .cn-slide nav a, #slide-1-2 .cn-content { background-image: url(../images/5.jpg); } .cn-slide nav a, #slide-1-3 .cn-content { background-image: url(../images/6.jpg); } .cn-slide nav a, #slide-1-4 .cn-content { background-image: url(../images/7.jpg); } /* Пункты и подпункты для слайда 2*/ .cn-slide nav a, #slide-2-1 .cn-content { background-image: url(../images/8.jpg); } .cn-slide nav a, #slide-2-2 .cn-content { background-image: url(../images/9.jpg); } .cn-slide nav a, #slide-2-3 .cn-content { background-image: url(../images/10.jpg); } .cn-slide nav a, #slide-2-4 .cn-content { background-image: url(../images/11.jpg); } /* Пункты и подпункты для слайда 3*/ .cn-slide nav a, #slide-3-1 .cn-content { background-image: url(../images/12.jpg); } .cn-slide nav a, #slide-3-2 .cn-content { background-image: url(../images/13.jpg); } .cn-slide nav a, #slide-3-3 .cn-content { background-image: url(../images/14.jpg); } .cn-slide nav a, #slide-3-4 .cn-content { background-image: url(../images/15.jpg); }

В завершение определяем несколько медиа запросов для формирования шаблона на маленьких размерах экрана. Лучше всего определить точки разлома шаблона и установить для них правила изменения. В нашем случае таких точек две: 1060 px и 900 px. Изменим размер шрифта, а в подслайдах дуем использовать только один элемент в строке.

@media screen and (max-width: 1060px){ .cn-slide-sub nav a{ font-size: 28px; } } @media screen and (max-width: 900px){ .cn-container h2{ font-size: 48px; line-height: 95px; } .cn-slide nav a{ font-size: 38px; } .cn-slide-sub nav a{ width: auto; font-size: 36px; display: block; } .cn-slide-sub nav a:nth-child(odd){ margin-right: 0px; } }

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

✓ Нажав на заголовок, вы попадете непосредственно на страницу с детальным описанием всего процесса, а жмякнув по картинке, перейдете на страницу с примером работы выбранного вами меню ツ

1.

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

2.

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

3.

Подробный мануал по созданию красивого меню в стиле «аккордеон» с помощью CSS и библиотеки jQuery. Меню тестировалось и замечательно работает во всех современных браузерах. Использование функции линейного градиента css3 в оформлении, делает это меню более выразительным и динамичным.

4.

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

5.

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

6.

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

7.

Еще одно интересное решение в плане создания многоуровневого меню навигации с использованием jQuery. Кросс-браузерность конечного продукта, JQuery анимация и градиент CSS3 делает навигационный блок еще более привлекательным.

8.

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

9.

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

10.

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

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

Список

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

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

Вот наш пример 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. По сравнению с другими меню, данное меню выглядит очень просто, но не надо об этом кричать в комментариях:). Это основа, используя которую, можно сделать нечто большее.

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

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

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

С помощью 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 ссылки