DropDown Menu vanilla js
Добрый вечер!Не могу разобраться с задачей(
Реализовать примитивный дропдаун. Изначально все dropdown-menu скрыты через класс .d-none. При клике на dropdown-item должен отображаться блок dropdown-menu который вложен именно в тот dropdown-item на котором произошел клик. При повторном клике на этот же dropdown-item блок dropdown-menu должен закрыться. При клике на любой другой dropdown-item уже открытый dropdown-menu должен закрываться а на тот который кликнули открываться. <ul class="menu"> <li class="dropdown-item"> <span>Dropdown menu item</span> <div class="dropdown-menu d-none"> <ul class="dropdown-list"> <li>Dropdown item 1</li> <li>Dropdown item 2</li> </ul> </div> </li> <li> <span>Menu item</span> </liЮ <li class="dropdown-item"> <span>Dropdown menu item 2</span> <div class="dropdown-menu d-none"> <ul class="dropdown-list"> <li>Second Dropdown item 1</li> <li>Second Dropdown item 2</li> </ul> </div> </li> </ul> |
Заменил SPAN на A, и LI на LI > A дабы увеличить доступность! (У вас совершенно не фокусируемые разделы)
Цитата:
Цитата:
Вот так получилось... <nav> <ul> <li> <a href="#">Dropdown menu item</a> <ul> <li><a href="#1">Dropdown item 1</a></li> <li><a href="#2">Dropdown item 2</a></li> <li><a href="#3">Dropdown item 3</a></li> </ul> </li> <li> <a href="#blog">Category</a> <ul> <li><a href="#1">Category 1</a></li> <li><a href="#2">Category 2</a></li> <li><a href="#3">Category 3</a></li> </ul> </li> <li> <a href="#about">About</a> <ul> <li><a href="#1">Bio</a></li> <li><a href="#2">Photos</a></li> <li><a href="#3">Social</a></li> </ul> </li> </ul> </nav> <style> nav ul { display: flex; justify-content: center; list-style: none; padding: 0; } nav li { flex: 1; position: relative; } nav a { display: block; text-decoration: none; background: rebeccapurple; font-weight: bold; color: white; padding: 1em; text-align: center; } nav li li a { background: #e6d9f2; color: black; font-weight: 300; } nav a:focus { background: #ff5500; } nav a + ul { position: absolute; flex-flow: column; width: 100%; } /* механизм переключения видимости */ nav li ul { display: none; } nav li:focus-within ul { display: initial; } nav li:focus ul { display: initial; } nav a:focus { background: black; color: white } </style> |
Часовой пояс GMT +3, время: 14:10. |