Mobilne menu ze Slicknav.js

W tym wpisie pokażę Ci jak w bardzo prosty sposób przy użyciu pluginu Slicknav zrobić menu, które będzie idealnie wyświetlało się przy niższych rozdzielczościach ekranu. Zaczynajmy 🙂

Na samym początku pobierzmy wtyczkę. Możesz to zrobić wchodząc w ten link a następnie klikając w przycisk DOWNLOAD NOW. Pobrane zostanie archiwum, z którego potrzebujemy tylko dwa pliki. Są to:

  • slicknav.min.css
  • jquery.slicknav.min

Oba znajdują się w folderze dist.

Możemy teraz napisać strukturę HTML:

<!DOCTYPE html>
<html lang="pl">

 <head>

 	<title>Menu mobline</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="style/reset.css" type="text/css">
    <link rel="stylesheet" href="style/slicknav.min.css" type="text/css">
    
    <style type="text/css">

    </style>
 
 </head>

 <body>

        <header>
        	<nav>
            	<div class="container">
                	<div class="navbar">
                    	<div class="nav-logo">
                        	<h1>Logo</h1>
                        </div>

                        <div class="main-menu-content">
                        	<ul id="main-menu">
                            	<li><a href="#" class="menu-link-active">Start</a></li>
                                <li><a href="#">Opinie</a></li>
                                <li><a href="#">Portfolio</a></li>
                                <li><a href="#">Sklep</a></li>
                                <li><a href="#">Współpraca</a></li>
                                <li><a href="#">Kontakt</a></li>
                            </ul>
                        </div>
                        <!-- menu mobilne -->
                        <div id="attach-menu-mobile">

                        </div>
                    </div>
                </div>
            </nav>
        </header>


<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery.slicknav.min.js"></script>

<script>
  $(document).ready(function(){
    
  });
</script>
</body>

</html>

Na samym początku podpinamy dwa pliki CSS. Jest to reset.css (reset stylów przeglądarki, nie wymagany do działania wtyczki) oraz slicknav.min.js.css – wymagany. Następnie tworzymy parę znaczników <style>, wewnątrz których umieścimy później nasze style CSS.

Wewnątrz body znajduje się znacznik header, który pełni rolę kontenera przetrzymującego menu oraz logo. Wewnątrz niego znajduje się kolejno nav oraz div o klasie container oraz kolejny div o klasie navbar. Wewnątrz niego znajdują się trzy równorzędne divy o klasach:

  • nav-logo – przetrzymuje logo (lub dowolną inną zawartość)
  • main-menu-content – przetrzymuje właściwe menu
  • attach-menu-mobile – do niego trafia menu wygenerowane przez plugin

Poniżej podpięta zostaje biblioteka jQuery oraz sama wtyczka. Następnie dodajemy jeszcze parę znaczników <script> oraz funkcję ready, wewnątrz której aktywujemy Slicknav.

To tyle, jeśli chodzi o HTML 🙂

Zajmijmy się teraz stylami. Wewnątrz wcześniej stworzonych znaczników <style> dodaj następujący kod:

.container {
      max-width: 1200px;
      margin: 0 auto;
      clear: both;
      padding: 0 15px;
    }

    header {
      z-index: 1000;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: rgb(76, 76, 76);
      border-bottom: 1px solid #000000;
    }

    .navbar {
      height: 63px;
    }

    .nav-logo {
      float: left;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
    }

    .nav-logo h1 {
      font-size: 28px;
    }

    .main-menu-content #main-menu {
      display: none;
      margin-top: 10px;
    }

    .main-menu-content {
      float: right;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }

    ul {
      list-style: none;
    }

    .main-menu-content #main-menu  li {
      float: left;
      display: block;
    }

     ul li a {
      color: #fff;
      text-decoration: none;
      font-size: 25px;
      text-align: center;
      margin-top: 5px;
      font-weight: 400;
      padding: 20px 14px;
      line-height: 20px;
      transition: all 0.2s;
    }

    ul li a:hover {
      color: green;
    }

Są to dosyć proste style i w dużej części wprowadzają tylko drobne zmiany (np. kolor czy wielkość czcionki). Warto zwrócić uwagę na style przypisane do znacznika header. Ustawiony jest tutaj wysoki z-index aby menu było zawsze nad treścią oraz position: fixed aby menu przesuwało się razem ze stroną. Takie połączenie stylów spotykane jest najczęściej na stronach typu onepage. Jeśli chcesz by menu nie przesuwało się wraz ze stroną to wystarczy, że usuniesz position: fixed.

Warto zwrócić uwagę na ten fragment kodu:

position: relative;
top: 50%;
transform: translateY(-50%);

Pojawia się on kilka razy w naszych stylach. Te trzy linijki pozwalają na wyśrodkowanie elementu wertykalnie, czyli w pionie. Kolejne ważne reguły to float: left dla kontenera przetrzymującego logo oraz float: right dla kontenera przetrzymującego menu.

Warto zwrócić uwagę, że div  o id main-menu jest w tych stylach niewidoczny dzięki display: none. Włączymy jego widoczność w media queries powyżej mobilnej szerokości. Dodajmy więc te style poniżej wcześniejszych:

.slicknav_menu {
      position: fixed;
      left: 0;
      right: 0;
    }

    .slicknav_btn {
      margin-top: 22px;
    }

    @media screen and (min-width: 768px) {

      .slicknav_menu {
        display: none;
      }

      .main-menu-content  #main-menu {
          display: block;
      }

      ul li a {
        font-size: 18px;
      }

    }

    @media screen and (min-width: 992px) {

      ul li a {
        padding: 20px 22px;
      }

}

Dwie pierwsze reguły odnoszą się do menu wygenerowanego przez Slicknav. Następnie mamy reguły obowiązujące od 768px. Powyżej tej rozdzielczości znika menu mobilne a pojawia się menu standardowe. Zmieniana jest też wielkość odnośników.

Powyżej rozdzielczości 992px zwiększa się odstęp pomiędzy odnośnikami.

Pozostało nam już tylko aktywować naszą wtyczkę wewnątrz wcześniej przygotowanej funkcji ready:

$(document).ready(function(){
    $('#main-menu').slicknav({
      prependTo: '#attach-menu-mobile',
      label: ''
    });
});

Funkcję slicknav() wywołujemy na #main-menu czyli kontenerze, który przechowuje menu. Następnie to menu zostaje dołączone do kontenera od id attach-menu-mobile.

I to wszystko. Menu już działa 🙂

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! :)

Odtwarzanie filmu z Youtube w tle 5 najlepszych pluginów jQuery do tworzenia sliderów Prosta responsywność – 11 systemów grid CSS
View Comments
Bądź pierwszą osobą, która skomentuje ten wpis.