Понадобилось для сайта мобильное меню на чистом JavaScript с плавным выдвижением пунктов.
Нашел очень хороший рабочий вариант меню на чистом JavaScript:
codepen.io/alexwaddelove/pen/XgMwGw/right/.
Но мне нужно было чуть попроще и по-другому. По-этому внес в скрипт и css небольшие изменения.
<!DOCTYPE html><html><head><title></title>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head><body>
<style>
body {font-size: 18px; background-color: #d1d1d1; padding: 0; margin: 0;}
header {background-color: #c1c1c1; padding: 0; margin: 0;}
#main-nav {visibility: visible !important; height: 0; margin: 0; padding: 0;}
.main-nav li {display:inline-block; padding: 0;}
.main-nav ul {padding: 0; margin: 0;}
#menu-toggle {display:none;}
@media screen and (max-width: 720px) {
#menu-toggle {cursor: pointer; display: block; text-align: left;}
#main-nav {visibility: hidden; height: 0; padding: 0; margin: 0; overflow: hidden; transition: height 0.5s ease-out, visibility 0.5s ease-out;}
.main-nav li {transition: height 0.5s ease-out; width:100%; text-align: left;}
.main-nav.responsive li {width: 100%; text-align: left;}
#indicator {float: right; padding-right:10px;}
}
</style>
<header>
<span id="menu-toggle">Главное меню <span id="indicator">∨</span></span>
<ul id="main-nav" class="main-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Ask</a></li>
<li><a href="#">Why</a></li>
</ul>
</header>
<script>
document.getElementById("menu-toggle").addEventListener("click", mobile_menu);
function mobile_menu()
{
let x = document.getElementById("main-nav");
let i = document.getElementById("indicator");
if (x.className === "main-nav") {x.className += " responsive"; i.innerHTML = '∧';}
else {x.className = "main-nav"; i.innerHTML = '∨'}
if (x.style.height){x.style.height = null; x.style.visibility = 'hidden';}
else {x.style.height = x.scrollHeight + "px"; x.style.visibility = 'visible';}
}
</script>
</body>
</html>
