Wysuwany i chowany panel na stronę internetową w jQuery

Czas czytania: 3 minut

Dziś z pomocą jQuery zbuduję bardzo prosty wysuwany panel na stronę. Mój Panel będzie działać na zasadzie podobnej jak w przypadku menu na stronie typu RWD. Czyli klikamy w obiekt i z boku wysunie nam się do tej pory schowany obiekt. Po kolejnym kliknięciu zostanie on ponownie schowany.

Budowa prostego panelu

Moją pracę zacznę od stworzenia struktury panelu w HTML a następnie oprogramuję go w CSS.

Całość mojego kodu zamknę w jednym kontenerze. Myślę jednak że spokojnie sam panel może znaleźć się poza kontenerem. Jedyne co będzie wymagane to drobne zmiany w strukturze strony. Jest tak dlatego, że w swoim projekcie podeszłam do panelu jak do modułu. W efekcie może on zmieniać pozycje.

<div class="container">
  <div class="panel">
    <ul>
      <li><a href="">some text</a></li>
      <li><a href="">some text</a></li>
    </ul>
  </div>
  <div class="clickme"  onclick="myFunction(this)">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>    
  </div>
  <div>
    <h2>Lorem ipsum dolor sit amet</h2>
   <p>Lorem ipsum dolor sit amet,</p> <p>Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus</p>
    
  </div>
</div>

W panelu umieściłam prostą punktowaną listę. Tak by nie był on pusty. Oczywiście można tam wstawić inne elementy – a to co się tam znajdzie w dużej mierze zależy od nas.

W moim kodzie umieściłam też inny element, który już wcześniej omawiałam na łamach mojego blogu. Chodzi o:

<div class="clickme" onclick="myFunction(this)">
 <div class="bar1"></div>
 <div class="bar2"></div>
 <div class="bar3"></div> 
</div>

Kod ten omówiłam w wpisie animowana ikona rozwijanego menu. Więc nie omówię go już ponownie. Jeśli chcecie dowiedzieć się czegoś więcej na ten temat zajrzyjcie do tego artykułu.

Nadawanie wyglądu panelowi

Dobrze skoro mamy już strukturę naszego wysuwanego panelu pora zająć się jego wyglądem.

.container{
  max-width: 600px;
  width:100%;
  margin-left: auto;
  margin-right: auto;
  height:100%;
  display: table;
}
.panel{
  background: rgba(0,0,0,0.8);
  height:100%;
  position:absolute;
  width: 100%;
  left: 0;
  display:none;
  color:#fff;
  overflow: overlay;
}
.panel ul{
  text-align: center;
  list-style: none;
  line-height: 2.5rem;
  padding:0;
  margin:0;
}
.panel li{
  font-size: 1.5rem;
}
.panel li a{
  color:#fff;
  text-decoration: none;
}
.panel li a:hover{
  text-decoration: underline;
}
.clickme{
  position: absolute;
  z-index: 100;
  right: 2%;
  top:2%;
}

Dodatkowo do tego kodu dodałam jeszcze kod mojej animowanej ikony. Można go skopiować ze wpisu z animacją.

Jak zapewne część osób zauważyła po dodaniu tego kodu panel jak i jego zawartość są nie widoczne.

.panel{
  background: rgba(0,0,0,0.8);
  height:100%;
  position:absolute;
  width: 100%;
  left: 0;
  display:none; 
  color:#fff;
  overflow: overlay;
}

Powodem nie wyświetlania panelu jest display:none; . Ustawienie to powoduje, że obiekty którym je nadano nie wyświetlają się na stronie. Dodatkowo ustawiłam position:absolute; co spowoduje, że przy pozostałych ustawieniach panel będzie mógł się nasunąć nad zawartość strony. Kolejną ciekawostką jest overflow: overlay;, która włączy dla panelu możliwość skontrolowania.

Drugim elementem posiadającym dość ciekawe ustawienia jest:

.clickme{
  position: absolute;
  z-index: 100;
  right: 2%;
  top:2%;
}

Podobnie jak w przypadku panelu wyciągnęłam go na wierzch z pomocą position: absolute;. Ustawienie to otworzyło przed de mną też nową możliwość czyli skorzystanie z z-index. Z jego pomocą możemy manipulować położeniem elementów (ustalić, który znajduje się wyżej). W ten o to sposób przesunęłam przycisk nad panel.

Uruchamiam panel

Teraz najtrudniejszy etap prze de mną. Muszę uruchomić panel. W jQuery mogę chować i pokazywać elementy na kilka sposobów. Zdecydowałam się jednak by zrobić to jak najprościej dlatego postanowiłam skorzystać z .toggle(). Funkcja ta w pewnym sensie łączy 2 inne ( .show(); , .hide(); ).

$(".clickme").click(function(){
  $(".panel").toggle(1000);
});

/* kod do animowanej ikony */
function myFunction(x) {
    x.classList.toggle("change");
}

Kolejną opcją jaką użyłam jest .click(). Wykrywa ona czy na danym obiekcie doszło do interakcji w formie kliknięcia. W moim przypadku obiekt ten będzie posiadał klasę .clickme.

Podobna zasada tyczy się:

$(".panel").toggle(1000);

Liczba umieszczona w nawiasie .toggle() to ->czas w jakim ma rozwinąć się obiekt.

Gotowy przykład: