Tworzenie menu

Ostatania modyfikacja: 28 września 2017, kategoria: Php

Początkujący webmasterzy często mają problem ze zbudowaniem dynamicznego menu z prawdziwego zdarzenia. Trudność polega na tym, aby klikając odnośnik w menu zmieniała się tylko treść bez przeładowania całego dokumentu. Najlepszym wyjściem z tej sytuacji jest zbudowanie menu w PHP korzystając z konstrukcji switch.

Przestroga dla początkujących

Najgorszym możliwym rozwiązanie jest brak menu dynamicznego, kiedy klikając w odsyłacz przechodzimy po prostu do innego pliku .html. W takim wypadku mając stronę zbudowaną zaledwie z 20 podstron, trzeba poświęcić 20 minut na edytowanie wyglądu każdej z osobna. Kolejnym prawie najgorszym rozwiązaniem jest budowanie menu za pomocą iframe lub javascript. Iframe to totalny przeżytek w dzisiejszych czasach spotykany najwyżej w kursach HTML. Z kolei javascrip może zostać wyłączony przez użytkownika z poziomu przeglądarki, więc po co komu menu, które nie zawsze zadziała?

Menu zbudowane na switch

Takie menu spotykane jest w praktycznie każdym serwisie. Do jego budowy wystarczy dowolny hosting z działającym PHP.

Dobrym nawykiem podczas tworzenia menu w HTML jest używanie wykresów ul, li. Dlaczego? Takim menu jest bardzo łatwo stylizować za pomocą arkusza stylów. Wystarczy kilka kliknięć aby z menu poziomego menu zamieniło się w menu pionowe.

Kod HTML przykładowego menu:

<ul>
<li> <a href="index.php?menu=1">Pozycja pierwsza</a> </li>
<li> <a href="index.php?menu=2">Pozycja druga</a> </li>
<li> <a href="index.php?menu=3">Pozycja trzecia</a> </li>
</ul>

Podczas kliknięcia w dowolny odnośnik ustawiamy wartość zmiennej menu. Zmienna ta przekazywana jest poprzez link, to znaczy że jest widoczna w pasku adresu. Taki sposób przekazywania danych to metoda GET. Dane te można odczytać za pomocą tablicy super globalnej $_GET[‚menu’]. Pod kodem HTML dodajmy skrypt PHP:

<?php
echo $_GET['menu'];
?>

Teraz po kliknięciu w dowolny odsyłacz w menu na stronie zostanie wyświetlona wartość zmiennej z adresu. Będzie to argument który przekażemy do instrukcji switch:

<?php

$arg = (int)$_GET['menu'];
switch ($arg)
{
	case 1:
		echo "Pozycja pierwsza";
	break;

	case 2:
		echo "Pozycja druga";
	break;

	case 3:
		echo "Pozycja trzecia";
	break;

	default:
		echo "Strona główna";
	break;
}
?>

Przeanalizujmy przykład. Do instrukcji switch przekazujemy wartość zmiennej z adresu URL. W zależności od numeru zostaną wykonane różne operacje (w tym wypadku wyświetlony zostanie tekst). Ostatnią pozycja default jest wartość domyślna, zostanie ona wykonana wtedy, kiedy zmienna menu nie jest określona (np. podczas pierwszego wejścia na stronę).

Zauważ, że w switch nie ma klamer, koniec określonego bloku oznacza rozkaz break. Jeżeli zgubisz gdzieś break to zostanie wykonanych kilka instrukcji na raz.

Menu jest praktycznie gotowe. Ostatnim krokiem jest wczytywanie podstron. W tym celu należy posłużyć się instrukcją include(). Ta funkcja dołącza do dokumentu inny dokument znajdujący się na serwerze. Kompletny kod może wyglądać tak:

<ul>
<li> <a href="index.php?menu=1">Pozycja pierwsza</a> </li>
<li> <a href="index.php?menu=2">Pozycja druga</a> </li>
<li> <a href="index.php?menu=3">Pozycja trzecia</a> </li>
</ul>

<?php

$arg = (int)$_GET['menu'];

switch ($arg)
{
	case 1:
		include('podstrony/strona1.html');
	break;

	case 2:
		include('podstrony/strona2.html');
	break;

	case 3:
		include('podstrony/strona3.html');
	break;

	default:
		include('podstrony/newsy.html');
	break;
}

?>

Przykład tego prostego menu można zobaczyć pod adresem http://www.p-programowanie.pl/pliki/menu1.php

Menu zagnieżdżone (złożone) zbudowane na switch

Jeżeli tworzymy większą stronę, rodzi się potrzeba zagnieżdżenia kilku switchów. Przykładowy kod HTML zagnieżdżonego menu wygląda tak:

<ul>
<li> <a href="index.php?menu=1">Pozycja pierwsza</a> </li>
<li> <a href="index.php?menu=2">Pozycja druga</a>
	<ul>
	<li><a href="index.php?menu=2&art=1">artykul 1</a> </li>
	<li><a href="index.php?menu=2&art=2">artykul 2</a> </li>
	</ul>
</li>
<li> <a href="index.php?menu=3">Pozycja trzecia</a> </li>
</ul>

Wszystko odbywa się tak jak poprzednio, jedyną różnicą jest zagnieżdżenie wykresu ul oraz switcha. Trzeba pamiętać aby przesłać dwie zmienne w adresie URL, jedna zmienna to menu decydująca o podstronie a druga zmienna to art decydująca o numerze artykułu jeżeli jest to podstrona numer 2. Zmienne łączymy w odsyłaczu za pomocą ampersandu (&).

<?php

$arg = (int)$_GET['menu'];
$art = (int)$_GET['art'];

switch ($arg)
{
	case 1:
		echo "Pozycja pierwsza";
	break;

	case 2:
		switch ($art)
		{
			case 1:
				echo "Pozycja druga - artykuł pierwszy";
			break;

			case 2:
				echo "Pozycja druga - artykuł drugi";
			break;

			default:
				echo "Pozycja druga";
			break;
		}
	break;

	case 3:
		echo "Pozycja trzecia";
	break;

	default:
		echo "Strona główna";
	break;
}

?>

Przykład działania  zagnieżdżonego switcha można sprawdzić pod adresem: http://www.p-programowanie.pl/pliki/menu2.php

Użytkownik Adam napisał:

16 lutego 2013


Świetnie wytłumaczone, akurat właśnie tego potrzebowałem! :)

Użytkownik Kodi napisał:

04 września 2013


ciekawy blog i przydatne informacje, Dzięki :)

Użytkownik zdz napisał:

03 grudnia 2013


Tylko dlaczego w mozilli 25xx… podmenu jest domyślnie rozwinięte?
Jak to zwinąć?

Użytkownik Karol napisał:

03 grudnia 2013


@Zdz

W PHP piszesz skrypt odpowiedzialny za funkcjonowanie menu. Jeżeli chcesz je wystylizować (czyli przerobić na poziome, pionowe, rozwijane lub pływające itd.) musisz skorzystać z arkusza stylów CSS oraz JQuery.

W artykule opisałem tylko jak zaprojektować menu, bez żadnych stylizacji, więc to że jest rozwinięte to normalna rzecz.

Użytkownik Tomek napisał:

13 maja 2014


Mam problem z menu zagnieżdżonym. Przy klikaniu na artykuł 1 i artykuł 2 wyświetla się to co chcę. Przy pozostałych punktach menu wyświetla mi się dodatkowo: Notice: Undefined index: art in C:\xampp\htdocs\test\article.php on line 3
Błąd mi wyskakuje w tej linijce:
$art = (int)$_GET[‚art’];
Jest tutaj dwa razy nazwa tej samej zmiennej, a w linijce wcześniej mamy dwie różne nazwy: $arg = (int)$_GET[‚menu’];

Użytkownik Karol napisał:

13 maja 2014


Jest wiele sposobów na wyłączenie powiadomień. Możesz sprawdzać czy zmienna istnieje przed ustawieniem jej (isset). Można wyłączyć raportowanie powiadomień w pliku konfiguracyjnym PHP.

Strzelam, że błąd występuje Ci lokalnie, gdy uruchamiasz skrypty u siebie na komputerze. Zwykłe hostingi mają wyłączone powiadomienia.

Najszybszy sposób to dodać na początku pliku skrypt PHP wykonujący: „error_reporting(E_ALL ^ E_NOTICE);”, to też wyłączy powiadomienia.

Użytkownik Milosz napisał:

24 maja 2014


Co prawda szukałem tworzenia stron dynamicznie, a nie menu ale to mi wszystko wyjaśniło. Świetnie opisane. Pozdrawiam

Użytkownik Paulina napisał:

11 lutego 2015


mam pytanie mam kawałek kodu ,który tworzy menu <a href="fvnifnvri"blablabla Projekty
i jak wchodze w projekty to wyswietla mi sie strona pod strona w menu i teraz moje pytanie jak zostało to zrobione napisany kod i zapisany i tylko odnośnik wklejony czy jak ?

Użytkownik Karol napisał:

12 lutego 2015


@Paulina odezwij się do mnie e-mailowo. Wklej kod jaki masz na myśli na portal pastebin.com i do wiadomości dołącz link. Jak widzisz komentarze zostają automatycznie wyczyszczone z kodu.

Swoją drogą, działą to na tej samej zasadzie jak to, co jest zaprezentowane w powyższym artykule.

Użytkownik Zuzia napisał:

13 lutego 2015


Mam problem, utworzyłam stronę index.html na niej dałam Odnośniki do strony index.php, w ten sam sposób co Ty. Czyli jakiś mój teskt . Index.php Mam prawie identyczny jak Ty (drobne zmiany,które nie mogą mieć wpływu na błąd).A mój błąd to :”Notice: Undefined index: menu in C:\xampp_new\htdocs\KCK\index.php on line 4″. Czy mógłbyś coś doradzić?

Użytkownik Karol napisał:

14 lutego 2015


Cześć Zuzia. Dodaj na poczatku swojej strony krótki kod php: error_reporting (E_ALL ^ E_NOTICE);

Użytkownik Andrzej napisał:

28 września 2015


Ale bzdury piszesz. Doucz się, a potem pisz artykuły, które nie będą wprowadzały w błąd!

Użytkownik Andrzej napisał:

29 września 2015


Ładnie usuwasz niepochlebne komentarze. Ile Ty masz lat?

Użytkownik Pilecki napisał:

06 lutego 2016


@Andrzej o jakie bzdury Ci chodzi? bo trolujesz, a nie piszesz konkretów.

@Karol, dzięki za arykuł. Czy opierając się na modelu MVC umieściłbyś obsługę menu w modelu czy kontrolerze? Wydaje mi się, że chyba kontroler nie?

Użytkownik Karol napisał:

06 lutego 2016


@Pilecki
Nie jestem specjalistą od PHP, a implementacja wzorca MVC może mieć różny poziom abstrakcji i złożoności. Zgodnie z definicją wzorca model powinien być bytem jak najbardziej odchudzonym ze wszelkiej logiki. Sercem systemu jest kontroler i wiąże on odpowiedni model z odpowiednim widokiem w zależności od zapytania. Uważam, że logika dotycząca nawigacji powinna być zaszyta w warstwie kontrolera.

Użytkownik Joel napisał:

17 kwietnia 2019


Mam pytanie. Co zrobić aby w adminie wordpressa każde menu rozwijało się po kliknięciu a nie po najechaniu kursorem?

Zachęcam Cię do zostawienia komentarza!

Ilość znaków: 0