Разное

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

28.05.2020

Подменю на CSS

Программирование на C++ для начинающих

Бесплатный курс по C++ даст Вам отличный старт для начала программирования на этом языке. В курсе Вас ждёт множество уроков (больше 4-х часов видео), исходников и упражнений.

Чтобы получить Видеокурс,
заполните форму

E-mail:
Имя:

Другие курсы

Как создать профессиональный Интернет-магазин

После семинара:

— Вы будете знать, как создать Интернет-магазин.

— Вы получите бесплатный подарок с подробным описанием каждого шага.

— Вы сможете уже приступить к созданию Интернет-магазина.

Записаться

Другие курсы

И после плохого урожая надо сеять.

Сенека

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

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

* html ul li {
  float: left;
}
* html ul li a {
  height: 1%;
}
ul {
  border-bottom: 1px solid #000;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100px;
}
ul li {
  position: relative;
}
ul li a {
  display: block;
  border: 1px solid #000;
  border-bottom: 1px;
  padding: 5px;
  text-decoration: none;
}
li ul {
  display: none;
  left: 99px;
  position: absolute;
  top: 0;
}
li:hover ul {
  display: block;
}

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

display: block«, то есть видимым. Это самое главное. Также в первых двух селекторах (которые со *) идёт CSS-хак для IE, иначе без него в этом браузере ничего работать не будет. Всё остальное — это внешний вид, который, безусловно, можно менять.

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

<ul>
  <li>
    <a href="#">Главная</a>   </li>
  <li>
    <a href="#">Меню 1</a>
    <ul>
      <li>
        <a href="#">Подменю 1</a>
      </li>
      <li>
        <a href="#">Подменю 2</a>
      </li>
      <li>
        <a href="#">Подменю 3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Меню 2</a>
    <ul>
      <li>
        <a href="#">Подменю4</a>
      </li>
      <li>
        <a href="#">Подменю 5</a>
      </li>
      <li>
        <a href="#">Подменю 6</a>
      </li>
      <li>
        <a href="#">Подменю7</a>
      </li>
      <li>
        <a href="#">Подменю 8</a>
      </li>
    </ul>
  </li>
</ul>

Если внимательно вдуматься в эту структуру, то становится всё очень понятно. Тег 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]

Выпадающее меню на HTML / CSS без использования JavaScript

Очень часто необходимо сделать на сайте выпадающее при наведении меню. Большинство веб-девелоперов используют для этого JavaScript / Jquery. Это конечно хорошо, но такого роди задачи легко решаются с помощью HTML / CSS.

Вот простой пример HTML-кода меню:

<ul>
    <li><a href=#>Menu 1</a>
        <ul>
            <li><a href=#>Sudmenu 1</a></li>
            <li><a href=#>Sudmenu 1</a></li>
            <li><a href=#>Sudmenu 1</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 2</a>
        <ul>
            <li><a href=#>Sudmenu 2</a></li>
            <li><a href=#>Sudmenu 2</a></li>
            <li><a href=#>Sudmenu 2</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 3</a>
        <ul>
            <li><a href=#>Sudmenu 3</a></li>
            <li><a href=#>Sudmenu 3</a></li>
            <li><a href=#>Sudmenu 3</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 4</a>
        <ul>
            <li><a href=#>Sudmenu 4</a></li>
            <li><a href=#>Sudmenu 4</a></li>
            <li><a href=#>Sudmenu 4</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 5</a>
        <ul>
            <li><a href=#>Sudmenu 5</a></li>
            <li><a href=#>Sudmenu 5</a></li>
            <li><a href=#>Sudmenu 5</a></li>
        </ul>
    </li>
</ul>

Для построения меню был использован список с классом menu. Подменю сделаны списками с классом submenu.

Теперь давайте как-нибудь минимально оформим наше меню стилями:

body {
    font: 14px 'Verdana';
    margin: 0;
    padding: 0;
}
ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul:after {
    display: block;
    content: ' ';
    clear: both;
    float: none;
}
ul.menu > li {
    float: left;
    position: relative;
}
ul.menu > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color: red;
    text-decoration: none;
}
ul.menu > li > a:hover {
    background-color: black;
}
ul.submenu {
    display: none;
    position: absolute;
    width: 120px;
    top: 37px;
    left: 0;
    background-color: white;
    border: 1px solid red;
}
ul.submenu > li {
    display: block;
}
ul.submenu > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color: red;
    text-decoration: none;
}
ul.submenu > li > a:hover {
    text-decoration: underline;
}

Для класса submenu было установлено свойство ‘display: none’.

Это позволило на спрятать наше выпадающее меню.

Теперь добавим в CSS такой код:

ul.menu > li:hover > ul.submenu {
    display: block;
}

Это позволит показывать подменю при наведении.

Вот и все. Просто и легко без JavaScript.

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

спросил

Изменено 6 лет, 3 месяца назад

Просмотрено 62к раз

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

HTML-код: 

 <навигация>
  <ул>
    
  • Главная
    • 
    
  • Меню
      <ул>
        
  • Раскрывающийся список 1 + подменю
          <ул>
            
  • Подменю
    • 
          
        
        
  • Dropdown 2
    • 
        
  • Dropdown 3
    •

    КОД CSS: 

    #menu ul,#menu li{margin:0 0;padding:0 0;list-style:none}
#меню ул{высота:35px}
#menu li{float:left;display:inline;position:relative;font:bold 12px Arial;text-shadow: 0-1px 0 #000;граница справа: 1px сплошная #444;граница слева: 1px сплошная #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{фон:#111}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#menu label{шрифт:жирный 30px Arial;дисплей:нет;ширина:35px;высота:36px;высота строки:36px;выравнивание текста:по центру}
#menu label span{font-size:12px;position:absolute;left:35px}
#menu ul. menus{высота:авто;переполнение:скрыто;ширина:180px;фон:#111;позиция:абсолютная;z-индекс:99;дисплей:нет;граница:0;}
#menu ul.menus li {дисплей: блок; ширина: 100%; шрифт: 12px Arial; преобразование текста: нет;}
#menu li:наведите курсор на ul.menus{display:block}
#меню a.home {фон: #c00;}
#меню 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 прозрачный прозрачный прозрачный;позиция:абсолютный;верхний :15px;справа:9px}
#menu ul.menus a:hover{фон:#333;}

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

    • html
    • css
    • подменю
    • выпадающее меню

    3

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

     #меню {
  фон: #343434;
  цвет: #еее;
  высота: 35 пикселей;
  нижняя граница: сплошная 4 пикселя
}

#меню ул,
#меню ли {
  маржа: 0 0;
  заполнение: 0 0;
  стиль списка: нет
}

#меню ул {
  высота: 35 пикселей
}

#меню ли {
  плыть налево;
  дисплей: встроенный;
  положение: родственник;
  шрифт: жирный 12px Arial;
  text-shadow: 0-1px 0 #000;
  граница справа: 1px сплошная #444;
  граница слева: 1px сплошная #111;
  преобразование текста: верхний регистр
}

#menu li:first-child {
  граница слева: нет
}

#меню а {
  дисплей: блок;
  высота строки: 35 пикселей;
  отступ: 0 14px;
  текстовое оформление: нет;
  цвет: #еее;
}

#menu li:наведение > а,
#меню li a:hover {
  фон: #111
}

#меню ввода {
  дисплей: нет;
  маржа: 0 0;
  заполнение: 0 0;
  ширина: 80 пикселей;
  высота: 35 пикселей;
  непрозрачность: 0;
  курсор: указатель
}

#метка меню {
  шрифт: жирный 30px Arial;
  дисплей: нет;
  ширина: 35 пикселей;
  высота: 36 пикселей;
  высота строки: 36px;
  выравнивание текста: по центру
}

# метка меню span {
  размер шрифта: 12px;
  положение: абсолютное;
  слева: 35px
}

#меню ул. меню {
  высота: авто;
  ширина: 180 пикселей;
  фон: #111;
  положение: абсолютное;
  z-индекс: 99;
  дисплей: нет;
  граница: 0;
}

#menu ul.menus li {
  дисплей: блок;
  ширина: 100%;
  шрифт: 12px Arial;
  преобразование текста: нет;
}

#menu li: наведите указатель ul.menus {
  дисплей: блок
}

#меню a.home {
  фон: #c00;
}

#меню а.претт {
  отступ: 0 27 пикселей 0 14 пикселей
}

#меню a.prett::after {
  содержание: "";
  ширина: 0;
  высота: 0;
  ширина границы: 6px 5px;
  стиль границы: сплошной;
  border-color: #eee прозрачный прозрачный прозрачный;
  положение: абсолютное;
  верх: 15 пикселей;
  справа: 9пикс.
}

