Menu highlight current page

Status
Niet open voor verdere reacties.
pepernoot

pepernoot

Gebruiker
Lid geworden
14 mei 2009
Berichten
322
beste lezer,

ik ben bezig met mijn portfolio-site, Mijn site bestaat uit een 'base' met een menu die een PHP include verandert.
dit principe:

PHP: 
        <div id="content">
        	<?php
				switch($_GET['id']){
				case 'home':
				case 'about':
				case 'portfolio':
				case 'contact':
				include($_GET['id'].'.php');
				break;
				default:
				include('home.php');
				}
				?>
            <?php include("includes/footer.php"); ?> 
        </div>

Nu wil ik dat mijn menu een highlight geeft als je op de desbetreffende pagina bent.
voorheen lukte dit met:
PHP: 
<div id="header">
	<div id="logo"></div>
	<div id="menu-wrapper">
    <?php $currentPage = basename($_SERVER['SCRIPT_NAME']); ?>
        <ul id="menu">
            <?php echo "\n"; if ($currentPage == 'index.php?id=home') { ?><li class="on"><a>Home</a></li><?php } else { ?><li class="off"><a href="index.php?id=home">Home</a></li><?php } ?>
            <?php echo "\n"; if ($currentPage == 'index.php?id=about') { ?><li class="on"><a>About Me</a></li><?php } else { ?><li class="off"><a href="index.php?id=about" >About Me</a></li><?php } ?>
            <?php echo "\n"; if ($currentPage == 'index.php?id=portfolio') { ?><li class="on"><a>Portfolio</a></li><?php } else { ?><li class="off"><a href="index.php?id=portfolio" >Portfolio</a></li><?php } ?>
            <?php echo "\n"; if ($currentPage == 'index.php?id=contact') { ?><li class="on"><a>Contact</a></li><?php } else { ?><li class="off"><a href="index.php?id=contact" >Contact</a></li><?php } ?>
        </ul>
	</div>
</div>

Maar door de ...?id=### werkt dit niet meer!
Hoe kan ik dit werkend krijgen?
 
Je geeft via $_GET['id'] al aan welke pagina je wilt hebben, kwestie van die variabele gebruiken ;)
PHP: 
<div id="header">
	<div id="logo"></div>
	<div id="menu-wrapper">
		<ul id="menu">
			<li class="<?php echo $_GET['id'] == 'home' ? 'on' : 'off'; ?>"><a href="index.php?id=home">Home</a></li>
			<li class="<?php echo $_GET['id'] == 'about' ? 'on' : 'off'; ?>"><a href="index.php?id=about">About Me</a></li>
			<li class="<?php echo $_GET['id'] == 'portfolio' ? 'on' : 'off'; ?>"><a href="index.php?id=home">Portfolio</a></li>
			<li class="<?php echo $_GET['id'] == 'contact' ? 'on' : 'off'; ?>"><a href="index.php?id=contact">Contact</a></li>
		</ul>
	</div>
</div>
Scheelt aardig nietwaar? ;)

Daarnaast zou ik persoonlijk alleen een class meegeven wanneer iets actief is en verder is een href verplicht bij een <a> :)
 
Wow dat is idd best logisch en simpel,
helaas krijg ik het niet werkend :(

Ik heb mijn oude <header> verandert met de 'nieuwe', maar dit geeft niet het gewenste effect.

dit is trouwens de CSS:

Code: 
ul#menu{
	width: 400px;
	float: left;
	margin: 12px 0 0 30px;
}

ul#menu li{
	color: #FFF;
	float: left;
	height: 30px;
	font-size: 18px;
	padding: 5px 0 0 15px;
	font-family:"staravenue";
}

.on{
	color: #FFF;
}

.off{
	color: #666;
}

ul#menu li a{
	display: block;
	text-decoration: none;
	border-left: 3px solid #333;
	padding: 0 0 0 15px;
}

ul#menu li:first-child a{
	border-left: none;
}

