Здравствуйте. Написал код, но не отображается крестик при нажатии на сам бургер. Точнее, ничего не происходит при классе .active. В dev tools класс active отображается, но в верстке ничего не меняется. Не могу найти ошибку.
Вот эти классы и псевдоклассы должны менять положение линий, но не меняют:
.header__burger.active:before {
transform: rotate(45deg);
top: 9px;
}
.header__burger.active:after {
transform: rotate(-45deg);
bottom: 9px;
}
.header__burger.active span {
transform: scale(0);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<header class="header">
<div class="container">
<div class="header__body">
<a href="" class="header__logo">
<img src="kwork.png" alt="">
</a>
<div class="header__burger">
<span></span>
</div>
<nav class="header__menu">
<ul class="header__list">
<li>
<a href="" class="header__link">Главная</a>
</li>
<li>
<a href="" class="header__link">Уроки</a>
</li>
<li>
<a href="" class="header__link">Шпаргалки</a>
</li>
<li>
<a href="" class="header__link">Полезное</a>
</li>
<li>
<a href="" class="header__link">О канале</a>
</li>
<li>
<a href="" class="header__link">Контакты</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<div class="content">
<div class="container">
<div class="content__text">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid rerum quo unde itaque ipsam temporibus reprehenderit, exercitationem, id autem officia, sapiente odio tempore beatae error doloremque quae sed dolor vero! Qui fugit temporibus similique accusantium nulla vero laudantium. Praesentium ipsam sapiente autem facere deleniti, repellendus architecto iusto beatae maiores nisi, hic eum inventore suscipit omnis numquam itaque. Ipsum libero commodi deleniti, necessitatibus nulla nobis quidem quam dolorum porro impedit provident delectus accusantium eos maxime, aliquid numquam accusamus. Officia ratione nisi et nobis quas autem nulla. Nam dolorem nesciunt quo hic ad id animi unde assumenda eveniet necessitatibus totam repellat quam eius, illum eaque tempore corrupti nihil sapiente esse pariatur! Officiis autem quisquam impedit a ex dolorum velit dicta natus voluptatibus quibusdam voluptatem nemo repellendus alias doloremque eius distinctio nam, tenetur commodi voluptas ut suscipit odio libero. Iste hic culpa enim ipsam maxime excepturi molestiae, nisi, corrupti commodi dignissimos ea accusamus consequuntur quia odit, soluta quis ex impedit. Impedit in repudiandae doloribus nihil at odit tempora recusandae a possimus, necessitatibus voluptate natus consectetur facilis, nesciunt architecto voluptatum ipsam delectus numquam, vitae cupiditate vel expedita! Blanditiis dicta perferendis perspiciatis quia ipsam consequuntur sunt, nobis beatae rem neque eligendi nihil id molestias dolor! Accusantium explicabo ab eligendi asperiores aperiam eaque quas ex nam minima ipsa consequuntur cum quam voluptatum qui quisquam, odio officia repellat vero dolor autem quaerat distinctio. Cupiditate tempore fugiat, quas libero saepe quam! Qui unde eius repellendus eos architecto quas perspiciatis amet a nesciunt accusamus ex quasi non ducimus harum ullam, suscipit sed tempore. Accusamus aperiam odio dolor molestiae ut ratione ipsam, optio accusantium culpa dolore doloremque vero minus placeat ad aspernatur blanditiis quaerat distinctio numquam nobis autem voluptatum quos soluta laboriosam incidunt. Reprehenderit suscipit dolorem numquam, in alias labore error necessitatibus ut minus placeat perferendis id non tempora ipsam sunt hic totam unde explicabo iure! Sit quisquam tempore quaerat sed cupiditate porro asperiores repellendus deleniti veniam facilis. Quia expedita asperiores animi quidem consequuntur reprehenderit sequi perferendis distinctio doloremque eum rem accusantium nisi nesciunt, quaerat doloribus. Necessitatibus repellendus, beatae modi iste iure nihil corrupti ab quasi aperiam magnam officia error, non, dolores aut fugiat. Ut aliquam repudiandae voluptate ea quia quod tenetur perspiciatis corrupti similique alias. Suscipit, praesentium iusto similique veniam voluptatem cumque, laudantium aperiam quidem sint porro accusantium voluptates harum recusandae cupiditate ut reiciendis nulla eveniet asperiores doloremque? Possimus expedita eos magnam ab atque quisquam repudiandae exercitationem, placeat dicta aliquid ea similique fugit quo illum. Voluptas quidem enim quae velit, nobis molestias blanditiis exercitationem placeat laboriosam. Aperiam, iusto labore. Neque maiores sit optio beatae voluptatum veritatis reiciendis ipsam dicta sed explicabo aliquid ad porro, ratione error sint non, deserunt ut fuga, cupiditate soluta expedita? Pariatur soluta laborum similique veritatis voluptate porro cumque molestiae dolorem corporis quisquam, nemo velit alias cum quo blanditiis dicta veniam sint ipsa numquam ut deleniti minus vitae? Quaerat mollitia quae magni, at repellendus praesentium aspernatur ex tempora quam consectetur hic commodi molestiae deleniti qui? Nesciunt sed ex quia voluptatibus dolorum maxime at odio ipsum officia?
</p>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="app.js"></script>
</body>
</html>
*, *:after, *:before {
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
/*Стили для лемонстрации*/
.wrapper {
}
/*Основные стили*/
.container {
max-width: 1180px;
margin: 0px auto;
padding: 0px 10px;
}
.header {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 50;
}
.header:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: purple;
z-index: 2;
}
.container {
}
.header__body {
position: relative;
display: flex;
justify-content: space-between;
height: 80px;
align-items: center;
}
.header__logo {
flex: 0 0 60px;
border-radius: 50%;
overflow: hidden;
position: relative;
z-index: 3;
}
.header__logo img {
max-width: 100%;
display: block;
}
.header__burger {
display: none;
}
.header__menu {
}
.header__list {
display: flex;
position: relative;
z-index: 2;
}
.header__list li {
list-style: none;
margin: 0px 0px 0px 20px;
}
.header__link {
color: white;
text-transform: uppercase;
font-size: 18px;
text-decoration: none;
}
.content {
padding: 100px 0px 0px 0px;
}
.content__text {
font-size: 18px;
line-height: 25px;
}
.content__text p {
margin: 0px 0px 20px 0px;
}
@media (max-width: 767px) {
.header__body {
height: 50px;
}
.header__logo {
flex: 0 0 40px;
}
.header__burger {
display: block;
position: relative;
width: 30px;
height: 20px;
position: relative;
z-index: 3;
}
.header__burger span {
position: absolute;
background-color: white;
position: absolute;
left: 0;
width: 100%;
height: 2px;
top: 9px;
}
.header__burger:before,
.header__burger:after {
content: '';
background-color: white;
position: absolute;
width: 100%;
height: 2px;
left: 0;
}
.header__burger:before {
top: 0;
}
.header__burger:after {
bottom: 0;
}
.header__burger.active:before {
transform: rotate(45deg);
top: 9px;
}
.header__burger.active:after {
transform: rotate(-45deg);
bottom: 9px;
}
.header__burger.active span {
transform: scale(0);
}
.header__menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: green;
padding: 70px 10px 20px 10px;
}
.header__list {
display: block;
}
.header__list li {
margin: 0px 0px 20px 0px;
}
}
$(document).ready(function() {
$('.header__burger').click(function(event) {
$('.header__burger,.header__menu').toggleClass('.active');
});
});
Простой