#menu ul.menus a:hover {
  фон: #333;
}

#меню ul.menus .submenu {
  дисплей: нет;
  положение: абсолютное;
  слева: 180 пикселей;
  фон: #111;
  сверху: 0;
  ширина: 180 пикселей;
}

#menu ul.menus .submenu li {
  фон: #111;
}

#menu ul.menus .has-submenu: hover .submenu {
  дисплей: блок;
} 
     <навигация>
  <ул>
    
  • Главная
    • 
    
  • Меню
      <ул>
        
  • Раскрывающийся список 1 + подменю
          <ул>
            
  • Подменю
    • 
            
  • Подменю 2
    • 
            
  • Подменю 3
    • 
          
        
        
  • Dropdown 2
    • 
        
  • Dropdown 3
    •

    РЕДАКТИРОВАТЬ:

    С помощью Javascript и нажмите, чтобы открыть: https://jsfiddle. net/thepio/pn0ym10e/2/

    10

    Зарегистрируйтесь или войдите в систему

    Зарегистрируйтесь с помощью Google

    Зарегистрироваться через Facebook

    Зарегистрируйтесь, используя адрес электронной почты и пароль

    Опубликовать как гость

    Электронная почта

    Требуется, но никогда не отображается

    Опубликовать как гость

    Электронная почта

    Требуется, но не отображается

    ARIA&colon.

    роль меню — Доступность

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

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

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

    Меню может быть постоянно видимым списком элементов управления или виджетом, который можно открыть и Закрыть. Закрытый виджет меню обычно открывается или становится видимым путем активации кнопки меню, выбора элемента в меню, открывающего подменю, или вызова команды, такой как Shift + F10 в Windows, которая открывает контекст конкретное меню.

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

    При открытии меню фокус клавиатуры перемещается на первый элемент меню. Чтобы быть доступным с клавиатуры, вам необходимо управлять фокусом для всех потомков: все пункты меню в меню доступны для фокуса. Кнопка меню, которая открывает меню, и элементы меню, а не само меню, являются элементами, на которые можно фокусироваться.

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

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

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

    Элементы с ролью меню имеют неявное aria-orientation значение вертикаль . Для горизонтально ориентированного меню используйте ария-ориентация="горизонтальная" .

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

    Связанные роли, состояния и свойства WAI-ARIA

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

    группа роль

    Пункты меню могут быть вложены в группа

    сепаратор роль

    Разделитель, который разделяет и различает разделы контента или группы пунктов меню в меню

    tabindex атрибут

    Контейнер меню имеет tabindex , установленный на -1 или 0 , и каждый элемент меню имеет tabindex , установленный на -1 .

    ария-активный потомок

    Установите идентификатор элемента в фокусе, если он есть.

    ария-ориентация

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

    aria-label или aria-labeledby

    Меню должно иметь доступное имя. Используйте aria-labeled by , если присутствует видимая метка, в противном случае используйте ария-метка . Либо включите aria-labeledby , установленный в id , в пункт меню , либо кнопку , которая управляет его отображением, либо используйте aria-label для определения метки.

    ария-владеет

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

    Взаимодействие с клавиатурой

    Пробел/ Ввод

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

    Побег

    Находясь в подменю, закрывает подменю и перемещает фокус на родительское меню или элемент строки меню.

    Стрелка вправо

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

    Стрелка влево

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

    Стрелка вниз

    Открывает подменю и перемещает фокус на первый элемент подменю.

    Стрелка вверх

    Открывает подменю и перемещает фокус на последний элемент подменю.

    Дом

    Перемещает фокус на первый элемент в строке меню.

    Конец

    Перемещает фокус на последний пункт в строке меню.

    Клавиша любого символа

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

    Ниже приведены два примера реализации меню.

     <дел>
  <кнопка aria-haspopup="true" aria-controls="меню">
    Разделы страницы

    Чтобы постепенно улучшать этот навигационный виджет, доступный по умолчанию, следует добавить класс для скрытия меню и включение tabindex="-1" в содержимое интерактивного элемента меню с JavaScript при загрузке.

    При включении «меню» для навигации по сайту не используйте роль меню . Скорее, для навигации по основному сайту используйте нативный элемент HTML