Menuitem (div) active weergeven

[steef27]

Goedemiddag,

Op het moment ben ik bezig met het optimaliseren van het menu van mijn website.
Mij website is zo opgebouwd dat ik op elke pagina het menu (div) heb ge-included. Op deze manier hoef ik maar op één plek het menu te onderhouden.

Het menu zit er als volgt uit:

<a href="http://www.voorbeeld.nl/index.php" class="menutext"><div id="navitem">Home</div></a>
<a href="http://www.voorbeeld.nl/id1.php" class="menutext"><div id="navitem">Over ons</div></a>
<a href="http://www.voorbeeld.nl/id2.php" class="menutext"><div id="navitem">Assortiment</div></a>
<a href="http://www.voorbeeld.nl/id3.php" class="menutext"><div id="navitem">Partners</div></a>

met de bijbehorend CSS-file:

div#navitem{
	background-image:url(gfx/menu_inactive.gif);
	background-repeat:no-repeat;
	width: 110px;
	height: 30px;
	overflow:hidden;
	text-align:right;
	margin-left:10px;
	padding-right:15px;
	padding-top:15px;	
	border-bottom:solid 1px;
	border-color:#E1E1E1;
	}

div#navitem:hover{
	background-image:url(gfx/menu_hover.gif);
	background-repeat:no-repeat;
	width: 110px;
	height: 30px;
	overflow:hidden;
	text-align:right;
	margin-left:10px;
	padding-right:15px;
	padding-top:15px;	
	border-bottom:solid 1px;
	border-color:#E1E1E1;
	}

div#navitem:active{
	background-image:url(gfx/menu_active.gif);
	background-repeat:no-repeat;
	width: 110px;
	height: 30px;
	overflow:hidden;
	text-align:right;
	margin-left:10px;
	padding-right:15px;
	padding-top:15px;	
	border-bottom:solid 1px;
	border-color:#E1E1E1;
	}

Nu is het probleem dat het menu-item bij hover keurig wordt opgemaakt met navitem:hover styles, maar dat navitem:active niet werkt bij het activeren van de link in menu-item.

Ik vermoed dat het te maken heeft met het feit dat het menu op elke pagina geincluded wordt en dus niet weet welke link nu actief is.

Kan iemand mij een tip geven? Via google vind ik weinig bruikbare informatie.

 

[visha]

hey,
kweet niet wrm je eerst een link maakt en dan daarna de div?
maar het zou moeten zijn een div en daarbinnen een link.

Zoiets als :

<div class="navitem"><a href="http://test2.nl/index.php">TEST</a></div>

verander de classnames in je css ook naar

.navitem
.navitem:hover
.navitem:active

Byee VRC

 

[steef27]

De reden waarom ik eerst een link maak en daarna een div is dat de div zélf een link moet zijn. De div is als het ware een knop met een achtergrond.

De oplossing die jij aandraagt voldoet helaas niet.

Let wel: in mijn oplossing werkt 'hover' wel, maar 'active' niet.

Andere suggesties?

 

[visha]

dan doe je het alsnog verkeerd want dan zou je de class moeten pakken die in de <a> staat die weer binnen een <div> staat(mijn manier dus)

maar goed, de oplossing op jouw manier (wat misschien later wel fouten zal kunnen geven)

het werkt wel!!
verander de code is naar

div#navitem:active{
	background-color:red;
    }

dan zal je zien dat de tekst rood wordt als deze active is

Byess VRC

P.S. je ziet hier eigenlijk al dat het fout gaat want de tekst krijgt een achtergrondkleur rood terwijl hij gwn zwart moet blijven want hij wordt rood(backgroundcolor) terwijl dat de property text-color is dus ja

 

[csshunter]

Aha, aha, aha!
Als ik het bovenstaande over het correcte gebruik van <div>'s even vergeet (hetzelfde kan handiger zonder de <div>'s), dan geloof ik dat het eigenlijke hoofdprobleem is:

• Je zit op een bepaalde pagina.
• Je klikt in het menu op een andere pagina.
• Je wilt dat nu de nieuwe pagina in het menu de "actieve" stijl krijgt, maar dat lukt niet.

Dan is de redding nabij.

• Lees hiervoor de pagina's over de "woeste css-truc" met de menukolom ("Linkje uitlichten?" in Knutselpagina 5) die beschreven staat in de Mini-tutorial: de opzet van een php-site.

Met vriendelijke groet,
CSShunter

PS: De truc is bijvoorbeeld hier toegepast, zowel in het horizontale als in het verticale menu (beide menu's komen via een php-include op elke pagina te staan).

 

[steef27]

Hallo,

Het is me gelukt met hulp van onderstaand forumbericht:

http://forums.tizag.com/showthread.php?t=15040



In navigation.php staat:

<div id="navcontainer">
    <ul id="navlist">
	     <li <?php if ($page == "index") {print("id=\"active\"");} ?>>
             <a href="index.php">Home</a></li>
         <li <?php if ($page == "id1") {print("id=\"active\"");} ?>>
             <a href="id1.php">Over ons</a></li>
         <li <?php if ($page == "id2") {print("id=\"active\"");} ?>>
             <a href="id2.php">Assortiment</a></li>
         <li <?php if ($page == "id3") {print("id=\"active\"");} ?>>
             <a href="id3.php">Partners</a></li>
         <li <?php if ($page == "id4") {print("id=\"active\"");} ?>>
             <a href="id4.php">Referenties</a></li>
         <li <?php if ($page == "contact") {print("id=\"active\"");} ?>>
             <a href="contact.php">Contact</a></li>
	</ul>
 </div>

Op elke contentpagina gebruik ik in de HEAD:

<?php
    $path = $_SERVER['PHP_SELF'];
    $page = basename($path, '.php');
?>

en de CSS ziet er zo uit:

#navcontainer {
	width: 130px;
	padding-top:30px;
	font-family: Arial, Helvetica, sans-serif;
	background-color : #FFFFFF;
	text-align:right;
	}

#navcontainer ul{	
	margin-top : 0;
	margin-left: 0;
	padding: 4px 4px 4px 4px;
	list-style-type: none;
	}

#navcontainer a{
	display: block;
	font-weight : bold;
	font-size : 0.9em;
	padding-bottom:0px;
	padding-top:8px;
	padding-right:2px;
	padding-left:0px;
	background-image:url(gfx/menu_inactive.gif);
	background-repeat:repeat-x;
	height:20px;
	border-bottom: 1px solid #FFFFFF;
	}

#navcontainer a:link, #navlist a:visited{
	color: #FFFFFF;
	text-decoration: none;
	}

#navcontainer a:hover, #navcontainer #active a:link, #navcontainer #active a:visited {
	background-image:url(gfx/menu_active.gif);
	background-repeat:repeat-y;
	color: #666666;
	}

#navcontainer #active a:link, #navcontainer #active a:visited {
	background-image:url(gfx/menu_active.gif);
	background-repeat:repeat-y;
	color: #000000;
	}

Bedankt voor alle tips!