W tym wpisie pokażę Ci jak w prosty sposób wykonać wysuwające się z boku menu. Zaczynajmy 🙂
Skorzystamy z bardzo lekkiej wtyczki Sliiide. Oferuje ona różne możliwości położenia menu, my w tym poradniku skorzystamy tylko z jednego z nich.
Na początku pobierzmy wtyczkę wchodząc na tą stronę i klikając Download ZIP. Z pobranego archiwum wyciągamy plik sliiide.min.js i wrzucamy do jakiegoś folderu. W tym samym folderze tworzymy plik index.html z poniższą zawartością:
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Devcorner - menu boczne</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<style type="text/css">
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="sliiide.min.js"></script>
<script>
</script>
</body>
</html>Utworzyliśmy podstawową strukturę HTML. Wewnątrz sekcji head podłączamy Font Awesome. Jest to czcionka, która zawiera różne ikony. Pomiędzy znacznikami <style> wrzucimy później nasz kod CSS. Przed zamykającym znacznikiem </body> podpinamy bibliotekę jQuery oraz pobrany skrypt (umieszczony w tym samym folderze).
Zaraz za znacznikiem <body> dodajmy strukturę naszego menu:
<div id="nav-icon">
<span><i class="fa fa-bars"></i></span>
</div>
<div class="left-menu">
<ul>
<li>
<a href="http://devcorner.pl" target="_blank">Devcorner</a>
</li>
<li>
<hr>
</li>
<li>
<a href="#" target="_blank">Inny link...</a>
</li>
<li>
<hr>
</li>
<li>
<a href="#" target="_blank">I kolejny...</a>
</li>
</div>Wewnątrz diva o id nav-icon znajduje się ikona z czcionki Font Awesome. Menu będzie się pojawiało/ukrywało przy klikaniu na tą ikonę. Poniżej znajduje się div o klasie left-menu. Przechowuje on listę nieuporządkowaną ul. Wewnątrz znajdują się elementy menu.
Przejdźmy teraz do znaczników <style> i dodajmy pomiędzy nimi poniższą zawartość:
body {
height: 100vh;
width: 100%;
background: #00a896;
margin: 0;
padding: 0;
}
.left-menu {
position: fixed;
top: 0px;
left: 0px;
height: 100vh;
width: 250px;
background: #02c39a;
margin: 0;
padding: 0;
}
.left-menu ul {
list-style: none;
text-align: center;
padding: 0px;
}
.left-menu li {
margin: 30px auto;
}
.left-menu ul li a {
font-weight: 100;
font-size: 16px;
color: #082213;
text-decoration: none;
margin: 0px 15px;
text-transform: uppercase;
}
.left-menu ul li a:hover {
color: #fff;
}
#nav-icon {
position: absolute;
top: 25px;
left: 25px;
cursor: pointer;
}
#nav-icon span {
font-size: 42px;
color: #2A3D45;
}Warto zwrócić uwagę na reguły dotyczące klasy .left-menu. Position ustawiony na fixed pozwala nam na przewijanie strony bez zmiany pozycji menu. Height równy 100vh rozciąga menu zawsze na wysokość ekranu.
Możemy teraz zająć się aktywacją wtyczki. Pomiędzy znacznikami <script> wrzućmy kod:
$('.left-menu').sliiide({place: 'left', toggle: '#nav-icon'});Na kontenerze, który przechowuje menu wywołujemy funkcję sliiide() z parametrami:
- place – położenie naszego menu (dostępne położenia menu możesz znaleźć tutaj)
- toggle – element pokazujący/ukrywający menu
Pełną listę parametrów możesz zobaczyć tutaj.
I to wszystko 🙂
Przykład możesz zobaczyć tutaj.
Paczkę możesz pobrać tutaj.
Korona Ziemi z WebSlides – jak tworzyć prezentacje?
Przeczytaj artykuł
Kolekcje buttonów, których możesz użyć w kolejnym projekcie
Przeczytaj artykuł
Fajna sprawa, dzięki wielkie! Przydało się.
mam pytanko jak zrobic takie menu w menu? chodzi mi o to ze po np najechaniu kursorem na dany „button” rozwija się kolejne
Super sprawa. Zastanawiam się co i gdzie zmienić żeby to menu nie wpływało na inne elementy na stronie. Obecnie razem z wysunięciem menu przesuwają sie wszytskie divy:)
Cześć Konrad 🙂
Wystarczy przy wywołaniu funkcji sliiide() podać parametr body_slide: false.
$(’.left-menu’).sliiide({place: 'left’, toggle: '#nav-icon’, body_slide: false});
Alternatywnie możesz skorzystać z innego narzędzia np. SideNav ( http://materializecss.com/side-nav.html )
Pozdrawiam 🙂
Super, dziękuje:)
Mam pytanie jak zrobić żeby menu wysuwało się od załóżmy lewej strony, ale pod jakimś elementem?
Dzięki 🙂
Proste do zrobienia a ciekawy efekt. Dzięki