PHP dropdown navigatie active hoofdknop
Voor een opdracht ben ik bezig met een PHP website. Het is alleen al even geleden dat ik hiermee gewerkt heb en het is een beetje weggezakt. Ik heb inmiddels een menu waarbij het hoofditem uit de navigatie blauw kleurt wanneer deze actief is. Ik wil echter ook dat het hoofditem blauw kleurt wanneer er een sub-item onder het hoofditem actief is.
Kortom:
Als het hoofd-item "companyprofile.php" actief is, is deze knop blauw. Wanneer sub-item "PersoonX.php" onder het hoofd-item "companyprofile.php" actief is, blijft het hoofd-item oranje. Hoe kan ik ervoor zorgen dat het hoofd-item nu ook blauw wordt.
Mijn menu.php ziet er op dit moment zo uit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div id="menu">
<div id="menubuttons">
<ul>
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'index.php'){echo 'firstcurrent'; }else { echo 'first'; } ?>"><a href="index.php">Introduction</a></li>
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'companyprofile.php'){echo 'current'; }else { echo 'middle'; } ?>"><a href="companyprofile.php">Company Profile</a>
<ul>
<li class="dropdown"><a href="PersonX.php">Person X</a></li>
<li class="dropdown"><a href="PersonY.php">Person Y</a></li>
</ul>
</li>
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'partners.php'){echo 'current'; }else { echo 'middle'; } ?>"><a href="partners.php">Partners</a>
<ul>
<li class="dropdown"><a href="PartnerX.php">PartnerX.php</a></li>
</ul>
</li>
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'services.php'){echo 'current'; }else { echo 'middle'; } ?>"><a href="services.php ">Services</a>
<ul>
<li class="dropdown"><a href="service1.php">Service 1</a></li>
<li class="dropdown"><a href="service1.php">Service 2</a></li>
<li class="dropdown"><a href="service1.php">Service 3</a></li>
<li class="dropdown"><a href="service1.php">Service 4</a></li>
<li class="dropdown"><a href="service1.php">Service 5</a></li>
<li class="dropdown"><a href="service1.php">Service 6</a></li>
</ul>
</li>
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'contact.php'){echo 'lastcurrent'; }else { echo 'last'; } ?>"><a href="contact.php">Contact</a></li>
</ul>
</div>
</div>
<div id="menubuttons">
<ul>
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'index.php'){echo 'firstcurrent'; }else { echo 'first'; } ?>"><a href="index.php">Introduction</a></li>
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'companyprofile.php'){echo 'current'; }else { echo 'middle'; } ?>"><a href="companyprofile.php">Company Profile</a>
<ul>
<li class="dropdown"><a href="PersonX.php">Person X</a></li>
<li class="dropdown"><a href="PersonY.php">Person Y</a></li>
</ul>
</li>
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'partners.php'){echo 'current'; }else { echo 'middle'; } ?>"><a href="partners.php">Partners</a>
<ul>
<li class="dropdown"><a href="PartnerX.php">PartnerX.php</a></li>
</ul>
</li>
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'services.php'){echo 'current'; }else { echo 'middle'; } ?>"><a href="services.php ">Services</a>
<ul>
<li class="dropdown"><a href="service1.php">Service 1</a></li>
<li class="dropdown"><a href="service1.php">Service 2</a></li>
<li class="dropdown"><a href="service1.php">Service 3</a></li>
<li class="dropdown"><a href="service1.php">Service 4</a></li>
<li class="dropdown"><a href="service1.php">Service 5</a></li>
<li class="dropdown"><a href="service1.php">Service 6</a></li>
</ul>
</li>
<li class="<?php if(basename($_SERVER['SCRIPT_NAME']) == 'contact.php'){echo 'lastcurrent'; }else { echo 'last'; } ?>"><a href="contact.php">Contact</a></li>
</ul>
</div>
</div>
Ben erg benieuwd naar jullie oplossingen!
Groetjes,
Pascale
- Ariën -:
Gelieve in het vervolg bij code de [code][/code]-tags gebruiken.
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!
Gewijzigd op 30/05/2016 12:58:12 door - Ariën -
Je hebt dan ook een "pad" van de "root" van de boom naar de uiteindelijk pagina.
Vervolgens zou je dan een menu volledig kunnen genereren met behulp van deze site-boom. Bij het genereren van zo'n menu kun je makkelijk on-the-fly items voorzien van een stijlklasse wanneer de pagina waar je op zit in het pad voorkomt van een reeks pagina's waarvan je hyperlinks weergeeft.
Indien je niet een bovenstaande constructie hebt zul je toch op een of andere manier criteria moeten hebben op grond waarvan je kunt zien hoe de verbanden tussen onderlinge/onderliggende pagina's zijn. En daar dan stijlklasses aan toekennen. Indien je dit niet doet zul je een heleboel if-statements per pagina moeten schrijven en dat wordt al snel een rommeltje.
Oftewel, zorg voor een site-structuur. Dan kun je makkelijker dit soort dingen implementeren.
Alternatief is misschien iets met JavaScript, waarbij je na het laden van de webpagina je menu nog dynamisch aanpast. Maar ook daar zul je op een of andere manier moeten kunnen vaststellen op welke pagina je zit.