#javascript #html #css
Вопрос:
Я сделал боковую панель навигации, которая при изменении размера экрана ниже 662 пикселей будет отображать кнопку, при нажатии на которую будет отображаться та же панель навигации по всему экрану.
(Я сделал так, чтобы навигация исчезла, а кнопка появилась, мне просто нужно сделать так, чтобы кнопка отображала кнопку навигации при нажатии. Для этого мне также понадобится кнопка закрытия (очевидно). ).
Это то, что у меня есть до сих пор:
nav { position: fixed; top: 0px; left: 0; width: 400px; height: 100%; background: #fff; color: #111; text-align: center; padding-top: 25px; border: none; border-right: 5px solid #0088ff; z-index: 1; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; display: flex; flex-direction: column; align-items: center; } nav h1, h2, h3, h4, h5, h6 { color: #111; } .show-nav { background: #0088ff; color: #fff; border: none; margin-left: none; top: 200px; margin-top: 200px; display: none; left: 50px; } .show-nav i { color: #fff; } .show-nav a { color: #fff; } @media screen and (max-width: 662px) { nav { display: none; } .show-nav { display: block; } .show-nav:target nav { display: inline; width: 100%; } } lt;button class="show-nav"gt;lt;a href=""gt;Navigationlt;/agt;lt;/buttongt; lt;navgt; lt;h1gt;Navigation:lt;/h1gt; lt;brgt; lt;a href="link.html"gt;Linklt;/agt; lt;a href="link.html"gt;Linklt;/agt; lt;a href="link.html"gt;Linklt;/agt; lt;a href="link.html"gt;Linklt;/agt; lt;a href="link.html"gt;Linklt;/agt; lt;a href="link.html"gt;Linklt;/agt; lt;brgt; lt;/navgt; Возможно ли это?
Ответ №1:
Добавьте позицию и индекс в свой btn и и используйте код js:
btn.onclick= function(e){ var nav = document.querySelector("nav"); if (nav.style.display=="inline-block") return nav.style.display = "none"; else return nav.style.display="inline-block"; btn.style.display = "block" }; nav { position: fixed; top: 0px; left: 0; width: 400px; height: 100%; background: #fff; color: #111; text-align: center; padding-top: 25px; border: none; border-right: 5px solid #0088ff; z-index: 1; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; display: flex; flex-direction: column; align-items: center; } nav h1, h2, h3, h4, h5, h6 { color: #111; } .show-nav { background: #0088ff; color: #fff; border: none; margin-left: none; top: 200px; margin-top: 200px; display: none; left: 50px; z-index: 2; position:relative; } .show-nav i { color: #fff; } .show-nav a { color: #fff; } @media screen and (max-width: 662px) { nav { display: none; } .show-nav { display: block; } .show-nav:target nav { display: inline; width: 100%; } } lt;button id="btn" class="show-nav"gt;Navigationlt;/buttongt; lt;navgt; lt;h1gt;Navigation:lt;/h1gt; lt;a href="link.html"gt;Linklt;/agt; lt;a href="link.html"gt;Linklt;/agt; lt;a href="link.html"gt;Linklt;/agt; lt;a href="link.html"gt;Linklt;/agt; lt;a href="link.html"gt;Linklt;/agt; lt;a href="link.html"gt;Linklt;/agt; lt;/navgt; Ответ №2:
Во-первых, я бы удалил метку привязки с кнопки. Семантически кнопка используется для запуска события, в то время как тег привязки используется для привязки пользователя к другому местоположению. Затем вам нужно добавить обработчик js к кнопке, чтобы вы могли переключать классы на элементах, которые вы хотите показать/скрыть.
lt;!-- let's give that button a class --gt; lt;button class="nav-open-button"gt;Navigationlt;/buttongt; lt;!-- let's make a close button --gt; lt;button class="nav-close-button"gt;Xlt;/buttongt; var openButton = document.querySelector('.nav-open-button'), closeButton = document.querySelector('.nav-close-button'), nav = document.querySelector('nav'), navIsOpen = false; openButton.addEventListener('click', function(e) { e.preventDefault(); toggleNav(); }); closeButton..addEventListener('click', function(e) { e.preventDefault(); toggleNav(); }); var toggleNav = function() { if (navIsOpen) { navIsOpen = false; nav.classList.remove('open'); } else { navIsOpen = true nav.classList.add('open'); } }; Затем вы можете обновить свой css в соответствии с классом «открыть» lt;navgt; элемента.