всем привет, класс приписывается для меню в коде( отлавливаю в логе), но меню не развертывается. в чем может быть проблема?
<nav class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">About us</a></li>
</ul>
</nav>
<a href="#" class="menu-button">
<span></span>
<span></span>
<span></span>
<span></span>
</a>
</header>
<div class="mobile-menu-container">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">About us</a></li>
</ul>
</nav>
</div>
const MenuButtom = document.querySelector('.menu-button');
const MobileMenu = document.querySelector('.mobile-menu-container');
document.querySelector('.menu-button').onclick = function(e){
MobileMenu.classList.toggle('active');
console.log(MobileMenu);
}
.navbar a {
text-decoration: none;
color: rgba(0, 0, 0, .60);
transition: color 200ms ease-in;
}
.navbar li:hover > a {
color: rgba(0, 0, 0, .85);
}
.logo img {
display: block;
max-height: 3.5rem;
}
.menu {
display: none;
}
.menu-button {
display: inline-block;
}
.content {
width: 50%;
margin: 0 auto;
padding: 2rem 0;
}
/** ---------------------------------------------------------------------------
* Menu button.
* ------------------------------------------------------------------------- */
.menu-button {
display: inline-block;
transition: .3s ease-in-out;
width: 35px;
height: 24px;
position: relative;
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-ms-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
}
.menu-button span {
position: absolute;
height: 4px;
border-radius: 10px;
width: 100%;
background-color: #3D4146;
top: 0;
transition: transform .2s ease-in-out, opacity .2s ease-in-out;
}
.menu-button span:nth-child(1) {
top: 0;
}
.menu-button span:nth-child(2),
.menu-button span:nth-child(3) {
top: 10px;
}
.menu-button span:nth-child(4) {
top: 20px;
}
.menu-button.active span:nth-child(1),
.menu-button.active span:nth-child(4) {
opacity: 0;
}
.menu-button.active span:nth-child(2) {
transform: rotate(45deg);
}
.menu-button.active span:nth-child(3) {
transform: rotate(-45deg);
}
/* Mobile menu. */
.mobile-menu-container {
display: none;
background-color: #3D4146;
text-align: center;
}
.mobile-menu-container ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.mobile-menu-container a {
color: #fff;
display: block;
padding: .75rem 0;
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, .2);
}
.mobile-menu-container a:hover {
background-color: rgb(46, 49, 53);
}
@media (min-width: 900px) {
.mobile-menu-container {
display: none !important;
}
.menu-button {
display: none;
}
.menu {
display: block;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu li {
position: relative;
}
.menu > ul > li {
display: inline-block;
}
.menu > ul > li > a {
display: inline-block;
padding: 1rem 1.5rem;
font-weight: bold;
}
/* 2nd level. */
.menu li ul {
opacity: 0;
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
width: 15rem;
padding: 1.5rem 0;
background: #F3F5F6;
transition: all 200ms ease;
z-index: 10000;
border-radius: 5px;
}
.menu li:hover > ul {
opacity: 1;
visibility: visible;
}
.menu li ul a {
display: block;
padding: 0.5rem 1.5rem;
}
/* 3rd level. */
.menu li ul li ul {
top: -1.5rem;
left: 100%;
z-index: 9000;
}
/* Drop-down arrows. */
.menu > ul > li.has-submenu:after,
.menu li ul li.has-submenu:after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
}
/* 1st level arrows. */
.menu > ul > li.has-submenu:after {
right: 5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid rgba(0, 0, 0, .25);
}
/* 2nd level arrows. */
.menu li ul li.has-submenu:after {
right: 1.5rem;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid rgba(0, 0, 0, .25);
}
}
