css menu
kan dit met css of moet ik hier bijv javascript/flash o.i.d. voor gebruiken
zo ja,, welke syntax gebruik ik hiervoor?
en heb je misschien een voorbeeldje?
color:#fff;
text-decoration:underline;
}
gebruiken.
dit werk alleen als je een php website heb , als je een gewone html pagina heb dan moet je op de pagina home de kleur en underline van home zetten en bij bijvoorbeeld pagina contact , contact in de kleur en underline zetten.
Mvg,
Kavix
alle bovenstaande werkt niet en ik wil het graag werkend hebben, heeft er iemand een idee hoe ik dit het beste op zou kunnen lossen?
de bedoeling is dat er een class aan de li van de desbetreffende link toegevoegd wordt zodat deze als het ware op de hover stand ( active ) blijft
voorbeeld hier voorbeeld
Gewijzigd op 13/03/2012 19:57:46 door Reshad F
Die extra klasse kun je dan stijlen .
http://jsfiddle.net/x25fn/
maar mijn menu ziet er zo uit dus hij pakt het niet goed denk ik,
<div id="navigation">
<nav>
<ul>
<li><a href="index.php?page=1">Home</a></li>
<li><a href="index.php?page=2">About</a></li>
<li><a href="index.php?page=3">Works</a></li>
<li><a href="index.php?page=4">F.a.q</a></li>
<li><a href="index.php?page=5">Contact</a></li>
</ul>
</nav>
</div>
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
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
<?php
switch($_GET['page']){
case '1':
include_once('home.php');
break;
case '2':
include_once('about.php');
break;
case '3':
include_once('works.php');
break;
case '4':
include_once('faq.php');
break;
case '5':
include_once('contact.php');
break;
default:
include_once('home.php');
break;
}
?>
switch($_GET['page']){
case '1':
include_once('home.php');
break;
case '2':
include_once('about.php');
break;
case '3':
include_once('works.php');
break;
case '4':
include_once('faq.php');
break;
case '5':
include_once('contact.php');
break;
default:
include_once('home.php');
break;
}
?>
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php
$array = array(1 => 'home', 2 => 'about', 3 => 'works', 4 => 'faq', 5=> 'contact');
$menu = '';
foreach($array as $k=>$v)
{
if(isset($_GET['page']) and $_GET['page'] == $k)
{
$class = ' active';
}
else
{
$class = '';
}
$menu .= '<li class="'.$class.'"><a href="index.php?page='.$k.'">'.$v.'</a></li>';
}
echo '
<ul>
'.$menu.'
</ul>
';
?>
$array = array(1 => 'home', 2 => 'about', 3 => 'works', 4 => 'faq', 5=> 'contact');
$menu = '';
foreach($array as $k=>$v)
{
if(isset($_GET['page']) and $_GET['page'] == $k)
{
$class = ' active';
}
else
{
$class = '';
}
$menu .= '<li class="'.$class.'"><a href="index.php?page='.$k.'">'.$v.'</a></li>';
}
echo '
<ul>
'.$menu.'
</ul>
';
?>
Gewijzigd op 13/03/2012 20:33:47 door Pieter Jansen
nav a:active{
color: #fff;
border-top: solid 2px #EB0964;
opacity: 100.5;
-moz-opacity: 100.5;
filter:alpha(opacity=105100.5);
}
want hij moet ook dingen uit nav a halen hoe zorg ik ervoor dat hij daarnaar kijkt?
edit: hetgeen wat ik nu krijg is alleen de border top ( door het woord heen )
zo ziet de .active class eruit
.active {
color: #fff;
border-top: solid 2px #EB0964;
opacity: 100.5;
-moz-opacity: 100.5;
filter:alpha(opacity=105100.5);
}
Toevoeging op 13/03/2012 21:07:39:
ik ben erachter gekomen dat alleen de border-top werkt als ik hem in de <nav> </nav> tag heb
als ik hem erbuiten zet dan heb ik welliswaar geen andere opmaak maar doet de active het wel omdat het de enige class is.. dus op een of ander manier moet ik zorgen dat hij alleen de class active heeft en niet de opmaak van nav
Gewijzigd op 13/03/2012 20:53:29 door Reshad F