|
Изменить поведение кнопки по клику
Есть фрагмент связки кода:
Код:
html Оригинал и пример кода здесь — https://www.w3schools.com/howto/tryi...s_sidenav_push В данном примере sidenav открывается по одной кнопке, закрывается по другой. Собственно вопрос: как из двух кнопок сделать одну?, чтобы поведение элемента зависело только от одной кнопки, + закрытие sidenav чтоб работало при клике, как по самой кнопке, так и по клику в любом месте окна, кроме самого sidenav. Начал изучать js не давно, хочется увидеть и понять, как это может быть реализовано на чистом js. |
Цитата:
https://javascript.ru/forum/misc/69479-zakryt-modalnoe-okno-klikom-vokrug.html#post456597 |
меню слева и закрытие по клику в любом месте окна
dupre,
<!DOCTYPE html> <html> <head> <style> body { font-family: "Lato", sans-serif; position: relative; } .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } .sidenav a:hover, .offcanvas a:focus{ color: #f1f1f1; } .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } #main { position: absolute; left: 0px; transition: left .5s; padding: 16px; } @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } .sidenav.open { width: 250px } .sidenav.open ~ #main{ left:250px; } .openclosebtn{ font-size:30px;cursor:pointer } </style> </head> <body> <div id="mySidenav" class="sidenav"> <a href="#" class="closebtn" >×</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> <div id="main"> <h2>Sidenav Push Example</h2> <p>Click on the element below to open the side navigation menu, and push this content to the right.</p> <span class="openclosebtn">☰ open</span> </div> <script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script> <script> window.addEventListener('DOMContentLoaded', function() { var sidenav = document.querySelector('.sidenav'); document.addEventListener("click", function(event){ var target = event.target; if( target.closest(".sidenav") && !target.closest(".closebtn")) return; else if(target.closest(".openclosebtn")) {event.preventDefault(); sidenav.classList.toggle("open")} else sidenav.classList.remove("open"); }); }); </script> </body> </html> |
:stop: — эмоция на слишком крученный код для новичка в js )
Рони, спасибки, за не оставленный без внимания вопрос. Как новичку в изучении js, было бы понятней, если бы код был написан проще. Признаться, я рассчитывал увидеть небольшие изменения в коде оригинала: function openNav() { document.getElementById("mySidenav").style.width = "250px"; document.getElementById("main").style.marginLeft = "250px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; document.getElementById("main").style.marginLeft= "0"; } Такая запись, учитывая мои нулевые на сегодняшний день познания, как-то более понятна. Пытаясь разобраться в вопросе, рассчитывал закрывающий крестик удалить вовсе и оставить для закрытия-открытия элемента лишь иконку-бургер. Возможно ли так модифицировать код оригинала? P.s. Если я правильно понимаю, код с оригинала есть классический синтаксис js. Так ли это? |
dupre,
<!DOCTYPE html> <html> <head> <style> body { font-family: "Lato", sans-serif; position: relative; } .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } .sidenav a:hover, .offcanvas a:focus{ color: #f1f1f1; } .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } #main { position: absolute; left: 0px; transition: left .5s; padding: 16px; } @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } .sidenav.open { width: 250px } .sidenav.open ~ #main{ left:250px; } .openclosebtn{ font-size:30px;cursor:pointer } </style> </head> <body> <div id="mySidenav" class="sidenav"> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> <div id="main"> <h2>Sidenav Push Example</h2> <p>Click on the element below to open the side navigation menu, and push this content to the right.</p> <span class="openclosebtn">☰ open</span> </div> <script> window.addEventListener('DOMContentLoaded', function() { var sidenav = document.querySelector('.sidenav'); var openclosebtn = document.querySelector('.openclosebtn'); openclosebtn.addEventListener("click", function(event){ sidenav.classList.toggle("open")}) }); </script> </body> </html> |
Рони, спасибо!
Постараюсь понять данный код и поэкспериментировать с ним, ведь хочется уметь это и самому. |
рони, приветствую! Взялся сделать так, чтобы элемент
<span class="openclosebtn">☰ open</span>при скроле страницы, в случае появления полосы прокрутки при заполнении страницы контентом оставался на месте (fixed), но вместе с тем, при клике, чтобы вёл себя как <main> и его содержимое, то есть по клику смещался в право и по клику возвращался на место. У меня ничего не выходит, не понимаю, как это сделать. Эксперименты по наитию ничего не дали. P.s. Данную реализацию рассматриваю с кодом который здесь: "меню слева и закрытие по клику в любом месте окна" |
dupre,
строка 46 :-? fixed вроде никаких проблем ? <!DOCTYPE html> <html> <head> <style> body { font-family: "Lato", sans-serif; position: relative; height: 1700px; } .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } .sidenav a:hover, .offcanvas a:focus{ color: #f1f1f1; } .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } #main { position: fixed; left: 0px; transition: left .5s; padding: 16px; } @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } .sidenav.open { width: 250px } .sidenav.open ~ #main{ left:250px; } .openclosebtn{ font-size:30px;cursor:pointer } h1{ margin: 0 auto; text-align: center; } </style> </head> <body> <div id="mySidenav" class="sidenav"> <a href="#" class="closebtn" >×</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> <div id="main"> <span class="openclosebtn">☰ open</span> </div> <h1>test</h1> <script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script> <script> window.addEventListener('DOMContentLoaded', function() { var sidenav = document.querySelector('.sidenav'); document.addEventListener("click", function(event){ var target = event.target; if( target.closest(".sidenav") && !target.closest(".closebtn")) return; else if(target.closest(".openclosebtn")) {event.preventDefault(); sidenav.classList.toggle("open")} else sidenav.classList.remove("open"); }); }); </script> </body> </html> |
На первый взгляд, да. Но содержимое <main> в этом случае замирает на месте и страница не скролится...
|
Цитата:
|
Часовой пояс GMT +3, время: 21:19. |
|