Выпадающее меню css html: Как создать выпадающее меню

  г. Москва, улица Челюскинская, дом 11

  [email protected]

  +7 (915) 0-444-383

© 2007-2023, Capitan Studio — Разработка и создание сайтов.

Политика в отношении обработки персональных данных

На портале могут быть использованы материалы интернет-ресурсов Facebook и Instagram, владельцем которых является компания Meta Platforms Inc., запрещенная на территории Российской Федерации.

Разработка сайта CapitanStudio

CAPITANSTUDIO.RU использует cookie (файлы с данными о прошлых посещениях сайта) для персонализации сервисов и удобства пользователей. CAPITANSTUDIO.RU серьезно относится к защите персональных данных — ознакомьтесь с условиями и принципами их обработки. Вы можете запретить сохранение cookie в настройках своего браузера.

Создание примера выпадающего меню с помощью CSS :focus-within

В сегодняшнем примере мы создадим выпадающее меню на чистом CSS, используя псевдокласс :focus-within .

Вы можете увидеть в видео ниже рабочий пример:

Как работает псевдоселектор CSS :focus-within

:focus-within выбирает элемент, если этот элемент содержит дочерние элементы, находящиеся в фокусе.

Он связан с псевдоклассом :focus , просто он сработает, если будет выбрано что-то, что содержится в этом элементе.

В отличие от :focus , который применяется непосредственно к самому элементу, правила :focus-within применяются к родительскому элементу, на который наведен фокус.

Создание выпадающего меню CSS с помощью :focus-within

Чтобы создать меню, мы начнем с базовой структуры HTML, подобной приведенной ниже:

 

    

        
☰ Выпадающее меню
        <дел>
            💼 Услуги
            💰 Бизнес
        
    
 

Добавим немного CSS, чтобы сделать меню первоначальным:

 . menu-container {
    дисплей: встроенный гибкий;
    flex-направление: строка;
    граница: сплошная 2px #000000;
    курсор: указатель;
}
.меню {
    положение: родственник;
    прокладка: 0rem 0.5rem;
}
.меню > .меню-контент {
    дисплей: нет;
} 

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

Причина, по которой нам нужно использовать tabindex="0" , заключается в том, что меню можно будет выбрать, когда пользователь перемещается. с клавиатурой.

Чтобы добавить раскрывающийся список, добавятся дополнительные правила, основанные на псевдоклассе :focus-within :

 .menu > .menu-content {
    дисплей: нет;
    положение: абсолютное;
    граница: сплошная 2px #000000;
}
.menu: focus-within > .menu-content {
    дисплей: гибкий;
    flex-направление: столбец;
}
.меню {
    набивка: 0,5 бэр;
    отображение: встроенный блок;
    цвет: #000000;
} 

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

Если бы у нас было всего .menu:focus > .menu-content раскрывающееся меню закрывалось бы при навигации по элементам из этого раскрывающегося списка. Поэтому необходимо использовать :focus-within .

Ознакомьтесь с полным рабочим кодом здесь.

Добавление вложенных выпадающих меню

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

 

    

        
☰ Выпадающее меню
        <дел>
            💼 Услуги
            💰 Бизнес
            

              
📚 Меню книг
              <дел>
                📕 Красный
                📗 Зеленый