У меня есть пара проблем, во-первых, то, что переключатель меню не работает на определенной ширине экрана, которая определяется медиа-запросом. Переключатель меню состоит из трех тегов диапазона, которые должны вращаться при нажатии, как определено в CSS. Это работало несколько дней go, но по какой-то причине остановилось, и я не могу понять, почему.
Я также хотел бы знать, как заставить плавно выпадающее подменю и оставаться там, когда ссылка есть внутренняя часть кликается как на весь экран, так и на максимальной ширине 767 пикселей, используя Jquery. Спасибо.
[Навбар] [1]
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<nav>
<div class="row">
<img src="resources/img/andy_logo.png" alt="Andy logo" class="logo">
<!-- <img src="resources/img/andy_logo2.png" alt="Andy logo2" class="logo2">-->
<!-- include logo in same place-->
<ul class="main-nav js--main-nav">
<li><a href="#hero">HOME</a></li>
<li><a href="#features">ABOUT</a></li>
<li id="inner"><a href="#plans">PUBLIC SPEAKING COURSES</a>
<ul class="dropdown">
<li><a href="">London Public Speaking Club</a></li>
<li><a href="">Online Course</a></li>
<li><a href="">Fear of Public Speaking Workshop</a></li>
</ul>
</li>
<li><a href="#contact">CONTACT</a></li>
</ul>
<div class="menu_toggler">
<span></span>
</div>
</div>
</nav>
<body>
</body>
</html>
```
CSS
``` html, body
{
background-color: #aaa;
color: #000;
font-family: 'Lato', 'Arial', sans-serif;
font-size: 20px;
font-weight: 300;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
.row {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
.row:before,
.row:after {
content:"";
display:table;
}
.row:after {
clear:both;
}
.row {
max-width: 1140px;
margin: 0 auto;
}
.group:after {
content: "";
display: table;
clear: both;
}
nav {
height: 8%;
}
.main-nav {
margin-top: .8em;
float: right;
list-style: none;
text-decoration: none;
}
.main-nav li {
display: inline-block;
margin-left: 40px;
}
.main-nav li a:link,
.main-nav li a:visited {
padding: 8px 0;
color: #000;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
/* create before hover*/
border-bottom: 2px solid transparent;
transition: border-bottom 0.6s;
}
ul li:hover > ul.dropdown,
ul li ul:hover li:hover{
visibility: visible;
opacity: 1;
display: block;
}
ul li ul.dropdown li {
clear: both;
width: 100%;
}
.main-nav li a:hover,
.main-nav li a:active {
border-bottom: 2px solid #1F61C1;
}
.main-nav li ul {
visibility: hidden;
opacity: 0;
display: none;
position: absolute;
transition: all 1s ease;
margin-top: 1rem;
display: none;
/* right: 0;*/
}
.main-nav li ul.dropdown li {
margin: 0.3em;
}
@media only screen and (max-width: 767px) {
.menu_toggler {
position: absolute;
top: 20px;
right: 20px;
z-index: 9999;
height: 28px;
width: 28px;
outline: none;
cursor: pointer;
display: flex;
align-items: center;
/* background: #fff;*/
}
span,
span::after,
span::before {
position: absolute;
content: '';
width: 28px;
height: 2.5px;
background: #000;
border-radius: 20px;
transition: 600ms cubic-bezier(0.77,0,0.175, 1);
/* cubic-bezier(0.77,0,0.175, 1)*/
}
span::before {
top: -8px;
}
span::after {
top: 8px;
}
.menu_toggler.active > span {
background: #000;
}
.menu_toggler.active > span::after,
.menu_toggler.active > span::before {
background: #000;
top: 0;
}
.menu_toggler.active > span::before {
transform: rotate(-225deg);
}
.menu_toggler.active > span::after {
transform: rotate(225deg);
}
.main-nav {
display: none;
}
.main-nav {
float: left;
width: 100%;
/* display: block;*/
font-size: 1.8em;
}
.main-nav.active {
transition: 2s;
display: block;
}
.main-nav li {
display: block;
margin: 0 auto;
text-align: center;
}
.main-nav li a:link,
.main-nav li a:visited {
display: block;
border: 0;
padding: 10px 0;
font-size: 100%;
}
.main-nav li ul.dropdown {
display: block;
margin: 0 auto;
/* position: absolute;*/
/* left: 50;*/
width: 100%;
text-align: center;
}
.main-nav {
display: none;
}
}
JS
var iconMenu = document.querySelector('.menu_toggler');
var menu = document.querySelector('.main-nav');
iconMenu.addEventListener('click', function () {
this.classList.toggle('active');
// menu.classList.toggle('active');
// menu.slideToggle(200);
var nav = $('.js--main-nav');
nav.slideToggle(200);
[1]: https://codepen.io/nezmustafa123/pen/KKpegNe