CSS и HTML5: Респонсив навигационное меню. Центр и выравнивание по правому краю

Внутри контейнера

список формируется с помощью

В HTML4 элемент

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

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

Синтаксис

пункт меню

Закрывающий тег

Обязателен.

Пример

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

Русская кухня. Уха бурлацкая

Украинская кухня. Вареники

Молдавская кухня. Паприкаш

Кавказская кухня. Суп-харчо

Прибалтийская кухня. Вертиняй

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

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

Примечание

Firefox поддерживает только создание контекстного меню, когда значение атрибута type равно context .

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации ) - первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living ) - он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

В этой статье я приведу обзор двух элементов HTML5 :

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

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

Когда мы говорим о menu , важно не путать его с тегом

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

Элемент

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

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

В этом заключается основное отличие между этими двумя элементами;

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

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

Элемент

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

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

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

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

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

Вариант JavaScript

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

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

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

Элементы

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

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

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

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

и т.д.:

Когда мы просматриваем этот код в браузере (в настоящее время, только в 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 градусов и отражать его. И добавьте каждую функцию в соответствующий пункт подменю вместе с параметром. Рабочий вариант такого меню вы можете посмотреть на этой демо-странице .

Элемент

не нов для HTML, но в пятой версии языка изменилось его лексическое назначение. Теперь он представляет собой список команд, который в зависимости от установленного значения атрибута type может выполнять три различных функции — контекстное меню, панель инструментов (toolbar) и произвольное меню с командами:

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

и обрабатывает его следующим образом:

Если встречается команда, то она добавляется в меню с учетом ее атрибутов.
Элемент
, а также
Если встречается
или , то браузер итеративно просматривает элементы внутри них, следуя этим же правилам.
Встретив элемент

Давайте рассмотрим подробнее способы добавления команд. В зависимости от действия при нажатии, команды делятся на три типа, описанные в следующей таблице:

HTML 5 предлагает также универсальный элемент , позволяющий создавать любые типы команд, устанавливая его атрибут type в одно из значений: command , radio или checkbox . Он обладает собственными атрибутами, повторяющими почти все возможности других элементов для создания команд.

Заголовок команды определяется в значении атрибута label . Можно также привязать к команде изображение, указав его абсолютный путь в атрибуте icon .

Чтобы объединить несколько переключателей в группу, применяется атрибут radiogroup (обязательный для переключателей). Достаточно указать одинаковое значение для всех элементов одной группы. В случае с применением элементов для этого применяется «родной» атрибут name , а несколько

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

Независимо от выбранного способа добавления команды, вы можете присвоить ей комбинацию клавиш для быстрого доступа, указав атрибут accesskey , о котором шла речь в главе «Элементы ввода ». Можно также указать accesskey не в самой команде, а в связанном с ней элементе , или даже в , находящемся в одном

с требуемой командой.

Создание контекстного меню

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

со списком необходимых пунктов

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

Кликни правой кнопкой, чтобы открыть контекстное меню.

Пункт 1

Пункт 2

5 комментариев

Любопытно и даже область применения весьма обширная. Жаль из-за ослика.... Ослик скоро вымрет... Нужно осваивать эту тему. Я рискнул взять на нормальный проект. Только не контекст... Ссыкотно с этими драфтами Любопытно что всё это не работает на данный момент ни в одном браузере, ибо в HTML5 данный тег ни в одном браузере не реализован. тоесть получается всё это теория на будущее и на данный момент практической ценности не имеет. поправьте если ошибаюсь Simple Green 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; }

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

Название документа

Попробовать »

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

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

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

Попробовать »

Теперь приступим к написанию 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; }

5 комментариев

В чем отличия

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

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

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

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

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

CSS и HTML5: Респонсив навигационное меню. Центр и выравнивание по правому краю

Синтаксис

Закрывающий тег

Пример

Примечание

Спецификация

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