jQuery sideNav

pytanie zadane 27 listopada 2017 w JavaScript przez lastavenger Obywatel (1,060 p.)

Witam

Napisałem sobie ładny side nav który wysuwa się z boku strony po kliknieciu w hamburger, ale jest problem. Chcę zrobić by przy aktywnym sidenav nie można było scrollować, oraz by reszta strony dostała blura lub podobny efekt. a to wszystko z użyciem jquery.

1 odpowiedź

odpowiedź 27 listopada 2017 przez pablop76 VIP (123,180 p.)

Witam. Dodaj klasę z takimi właściwościami .addClass(); Ale to chyba zbyt oczywiste skoro zrobiłeś ładny side nav.

komentarz 28 listopada 2017 przez pablop76 VIP (123,180 p.)
edycja 28 listopada 2017 przez pablop76

Za co ten minus ?

<body id="blur">
<div id="mySidenav" class="sidenav">
  <a href="#" class="close">&times;</a>
  <a href="#">O nas</a>
  <a href="#">Portfolio</a>
  <a href="#">Cennik</a>
  <a href="#">Kontakt</a>
</div>
<h2>SideNav</h2>
<span>&#9776; open</span>
</body>

body {
  height: 110vh;
  text-align: center;
  margin: 0;
  padding: 0;
  background-image: url(http://bit.ly/2gPLxZ4);
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-size: cover;
}
span{
  position: absolute;
  top: 30px;
  left: 30px;
  font-size: 30px;
  cursor: pointer;
}
.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 {
    color: #f1f1f1;
}

.sidenav .close {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}
.blur {
  overflow: hidden;
}
.blur:before {
  content: "";
  background-color: grey;
  position: absolute;
  z-index: 1;
  opacity: .7;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}
.width{
  width: 250px;
}

document.addEventListener("DOMContentLoaded", function() {
const span = document.querySelector('span');
const close = document.querySelector('.close');
function sideNav() {
  document.getElementById("mySidenav").classList.toggle("width") ;
    document.getElementById("blur").classList.toggle("blur") ;
}
span.addEventListener("click", sideNav, false);
close.addEventListener("click", sideNav, false); 
});