Раскрывающееся меню HTML
Я изо всех сил пытаюсь создать очень простое раскрывающееся меню с использованием элементов списка. Может ли кто-нибудь рассказать мне, как бы я создал раскрывающееся меню ниже:
<div class = "main-menu">
<ul class = "menu-list">
<li><a href = "#">One</a></li>
<li><a href = "#">Two</a></li>
<li><a href = "#">Three</a></li>
<li><a href = "#">Four</a></li>
<li><a href = "#">Drop Down</a></li>
</ul>
У меня нет проблем с CSS, поэтому стилизация не должна быть проблемой, но я пытаюсь добиться этого без использования Javascript.
Ах я вижу. Хорошо, не могли бы вы подсказать мне самый простой способ сделать это с минимальным использованием Javascript? Я не специалист по HTML или Javascript: /
@VaibhavVishal & @BobVandevliet возможно без Javascript, например, с использованием checkbox или :hover.
@DanAnderton Вы можете найти много примеров выпадающего меню в Интернете, вы искали какие-то учебные пособия?
Ответы 2
есть несколько ссылок для вашего ответа.
- Без CSS [1]: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select
- С CSS [2]: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar
Если это вас беспокоит, есть самое простое решение.
Я полагаю, у вас нет проблем с вашим CSS, хотя создание раскрывающегося списка - это здорово!
Внутри тега Body: введите те:
<body>
<select>
<option value = "volvo">Volvo</option>
<option value = "saab">Saab</option>
<option value = "opel">Opel</option>
<option value = "audi">Audi</option>
</select>
</body>Это может сработать по мере необходимости.
Спасибо.
Если вы используете <div>, вам понадобится CSS для работы без JS. Если вы используете <select>, нет необходимости в дополнительном CSS или JS.
Это, безусловно, возможно без JS, установив вложенные параметры раскрывающегося списка, чтобы не отображать ничего, а затем сгибать или блокировать их при наведении курсора на их родительский элемент. Вот простой пример с использованием вашего кода:
https://codepen.io/ehavener/pen/gBLOXV
HTML
<div class = "main-menu">
<ul class = "menu-list">
<li><a href = "#">One</a></li>
<li><a href = "#">Two</a></li>
<li><a href = "#">Three</a></li>
<li><a href = "#">Four</a></li>
<li><a href = "#">Drop Down</a>
<ul>
<li><a href = "#">One</a></li>
<li><a href = "#">Two</a></li>
</ul>
</li>
</ul>
</div>
CSS
.main-menu ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
}
.main-menu ul li a {
padding: 20px;
display: block;
color: #ddd;
text-decoration: none;
background: #21263E;
}
.main-menu ul li ul {
display: none;
}
.main-menu ul li:hover ul {
display: flex;
flex-direction: column;
}
.main-menu ul li:hover a {
color: #fff;
}
привет, я тоже так думаю, без Javascript невозможно. Вам нужно привязать js-функцию к событию
onclick, которое изменяет некоторые css, чтобы показать / скрыть меню.