рони, весь код с которым вожусь. Хотел сделать: клик по .sidenav меняет текст и одновременно открывает либо закрывает сайдбар; всё это работает, но чуток не так: клик по .sidenav меняет текст, а сайдбар открывается либо закрывается только по второму клику. То есть, чтобы открыть сайдбар нужно кликнуть openclosebtn два раза, чтоб закрыть то же два раза..
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Главная</title>
<link rel="stylesheet" href="css/libs.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="fonts/stylesheet.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div id="mySidenav" class="sidenav">
<span class="nav_top_word">Список Меню</span>
<ul class="breadcrumbs">
<li>
<a href="index.html" target="_blank">Lorem</a>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
</li>
<li>
<a href="documents.html" target="_blank">Lorem</a>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
</li>
<li>
<a href="service.html" target="_blank">Lorem</a>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
</li>
<li>
<a href="news.html" target="_blank">Lorem</a>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
</li>
<li>
<a href="gallery.html" target="_blank">Lorem</a>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
</li>
<li>
<a href="reports.html" target="_blank">Lorem</a>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
</li>
<li>
<a href="contacts.html" target="_blank">Lorem</a>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
</li>
<li>
<a href="contacts.html" target="_blank">Lorem</a>
<p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p>
</li>
</ul>
</div>
<div id="main">
<span class="openclosebtn">Меню</span>
</div>
<script src="js/libs.min.js"></script>
<script src="js/common.js"></script>
</body>
</html>
body {
font-family: 'play', sans-serif;
color: #343741;
position: relative;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
background: #f9f9f9;
}
.wrapper {
position: absolute;
}
.wrapper main {
padding-left: 300px;
width: 700px;
height: 2000px;
margin-top: 200px;
}
.nav_top_word,
p,
a {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background: #fff;
overflow-x: hidden;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.sidenav .nav_top_word {
position: relative;
height: 95px;
background: #F5F8FC;
color: #0072ce;
font-size: 18px;
font-weight: 700;
font-style: normal;
line-height: 95px;
padding-left: 17px;
display: block;
min-width: 300px;
}
.sidenav .nav_top_word:before {
position: absolute;
content: '';
display: block;
height: 10px;
width: 10px;
border: 2px solid #004ea8;
border-left: none;
border-bottom: none;
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
top: 35px;
left: 340px;
}
.sidenav a {
font-size: 18.5px;
font-weight: 700;
font-style: normal;
padding: 8px 8px 8px 13px;
text-decoration: none;
color: #004ea8;
display: block;
letter-spacing: 1px;
}
.breadcrumbs {
margin-top: 70px;
padding-bottom: 50px;
}
.breadcrumbs li {
position: relative;
height: 119px;
}
.breadcrumbs li:hover::after {
position: absolute;
content: '';
display: block;
height: 10px;
width: 10px;
border: 2px solid #fff;
border-left: none;
border-bottom: none;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
top: 20px;
left: 340px;
}
.breadcrumbs li:hover {
background: #0072ce;
}
.breadcrumbs li:hover p,
.breadcrumbs li:hover a {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}
.breadcrumbs li:hover a {
text-decoration: underline;
}
.breadcrumbs li:hover:hover * {
color: #fff;
}
.breadcrumbs p {
font-size: 14.5px;
font-style: normal;
font-weight: 400;
width: 300px;
padding: 51px 0 12px 13px;
line-height: 1.2;
letter-spacing: .5px;
}
.breadcrumbs a {
position: absolute;
height: 100%;
width: 100%;
top: 8px;
}
.breadcrumbs a::after {
position: absolute;
content: '';
display: block;
height: 10px;
width: 10px;
border: 2px solid #000;
border-left: none;
border-bottom: none;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
top: 12px;
left: 340px;
}
#main {
position: fixed;
left: 0px;
top: 0;
-webkit-transition: left .5s;
-o-transition: left .5s;
transition: left .5s;
width: 100%;
height: 89px;
line-height: 89px;
text-align: left;
background: #343741;
z-index: 100;
}
#main span {
position: relative;
display: inline-block;
font-size: 18px;
font-weight: 400;
font-style: normal;
color: #E5E8ED;
margin-left: 80px;
border: 1px solid #fff;
-webkit-border-radius: 2px;
border-radius: 2px;
cursor: pointer;
line-height: 2;
padding: 0 10px 0 10px;
}
#main span:hover {
color: #004ea8;
background: #fff;
border-color: #004ea8;
}
body.open {
margin-left: 380px;
}
body.open .sidenav {
width: 380px;
}
body.open #main {
left: 380px;
}
body:after {
opacity: 0;
content: "";
}
body.open:after {
content: "";
z-index: 99;
background-color: #343741;
opacity: .3;
left: 380px;
right: 0;
top: 0;
bottom: 0;
position: fixed;
-webkit-transition: all 0.3s 0.3s;
-o-transition: all 0.3s 0.3s;
transition: all 0.3s 0.3s;
}
/*
==================================================
home page
==================================================
*/
.wrapper img {
margin: 0 auto;
}
window.addEventListener('DOMContentLoaded', function() {
var body = document.querySelector('body');
document.addEventListener("click", function(event) {
var target = event.target;
if (target.closest(".sidenav") && !target.closest(".closebtn")) return;
else if (target.closest("#main")) {
event.preventDefault();
body.classList.toggle("open")
} else body.classList.remove("open");
});
});
$(function() {
$('.openclosebtn, html').click(function(event){
var btn = $('.openclosebtn'), status = !btn.data('status');
if ($(this).is(btn) && status) {
event.stopPropagation();
btn.html('Close')
.data('status', status);
}
else {
btn.html('Меню')
.data('status', false);
}
});
});