Подменю html: Горизонтальное выпадающее меню

Можно ли выбрать (активировать) подменю в меню ul/ol-styled только с помощью клавиши [Tab], чтобы подменю было видно? Я попробовал использовать псевдокласс: focus ul li a:focus + ul li a .

У меня есть это меню со скользящим вниз подменю: <ul class=sf-menu> <li class=menu-item current-menu-item> <a> whatever </a> <ul class=sub-menu> <li class=menu-item…

Я пытаюсь сделать выпадающее меню с чистыми html и css, но подменю исчезают, когда курсор покидает родительский li, что мешает мне нажать на подменю. Вот ссылка на тестовый сайт, текст ссылки Я был…

Я пробовал довольно много руководств по тому, как заставить подменю работать. Некоторые из них включают JS. Теперь я пытаюсь использовать подход just css, но я как бы застрял на том, чтобы заставить…

Я несколько новичок в jQuery, и я пытаюсь создать мобильное меню с подменю, которые открываются на событии click. Моя проблема в том, что: Есть еще элементы с классом tile, которые имеют подменю, и,. ..

Я разрабатываю приложение, которое имеет вертикальное подменю. Я хочу добавить подменю в уже существующее вертикальное подменю как добавить подменю в вертикальное подменю с помощью HTML и CSS?

Я пытаюсь создать выпадающее меню с подменю, которое выравнивается с родительскими элементами в HTML/CSS,, но у меня возникли проблемы с правильным выравниванием. Прямо сейчас подменю просто…

Я пытаюсь заставить пункты подменю исчезнуть через определенное время, используя только CSS. К сожалению, если у меня есть более одного подменю и я навожу курсор на следующее подменю, то другое еще…

Я работаю над этим HTMl, CSS и, возможно, над некоторыми javascript. Я пытаюсь создать меню с подменю, поэтому, когда я навожу курсор на свое меню, я хочу, чтобы подменю отображалось ниже с…

Подменю на CSS

Вы здесь: Главная — CSS — CSS Основы — Подменю на CSS

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

Привожу сразу CSS-код:

Самое главное здесь — это селектор «li:hover ul«. Фактически, он и показывает содержимое меню. По умолчанию, оно «

Привожу и HTML-код:

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

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

• Создано 22.06.2011 14:18:07
• Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   [URL=»https://myrusakov. ru»]Как создать свой сайт[/URL]

Подменю В Css/Html

У меня есть подменю, которое расширяется из объекта типа навигационного меню, когда я навис над ним. Прямо сейчас, мое главное навигационное меню выглядит так…

<div id= "navbar">
<ul>
<li><a href= "#" class= "navlink" id= "first"> First
<div class= "firstsubmenu">
<ul>
<li> <a href= "#"> First sub menu option </li>
<li> <a href= "#"> Second sub menu option </li>
etc...
</ul>
</div></a></li>
<li><a href= "#" class= "navlink"> Second
<div class= "secondsubmenu">
<ul>
..and so on 
</ul>
</div>

Прямо сейчас, мой css выглядит

ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}

li
{
float:left;
}

. navlink:link
{
display:block;
width:120px;
text-align:center;
padding:10px;
text-decoration:none;
color:#FFFFFF;
}

.navlink:hover 
{
background-color:#ADD8E6;
color:#FFFFFF;
}
.navlink:visited 
{
background-color:#ADD8E6;
color:#FFFFFF;
}

Прежде чем я попытался сделать каждый элемент в подменю кликабельной ссылкой, все получилось отлично. IE: firstsubmenu проявился отлично. Это css

.firstsubmenu
{
display : none;
position : absolute;
left : 75px;
top : 32px ;
background-color : red; 
width : 930px;
height : 25px;
z-index : 10;
}

Но теперь, когда я добавил ссылки (сделал каждый элемент списка внутри блока), firstsubmenu больше не появляется. CSS для каждой ссылки выглядел примерно так:

.firstsubmenulink
{
display:block;
width:120px;
text-align:center;
padding:10px;
text-decoration:none;
color:#FFFFFF;
}

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

Атрибут class | htmlbook.ru

Описание

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

Синтаксис

class="имя"

Значения

Имена классов могут содержать в себе латинские буквы (A–Z, a–z), цифры (0–9), символ дефиса (-) и подчеркивания (_). Использование русских букв в классах недопустимо.

Значение по умолчанию

Нет.

Применяется к тегам

<a>, <abbr>, <acronym>, <address>, <applet>, <area>, <b>, <basefont>, <bdo><bgsound>, <big>, <blockquote>, <body>, <br>, <button>, <caption>, <center>, <cite>, <code>, <col>, <colgroup>, <dd>, <del>, <dfn>, <dir>, <div>, <dl>, <dt>, <em>, <embed>, <fieldset>, <font>, <form>, <frame>, <h2>, <h3>, <h4>, <h5>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <isindex>, <kbd>, <label>, <legend>, <li>, <link>, <map>, <marquee>, <menu>, <nobr>, <object>, <ol>, <option>, <p>, <plaintext>, <pre>, <q>, <s>, <samp>, <select>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <u>, <ul>, <var>, <wbr>, <xmp>

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут class</title>
  <style>
    p { /* Обычный абзац */ 
    text-align: justify; /* Выравнивание текста по ширине */
    } 
    p. cite { /* Абзац с классом cite */
    color: navy; /* Синий цвет текста */
    margin-left: 20px; /* Отступ слева */
    border-left: 1px solid navy; /* Граница слева от текста */
    padding-left: 15px; /* Расстояние от линии до текста */
    } 
  </style>
 </head> 
 <body>
  <p>Для искусственного освещения помещения применяются люминесцентные лампы. 
    Они отличаются высокой световой отдачей, продолжительным сроком службы, 
    малой яркостью светящейся поверхности, близким к естественному спектральным 
    составом излучаемого света, что обеспечивает хорошую цветопередачу.</p>
  <p>Для исключения засветки экрана дисплея световыми потоками 
    оконные проемы снабжены светорассеивающими шторами.</p>
 </body>
</html>

html — CSS выровнять подменю по родительскому элементу

У меня есть следующий фрагмент HTML для строки меню:

#menubar {
  display: block;
  background: #FFFFFF;
}

#menubar ul li a. menubutton {
  display: none;
  /* dont show burger symbol (mobile menu symbol) */
}

