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:
