Я пытаюсь клонировать веб-сайт в учебных целях с W3CSS и простым javascript. Здесь - это материал, который я уже создал.Моя проблема в том, что div с id #menu не отображается на экране после нажатия значка гамбургера на маленьких экранах, однако он присутствует в devtools для chrome и ff при его переключении.Я проверил множество вещей в css, таких как display:, z-index:, background-color:, overflow:, что бы то ни было, даже пытался напечатать материал с js на консоль относительно компьютерного стиля и еще много чего, но ничто не привело меня к какому-либо решению,Когда я проверил вышеупомянутое перо на своем мобильном телефоне с Chrome, кнопка переключения (та, что со значком гамбургера) не была расположена в середине строки меню, и при нажатии на нее, чтобы открыть раскрывающийся список, первый элемент меню стал видимым(фактически верхняя часть элемента <a>, которая помещается на верхней панели навигации).Я также опубликую здесь полный код html && css && js, до н.э. этого надоедливого красного восклицательного знака.
html
function toggleMenu() {
let toggler = document.getElementById('menu-toggler');
let menu = document.getElementById(toggler.dataset.menu);
if (hasClass(menu, 'w3-hide-small')) {
rmClass(menu, 'w3-hide-small');
console.log(window.getComputedStyle(menu).backgroundColor);
let children = menu.childNodes;
let height = 0;
for (let child of children) {
if (child instanceof Element) {
height += child.offsetHeight;
}
}
menu.style.height = height + 'px';
} else {
menu.style.height = '';
// 500 is the length of the transition
window.setTimeout(() => {
addClass(menu, 'w3-hide-small');
}, 500);
}
}
function hasClass(elem, cl) {
if (elem.className.includes(cl)) {
return true;
}
return false;
}
function addClass(elem, cl) {
if (!hasClass(elem, cl)) {
elem.className += ' ' + cl;
}
}
function rmClass(elem, cl) {
if (hasClass(elem, cl)) {
elem.className = elem.className.replace(' ' + cl, '');
}
}
.w3-hover-flat-emerald:hover {
color: #fff;
background-color: #2ecc71 !important;
}
nav {
height: 80px;
}
nav .w3-hide-small a {
height: 80px;
line-height: 64px;
}
nav .w3-hide-small a:hover {
color: #2ecc71 !important;
background-color: transparent !important;
}
nav img {
height: 80px;
}
nav .w3-content {
position: relative;
}
nav button {
position: absolute;
top: 50%;
right: 0;
transform: translate(0, -50%);
}
#menu {
transition: height 0.5s linear 0.1s;
overflow: hidden;
}
@media screen and (max-width: 600px) {
#menu {
height: 0;
}
nav .w3-hide-small a {
height: auto;
}
}
<!doctype html>
<html>
<head>
<title>copy_lesson</title>
<meta name="viewport" content="width=device-width, intial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-camo.css">
<link rel="stylesheet" href="../w3.css/w3-colors-flat.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" href="style/css/main.css">
</head>
<body>
<nav class="w3-bar w3-camo-black w3-xlarge">
<div class="w3-content">
<a href="#">
<img class="w3-padding" src="http://www.hhtrans.sk/img/logo.png" alt="logo">
</a>
<button onclick="toggleMenu()" id="menu-toggler" data-menu="menu" type="button" class="w3-hover-flat-emerald w3-margin-right w3-button w3-hide-medium w3-hide-large w3-right">
<i class="fas fa-bars"></i>
</button>
<div id="menu" class="w3-mobile w3-right w3-hide-small w3-large">
<a href="#" class="w3-button w3-bar-item w3-mobile">Home</a>
<a href="#" class="w3-button w3-bar-item w3-mobile">About</a>
<a href="#" class="w3-button w3-bar-item w3-mobile">Contacts</a>
</div>
</div>
</nav>
<script src="style/js/main.js"></script>
</body>
</html>
Любой был бы оценен.Заранее спасибо:)