Valgt side skal ha annen farge på linken

elasticeye · 15. mars 2009

Jeg har laget denne siden: http://bedriftdans.comyr.com

Jeg vil at menyen skal endre farge etter hvilken side du er på. Velger du f.eks HVA, så skal HVA boksen få samme farge som a:hover.

Legger inn et utdrag fra index.php og css.css:

<div id="navigation">
<ul>
<li><a href="?action=hva">Hva</a></li>
<li><a href="?action=hvem">Hvem</a></li>
<li><a href="?action=kurspakker">Kurspakker</a>
<ul>
	<li><a href="?action=bedrift">Bedrift</a></li>
	<li><a href="?action=privat">Privat</a></li>
</ul>
</li>
<li><a href="?action=kontakt">Kontakt oss</a></li>
<li><a href="?action=referanser">Referanser</a></li>
<li><a href="?action=bilder">Bilder</a></li>
</ul>
</div>

<div id="content">

<?php

if(isset($_GET['action']))
{

switch ($_GET['action'])
	{
		case 'hva':			
		include("hva.php");			
		break;

		case 'hvem':
		include("hvem.php");
		break;

		case 'kurspakker':
		include ("kurspakker.html");
		break;

		case 'kontakt':
		include ("email.php");
		break;

		case 'referanser':
		include ("referanser.html");
		break;

		case 'bilder':
		include ("bilder.html");
		break;

		case 'bedrift':
		include ("bedrift.html");
		break;

		case 'privat':
		include ("privat.html");
		break;
	}

}
else 
{
	include ("hva.php");
}

?>

</div>

#navigation{
height:2.2em;
line-height:2.2em;
width:758px;
margin:0 1px;
background:#b7002f;
color:#ffffff;
}

#navigation li{
float:left;
text-align: center;
width: 105px;
list-style-type:none;
border-right:1px solid #ffffff;
white-space:nowrap;
position: relative;
}

li ul {

position: absolute;
display: none;
background-color: #b7002f;
border: auto;
}

#navigation li a{
display:block;
padding:0px 15px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
border-bottom: 1px solid;
}

li:hover ul, li.over ul 
{ 
display: block; 
}

#navigation .selected,#navigation a:hover{
background: #004a62;
color: white;
text-decoration:none;
}

Haraldson · 15. mars 2009

Istedenfor if/else rundt switchen, kan du bare bruke default: nederst i switchen.

----

Hva om du kjører switchen helt i topp, og lagrer filnavnet du ønsker å inkludere i en string, samtidig som du i switchen lagrer hvilken side som er aktiv i en annen variabel, og tester på denne verdien når du skriver ut menyen?

Tråden flyttet til PHP.

elasticeye · 15. mars 2009

Hva om du kjører switchen helt i topp, og lagrer filnavnet du ønsker å inkludere i en string, samtidig som du i switchen lagrer hvilken side som er aktiv i en annen variabel, og tester på denne verdien når du skriver ut menyen?

Litt usikker på hvordan jeg skal gjøre dette. Er ganske fersk i php.

Kan du laget et enkelt eksempel, ev. modifisere koden min?

elasticeye · 15. mars 2009

Jeg løste det: http://bedriftdans.comyr.com/

Lagde IDer til bodyen i de ulike sidene:

<body id = "hva">

<body id = "kurspakker">

osv...

I index.php ble det slik:

<li id = "hvaNav"><a href="?action=hva">Hva</a></li>
<li id = "hvemNav"><a href="?action=hvem">Hvem</a></li>

osv...

Og i CSS fila ble det slik:

body#hva li#hvaNav a{
background-color: #004a62;
}

body#hvem li#hvemNav a{
background-color: #004a62;
}

osv...

Er det noen nevneverdige ulemper ved denne metoden?

Martin A. · 16. mars 2009

Om du ser bort i fra den grusome kildekoden og store unødvendige mengden med CSS-klasser, nei.

<?php

$tab = array( 	'hva' 	=> '',
			'hvem'	=> '',
			'kurspakker'	=> '',
			'kontakt'		=> '',
			'referanser'	=> '',
			'bilder'		=> '',
			'bedrift'		=> '',
			'privat'		=> '',
		);

switch( $_GET['action'] )
{
default:
case 'hva':			
	$file = "hva.php";			
	break;

case 'hvem':
	$file = "hvem.php";
	break;

case 'kurspakker':
	$file = "kurspakker.html";
	break;

case 'kontakt':
	$file = "email.php";
	break;

case 'referanser':
	$file = "referanser.html";
	break;

case 'bilder':
	$file = "bilder.html";
	break;

case 'bedrift':
	$file = "bedrift.html";
	break;

case 'privat':
	$file = "privat.html";
	break;
}