#menubar ul {
  display: block;
  width: 2em;
  /* restrict burger symbol */
  padding: 0.9em;
}

#menubar ul li {
  display: inline;
}

#menubar ul li ul li {
  display: none;
}


/*Header*/

header {
  display: block;
  background: #2F2C2C;
  text-align: center;
}


/* Navigation */

nav {
  display: block;
  height: 2.5em;
  background: #FFFFFF;
  text-align: center;
}

nav ul {
  display: block;
}

nav ul li {
  display: inline;
  margin: 0em 0.188em 0em 0.188em;
}

nav ul li a {
  color: #454040;
  font-size: 1.125em;
  line-height: 2.5em;
  padding: 0.563em 0.938em 0.375em 0.983em;
  transition: background 0.2s;
  /* nice transition effect */
  -webkit-transition: background 0. 2s;
}

nav ul li a:hover {
  background: #DBD9D8;
  border-bottom: 0.188em solid #FF0000;
}

nav ul li a.active {
  border-bottom: 0.188em solid #E7590B;
}

nav ul li ul {
  display: none;
}

nav ul li:hover ul.submenu {
  text-align: center;
  position: fixed;
  display: block;
  margin-left: 40%;
}

nav ul li ul li:hover {
  background: #DBD9D8;
  border-bottom: 0.188em solid #FF0000;
}

<nav>
  <ul>
    <li><a href="./index.html">Start</a></li>
    <li><a href="./meetings.html">Termine</a></li>
    <li><a href="./organisation.html">Organisation</a>
      <ul>
        <li><a href="./organisation/page1.html">Page1</a></li>
        <li><a href="./organisation/page2.html">Page2</a></li>
        <li><a href=". /organisation/page3.html">Page3</a></li>
      </ul>
    </li>
    <li><a href="./about.html">About</a>
      <ul>
        <li><a href="./about/page1.html">Page1</a></li>
        <li><a href="./about/page2.html">Page2</a></li>
        <li><a href="./about/page3.html">Page3</a></li>
      </ul>
    </li>
    <li><a href="./contact.html">Contact</a></li>
  </ul>
</nav>

ul #submenu отображаются при наведении курсора.

Мне удалось центрировать подменю на всей странице, используя left: 40% в правиле nav ul li:hover ul.submenu. Однако я хочу расположить подменю по центру их родительских компонентов, поэтому, например, если взять организацию, я хотел бы, чтобы подменю страницы 2 было сосредоточено с полем родительской организации и примерно так же.

Как я могу добиться центрирования относительно родительского компонента?

0

ItFreak 8 Авг 2018 в 14:01

2 ответа

Лучший ответ

Добавьте position: relative в пункты меню, у которых есть подменю (например, в селектор nav ul li), и измените position: fixed на position: absolute для подменю, т. Е. Селектора nav ul li:hover ul.submenu .

Это делает положение подменю «относительным» к их родительскому элементу (элемент главного меню), поэтому вам следует соответствующим образом настроить параметры left и top в правиле CSS подменю.

#menubar {
  display: block;
  background: #FFFFFF;
}

#menubar ul li a.menubutton {
  display: none;
  /* dont show burger symbol (mobile menu symbol) */
}

#menubar ul {
  display: block;
  width: 2em;
  /* restrict burger symbol */
  padding: 0. 9em;
}

#menubar ul li {
  display: inline;
}

#menubar ul li ul li {
  display: none;
}


/*Header*/

header {
  display: block;
  background: #2F2C2C;
  text-align: center;
}


/* Navigation */

nav {
  display: block;
  height: 2.5em;
  background: #FFFFFF;
  text-align: center;
}

nav ul {
  display: block;
}

nav ul li {
  display: inline;
  margin: 0em 0.188em 0em 0.188em;
  position: relative;
}

nav ul li a {
  color: #454040;
  font-size: 1.125em;
  line-height: 2.5em;
  padding: 0.563em 0.938em 0.375em 0.983em;
  transition: background 0.2s;
  /* nice transition effect */
  -webkit-transition: background 0.2s;
}

nav ul li a:hover {
  background: #DBD9D8;
  border-bottom: 0.188em solid #FF0000;
}

nav ul li a. active {
  border-bottom: 0.188em solid #E7590B;
}

nav ul li ul {
  display: none;
}

nav ul li:hover ul.submenu {
  text-align: center;
  position: absolute;
  display: block;
  left: -50%;
}

nav ul li ul li:hover {
  background: #DBD9D8;
  border-bottom: 0.188em solid #FF0000;
}

<nav>
  <ul>
    <li><a href="./index.html">Start</a></li>
    <li><a href="./meetings.html">Termine</a></li>
    <li><a href="./organisation.html">Organisation</a>
      <ul>
        <li><a href="./organisation/page1.html">Page1</a></li>
        <li><a href="./organisation/page2.html">Page2</a></li>
        <li><a href="./organisation/page3.html">Page3</a></li>
      </ul>
    </li>
    <li><a href=". /about.html">About</a>
      <ul>
        <li><a href="./about/page1.html">Page1</a></li>
        <li><a href="./about/page2.html">Page2</a></li>
        <li><a href="./about/page3.html">Page3</a></li>
      </ul>
    </li>
    <li><a href="./contact.html">Contact</a></li>
  </ul>
</nav>

1

Johannes 8 Авг 2018 в 11:22

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

.child-class{
  width:max-content;
  margin:0px auto;
}

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

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

0

Garth Baker 8 Авг 2018 в 11:42

CSS: Выпадающее меню с задержкой

Обычное выпадающие css-меню сделанное с помощью переключения display:none;/display:block; повешенного на hover обладает двумя раздражающими недостатками:

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

Пример такого меню:

<ul>
    <li>
        <a href="#">item</a>
        <ul>
            <li>subitem 1</li>
            <li>subitem 2</li>
        </ul>
   </li>
</ul>

<style>
. menu {
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu .menu-item {
    float: left;
    margin: 0 1px 0 0;
    padding: 0;
    background: #E1E1E1;
}
.menu .menu-item a {
    display: block;
    padding: 5px 10px;
}
.menu .submenu {
    display: none; /* По умолчанию скрываем подменю */
    position: absolute;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #E1E1E1;
}
.menu .menu-item:hover .submenu {
    display: block; /* Показываем подменю при ховере */
}
.menu .submenu-item {
    margin: 0;
    padding: 5px 10px;
}
</style>

Демо

Чтобы создать небольшую задержку перед показом и скрытием подменю раньше приходилось использовать javascript, но теперь наткнулся на css вариант.

Весь фокус в свойстве transition, а точнее его подсвойстве transition-delay, которое позволяет добавить задержку перед показом анимации:

.menu .submenu {
    opacity: 0; /* По умолчанию скрываем подменю */
    visibility: hidden;
    transition-property: opacity, visibility; /* Важно чтобы transition применялось к обоим свойствам */
    transition-duration: 0. 2s; /* Добавляем анимацию 0.3 сек. */
    transition-delay: 0.15s; /* Добавляем задержку в 0.15 сек. */
}
.menu .menu-item:hover .submenu {
    opacity: 1; /* Показываем подменю при ховере */
    visibility: visible;
}

Демо

Поскольку анимацию нельзя вешать на display, то для скрытия подменю приходится использовать связку opacity:0; visibility:hidden;.

Menu, Компоненты Webix Docs

Справочник по API

Обзор

Компонент Menu или выпадающее меню, наследуется от list и позволяет пользователю выбирать нужный элемент из списка сгруппированных элементов (подменю). Каждый элемент подменю может содержать в себе свое подменю.
Динамическое Submenu или подменю, отображается при наведении курсора на соответствующий элемент главного меню (вызов события onMouseOver) и скрывается, если убрать курсор (onMouseOut).

Инициализация

Объект Menu хранится в свойстве data.

webix.ui({
    view:"menu",
    id:"my_menu",
    subMenuPos:"right",
    layout:"y",
    data:[ // данные меню
        { value:"Translate...", submenu:["English", "Slavic...", "German"]},
        { $template:"Separator" },
        { value:"Post...", submenu:[ "Facebook", "Google+", "Twitter" ]}
    ],
    type:{
        subsign:true,
        height:50
    }           
});

Related sample:  Basic Menu

Основные свойства:

• subMenuPos (string) — выравнивает выпадающее подменю относительно верхнего уровня;
• submenuConfig (object) — задает общие настройки для всех подменю, независимо от их уровня вложенности;
• layout (string) — задает ориентацию элементов меню: x (по умолчанию) для горизонтального меню, y для вертикального меню;
• $template (string) — флаг, задающий разделитель между группами элементов меню. Возможные значения:
  • «Separator» — серая разделительная линия;
  • «Spacer» — пустой элемент с белым фоном, не реагирующий на движения курсора.
• type — объект с настройками отображения элементов:
  • subsign (boolean) — задает массив элементов подменю;
  • height, width (number) высота и ширина каждого элемента;
• openAction (string) — изменяет способ вызова подменю. С установленным значением "click", сворачивание и разворачивание элементов подменю будет производиться по клику;
• template — (string, function) — определяет вид и содержимое элементов. Подробнее;
• data (object) — желаемый формат встроенных данных. Подробнее;
• autowidth — (boolean) подстраивает ширину элементов выпадающего меню под ширину их содержимого, по умолчанию false.

Related sample:  Showing Menu on Mouse Click (dropping down on hover is disabled)

Работа с элементами Menu

Настройка элементов Menu

Элемент меню (подменю) может быть текстовым элементом и содержать в себе еще одно подменю или любой компонент Webix, заданный по его ID.

Элементы Menu хранятся в массиве data отдельными объектами. Элементы Submenu хранятся в массиве submenu или data. Каждый элемент меню может содержать следующие атрибуты:

• id — ID элемента. Если не задано, элементу будет присвоен автоматически сгенерированный ID;
• value — задает текстовое значение для элемента;
• href — задает ссылку для элемента;
• config — определяет конфигурацию всплывающего окна подменю (при наличии). Эти настройки переопределяют те, что заданы в submenuConfig;
• badge — устанавливает оранжевый информационный значок, сообщающий о количестве новых действий для этого пункта меню (например количество сообщений).

Самый простой способ задать элементы меню — это передать их как массив:

{ view:"menu", data:["Google", "Facebook", "Twitter"] }

Или массив объектов:

{ view:"menu", data:[
    { id:1, value:"Google"}, 
    { id:2, value:"Facebook"}, 
    { id:3, value:"Twitter"}
]}

Ссылки в элементах Menu

В любой элемент меню или подменю можно добавить ссылку с помощью параметров href и target (необязательный параметр):

view:"menu",
data:[
    { id:"1", value:"Imitation of Spenser", href: "#verse1", target:"_blank"},
    { id:"2", value:"The Human Seasons", href: "#verse2"}
]

Если значение target не задано, он будет установлено как пустая строка.

Related sample:  Menu hrefs

Информационные значки

Значки отображают числовую информацию относящуюся к элементу меню, например количество сообщений:

view:"menu", 
data:[
    { id:"1",value:"Translations", badge:"1"},
    { id:"2",value:"Posts", badge:"12" },
    { id:"3",value:"Info", badge:"24" }
]

Related sample:  Menu with Badges

Разделители в Menu

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

• «Spacer» — добавляет горизонтальный промежуток между элементами меню;
• «Separator» — добавляет горизонтальную серую линию между элементами меню.

Промежуток между элементами меню

view:"menu",
layout:"y",
data:[
    { id:"1", value:"Translations", icon:"qrcode", badge:20 },
    { id:"2", value:"Posts", icon:"file-word-o", badge:3 },
    { $template:"Spacer" },
    { id:"3", value:"Help", icon:"support"},
]

Related sample:  Vertical Menu

Линия между элементами меню

view:"menu",
layout:"y",
data:[
    { value:"Translate..." },
    { value:"Post...", submenu:[ "Facebook", "Google+", "Twitter" ]},
    { $template:"Separator" },
    { value:"Info" }
]

Related sample:  Basic Menu

Настройка Submenu

Элементы подменю могут быть заданы массивом значений:

{ id:"2",value:"Translate. ..", submenu:[ "English", "Slavic", "German" ]},

Или массивом объектов:

{ id: "1.2", value:"Slavic...", submenu:[
    {id: "1.2.1", value:"Belarusian"},
    {id: "1.2.2", value:"Russian"},
    {id: "1.2.3", value:"Ukrainian"}
]}

Любое вложенное подменю (попап) можно настройить отдельно, с помощью параметра config его родителя:

view:"menu",
submenuConfig:{
    width:400
},
data:[
    { id:"2",value:"Custom...", 
        config:{
            width:500,
            on:{ 
                onItemClick:function(id){
                    webix.message("Submenu click: "+id);
                }
            }
        },
        submenu:[ "Facebook", "Google+", "Twitter" ]
     }
]

Эта настройка переопределяет общие настройки для подменю, заданные в submenuConfig.

Related sample:  Menu: Configuring Submenus

Автоматическая настройка ширины подменю

Чтобы автоматически изменять ширину Submenu в соответствии с высотой содержимого, используется свойство autowidth со значением true в конфигурации Menu:

webix. ui({
    container:"areaA",
    view:"menu",
    autowidth:true,
    data:[
        { id:"1",value:"Short...",
            submenu:[ "FB", "G+", "TW" ]},
        { id:"2",value:"Medium...",
            submenu:[ "Facebook", "Google+", "Twitter" ]},
        ...
    ]
});

Related sample:  Autowidth for Submenus

Использование других компонентов как элементов Menu

Параметр submenu может также указывать на предварительно инициализированные popup, submenu, context или window:

webix.ui({
    id:"details1",
    view:"context", width:300, height:200,
    body:{ content:"html1" }
});
 
webix.ui({
    view:"menu",
    data:[
        { value:"HTML 4", submenu:"details1" },
        { value:"HTML 5", submenu:"details2" }
    ]
});

Related sample:  HTML Elements as Menu Items

Таким же образом вы можете инициализировать компонент Webix Submenu отдельно и затем сослаться на него внутри свойства submenu в конфигурации Menu:

webix. ui({
    view:"submenu", id:"test", data:[
        { id:"1.1", value:"English"},
        { id:"1.3", value:"German"}
    ]
});
 
webix.ui({
    view:"menu",
    data:[
        { id:"1", value:"Translate...", submenu:"test"},
        { id:"2", value:"Post..."
    ]
});

Каждый элемент подменю может содержать свой компонент Submenu.

MenuBar

MenuBar похож на обучный тулбар, самый быстрый способ создать панель Menu — это инициализировать меню и тулбар в соседних колонках:

webix.ui({
    cols:[ menu, toolbar ] 
});

Related sample:  Menu in Toolbar

Скрыть или заблокировать элементы Menu

Скрыть элементы Menu

Чтобы скрыть или показать элемент меню, вы можете воспользоваться методами hideItem() и showItem() соответственно, указав ID нужных элементов в качестве параметров.

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

$$("tree1").attachEvent("onItemCheck",function(id,state){
    if (state) // если флажок отмечен
        $$("top_menu").hideItem(id);
    else
        $$("top_menu").showItem(id);
});

В результате только «неотмеченные» элементы меню будут отображены.

Related sample:  Hiding Menu Items

Заблокировать элементы Menu

Чтобы заблокировать или разблокировать элемент меню, вы можете воспользоваться методами disableItem() и enableItem() соответственно, указав ID нужных элементов в качестве параметров. Событием провоцирующим выполнение функции может быть изменение состояния чекбокса, ID которого равно ID соответствующего элемента меню.

$$("tree1").attachEvent("onItemCheck",function(id,state){
    if(state) // если флажок отмечен
        $$("top_menu").disableItem(id);
    else
        $$("top_menu").enableItem(id);
});

Заблокировать элемент меню из JSON

Вы можете заблокировать определенный элемент меню прямо в конфигурации, указав disabled:true в нужном объекте.

webix.ui({
    view:"menu",
    data:[
        { id:"1",value:"Translate...", submenu:[
            {id: "1.1", value:"English"},
            { id: "1.2", value:"Slavic...", submenu:[
                {id: "1.2.1", value:"Belarusian"},
                {id: "1.2.2", value:"Russian", disabled:true },
                {id: "1.2.3", value:"Ukrainian"}
            ]}          
        ]}
    ]
});

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

view:"menu", 
template:function(obj){
    if(obj.disabled)
        return "<span>"+obj.value+"</span>";
    return obj.value;
}

Related sample:  Disabling Menu Items

Обработка событий с элементами Menu и Submenu

Доступ ко всем элементам меню и подменю можно получить по их ID.

1 . Доступ к любому элементу можно получить с помощью метода getMenuItem(), который принимает ID элемента в качестве параметра и возвращает объект элемента:

// получает значение элемента меню по его ID
$$('menu1'). getMenuItem(id).value;

Related sample:  Basic Menu

2 . В то же время элементы меню могут быть получены через объект подменю, возвращаемого методом getSubMenu() для элемента с указанным ID. Если для элемента не существует подменю — будет возвращен объект вызываемого компонента.

var menu = $$("menu1").getSubMenu(id);
var item = menu.getItem(id).value;

Related sample:  HTML Elements as Menu Items

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

• onMenuItemClick — вызывается при нажатии на все пункты меню, независимо от уровня иерархии. Игнорирует заблокированные элементы;
• onItemClick — вызывается по клику на любой элемент одного уровня. Срабатывает и для заблокированных элементов.

Обработчик «onMenuItemClick»

view:"menu",
data:[...],
on:{
    onMenuItemClick:function(id){
        webix. message("Click: "+this.getMenuItem(id).value);
    }
}

Related sample:  Basic Menu

Обработчик Submenu «onItemClick»

view:"menu",
data:[
    { id:"1",value:"Custom...",
        config:{
            width:250,
            on: { onItemClick:function(id){
                webix.message("Submenu click: "+id);
            }}
        },
        submenu:{...}
    }
]

Related sample:  Configuring Submenus

Статьи по теме

Как создать подменю в подменю в HTML и CSS

• Основной элемент 1 < / li>
  
• Основной элемент 2
  
  
  
  • Дополнительный элемент
  
  < li> Sub Item
  
  • SUB SUB LIST »
    
    
    
    • Подподпункт 1
      
    • Подподпункт 2
      
    
    
  
  
  
  


• Основной элемент 3

Беги сам

Как создать подменю в раскрывающемся списке (HTML / CSS)

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

КОД HTML:

КОД CSS:

  #menu {background: # 343434; color: #eee; height: 35px; border-bottom: 4px solid #eeeded}
#menu ul, # menu li {margin: 0 0; padding: 0 0; list-style: none}
#menu ul {height: 35px}
#menu li {float: left; display: inline; position: relative; font: bold 12px Arial; text-shadow: 0 -1px 0 # 000; border-right: 1px solid # 444; border-left: 1px solid # 111 ; текст-преобразование: верхний регистр}
#menu li: first-child {border-left: none}
#menu a {display: block; line-height: 35px; padding: 0 14px; text-decoration: none; color: #eee;}
#menu li: hover> a, # menu li a: hover {background: # 111}
#menu input {display: none; margin: 0 0; padding: 0 0; width: 80px; height: 35px; opacity: 0; cursor: pointer}
#menu label {font: bold 30px Arial; display: none; width: 35px; height: 36px; line-height: 36px; text-align: center}
#menu label span {font-size: 12px; position: absolute; left: 35px}
#menu ul. menus {height: auto; overflow: hidden; width: 180px; background: # 111; position: absolute; z-index: 99; display: none; border: 0;}
#menu ul.menus li {display: block; width: 100%; font: 12px Arial; text-transform: none;}
#menu li: hover ul.menus {display: block}
#menu a.home {background: # c00;}
#menu a.prett {padding: 0 27px 0 14px}
#menu a.prett :: after {content: ""; width: 0; height: 0; border-width: 6px 5px; border-style: solid; border-color: #eee transparent transparent transparent; position: absolute; top : 15px; вправо: 9px}
#menu ul.menus a: hover {background: # 333;}
  

Спасибо, этот сайт мне очень поможет

Как создать меню с вложенным меню с помощью CSS / HTML

Введение:

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

Примечание : вы также можете ознакомиться с этой статьей и узнать, как создать меню в стиле Metro

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

и
• и создавать параметры меню.

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

  Листинг 1: Скрипт вертикального меню и подменю

  
  
  
  
  
  
          
   
    Новости 
                  
   
   Национальные новости 
   
   Международные новости 
   
   Новости спорта 
   
   Новости Голливуда 
   
              
              
  
               Технологии 
                  
   
   ИТ / программное обеспечение 
   
   Аппаратное обеспечение 
   
   Iphone 
   
   Neuro-Science 
   
              
              
  
               Спорт 
                  
   
   Крикет 
   
   Тенис 
   
   Бадминтон 
   
   Хоккей 
   
              
              
  
               Contry 
                  
   
   Индия 
   
   Шри-Ланка 
   
   Бангладеш 
   
   Англия 
   
              
          
      
  
  
    

  Рисунок 1: На рисунке выше показано простое меню с подменю, созданным тегом div, которое содержит четыре основных меню и 16 подменю (по 4 подменю для каждого главного меню), и мы использовали стандартный HTML в качестве основы. В этом примере мы можем удалить маркеры, поля и отступы из списка.

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

  Следующий раздел содержит описание линейного меню (горизонтального меню). Если элементы «li» будут отображаться как встроенные элементы, это заставляет список располагаться в одной строке. Элемент «ul» имеет полную ширину, а каждая гиперссылка в списке имеет ширину 7 пикселей. Также мы добавили несколько цветов, чтобы сделать его интерактивным

  Листинг 2: Скрипт горизонтального меню и подменю

  
  
  
  
  
  
  
  
    Новости  
    Технологии  
    Спорт  
    Страна  
    Видео  
    Загрузить  
  
  
  
   

  Рисунок 2: На рисунке вверху показан простой элемент меню в горизонтальном положении.

  Подменю / выпадающее меню по горизонтали Главное меню:

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

  Листинг 3: Сценарий для подменю / выпадающего меню

  
  
  
  
  
  
  
          
   
    Новости 
                  
   
    национальный  
   
    международный  
   
    Спорт  
   
    Hollybood  
   
              
              
  
               Технологии 
   
    ИТ / программное обеспечение  
   
    Оборудование  
   
    Iphone  
   
    нейронаука  
   
                  
              
              
  
               Спорт 
                  
   
    Крикет  
   
    Тенис  
   
    Бадминтон  
   
    Хоккей  
   
              
              
  
               Страна 
                  
   
    Индия  
   
    Америка  
   
    Франция  
   
    пакистанский  
   
          
              
          
  
  
  
    

  Рисунок 3 : Меню готово

  Вывод:

  Этот учебник охватывает базовые знания о меню CSS. Мы видели три вида меню, включая подменю. Просмотрите примеры, приведенные в этом руководстве, и дайте нам знать о своих запросах на сайте mrbool. Мы ответим как можно скорее.

  элементов меню таргетинга с подменю на панели навигации

  Это гостевой пост Рэя Мессины. Рэй был заинтересован в том, чтобы поделиться этой техникой, чтобы отдать должное тому, чему он научился на этом сайте в прошлом, и это здорово. Возможно, вы знаете о jQuery .имеет метод , который позволяет вам выбрать элемент, если у него есть какой-либо другой селектор в качестве потомка. К сожалению, такого селектора в CSS пока нет. Но если вы кое-что знаете о структуре HTML, вы можете использовать комбинацию позиционных селекторов, чтобы имитировать ее. Рэй объяснит.

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

  Потребность в подсказках

  Как вы, наверное, знаете, меню — это списки ссылок, и поэтому стандартно помечать их как

  s. По большому счету, выпадающие меню просто вложены
  s. Выпадающие списки — общий компонент современного (и не очень современного) веб-дизайна. Используя чистый CSS, можно каким-либо образом стилизовать верхний уровень меню навигации и скрыть подуровни, чтобы они отображались только тогда, когда посетитель наводит курсор на соответствующую область.

  Многие дизайнеры довольны таким уходом. Однако с точки зрения UX / UI этого не хватает, поскольку пользователю приходится исследовать все меню, чтобы найти, какие разделы содержат дополнительные ссылки для навигации. Это означает, что посетители либо будут тратить свое время на поиски и расстроятся из-за этого, либо пропустят все части вашего сайта вместе! Это вообще бесполезно.

  Обычный способ решения этой проблемы — просто добавить класс к

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

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

    • , чтобы указать, что за ними следуют другие ссылки, и, напротив, стили тегов привязки как не имеющих дополнительных подпунктов. . Это удобно, если раскрывающийся список прост и вы можете структурировать его именно таким образом.Это чище, поскольку вам не нужно добавлять классы «подменю» в разметку, но, как и раньше, по-прежнему требуется, чтобы вы структурировали содержимое вашего списка вручную или чтобы ваша CMS могла предсказать, какие элементы списка будут содержать другие < ul> s как подменю.

      Делаем это автоматически!

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

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

      Лучше

      В идеале было бы здорово, если бы существовал селектор CSS, который позволял бы нам запрашивать, содержит ли элемент другой тип элемента в качестве прямого дочернего элемента, что-то вроде метода .has () jQuery.

      Мы можем добиться почти того же с помощью li a: first-child: nth-last-child (x) {} .

      Ключ имеет ожидаемое количество дочерних элементов (запланированное отцовство элемента HTML?). Скорее всего, это будут два элемента: якорь и

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

      Вот быстрый пример. Разметка — это просто ваш стандартный вложенный UL, но обратите внимание, что у меня использовал только один класс в HTML , в корне

      .Проверьте это сами, добавьте любое количество вложенных списков на любом уровне!

      Создание выпадающей демонстрации

      Давайте проверим эту идею!

      HTML: держите его в чистоте

      CSS

      Общий стиль, чтобы привнести сексуальность:

        nav {
        дисплей: блок;
        выравнивание текста: центр;
      }
      nav ul {
        маржа: 0;
        отступ: 0;
        стиль списка: нет;
      }
      . nav a {
        дисплей: блок;
        фон: # 111;
        цвет: #fff;
        текстовое оформление: нет;
        заполнение: 0.8em 1.8em;
        преобразование текста: прописные буквы;
        размер шрифта: 80%;
        межбуквенный интервал: 2 пикселя;
        тень текста: 0 -1px 0 # 000;
        положение: относительное;
      }
      .nav {
        вертикальное выравнивание: сверху;
        дисплей: встроенный блок;
        тень коробки:
          1px -1px -1px 1px # 000,
          -1px 1px -1px 1px #fff,
          0 0 6px 3px #fff;
        радиус границы: 6 пикселей;
      }
      .nav li {
        положение: относительное;
      }
      .nav> li {
        плыть налево;
        нижняя граница: 4px #aaa solid;
        маржа справа: 1px;
      }
      .nav> li> a {
        нижнее поле: 1px;
        box-shadow: вставка 0 2em .33em -0.5em # 555;
      }
      .nav> li: при наведении,
      .nav> li: hover> a {
        цвет нижней границы: оранжевый;
      }
      .nav li: hover> a {
        оранжевый цвет;
      }
      .nav> li: first-child {
        радиус границы: 4px 0 0 4px;
      }
      .nav> li: first-child> a {
        радиус границы: 4px 0 0 0;
      }
      .nav> li: last-child {
        радиус границы: 0 0 4px 0;
        поле справа: 0;
      }
      .nav> li: last-child> a {
        радиус границы: 0 4px 0 0;
      }
      .nav li li a {
        маржа сверху: 1px;
      }  

      Затем происходит волшебство :

        .nav li a: first-child: nth-last-child (2): before {
        содержание: "";
        позиция: абсолютная;
        высота: 0;
        ширина: 0;
        граница: 5 пикселей сплошная прозрачная;
        верх: 50%;
        справа: 5 пикселей;
       }  

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

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

        / * размещение подменю * /
      .nav ul {
        позиция: абсолютная;
        белое пространство: nowrap;
        нижняя граница: сплошной оранжевый 5 пикселей;
        z-индекс: 1;
        слева: -99999em;
      }
      .nav> li: hover> ul {
        слева: авто;
        маржа сверху: 5 пикселей;
        минимальная ширина: 100%;
      }
      .nav> li li: hover> ul {
        осталось: 100%;
        маржа слева: 1px;
        верх: -1px;
      }
      / * стиль наведения стрелки * /
      .nav> li> a: first-child: nth-last-child (2): before {
        цвет верхней границы: #aaa;
      }
      .nav> li: hover> a: first-child: nth-last-child (2): before {
        граница: 5 пикселей сплошная прозрачная;
        цвет нижней границы: оранжевый;
        margin-top: -5 пикселей
      }
      .nav li li> a: first-child: nth-last-child (2): before {
        граница-левый-цвет: #aaa;
        margin-top: -5 пикселей
      }
      .nav li li: hover> a: first-child: nth-last-child (2): before {
        граница: 5 пикселей сплошная прозрачная;
        граница-правый-цвет: оранжевый;
        справа: 10 пикселей;
      }  

      Вот как все работает на CodePen:

      Как вы, наверное, догадались, вы также можете использовать другие комбинации селектора / селектора, такие как : only-child , : first-child: last-child , : first-child: not (: last-child) и подобное, аналогичное, похожее.Но я обнаружил, что : nth-child (x): nth-last-child (x) обеспечивает максимальную гибкость и служит в качестве встроенного запасного варианта (поскольку он позволяет нам нацеливать элемент напрямую, а не путем исключения), и есть небольшое преимущество поддержки кроссбраузерности, полученное при использовании других комбинаций селектора / селектора.

      Вот и все. Простой, изящный и полностью автоматический; так, как должно быть. Поддержка почти универсальна, за исключением IE, который ест клей и предлагает поддержку только в IE9 +.На момент написания, по оценкам, глобальная поддержка этих селекторов в том виде, в котором они использовались, составляла примерно 87%, что неплохо.

      Выпадающее меню на чистом CSS с подменю

      Хотите создать раскрывающееся меню, используя только HTML и CSS? Решение: Выпадающее меню на чистом CSS с подменю, простое меню HTML CSS с несколькими подменю.

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

      Сегодня вы научитесь создавать раскрывающееся меню, используя только HTML и CSS . Этот пост очень полезен, если вы изучаете HTML CSS , я имею в виду, если вы новичок в веб-дизайне или разработке. Вы можете использовать это в вашей следующей или текущей программе после некоторых изменений. Я уверен, что вы определенно сможете создать меню на чистом CSS после просмотра этого поста.

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

      Если вы сейчас думаете, чем на самом деле является это раскрывающееся меню HTML CSS, то посмотрите предварительный просмотр , приведенный ниже.

      Предварительный просмотр раскрывающегося меню HTML

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

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

      Вам также может понравиться:

      Выпадающее меню на чистом CSS с подменю Исходный код

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

      и
      • для создания этого меню, я многократно использовал эти теги для создания подменю.

        Для создания значков, которые появляются после каждого выпадающего списка , я использовал CSS Unicode icons (см. Список). В этом меню все работы выполняются свойством CSS : hover . Сначала я размещаю весь список на их месте, используя свойство postion: . Сначала я просто скрываю все подменю и выпадающий список, они все будут видны при наведении курсора мыши.

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

        index.html

        Создайте файл HTML с именем index.html и поместите эти коды, приведенные ниже.

        Простое

        CSS раскрывающееся меню

        1 2 3 4 5 6 7 8 9 10 11 12 14 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 31 900 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 9006 1

        Простое CSS Раскрывающееся меню

        стиль.css

        Теперь создайте файл CSS с именем « style.css » и поместите эти коды.

        / ** код от webdevtrick (https://webdevtrick.com) ** / тело { фон: # 212121; размер шрифта: 22 пикселя; высота строки: 32 пикселя; цвет: #ffffff; перенос слов: слово-слово! важно; семейство шрифтов: «Зыбучие пески», без засечек; маржа: 0; отступ: 0; } h2 { размер шрифта: 60 ​​пикселей; выравнивание текста: центр; цвет: #FFF; маржа сверху: 150 пикселей; семейство шрифтов: «Russo One», без засечек; } h2 span { цвет: # FF4649; } #container { маржа: 0 авто; } nav { маржа: 35px 0; цвет фона: # FF4649; } nav ul { отступ: 0; маржа: 0; стиль списка: нет; положение: относительное; } nav ul li { дисплей: встроенный блок; цвет фона: # FF4649; } nav a { дисплей: блок; отступ: 0 10 пикселей; цвет: #FFF; размер шрифта: 20 пикселей; высота строки: 60 пикселей; текстовое оформление: нет; } nav a: hover { цвет фона: # 333; } nav ul ul { дисплей: нет; позиция: абсолютная; верх: 60 пикселей; } nav ul li: hover> ul { дисплей: наследовать; } nav ul ul li { ширина: 230 пикселей; float: нет; отображение: элемент списка; положение: относительное; } nav ul ul ul li { положение: относительное; верх: -60 пикселей; слева: 230 пикселей; } nav ul ul li { граница: сплошной белый 1px; } li> a: after {content: ‘▼’; } li> a: only-child: after {content: »; }

        1 2 3 4 5 6 7 8 9 10 11 12 13 14 14 900 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 900 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 900 02 62 63 64 65 66 67 68 69 70 71 72 73 74

        / ** код через webdevtrick (https : // webdevtrick.com) ** / body { background: # 212121; font-size: 22px; высота строки: 32 пикселя; цвет: #ffffff; перенос слов: слово-разрыв! Важно; семейство шрифтов: Quicksand, без засечек; маржа: 0; отступ: 0; } h2 { font-size: 60px; выравнивание текста: по центру; цвет: #FFF; margin-top: 150 пикселей; семейство шрифтов: ‘Russo One’, без засечек; } интервал h2 { цвет: # FF4649; } #container { маржа: 0 авто; } nav { margin: 35px 0; цвет фона: # FF4649; } nav ul { заполнение: 0; маржа: 0; стиль списка: нет; позиция: относительная; } nav ul li { дисплей: встроенный блок; цвет фона: # FF4649; } nav a { display: block; отступ: 0 10 пикселей; цвет: #FFF; размер шрифта: 20 пикселей; высота строки: 60 пикселей; текстовое оформление: нет; } nav a: hover { background-color: # 333; } nav ul ul { дисплей: нет; позиция: абсолютная; верх: 60 пикселей; } nav ul li: hover> ul { display: наследовать; } nav ul ul li { ширина: 230 пикселей; поплавок: нет; дисплей: элемент списка; позиция: относительная; } nav ul ul ul li { положение: относительное; верх: -60 пикселей; слева: 230 пикселей; } nav ul ul li { граница: 1 пиксель сплошной белый; } li> a: after {content: ‘▼’; } li> a: only-child: после {content: »; }

        Вот и все.Теперь вы успешно создали раскрывающееся меню на чистом CSS с подменю . Другими словами, Простое меню HTML CSS с выпадающим списком . Если у вас есть какие-либо сомнения или вопросы, прокомментируйте их ниже.

        Спасибо за посещение, продолжайте посещать.

        Пример строки меню навигации | WAI-ARIA Authoring Practices 1.1

        Пример меню навигации | Практика создания WAI-ARIA 1.1

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

        Подобные примеры включают:

        Пример

        Специальные возможности

        1. Поскольку строка меню представляет систему навигации сайта, она заключена в область навигации, реализованную с помощью элемента nav , который имеет aria-label , который соответствует метке на строке меню.
        2. Значки со стрелкой вниз и вправо сделаны совместимыми с режимом высокой контрастности и скрыты от программ чтения с экрана с помощью свойства содержимого CSS для визуализации изображений.

        Поддержка клавиатуры

        Menubar

        Ключ	Функция
        Пробел Введите	Открывает подменю и перемещает фокус на первый элемент подменю.
        Стрелка вправо	Перемещает фокус на следующий элемент в строке меню. Если фокус находится на последнем элементе, перемещает фокус на первый элемент.
        Стрелка влево	Перемещает фокус на предыдущий элемент в строке меню. Если фокус находится на первом элементе, перемещает фокус на последний элемент.
        Стрелка вниз	Открывает подменю и перемещает фокус на первый элемент подменю.
        Стрелка вверх	Открывает подменю и перемещает фокус на последний элемент в подменю.
        Дом	Перемещает фокус на первый элемент в строке меню.
        Конец	Перемещает фокус на последний элемент в строке меню.
        Персонаж	Перемещает фокус на следующий элемент в строке меню, имя которого начинается с набранного символа. Если ни один из элементов не имеет имени, начинающегося с набранного символа, фокус не перемещается.

        Подменю

        Ключ	Функция
        Пробел Введите	Активирует пункт меню, вызывая активацию ссылки. ПРИМЕЧАНИЕ: ссылки ведут на фиктивные страницы; используйте функцию возврата браузера, чтобы вернуться к этой странице примера меню.
        Побег	Закрывает подменю. Перемещает фокус на родительский элемент строки меню.
        Стрелка вправо	Если фокус находится на элементе с подменю, открывает подменю и переводит фокус на первый элемент. Если фокус находится на элементе, у которого нет подменю: Закрывает подменю. Перемещает фокус на следующий элемент в строке меню. Открывает подменю недавно выделенного элемента строки меню, сохраняя фокус на этом родительском элементе строки меню.
        Стрелка влево	Закрывает подменю и перемещает фокус на родительский элемент меню. Если элемент родительского меню находится в строке меню, также: перемещает фокус на предыдущий элемент в строке меню. Открывает подменю недавно выделенного элемента строки меню, сохраняя фокус на этом родительском элементе строки меню.
        Стрелка вниз	Перемещает фокус на следующий элемент в подменю. Если фокус находится на последнем элементе, перемещает фокус на первый элемент.
        Стрелка вверх	Перемещает фокус на предыдущий элемент подменю. Если фокус находится на первом элементе, перемещает фокус на последний элемент.
        Дом	Перемещает фокус на первый элемент подменю.
        Конец	Перемещает фокус на последний элемент в подменю.
        Персонаж	Перемещает фокус на следующий элемент, имя которого начинается с набранного символа. Если ни один из элементов не имеет имени, начинающегося с набранного символа, фокус не перемещается.

        Роль, свойство, состояние и атрибуты Tabindex

        Menubar

        Роль	Атрибут	Элемент	Использование
        меню		ул.	Определяет элемент как контейнер меню для набора элементов меню . Невозможно сфокусировать, поскольку фокус управляется с помощью перемещающегося tabindex.
        	aria-label = " строка "	ул.	Определяет доступное имя для строки меню . Помогает пользователям вспомогательных технологий понять назначение строки меню и отличить его от любых других строк меню или подобных элементов на странице.
        элемент меню		а	Обозначает элемент как пункт меню. Доступное имя вычисляется из текстового содержимого элемента и .
        	tabindex = "- 1"	а	Делает элементом клавиатуры фокусируемым, но не частью последовательности табуляции.
        	tabindex = "0"	а	Включает элемент в последовательность Tab . Только один элемент строки меню имеет tabindex = "0" . При загрузке страницы первый элемент строки меню имеет tabindex = "0" . Фокус управляется с помощью roving tabindex.
        	aria-haspopup = "true"	а	Указывает, что в пункте меню есть подменю.
        	aria-extended = "true"	а	Указывает, что подменю открыто.
        	aria-extended = "false"	а	Указывает, что подменю закрыто.
        нет		li	Удаляет подразумеваемую роль listitem элемента li . Необходимо, поскольку родительский элемент ul служит в качестве меню , поэтому элементы li не находятся в их требуемом контексте списка.

        Подменю

        Роль	Атрибут	Элемент	Использование
        меню		ул.	Определяет элемент как контейнер меню для набора пунктов меню.
        	aria-label = " строка "	ул.	Определяет доступное имя для меню . Помогает пользователям вспомогательных технологий понять назначение меню и отличить его от любого другого меню или подобных элементов (например,грамм. строка меню) на странице.
        элемент меню		а	Обозначает элемент как пункт меню. Доступное имя вычисляется из текстового содержимого элемента и .
        	tabindex = "- 1"	а	Сохраняет фокусируемый элемент a , но удаляет его из последовательности Tab .
        	aria-haspopup = "true"	а	Указывает, что у пункта меню есть подменю.
        	aria-extended = "true"	а	Указывает, что подменю открыто.
        	aria-extended = "false"	а	Указывает, что подменю закрыто.
        нет		li	Удаляет подразумеваемую роль listitem элемента li . Необходимо, поскольку родительский элемент ul служит в качестве меню , поэтому элементы li не находятся в их требуемом контексте списка.

        Исходный код JavaScript и CSS

        Исходный код HTML

        Шаблон дизайна меню или меню в методиках разработки WAI-ARIA 1.1

        Как создать меню и подменю с помощью HTML и CSS?

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

        Таблица стилей CSS:

          * {маржа: 0; заполнение: 0;}
        тело {фон: #ffffff;}
        #navcont {margin-top: 20px; width: 100%;}
        #nav {
        семейство шрифтов: Verdana;
        положение: относительное;
        ширина: 910 пикселей;
        высота: 36 пикселей;
        размер шрифта: 14 пикселей;
        цвет: # 000;
        маржа: 0 авто;
        font-weight: bold}
         
        #nav ul {тип-стиля-списка: нет; }
         
        #nav ul li {float: left; position: relative;}
        #nav ul li a {
        отступ: 10 пикселей; дисплей: блок;
        текстовое оформление: нет;
        выравнивание текста: центр;
        цвет: # 000;}
         
        #nav ul li a: hover {background: # 12aeef; цвет: #ffffff;}
        #nav ul li ul {display: none;}
        #nav ul li: hover ul {
        дисплей: блок;
        позиция: абсолютная;
        верх: 35 пикселей;
        минимальная ширина: 190 пикселей;
        слева: 0;}
         
        #nav ul li: hover ul li a {
        дисплей: блок;
        фон: # 6CC;
        цвет: # 000;
        ширина: 160 пикселей;
        выравнивание текста: центр;
        нижняя граница: сплошной 1px # f2f2f2; граница справа: нет;
        border: 1px solid # 333}
         
        #nav ul li: hover ul li a: hover {
        фон: # 6dc7ec;
        цвет: # 000; маржа: 1px auto 1px 15px;
        переход: маржа 2с, линейная 1с;
        border: 1px solid # 000}  

        HTML-код:

          
        
        
        
        
         
        
        
        
          ГЛАВНАЯ  
          РУКОВОДСТВО 
        
          HTML  
          CSS  
          PHP / Mysql  
        
        
          ЭЛЕКТРОНИКА 
        
          ОСНОВНОЙ  
          АНАЛОГОВЫЙ  
          ЦИФРОВОЙ  
          МИКРОКОНТРОЛЛЕР  
          ПРОЕКТ  
        
        
         
          ШАБЛОН 
        
         
          WORDPRESS  
          JOOMLA  
          HTML  
         
          БЛОГЕР  
          DRUPAL  
        
        
         
          ТЕХНОЛОГИЯ  
          ОБРАЗОВАНИЕ  
          НОВОСТИ  
          О НАС  
          КОНТАКТ  
        
         
        
        
        
         
          

        Для дальнейших комментариев ниже.

        No related posts.