CSS и HTML5: Респонсив навигационное меню. Как сделать с помощью html5 горизонтальное меню

Тег предназначен для отображения списка пунктов меню. Аналогично тегам и

внутри контейнера список формируется с помощью тегов
• .

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

  . В HTML5 тег вновь включен, но уже в другом качестве. Теперь он выступает контейнером для тега и создания меню.
  Синтаксис

  HTML	пункт меню пункт меню
  HTML5	...

  Атрибуты Устанавливает видимую метку для меню. Задает тип меню. Закрывающий тег

  Обязателен.

  Валидация

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

  HTML 4.01 IE Cr Op Sa Fx

  Тег MENU

  В этом выпуске:

  • Русская кухня. Уха бурлацкая
  • Украинская кухня. Вареники
  • Молдавская кухня. Паприкаш
  • Кавказская кухня. Суп-харчо
  • Прибалтийская кухня. Вертиняй

  Результат данного примера показан на рис. 1.

  Рис. 1. Вид списка, созданного с помощью тега

  HTML5 IE Cr Op Sa Fx

  Тег MENU

  • Новый... Открыть... Сохранить
  • Копировать Вырезать Вставить

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

  В чем отличия

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

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

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

  В nav можно поместить как список, так и просто набор ссылок. Мне кажется, это даже более простое и правильное решение, хотя во многих шаблонах по-прежнему видно реализацию меню с помощью тегов ul, li, a.

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

  Как сделать с помощью html5 горизонтальное меню

  Главная Услуги Контакты Отзывы

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

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

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

  display : block ;

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

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

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

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

  a{ text-decoration: none; color: #fff; padding: 5px; font-size: 22px; display: block; background: linear-gradient(to right, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); width: 200px; text-align: center }

  text - decoration : none ; color : #fff; padding : 5px ; font - size : 22px ; display : block ; background : linear - gradient (to right , rgba (96 , 108 , 136 , 1 ) 0 % , rgba (63 , 76 , 107 , 1 ) 100 % ) ; width : 200px ; text - align : center

  Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню - раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью 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; }

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

    Название документа #navbar { margin: 0; padding: 0; list-style-type: none; width: 100px; } #navbar li { border-left: 10px solid #666; border-bottom: 1px solid #666; } #navbar a { background-color: #949494; color: #fff; padding: 5px; text-decoration: none; font-weight: bold; border-left: 5px solid #33ADFF; display: block; }

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

    При наведении курсора мыши на пункт меню его внешний вид может изменяться, привлекая к себе внимание пользователя. Создать такой эффект можно с помощью псевдо-класса: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; }

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

    Элемент Menu против элемента Nav

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

    Элемент представляет собой набор команд меню. Принцип его работы похож на стационарные или мобильные приложения. Стационарные приложения обычно используют меню для выполнения различных задач. Например, меню «Размытие » в Photoshop . Оно предназначено для выполнения задач по размытию выбранного слоя:

    Меню «Размытие» в Photoshop

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

    Использование элемента

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

    В данный момент мы сосредоточим свое внимание на создании контекстного меню.

    Контекстное меню

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

    
    

    Оригинальное контекстное меню в OS X и Ubuntu

    Вариант JavaScript

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

    
    

    Настроенное контекстное меню в Google Drive

    Оригинальное решение

    Элементы и будут добавлять новые пункты в версию оригинального контекстного меню. В приведенном ниже примере, мы добавим в тег новый пункт контекстного меню под названием «Hello World «:

    Hello World

    Основными частями приведенного выше фрагмента кода являются атрибуты — id , type и contextmenu , которые определяют тип меню как context , а также область, где должно отображаться новое меню.

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

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

    Hello World

    Когда мы просматриваем этот код в браузере (в настоящее время, только в Firefox ), мы увидим, что menuitem , который мы объявили, выводится в самом верху списка:

    
    

    Новый пункт меню, «Hello World», который загружается как часть оригинального контекстного меню

    Добавление подменю и иконок

    Подменю представляют собой группу элементов со связанными или аналогичными действиями. Меню «Вращение изображения » в Photoshop является прекрасным примером этого. Оно включает в себя несколько пунктов подменю, которые позволяют пользователю выбрать угол поворота, а также направление вращения.

    Использование элемента menu при добавлении подменю является простым и понятным. Вложите еще один элемент с атрибутом label , чтобы объявить имя меню, например:

    Повернуть на 90 градусов Повернуть на 180 градусов Отразить по горизонтали Отразить по вертикали

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

    
    

    Иконки

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

    Повернуть на 900 Повернуть на 1800 Отразить по горизонтали Отразить по вертикали

    И в нашем меню появятся иконки, как вы можете видеть на рисунке ниже:

    
    

    Каждый пункт подменю теперь иллюстрирован иконкой

    Добавление функций в меню

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

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

    Rotate-90 { transform: rotate(90deg); }

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

    function imageRotation(name) { document.getElementById("image").className = name; }

    Добавьте эту функцию в соответствующий с помощью атрибута onclick и передайте параметр с именем класса rotate-90 :

    R Повернуть на 900 Повернуть на 1800 Отразить по горизонтали Отразить по вертикали

    Чтобы закончить наше подменю, создайте стили, которые будут вращать изображение на 180 градусов и отражать его. И добавьте каждую функцию в соответствующий пункт подменю вместе с параметром. Рабочий вариант такого меню вы можете посмотреть на этой демо-странице .

    Мы предлагаем вам ознакомиться с новой техникой по созданию респонсив (адаптивного) меню без использования Javascript. Она использует чистые и семантические разметки HTML5. Меню может быть выровнено по левому краю, по центру или справа. Это меню переключается при наведении, что является более удобным для пользователей. У него также есть индикатор, который показывает “работающий/поточный” пункт меню. Он работает на всех мобильных и настольных браузерах, включая Internet Explorer!

    Цель

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

    

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

    

    Nav HTML разметка

    Вот разметка для навигации. Тег необходим для создания выпадающего меню со свойством CSS абсолютной позиции. Мы объясним это в уроке позже. .current класс указывает на активные/текущие ссылки меню.

    • Portfolio
    • Illustration
    • Web Design
    • Print Media
    • Graphic Design

    CSS для навигации (вид с рабочего стола) является довольно простым, так что мы не собираемся вдаваться в подробности. Обратите внимание, что мы указали display:inline-block вместо float:left в NAV элемента

  • . Это позволит кнопкам меню выстроиться по левому краю, по центру или вправо, указав text-align на
    элементе.

    /* nav */ .nav { position: relative; margin: 20px 0; } .nav ul { margin: 0; padding: 0; } .nav li { margin: 0 5px 10px 0; padding: 0; list-style: none; display: inline-block; } .nav a { padding: 3px 12px; text-decoration: none; color: #999; line-height: 100%; } .nav a:hover { color: #000; } .nav .current a { background: #999; color: #fff; border-radius: 5px; }

    Центр и выравнивание по правому краю

    Как уже упоминалось выше, вы можете изменить выравнивание кнопок с помощью “text-align”.

    /* right nav */ .nav.right ul { text-align: right; } /* center nav */ .nav.center ul { text-align: center; }

    Поддержка Internet Explorer

    HTML5 тег и медиа запросы не поддерживаются Internet Explorer 8 и старше версиями. Включите CSS3-mediaqueries.js (или respond.js) и html5shim.js, чтобы обеспечить резервную поддержку. Если вы не хотите добавлять html5shim.js, то тогда замените тег на тег.

    Здесь начинается самое интересное - создание респонсивности меню с медиа запросами! На 600px мы установили nav элемент в относительное положение, чтобы возможно было поместить

    список меню вверху с абсолютной позицией. Мы скрыли все элементы
    • указав display:none, но оставили.current
    • отображающийся в виде блока. Затем на NAV ховере, мы поставили все
    • на display:block (это даст результат выпадающего списка). Мы добавили графический значок на проверку.current элемента, чтобы указать, что этот элемент является активным. Для выравнивания меню по центру и справа, используйте левую и правую собственности позиционирования
      списка.

      @media screen and (max-width: 600px) { .nav { position: relative; min-height: 40px; } .nav ul { width: 180px; padding: 5px 0; position: absolute; top: 0; left: 0; border: solid 1px #aaa; background: #fff url(images/icon-menu.png) no-repeat 10px 11px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.3); } .nav li { display: none; /* hide all

      • items */ margin: 0; } .nav .current { display: block; /* show only current
      • item */ } .nav a { display: block; padding: 5px 5px 5px 32px; text-align: left; } .nav .current a { background: none; color: #666; } /* on nav hover */ .nav ul:hover { background-image: none; } .nav ul:hover li { display: block; margin: 0 0 5px; } .nav ul:hover .current { background: url(images/icon-check.png) no-repeat 10px 7px; } /* right nav */ .nav.right ul { left: auto; right: 0; } /* center nav */ .nav.center ul { left: 50%; margin-left: -90px; } }

        Высоких конверсий!