$tab[ $_GET['action'] ] = 'selected';

echo <<<EOF
<style type="text/css">
.tab li.selected,
.tab li a:hover
{
background: #004a62;
color: white;
text-decoration:none;
}
</style>

<div id="navigation">
<ul class="tab">
<li class="{$tab['hva']}"><a href="?action=hva">Hva</a></li>
<li class="{$tab['hvem']}"><a href="?action=hvem">Hvem</a></li>
<li class="{$tab['kurspakker']}"><a href="?action=kurspakker">Kurspakker</a>
<ul>
	<li class="{$tab['bedrift']}"><a href="?action=bedrift">Bedrift</a></li>
	<li class="{$tab['privat']}"><a href="?action=privat">Privat</a></li>
</ul>
</li>
<li class="{$tab['kontakt']}"><a href="?action=kontakt">Kontakt oss</a></li>
<li class="{$tab['referanser']}"><a href="?action=referanser">Referanser</a></li>
<li class="{$tab['bilder']}"><a href="?action=bilder">Bilder</a></li>
</ul>
</div>

<div id="content">
EOF;

include( $file );


echo "</div>";

Utestet.

Thomas. · 16. mars 2009

Kan da gjøres enda enklere.

<?php

if($_GET['action'] == "hjem") {

  // ting som skal være aktivt når ?action=hjem står i URL'en

}

?>

Martin A. · 16. mars 2009

Du mener altså at han skal kjøre en if() for hver av lenkene? Da er man tilbake på det med unødvendig mye kode.

OIS · 16. mars 2009

Kan lime inn noen hjelpefunksjoner jeg lagde en dag basert på ZF view hjelperne. Lagde egentlig en formSelect med option groups, men hjelpefunksjonene kunne enkelt brukes her.

<?php

function escape($val) {
if (is_array($val)) {
	return array_map('escape', $val);
}
return htmlspecialchars($val, ENT_QUOTES);
}

function htmlElement($tag, $value, $attr = null, $end = true, $escape = true) {
if (!is_array($attr)) {
	$attr = array();
}
if ($escape) {
	$value = htmlspecialchars($value);
}
return "<$tag" . (!empty($attr) ? ' ' : '') . arrayToAttributes($attr) . ($end ? '' : '/') . '>' . $value . ($end ? "</$tag>" : '');
}

function arrayToAttributes($attr) {
array_walk($attr, '_arrayToAttributes');
return implode(' ', $attr);
}

function _arrayToAttributes(&$v, $k) {
	$k = escape($k);
	$t = escape($v);
	$v = "$k=\"$t\"";
}

function htmlLink($text, $url = null, $attr = null, $escape = true) {
$attr['href'] = ($url !== null ? $url : '#');
return htmlElement('a', $text, $attr, true, $escape);
}

function htmlList($type, $items, $attr = null, $itemAttribs = null, $escape = true) {
if (!is_array($itemAttribs)) {
	$itemAttribs = array();
}
foreach ($items as $key => $item) {
	$list[] = htmlElement('li', $item, (isset($itemAttribs[$key]) ? $itemAttribs[$key] : array()), true, $escape);
}
return htmlElement($type, implode('', $list), $attr, true, $escape);
}

$pages = array(
'hva' => "hva.php",
'hvem' => "hvem.php",
'kurspakker' => "kurspakker.html",
'kontakt' => "email.php",
'referanser' => "referanser.html",
'bilder' => "bilder.html",
'bedrift' => "bedrift.html",
'privat' => "privat.html",
);

// separat for fremtidig utvidelse for flere språk :]
$titles = array(
'hva' => "Hva",
'hvem' => "Hvem",
'kurspakker' => "Kurspakker",
'kontakt' => "Kontakt oss",
'referanser' => "Referanser",
'bilder' => "Bilder",
'bedrift' => "Bedrift",
'privat' => "Privat",
);

$page = 'hva';
if (isset($pages[$_GET['action']])) {
$page = $_GET['action'];
}

$links = array_combine(array_keys($titles), array_map('htmlLink', $titles, $pages));
$attribs[$page]['class'] = 'selected';


echo '<div id="navigation">', htmlList('ul', $links, array(), $attribs, false), '</div>';

echo '<div id="content">';
include $pages[$page];
echo '</div>';

Logg inn

Valgt side skal ha annen farge på linken

Anbefalte innlegg

elasticeye

Lenke til kommentar

Videoannonse

Haraldson

Lenke til kommentar

elasticeye

Lenke til kommentar

elasticeye

Lenke til kommentar

Martin A.

Lenke til kommentar

Thomas.

Lenke til kommentar

Martin A.

Lenke til kommentar

OIS

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer