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.
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" >W panelu umieściłam prostą punktowaną listę. Tak by nie był on pusty – poza tym w takich panelach dość często umieszcza się menu, które również na niej się dość często opiera. 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" >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.
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);
min-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ą.
Warto przeczytać: Jak ustawić wysokość elementu na wysokość okna przeglądarki!
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);
min-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.
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:
Jak w przypadku wielu różnych tematów tak i w przypadku marki osobistej pojawiło się przez…
Choć zabrzmi to może nieco dziwnie to wprowadzenie AI (sztucznej inteligencji) do naszego życia było…
Widmo Brockenu to dość rzadko spotykane zjawisko optyczne, najczęściej widywane w wysokich partiach gór. Można…
Zacznę może od tego, że relikwia, relikwii nie równa. Wiem jeśli nie ma się pojęcia…
Logo stanowi jeden z ważniejszych elementów tożsamości wizualnej praktycznie każdej firmy, marki czy projektu. Logo…
Budując własną markę osobistą lub chcąc ją zbudować trzeba liczyć się z wieloma wyzwaniami. Jednym…