Kolejnym zadaniem na drodze projektu menu strony internetowej jest jego wersja rozszerzona, czyli poszerzenie menu o submenu, a w rzeczy samej o rozwijaną listę odnośników do kolejnych podstron. Menu rozszerzone tworzymy na większych serwisach WWW oraz w sytuacjach, kiedy ilość podstron, które chcemy umieścić na pasku poziomym menu przewyższa ilość dostępnego miejsca.
Krok 1. Edycja pliku nav.php
Do pliku nav.php z części 2 projektu dodajemy klasę “switch2”, która będzie odpowiedzialna za otwarcie menu “na komendę” JS. Ponadto dodajemy klasę “menu2”, która pozwoli JS zidentyfikować podmenu i dodać do niego klasę visible2 odpowiedzialną za zmianę wyświetlania się (wyłączone/włączone) naszego submenu. Ostatecznie do struktury HTML wklejamy listę sudbmenu wewnątrz pierwszego z punktów menu.
<nav>
<a href =”#” class=”switch3″><img src=”hamburger.webp”></a>
<ul class=”menu3″>
<li class=”item-1 switch2″><a href=”#”>strona 1</a></li>
<ul class=”menu2″>
<li><a href=”#”>Strona 1a</a></li>
<li><a href=”#”>Strona 2a</a></li>
<li><a href=”#”>Strona 3a</a></li>
</ul>
Krok 2. Uzupełnienie pliku css-nav.css o nowe style
Do pliku css-nav.css z części 2 projektu dodajemy style dla drugiej listy oraz dodajemy klasę visible2. Chodzi o to, aby schować, a potem otworzyć submenu na komendę JS. Wprowadzamy też małą poprawę w kodzie CSS z 2 części projektu. skracamy header nav ul li a dla header nav a.
header nav ul ul {
display: none;}
ul.visible2 {
display:list-item;}
header nav a{
color:white;}
Krok 3. Edycja pliku scripts.js
Musimy teraz dodać skrypt JS odpowiedzialny za otwarcie i zamknięcie submenu. W wolnym tłumaczeniu… kiedy dokument będzie gotowy uruchom funkcję reagującą na kliknięcie klasy .switch2. Po kliknięciu klasy switch2 dodaj klasę visible2 (warto zauważyć, że wcześniej nigdzie w kodzie HTML nie wprowadziliśmy klasy visible2. Klasę tę dodaliśmy tylko do pliku css-nav.php, a jej wyjęciem z pliku CSS i dodaniem do pliku HTML zajmie się JavaScript… Ale tylko wtedy, kiedy naciśniemy link z klasą switch2).
$(document).ready(function(){
$(‘.switch2’).click(function(){
$(‘.menu2’).toggleClass(‘visible2’);
});
});
W efekcie powstaje rozwijane menu, menu z submenu, gdzie możemy umieścić odnośniki do kolejnych podstron, które nie zmieściły się na poziomym pasku menu głównego. Co ważne, submenu działa też na urządzeniach mobilnych.