css menu
hallo hoe zorg ik ervoor dat als ik bijv op de home pagina sta op mijn website dat mijn css navigation dan bijv color: #fff en text-decoration: underline toewijst aan alleen HOME
kan dit met css of moet ik hier bijv javascript/flash o.i.d. voor gebruiken
zo ja,, welke syntax gebruik ik hiervoor?
kan dit met css of moet ik hier bijv javascript/flash o.i.d. voor gebruiken
zo ja,, welke syntax gebruik ik hiervoor?
Dan moet je met PHP aan die link een class current meegeven en die dan stijlen. Deze optie heeft CSS niet, hoort ook helemaal niet in die taal thuis.
maar ik heb dus meerdere links in mijn navigation bar... moet ik dit voor elke doen?
en heb je misschien een voorbeeldje?
en heb je misschien een voorbeeldje?
je moet a:active {
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
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
"bump"
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
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
Je moet tijdens het genereren van je menu kijken of je op de huidige pagina zit. Je loopt door al je menu items heen ( code wise ) en als het huidige menu item gelijk is aan de pagina waar je nu op zit, geef je een extra CSS klasse mee, bijv. current of active.
Die extra klasse kun je dan stijlen .
Die extra klasse kun je dan stijlen .
dat snap ik maar ik het werkt niet ik gebruik hier deze code voor
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>
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;
}
?>
Je moet het ook niet met javascript doen, je moet het met PHP doen. Dat scheelt een hoop uitzoekwerk.
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
hij werkt bijna! alleen is de css die ik nu gebruik die ziet er zo uit..
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
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




