Andere achtergrondkleur in menu

Status
Niet open voor verdere reacties.
R

Renee123

Gebruiker
Lid geworden
8 feb 2009
Berichten
65
De pagina's op mijn website zijn als volgt opgebouwd:

PHP: 
<?php include("header.php"); ?>
Hier komt de tekst voor de betreffende pagina...
<?php include("footer.php"); ?>

Header.php bevat o.a. de info over het menu, namelijk op deze manier:
PHP: 
	<ul>
	<li><a href="Actueel.php">Actueel</a></li>
	<li><a href="Media.php">Media</a></li>
	<li><a href="Nieuwsbrief.php">Nieuwsbrief</a></li>
	<li><a href="Werving.php">Werving</a></li>
</ul>
Echter wordt nu voor elke pagina het menu op dezelfde manier weergegeven. Maar ik wil dat je ook in het menu kan zien in welke pagina je bent door de achtergrondkleur van dat menu-blokje een andere kleur te geven. Dus als je bijvoorbeeld in website.nl/Actueel.php bent, dat dan de menu-button van Actueel een andere kleur krijgt. Ik heb in de css een elementsector toegevoegd, namelijk
PHP: 
.menukleur{
	background-color:#fcff00;
}
Alleen moet ik nu op 1 of andere manier opnemen dat die kleur ook aangepast wordt, als er op een menu-item geklikt wordt. Iemand die me op weg kan helpen?
 
ik denk dat je dit het makkelijkste kunt oplossen met jquery/javascript.
Want dan laat je een functie de url lezen en kijken bij welk list item het href atttribute gelijk is aan de url.
Als die gevonden is, dan laat je er een class bv active aan toevoegen. en in je css neem je de class .active op met de rules die nogig zijn.
 
Hmm, ok... Het is dus niet mogelijk via html/php code?

Of op een andere manier? Bijv. door de url naam uit te lezen, deze te ontleden en alleen het stukje voor de .php eruithalen (=> bijv. 'Actueel' bij mijnsite.nl/Actueel.php) en dan de regel
<li><a href="Actueel.php">Actueel</a></li> aan te passen of over te schrijven met
<li class="menukleur"><a href="Actueel.php">Actueel</a></li>

Haha, het zal vast niet zo makkelijk zijn ;)
 
het is wel mogelijk met php, maar het is alleen veel bewerkelijker

Het volgende is niet getest!!!!

PHP: 
<PHP
function classCheck($id) {
$uri = (isset($_SERVER["REQUEST_URI"]) ? $_SERVER["REQUEST_URI"] : 'Actueel.php');
$uri = str_replace('/','', $uri);
$uri = explode('.', $uri);
$uri = strtolower($uri[0]);

$id = strtolower($id);

if($id = $uri) {
rerturn "class=\"active\"";
} else {
return '';
}
}
?>

<ul>
    <li <?PHP echo classCheck('Actueel'); ?>><a href="Actueel.php">Actueel</a></li>
    <li <?PHP echo classCheck('Media'); ?>><a href="Media.php">Media</a></li>
    <li <?PHP echo classCheck('Nieuwsbrief'); ?>><a href="Nieuwsbrief.php">Nieuwsbrief</a></li>
    <li <?PHP echo classCheck('Werving'); ?>><a href="Werving.php">Werving</a></li>
</ul>
 
Ok, relaxed :) Er is dus wel een php oplossing! Tnx!
Alleen kan ik even niet volgen wat je hierboven geklust hebt. Ik begrijp dat in het eerste stukje de url geanalyseerd wordt, omgezet wordt naar kleine letters en vergeleken wordt. Alleen waar vergelijk je 'm mee? Met Actueel.php? Want die naam verschilt per pagina. Dus dat moet je dan toch ook dynamisch maken? Of moet ik achter de : in regel 3 alle php-pagina's opnemen die in het menu voorkomen?

Vervolgens check je of de naam gelijk is en als dat het geval maak je van de class=active? Of zo... dat snap ik niet helemaal, want ik had verwacht dat daar zou komen dat class="menukleur" toegevoegd moet worden. Daarnaast heb je het over rerturn => return toch?

Uiteindelijk eindig je met de list van het menu met daarin de classcheck. Dat snap ik dan wel weer.

