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.
Co znajdziesz w tym wpisie
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: