Pierwszy tutorial na tym blogu będzie o tym jak zrobić menu z aktywnymi zakładkami, ponieważ sam stanąłem przed tym wyzwaniem robiąc tego bloga. Googlowałem dużo, aby znaleźć odpowiednie rozwiązanie dla siebie. Na szczęście nie znalazłem i skłoniło mnie to do napisania własnego prostego skryptu. Będzie to bardzo proste lecz spełniające swoje zadanie menu do strony web. Ponieważ bardzo często chcemy, aby gość odwiedzający naszą stroną wiedział w jakiej zakładce menu się znajduję, lub po prostu wykorzystujemy takie rozwiązanie ze względów estetycznych.
Użyte zostaną tutaj techniki: HTML, CSS, PHP
Demo tutoriala: Menu z aktywnymi zakładkami
W poniższym tutorialu będziemy chcieli osiągnąć efekt na na obrazku powyżej. Aktywny element menu będzie podświetlony na czerwono, jak element „Strona główna„. Naszym zadaniem będzie dodanie klasy .aktywny do odnośnika <a>. Gdy na naszej stronie posiadamy strony, które nie są dostępne bezpośrednie z menu, skrypt będzie wyróżniał element „Strona Główna”.
Na początku posiadamy zwykłe menu zrobione na listach:
Kod:
<div style="text-align: left;"> <ul> <h2>Menu</h2> <li><a href="zakladka1.php">Zakładka 1</a></li> <li><a href="zakladka2.php">Zakładka 2</a></li> <li><a href="zakladka3.php"> Zakładka 3</a></li> </ul> </div>
Dodajemy do niego style:
li {
list-style:none;
}
li a {
background-color:Bisque;
border:medium solid;
color:Crimson;
display:block;
line-height:1.65em;
margin-top:10px;
text-align:center;
text-decoration:none;
border:outset;
}
li a:hover
{
background-color:#F33;
color:white;
font-weight:bold;
border:inset;
}
.aktywny
{
background-color:#F33;
color:white;
}
Kod CSS, który widzimy poniżej wpisujemy pomiędzy w sekcji head pomiędzy style:
<head><style ="text/css"> TUTAJ </style></head>
Zostało nam już teraz tylko napisanie skryptu PHP, odpowiedzialnego za wybieranie aktywnej zakładki:
<ul> <h2>Menu</h2> <li><a href="zakladka1.php" <?php if(($_SERVER['REQUEST_URI']!="zakladka2.php")&&($_SERVER['REQUEST_URI']!="zakladka3.php")) echo 'class="aktywny"' ?> >Zakładka 1</a></li> <li><a href="zakladka2.php" <?php if($_SERVER['REQUEST_URI']=="zakladka2.php") echo 'class="aktywny"' ?>>Zakładka 2</a></li> <li><a href="zakladka3.php" <?php if($_SERVER['REQUEST_URI']=="zakladka3.php") echo 'class="aktywny"' ?>> Zakładka 3</a></li> </ul>
zakladka1.phpJu
Już wyjaśniam o co chodzi w tym kodzie:
$_SERVER['REQUEST_URI']
Kod ten odpowiedzialny jest za pobranie aktualnej podstrony, dzięki temu możemy kod ten porównać z aktualnie odwiedzaną podstroną:
$_SERVER['REQUEST_URI']=="zakladka2.php"
Jeżeli pobrana podstrona rzeczywiście jest odnośnikiem z menu dodajemy do naszego <a> klasę .aktywny robimy to za pomocą instrukcji warunkowej:
<?php if($_SERVER['REQUEST_URI']=="zakladka2.php") echo 'class="aktywny"' ?>
Ładnie wygląda, gdy jedna zakładka jest aktywna zawsze, nawet gdy w rzeczywistości nie odwiedzamy żadnej pozycji z menu, możemy to osiągnąć dzięki ustawieniu, że zakładka ta ma mieć klase .aktywny wtedy i tylko wtedy gdy jest różna od pozostałych pozycji w menu:
<?php if(($_SERVER['REQUEST_URI']!="zakladka2.php")&&($_SERVER['REQUEST_URI']!="zakladka3.php")) echo 'class="aktywny"' ?>
Myślę, że tutorial napisałem prosto i przejrzyście. Każdy następny będzie już tylko lepszy 
.
Liczę na Wasze komentarze i uwagi.
Witam, tego własnie szukałem.
Raczkuje w php i natrafiłem na pewien problem
nie wiem co jest nie tak ale powyższy warunek nie jest spełniany czy to wina „index.php?page=download” ?
Twój kod jest poprawny, możliwe że własnie problem jest z :
Możesz srpóbować coś takiego:
Jeżeli to nie przyniesie efektu to warto przeczytać ten artykuł:
http://burned.pl/phpotrzymanie-adresu-url-aktualnej-strony#more-190
Mój poprzedni komentarz się nie wyświetlił, poradziłem sobie z problemem, wystarczyło przed adresem dodać /, artykuł przeczytałem przyda się na przyszłość.
tę linijkę trochę przerobiłem przy większej ilości pozycji w menu można się zapisać
Pozdrawiam
jak zrobić żeby zakładki były na górze strony koło siebie?
można to np zrobić tak jak jest na tej stronie:
2
3
4
5
6
<li style="float: left; display: block; margin-left: 6px;"><a class="aktywny" href="/">Start</a></li>
<li style="float: left; display: block; margin-left: 6px;"><a href="/2010">Archiwum</a></li>
<li style="float: left; display: block; margin-left: 6px;"><a href="/o-autorze">O autorze</a></li>
<li style="float: left; display: block; margin-left: 6px;"><a href="/kontakt">Kontakt</a></li>
</ul>
Pozdrawiam:
Roman Barzyczak
Mam problem, ponieważ po wstawieniu kodu, ciągle podświetlony jest pierwszy link – w moim wypadku strona główna. oto kod:
2
3
4
5
6
7
<li><a href="index.php?id=home" <?php if(($_SERVER['REQUEST_URI']!="index.php?id=home")&&($_SERVER['REQUEST_URI']!="index.php?id=o_firmie")&&($_SERVER['REQUEST_URI']!="index.php?id=projekty")&&($_SERVER['REQUEST_URI']!="index.php?id=innowacje")&&($_SERVER['REQUEST_URI']!="index.php?id=kontakt")) echo 'class="aktywny"' ?>>Strona Główna</a></li>
<li><a href="index.php?id=o_firmie" <?php if($_SERVER['REQUEST_URI']=="index.php?id=o_firmie") echo 'class="aktywny"' ?>>O Firmie</a></li>
<li><a href="index.php?id=projekty" <?php if($_SERVER['REQUEST_URI']=="index.php?id=projekty") echo 'class="aktywny"' ?>>Projekty</a></li>
<li><a href="index.php?id=innowacje" <?php if($_SERVER['REQUEST_URI']=="index.php?id=innowacje") echo 'class="aktywny"' ?>>Innowacje</a></li>
<li><a href="index.php?id=kontakt" <?php if($_SERVER['REQUEST_URI']=="index.php?id=kontakt") echo 'class="aktywny"' ?>>Kontakt</a></li>
</ul>
Zmieniałem również REQUEST_URI na QUERY_STRING ale to nic nie zmieniło.
Bo zawsze jest spełniany pierwszy warunek, ja bym to zrobił tak:
czyli porównuje adres jaki otrzymał od serwera jeśli jest równy „/” lub „index.php?id=home” wtedy dopiero wykonuje echo.
Twoje rozwiązanie spowodowało to że pierwszy link już nie świeci cały czas, ale nadal nie mam aktywnych zakładek. Znaczy się po najechaniu na link on zmienia swój kolor ale po kliknięciu nie zostaje podświetlony na stałe.
A na twojej stronie działa to poprawnie?
tak u mnie wszystko działa,
2
echo $adres;
użyj tego w kodzie i zobacz jaki link Ci generuje, ale na pierwszy rzut oka widzę ze robisz błąd jeśli mówi o tej stronie którą masz w nicku to do każdego linku powinieneś dopisać /test np
błąd powinno być
Super twój sposób działa. Dzięki wielkie za pomoc:]
Problem jest jeżeli ktoś znajdzie się na podstronie strony wtedy zakładki nie działają