Цитата:
Сообщение от рони
(Сообщение 524380)
Сергей Ракипов,
function overflow(){
bodyOverflow.classList.toggle("overflow_mobile");
pageNavig.classList.toggle("page_navig_show");
}
buttonNavigMobile.addEventListener("click", overflow);
остальное лишнее.
|
он так не коректно будет работать.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Verdana, Geneva CY, Helvetica, DejaVu Sans, Arial, sans-serif;
font-size: .8rem;
line-height: 160%;
}
.overflow_mobile{
overflow: hidden;
}
.main{
position: relative;
}
#button_navig_mobile{
width: 100%;
background-color: #ccc;
color: #fff;
display: none;
}
.page_wrap{
display: grid;
grid-template-rows: auto;
grid-template-columns: minmax(320px, 1440px) minmax(320px, 640px);
grid-template-areas:
"content navig";
grid-row-gap: 20px;
grid-column-gap: 20px;
justify-content: center;
}
.page_content{
grid-area: content;
justify-self: center;
}
.page_navig{
grid-area: navig;
z-index: 2;
justify-self: end;
background-image: url("../images/picture_02.jpg");
}
.content{
width: 1024px;
}
.navig{
width: 320px;
}
</style>
</head>
<body>
<div class="main">
<div id="button_navig_mobile">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, iste.</div>
<div class="page_wrap">
<div class="page_content"><div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt fuga similique aspernatur nesciunt quos sit voluptatem iusto ipsum ex modi. Non consectetur velit nostrum aperiam nam ipsum accusantium laudantium suscipit reprehenderit odit. Amet tenetur vel quibusdam ipsa atque unde corporis minima. Veritatis, assumenda quod quasi! Necessitatibus facere officia, quia, perspiciatis aliquid quis recusandae consequuntur, cum beatae iste, eveniet fugiat corrupti a. Deleniti quaerat quae aperiam vel iste. Eius vero beatae unde non excepturi. Illo sequi expedita quasi vel dolores voluptatem rerum alias cupiditate, veniam eos labore quidem pariatur ipsa, assumenda eveniet maxime, dolorum ipsum delectus hic atque architecto harum laborum quia ab. Quam, laboriosam! Veritatis ipsam id similique cupiditate soluta pariatur rerum quisquam quia facilis sunt error, iure, voluptas tenetur iusto repellat eius aperiam. Accusantium quam in reprehenderit minima corporis, dolorum quisquam sequi ratione, optio doloribus quas itaque amet dignissimos, corrupti. Officiis repudiandae, sit animi incidunt velit amet, cumque accusantium placeat perspiciatis dolor beatae iste qui aliquid minus voluptatem molestiae architecto earum tempora rerum quidem similique odio itaque? Fuga et beatae fugit quo vel tenetur sed, modi ducimus dicta, maiores laboriosam! Nesciunt animi ullam magni corporis similique ex eos eius quidem dolor non, odio id illum alias deserunt error facilis, assumenda quis suscipit. Rem, inventore eos. Voluptates sit, non saepe fuga, sed aliquid cupiditate molestias est rem ipsam labore magnam asperiores modi inventore iste facere, beatae voluptatibus blanditiis quibusdam neque! Rem vero blanditiis nemo ut dolorem aperiam possimus, quisquam eligendi earum nulla. Eaque ipsa blanditiis, doloremque dolorum nesciunt quos quam quis eveniet reprehenderit culpa consectetur magnam, accusantium enim autem reiciendis magni tempora voluptates accusamus perspiciatis architecto necessitatibus praesentium deleniti numquam fugit! Laborum doloremque molestias aperiam dolor modi, temporibus voluptate necessitatibus adipisci totam fuga dolorem, odit cum et ea consectetur facere sapiente ipsa deserunt quidem accusantium hic aut officiis consequatur. Nesciunt voluptatibus temporibus, doloribus, adipisci vero ea id tenetur possimus quas dicta asperiores quaerat assumenda in ratione mollitia. Quae sequi animi, suscipit odio a dolore quas enim ipsam totam! Repudiandae, similique possimus, debitis quod accusantium beatae consequatur natus recusandae excepturi quas a necessitatibus dignissimos soluta pariatur laborum autem! Quam optio quis modi commodi eos illum temporibus neque, natus vel rem iure ipsam nemo ratione, unde architecto suscipit voluptate, ut facilis atque est quasi velit fuga rerum! Beatae, sapiente quibusdam, est velit impedit quo. Sunt sint voluptates expedita excepturi numquam temporibus, quidem placeat ipsam exercitationem dolorum voluptatem molestias! Repellat nobis odio eveniet aperiam ad perspiciatis consequuntur error architecto pariatur voluptates corporis, officia dolore delectus inventore tempore qui temporibus, quo odit recusandae voluptate. Adipisci quam sequi incidunt qui eligendi, veniam itaque quia quos illum excepturi voluptatem, voluptatum tempora, quo ipsa repudiandae sunt facere. Placeat mollitia nostrum at excepturi necessitatibus alias quasi itaque, culpa ut ipsum facere omnis maxime cumque deleniti unde qui accusantium amet, provident quo incidunt nemo reiciendis quae, ullam. Inventore qui dolore tempore excepturi explicabo sunt. Perspiciatis eum architecto laborum est atque aliquid vel iusto aut suscipit porro. Totam minima dolorum quis odit quisquam saepe, at tempore sit tempora. Natus iusto, modi quia laudantium saepe alias ea!</div></div>
<div class="page_navig"><div class="navig">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos debitis eligendi necessitatibus libero, doloribus nostrum vero corporis deserunt repellat ipsum, repellendus dignissimos itaque blanditiis explicabo assumenda unde dolorem aliquid magni!</div></div>
</div>
</div>
<script>
const buttonNavigMobile = document.querySelector("#button_navig_mobile");
const pageNavig = document.querySelector(".page_navig");
const bodyOverflow = document.querySelector("body");
function overflow(){
bodyOverflow.classList.toggle("overflow_mobile");
}
buttonNavigMobile.addEventListener("click", overflow);
function navigHideShow(){
if (pageNavig.className === "page_navig"){
pageNavig.classList.remove("page_navig_hide");
pageNavig.classList.add("page_navig_show");
}
else if (pageNavig.className === "page_navig page_navig_show"){
pageNavig.classList.remove("page_navig_show");
pageNavig.classList.add("page_navig_hide");
}
else if (pageNavig.className === "page_navig page_navig_hide"){
pageNavig.classList.remove("page_navig_hide");
pageNavig.classList.add("page_navig_show");
}
}
buttonNavigMobile.addEventListener("click", navigHideShow);
function resizeWindows(){
let x = window.matchMedia("(max-width: 650px)").matches;
if(x){
pageNavig.classList.remove("page_navig_hide");
pageNavig.classList.remove("page_navig_show");
}
}
window.addEventListener("resize", resizeWindows);
</script>
</body>
</html>
просто когда происходит ресайз старинцы, классы остаются