ul#menu li a:hover{
	color: #CCC;
}

Doe ik iets verkeerd (denk het wel!)
 
YEEEH heb het gevonden!
100X BEDANKT VOOR DE OPLOSSING!

werkt nu wel met;
Class="on" tussen de "a" tags gezet.
PHP: 
<div id="header">
    <div id="logo"></div>
    <div id="menu-wrapper">
        <ul id="menu">
            <li><a href="index.php?id=home" class="<?php echo $_GET['id'] == 'home' ? 'on' : 'off'; ?>">Home</a></li>
            <li><a href="index.php?id=about" class="<?php echo $_GET['id'] == 'about' ? 'on' : 'off'; ?>">About Me</a></li>
            <li><a href="index.php?id=portfolio" class="<?php echo $_GET['id'] == 'portfolio' ? 'on' : 'off'; ?>">Portfolio</a></li>
            <li><a href="index.php?id=contact" class="<?php echo $_GET['id'] == 'contact' ? 'on' : 'off'; ?>">Contact</a></li>
        </ul>
    </div>
</div>

en CSS

HTML: 
ul#menu{
	width: 400px;
	float: left;
	margin: 12px 0 0 30px;
}

ul#menu li{
	color: #FFF;
	float: left;
	height: 30px;
	font-size: 18px;
	padding: 5px 0 0 15px;
	font-family:"staravenue";
}

ul#menu li a.on{
	color: #FFF;
}

ul#menu li a.off{
	color: #666;
}

ul#menu li a{
	display: block;
	text-decoration: none;
	border-left: 3px solid #333;
	padding: 0 0 0 15px;
}

ul#menu li:first-child a{
	border-left: none;
}

ul#menu li a:hover{
	color: #CCC;
}

nogmaals bedankt!
 
Ik zou hem wel op de LI houden.

Mijn voorstel:
Code: 
ul#menu				{ width: 400px; float: left; margin: 12px 0 0 30px; }
ul#menu li			{ float: left; height: 30px; font-size: 18px; padding: 5px 0 0 15px; font-family:"staravenue"; }
ul#menu li a			{ color: #666; display: block; text-decoration: none; border-left: 3px solid #333; padding: 0 0 0 15px; }
ul#menu li.active a		{ color: #FFF; }
ul#menu li:first-child a	{ border-left: none; }
ul#menu li a:hover		{ color: #CCC; }
PHP: 
<div id="header">
    <div id="logo"></div>
    <div id="menu-wrapper">
        <ul id="menu">
            <li><a href="index.php?id=home"<?php echo $_GET['id'] == 'home' ? ' class="active"' : ''; ?>>Home</a></li>
            <li><a href="index.php?id=about"<?php echo $_GET['id'] == 'about' ? ' class="active"' : ''; ?>>About Me</a></li>
            <li><a href="index.php?id=portfolio"<?php echo $_GET['id'] == 'portfolio' ? ' class="active"' : ''; ?>>Portfolio</a></li>
            <li><a href="index.php?id=contact"<?php echo $_GET['id'] == 'contact' ? ' class="active"' : ''; ?>>Contact</a></li>
        </ul>
    </div>
</div>
 
Sorry maar dat lijkt toch echt niet te werken...
Wat is de reden dat het beter is om hem op li te hoeden?
 
Waarschijnlijk helpt dit dan wel:
Code: 
ul#menu li.active a		{ color: #FFF !important; }
!important zorgt er voor dat voorgaande definities op dit attribuut genegeerd worden.

De reden dat ik het handiger vind hem op een LI element te zetten is wanneer je later besluit een stijl toe te passen op het gehele block je niet alles opnieuw hoeft te definiëren. Wellicht wil je later de achtergrondkleur van het blokje aanpassen wanneer iets actief is. Dat kan niet zomaar wanneer je de active-class op de A hebt staan, nu wel:
Code: 
ul#menu li.active		{ background: blue !important; }
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan