Kolejnym zadaniem na drodze projektu menu witryny sieciowej jest jego wersja mobilna, czyli samoistne przekształcanie się poziomego paska w rozwijany ku dołowi “hamburger” w sytuacji kiedy użytkownik uruchomi portal na urządzeniu mobilnym o znacznie mniejszym ekranie aniżeli monitor komputera.
Krok 1. Switch, czyli przełącznik pod postacią obrazka hamburgera
W odpowienim miejscu w pliku nav.php dodajemy kilka linijek kodu i wrzucamy plik graficzny na serwer.
<nav>
<a href=”#” class=”switch-projekt”><img src=”hamburger.webp”></a>
<ul class=”menu-projekt”></ul>
Krok 2. Uzupełnienie pliku css-nav.css o nowe style
/*— MAX WITH 768 —*/
@media screen and (max-width 768px){
.switch-projekt{display:block; float:right; margin-top:2%}
.switch-projekt img {width:60%;}
header nav ul{display:none}
header nav ul.visible-projekt{display:block;padding-top:10%}
}
Krok 3. Viewport i linki do skryptów… Nowy kod w index.php
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<script type=”text/javascript” src=”https://chech.pl/js/scripts.js”
Krok 4. Dodanie skryptu JS do pliku js.js rozwijającego menu mobilne
$(document).ready(function(){
$(‘switch-projekt’).click(function(){
$(‘.menu-projekt’).toggleClass(‘visible-projekt’);
});
});
W efekcie powstaje mobilne menu, menu dostosowane do urządzeń przenośnych, takich jak smarthone czy tablet. Jeżeli urządzenie ma ekran mniejszy aniżeli 768px, to menu automatycznie zmienia się z poziomego paska na blok rozwijany i zwijany za pomocą kliknięcia w ikone hamburgera.