Ik neem trouwens aan dat ik alles gewoon in mijn header.php moet toevoegen? Dus waar ik eerst de lijst met menu-items heb, moet ik nu jou code invoegen?
 
rerturn is een typo moet return zijn.

regel 3 is om de pagina in te stellen welke opend als er nog geen keuze gemaakt is...www.mijnSite.nl en nog niet www.mijnSite.nl/Actueel.php

Wat ik gemaakt heb is een functie. classCheck($id)
Zoals je ziet in het laatste html gedeelte echo ik het resultaat van de functie.

<li <?PHP echo classCheck('Actueel'); ?>><a href="Actueel.php">Actueel</a></li>

in deze regel is $id in de functie 'Actueel' en zal de functie kijken of $uri gelijk is aan 'Actueel'.

In je css moet je nog wel je active class aanmaken.
 
Ok, ik heb nu in de css toegevoegd:
PHP: 
.active{
	background-color:#fcff00;
}

Ik heb ook in regel 1 een ? toegevoegd (je had <PHP en denk dat het <?PHP moet zijn).

Verder maakt je uitleg het inderdaad nog weer een stuk begrijpelijker voor me! De site wordt nu goed weergegeven, inclusief het menu. Alleen zijn nu alle kleuren geel... Ik heb het gevoel dat we in de buurt komen :) Alleen is er toch iets nog niet helemaal oké. Enig idee wat het kan zijn? Klopt de css code zoals ik die hierboven gepost heb? En klopt ook de return "class=\"active\"";
Heb het idee dat het hier ergens misgaat.
 
