W tym poście pokażę jak zrobić na stronie wysuwany, boczny panel menu. Takie rozwiązanie bardzo dobrze sprawdza się na widokach mobilnych. Zapewne każdy z nas natknął się na coś takiego podczas wędrówki po kniejach sieci, choćby na tym blogu 🙂
Aby wykonać zadanie potrzebna będzie biblioteka jQuery.
1 |
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> |
W kodzie html (poniżej) osadzimy dwa przyciski: #button-show-panel i #button-hide-panel, których kliknięcie spowoduje odpowiednio wysunięcie lub schowanie się menu.
1 2 3 4 5 6 7 8 9 10 11 |
<a id="button-show-panel" href="#">Pokaż panel</a> <a id="button-hide-panel" href="#">Ukryj panel</a> <div id="panel"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </div> |
Kod css:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style type="text/css"> #panel { display:none; width:300px; height:100%; position:fixed; overflow-y:auto; z-index:1000; top:0; right:-300px; background-color:#f7f7f7; } #button-hide-panel { display:none; } </style> |
Domyślnie przycisk #button-hide-panel będzie niewidoczny, a pojawi się dopiero wtedy, gdy panel się wysunie. Odwrotnie zachowa się przycisk #button-show-panel. Wszystko za sprawą skryptu jQuery 🙂
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> $(document).ready(function(){ $("#button-show-panel").click(function(){ $('#panel').show().animate({"right":"+=300px"},200); $("#button-hide-panel").show(); $("#button-show-panel").hide(); }); $("#button-hide-panel").click(function(){ $('#panel').animate({"right":"-=300px"},200); $("#button-hide-panel").hide(); $("#button-show-panel").show(); }); }); </script> |
Funkcja animate pozwala animować elementy htmla. Jak widać, panel wysuwa się od prawej krawędzi okna przeglądarki: animate({„right”:”+=300px”}. Oczywiście możemy zmienić orientację ;). Wystarczy wszędzie parametr „right” zamienić na „left” i pozamiatane. Wartość „200” to prędkość animacji podana w milisekundach.
Na koniec gotowe rozwiązanie:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Wysuwany panel boczny</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <style type="text/css"> #panel { display:none; width:300px; height:100%; position:fixed; overflow-y:auto; z-index:1001; top:0; right:-300px; background-color:#f7f7f7; } #button-hide-panel { display:none; } </style> </head> <body> <a id="button-show-panel" href="#">Pokaż panel</a> <a id="button-hide-panel" href="#">Ukryj panel</a> <div id="panel"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </div> <script> $(document).ready(function() { $("#button-show-panel").click(function(){ $('#panel').show().animate({"right":"+=300px"},200); $("#button-hide-panel").show(); $("#button-show-panel").hide(); }); $("#button-hide-panel").click(function(){ $('#panel').animate({"right":"-=300px"},200); $("#button-hide-panel").hide(); $("#button-show-panel").show(); }); }); </script> </body> </html> |
Pozdrawiam i do następnego =>