Класс menu в html

Обзор элементов HTML5 “Menu” и “Menuitem”

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

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

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

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

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

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

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

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

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

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

Вариант JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

Иконки

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

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

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

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

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

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

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

function imageRotation(name)

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

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

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

Заключение

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

Редакция Перевод статьи « Introducing the HTML5 “Menu” and “Menuitem” Elements »

Источник

: The Menu element

This element only includes the global attributes.

Usage notes

Note: In early versions of the HTML specification, the element had an additional use case as a context menu. This functionality is considered obsolete and is not in the specification.

Examples

Toolbar

In this example, a is used to create a toolbar for an editing application.

HTML

menu> li>button onclick="copy()">Copybutton>li> li>button onclick="cut()">Cutbutton>li> li>button onclick="paste()">Pastebutton>li> menu> 

Note that this is functionally no different from:

ul> li>button onclick="copy()">Copybutton>li> li>button onclick="cut()">Cutbutton>li> li>button onclick="paste()">Pastebutton>li> ul> 

CSS

menu, ul  display: flex; list-style: none; padding: 0; width: 400px; > li  flex-grow: 1; > button  width: 100%; > 

Result

Technical summary

Flow content. If the element’s children include at least one element: Palpable content.

Zero or more occurrences of , , and .

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 13, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

CSS меню

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#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

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

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

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

#navbar ul < display: none; >#navbar li:hover ul

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

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

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

#navbar ul < display: none; position: absolute; top: 100%; >#navbar li < float: left; position: relative; >#navbar

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

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

#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

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru

Источник