Wysuwane boczne menu

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.

Spodobał Ci się artykuł? Dzięki naciśnięciu serduszka poniżej będę wiedział jakie treści tworzyć. Dzięki! :)

Odliczanie do wskazanej liczby 11 przydatnych snippetów jQuery, które powinien znać każdy Webmaster Tworzenie gry przeglądarkowej – #5 Rejestracja i logowanie
View Comments