regel 10
if($id = $uri) { maak er if($id == $uri) {

en na regel 10 dit invoegen:

echo $id." = ". $uri . "<br />";

deze regel is een controlle om de zien wat tegen elkaar vergeleken wordt. Deze regel verpest ff je pagina maar je kunt even uitlezen wat er gebeurt.
 
Heb precies gedaan wat je zei, maar de pagina blijft precies hetzelfde qua lay-out en zo. Alleen de achtergrondkleur van het menu is niet meer geel maar weer normaal.

Dus heb niks van een foutmelding of zo...

Edit:
Als ik in de css .active{ verander in li:active{ dan zijn de achtergronden in het menu weer netjes wit en als ik er op klik wordt het even geel. Nu alleen nog zorgen dat het geel blijft en dan zijn we er :)
 
Laatst bewerkt:
post je header file eens.

ik denk dat de class naar de a tag verzet moet worden.
<ul>
<li><a href="Actueel.php" <?PHP echo classCheck('Actueel'); ?>>Actueel</a></li>
<li><a href="Media.php" <?PHP echo classCheck('Media'); ?>>Media</a></li>
<li><a href="Nieuwsbrief.php" <?PHP echo classCheck('Nieuwsbrief'); ?>>Nieuwsbrief</a></li>
<li><a href="Werving.php" <?PHP echo classCheck('Werving'); ?>>Werving</a></li>
</ul>

Want ik denk dat je a tag in je css wordt gedefineerd
 
Trouwens mijn edit nog gelezen van mijn vorige post? Misschien kan je daar nog wat mee.

Dit is mijn header.php:
PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C [13]//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="shared/style.css" />



<title>Test</title>
</head>
<body class="bg">
<div id="container">

	<div id="navbar">




	<h2>Menu 1</h2>

<?php
function classCheck($id) {
$uri = (isset($_SERVER["REQUEST_URI"]) ? $_SERVER["REQUEST_URI"] : 'Actueel.php');
$uri = str_replace('/','', $uri);
$uri = explode('.', $uri);
$uri = strtolower($uri[0]);

$id = strtolower($id);

if($id = $uri) {
return "class=\"active\"";
} else {
return '';
}
}
?>


<ul>
    <li <?PHP echo classCheck('Actueel'); ?>><a href="Actueel.php">Actueel</a></li>
    <li <?PHP echo classCheck('Media'); ?>><a href="Media.php">Media</a></li>
    <li <?PHP echo classCheck('Nieuwsbrief'); ?>><a href="Nieuwsbrief.php">Nieuwsbrief</a></li>
    <li <?PHP echo classCheck('Werving'); ?>><a href="Werving.php">Werving</a></li>
</ul>




	</div>


	<div id="main">
		<div id="header"></div>

		<div id="content">
 
Ik heb de class output verplaats naar de a-tags
PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C [13]//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="shared/style.css" />
 
 
 
<title>Test</title>
</head>
<body class="bg">
<div id="container">
 
    <div id="navbar">
 
 
 
 
    <h2>Menu 1</h2>
 
<?php
function classCheck($id) {
$uri = (isset($_SERVER["REQUEST_URI"]) ? $_SERVER["REQUEST_URI"] : 'Actueel.php');
$uri = str_replace('/','', $uri);
$uri = explode('.', $uri);
$uri = strtolower($uri[0]);
 
$id = strtolower($id);
 
if($id = $uri) {
return "class=\"active\"";
} else {
return '';
}
}
?>
 
 
<ul>
    <li><a href="Actueel.php" <?PHP echo classCheck('Actueel'); ?>>Actueel</a></li>
    <li><a href="Media.php" <?PHP echo classCheck('Media'); ?>>Media</a></li>
    <li><a href="Nieuwsbrief.php" <?PHP echo classCheck('Nieuwsbrief'); ?>>Nieuwsbrief</a></li>
    <li><a href="Werving.php" <?PHP echo classCheck('Werving'); ?>>Werving</a></li>
</ul>
 
 
 
 
    </div>
 
 
    <div id="main">
        <div id="header"></div>
 
        <div id="content">

En in je css maak van .active een a.active
Op die manier is de rule voor een a-tag met de class active
 
Laatst bewerkt:
kijk ook eens in je broncode of de class netjes geplaats wordt bij de a-tag.
 
ik heb die class output ook verplaatst naar de a tag en in de css het ook veranderd, maar helaas... Er verandert niet veel, behalve dat nu alleen de kleur achter de letters (Actueel, Media etc) is geel geworden. Bij allemaal. Dus nog niet gekoppeld aan de pagina die weergegeven wordt.
 
Ok, ik heb nu even het menu 2 keer gemaakt.
1x met de class in de a-tag en 1x met de class in de li-tag.

In de css heb ik a.active gemaakt.

De broncode geeft dit weer:
PHP: 
<ul>
<li><a href="Actueel.php" class="active">Actueel</a></li>
<li><a href="Media.php" class="active">Media</a></li>
<li><a href="Nieuwsbrief.php" class="active">Nieuwsbrief</a></li>
<li><a href="Werving.php" class="active">Werving</a></li>
</ul>


<ul>
    <li class="active"><a href="Actueel.php">Actueel</a></li>
    <li class="active"><a href="Media.php">Media</a></li>
    <li class="active"><a href="Nieuwsbrief.php">Nieuwsbrief</a></li>
    <li class="active"><a href="Werving.php">Werving</a></li>
</ul>
 
Dat wordt de vergelijking $id == $uri telkens goedgekeurd. Met als gevolg dat bij elke a-tag de class komt te staan.
Heb je de site ergens live staan waar ik even de broncode kan bekijken?
 
zet op regel 30 eens
echo $id . " = " . $uri . "<br />";

en doe me dan nog eens de broncode
 
Op regel 31 if($id == $uri) {
En op regel 32 (je zei 30) echo $id . " = " . $uri . "<br />";

Dan wordt de broncode:

PHP: 
<ul>
<li><a href="Actueel.php" >Actueel</a></li>
<li><a href="Media.php" >Media</a></li>
<li><a href="Nieuwsbrief.php" >Nieuwsbrief</a></li>
<li><a href="Werving.php" >Werving</a></li>
</ul>


<ul>
    <li ><a href="Actueel.php">Actueel</a></li>
    <li ><a href="Media.php">Media</a></li>
    <li ><a href="Nieuwsbrief.php">Nieuwsbrief</a></li>
    <li ><a href="Werving.php">Werving</a></li>
</ul>
 
We testen het ff anders
regel 22 tot 37 dit doen
PHP: 
<?php
function classCheck($id) {
$uri = (isset($_SERVER["REQUEST_URI"]) ? $_SERVER["REQUEST_URI"] : 'Actueel.php');
$uri = str_replace('/','', $uri);
$uri = explode('.', $uri);
$uri = strtolower($uri[0]);
 
$id = strtolower($id);
 
if($id != $uri) {
return ' id="'.$uri.'"';
} else {

return 'class="active" id="'.$uri.'"';
}
}
?>

Als je nu de bron kunt posten, dan zal er ook een is met gegevens staan
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan