Wysuwany i chowany panel na stronę internetową w jQuery

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.

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: