JS
Выпадающее меню
Пример кода
<html>
<head>
<style>
.dropbtn { background-color: blue; /*свойство: значение*/ color: white; padding: 16px; /*padding-поле внутреннее*/ font-size: 18px; border: none; cursor: pointer; /*указатель*/ }
.dropbtn:hover, .dropbtn:focus { background-color: green; } .dropdown { position: relative; /*относительный*/ display: inline-block; }
.dropdown-content { display: none; position: absolute; background-color: yellow; min-width: 160px; overflow: auto; /*переполнение*/ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }
.dropdown-content a:hover {background-color: red;}
.show {display:block;}
</style>
</head>
<body>
<p>Drop-down menu - раскрывающееся (вниз) или падающее меню.</p>
<div class="dropdown">
<button id="myBtn" class="dropbtn">Открыть</button>
<div id="myDropdown" class="dropdown-content">
<a href="#home">Главная</a>
<a href="#about">О Нас</a>
<a href="#contact">Контакты</a>
</div>
</div>
<script>
document.getElementById("myBtn").onclick = function() {myFunction()}; /*Метод документ.получитьЭлемент С АйДи (мояКнопка) с принимаемыми параметрами, аргументами "клик" и myFunction, вызывает обработчик события и функцию.*/
function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); /* Функция myFunction классСписок classList переключается toggle между добавлением и удалением класса show, который используется для скрытия и отображения содержимого выпадающего списка */}
</script>
</body>
</html>
Вывод на экран
Браузер выведет результат работы скрипта - Drop-down menu - раскрывающееся (вниз) или падающее меню.
Остались вопросы? Нужна помощь? Напишите администратору сайта.