Добрый день всем, делаю версию сайта под мобилу и начал делать так чтобы часть меню скрылась а часть осталасб, и media запросами регулирую стили для меньших разрешений экрана, но почему то на меньшем разрешение (моб версия) у меня при нажатии на гамбургер не выскакивает меню, уже не знаю что и пробовать, в консоле разработчика проверил, свойство active правильно вроде меняется, в чем проблема кто поможет?
index ejs
<html lang="eng">
<head>
<meta charset="utf-8">
<link href="./public/css/index.css" rel="stylesheet" type="text/css" />
<link href="./public/css/header.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<% include blocks/header.ejs %>
</header>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.js "></script>
<script>
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.wrapper ul').toggleClass('active');
e.preventDefault();
});
});
</script>
</body>
</html>
header ejs (подключаемый блок)
<nav class="wrapper"><!--Общая обертка для деск и моб версии-->
<div class="logo">Логотип Сайта</div>
<div class="nav-bar">
<ul class="active">
<li class="current-item"><a href="#">Search</a></li>
<li><a href="#">Вкладка 1</a></li>
<li><a href="#">Вкладка 2</a></li>
<li><a href="#">Вкладка 3</a></li>
</ul>
</div>
<div class="empty"></div>
<div class="reg-bar">
<ul class="active">
<li><a href="#">Sign In</a></li>
<li><a href="#">Sign Up</a></li>
</ul>
</div>
<a class="toggle-nav" href="#">☰</a>
</nav>
css для header ejs
* {
margin: 0;
padding: 0;
box-sizing: border-box; }
li {
list-style: none;
}
.toggle-nav {
display: none;
}
.logo {
background-color: blue;
color: #34d60b;
font-size: 36px;
text-shadow: 0px 0px 0 #03a500, 1px -1px 0 #007d00, 2px -2px 0 #005600, 3px -3px 2px rgba(0, 0, 0, 0.05), 3px -3px 1px rgba(0, 0, 0, 0.5), 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.nav-bar {
background-color: lightgreen;
}
.wrapper ul {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
padding-top: 15px;
}
.empty {
background-color: orange;
}
.reg-bar {
background-color: yellow;
}
.wrapper a {
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:#777;
transition:color linear 0.15s;
}
.wrapper a:hover, .wrapper .current-item a {
text-decoration:none;
color:#66a992;
}
.wrapper {
display: grid;
grid-template-columns: 320px 400px 400px 200px auto;
grid-template-rows: 50px; }
@media screen and (min-width: 860px){
.wrapper {
width:100%;
padding:10px 18px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:red;
}
}
@media screen and (max-width: 970px) {
.logo {
width: 280px;
padding-left: 5px;
}
}
@media screen and (max-width: 860px) {
.wrapper {
background-color: blue;
position: relative;
display: inline-block;
width: 100%;
}
.nav-bar {
display: none;
}
.reg-bar {
display: none;
}
.empty {
display: none;
}
.wrapper ul.active {
display: none;
}
.wrapper ul {
width: 100%;
position: absolute;
top: 120%;
left: 0px;
padding: 10px 18px;
box-shadow: 0px 1px 1px rgba(0,0,0,0.15);
border-radius: 3px;
background: violet;
}
.wrapper ul::after {
width: 0px;
height: 0px;
position: absolute;
top: 0%;
left: 22px;
content: '';
transform: translate(0%, -100%);
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #303030;
}
.wrapper li {
margin: 5px 0px 5px 0px;
float: none;
display: block;
}
.wrapper a {
display: block;
}
.toggle-nav {
margin-top: 3px;
margin-left: 3px;
padding:4px;
float:left;
display:inline-block;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:green;
font-size:20px;
transition:color linear 0.15s;
}
.toggle-nav:hover, .toggle-nav.active {
text-decoration: none;
color: #66a992;
}
.logo {
float: left;
font-size: 34px;
box-shadow:-1px 1px 2px rgba(0,0,0,0.1);
}
}
Помогите пожалуйтса кто нибудь!!!
Простой
