Highlighting current page
Hieronder staat versimpelt hoe mijn site is opgebouwd en hoe ik al geprobeerd heb de huidige pagina in het menu aan te geven. index-header en index-footer gebruik ik voor elke pagina op mijn site.
index.php:
Code (php)
index-header.php:
Code (php)
1
<a id="one" href="index.php" class="homenav">Home</a>
basis.css:
Code (php)
1
2
2
body.Home a.homenav{
color:#23B070;}
color:#23B070;}
id="one" wordt gebruikt voor het stylen van de link, nu verder niet van belang.
Toevoeging op 27/01/2014 18:49:11:
Voor de duidelijkheid: Dit werkt dus niet omdat ik slechts één pagina heb met mijn menu erop.
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<ul class="navigation">
<li><a href="index.html">Home</a></li>
<li class="highlight"><a href="product.html">Product</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<li><a href="index.html">Home</a></li>
<li class="highlight"><a href="product.html">Product</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
Code (php)
Op de pagina index.php zal dit echoën: index.php
hiermee kun je dus binnen je bestand met if'jes checken welke pagina er is en die de class highlight meegeven.
MvG,
Kenneth
Thanks voor je help, :)
eerste reactie: link home kleurt nu als je hem ingedrukt houd, hij blijft nog niet ingekleurt als je op die home pagina blijft.
Verder verschijnt index.php in beeld op de indexpagina als gevolg van de echo.
@Colin,
bedankt ik ga verder zoeken :)
Als het toch PHP pagina's zijn zou ik het als volgt doen.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
$pages = Array(
'Home' => '/index.html'
,'Product' => '/product.html'
,'About' => '/about.html'
,'Contact' => '/contact.html'
);
echo '<ul class="navigation">'.PHP_EOL;
foreach($pages AS $title=>$page){
echo '<li><a href="' . $page . '"' . ($page == $_SERVER['SCRIPT_NAME'] ? ' class="highlight"' : '') . '>' . $title . '</a></li>'.PHP_EOL;
}
echo '</ul>'.PHP_EOL;
?>
$pages = Array(
'Home' => '/index.html'
,'Product' => '/product.html'
,'About' => '/about.html'
,'Contact' => '/contact.html'
);
echo '<ul class="navigation">'.PHP_EOL;
foreach($pages AS $title=>$page){
echo '<li><a href="' . $page . '"' . ($page == $_SERVER['SCRIPT_NAME'] ? ' class="highlight"' : '') . '>' . $title . '</a></li>'.PHP_EOL;
}
echo '</ul>'.PHP_EOL;
?>
edit: </a> vergeten :)
Gewijzigd op 28/01/2014 09:55:05 door Michael -
Allereerst thanks, je helpt me al wat verder.
Die html pagina's waren een voorbeeld wat voor een systeem niet werkt op mijn site. Alle pagina's op mijn site zijn dus wel php-pagina's.
Maar wat jouw code doet is: het geeft 4 list items :)
Deze reageren vervolgens op deze css:
Code (php)
1
2
3
4
5
2
3
4
5
/* Links: */
a:link {color:#616dbf;text-decoration:none;font-weight:bold;} /* unvisited link */
a:visited {color:#931ea4;text-decoration:none;font-weight:bold;} /* visited link */
a:hover {color:#FF00FF;text-decoration:none;font-weight:bold;} /* mouse over link */
a:active {color:#0000FF;text-decoration:none;font-weight:bold;} /* selected link */
a:link {color:#616dbf;text-decoration:none;font-weight:bold;} /* unvisited link */
a:visited {color:#931ea4;text-decoration:none;font-weight:bold;} /* visited link */
a:hover {color:#FF00FF;text-decoration:none;font-weight:bold;} /* mouse over link */
a:active {color:#0000FF;text-decoration:none;font-weight:bold;} /* selected link */
en van mijn navigation class reageert het menuutje op:
Code (php)
1
2
2
.navigation ul
.navigation li
.navigation li
Het menuutje zou ook moeten reageren op: maar dat gebeurt niet.
Code (php)
1
2
3
2
3
.navigation ul a
.navigation ul a:hover
.navigation ul a:active
.navigation ul a:hover
.navigation ul a:active
Verder is het probleem dat een link alleen gekleurd wordt (met a:active) als je de link ingedrukt houd. Als je op een pagina zit, dan wordt die niet automatisch gekleurd in het menu :(
Toevoeging op 28/01/2014 11:12:44:
Ook op highlight wordt niet gereageerd.
Code (php)
1
2
2
.highlight{
color:#C90C0F;}
color:#C90C0F;}
active betekend inderdaad wanneer je het hebt ingedrukt, dus dat is precies wat ie doet.
.highlight{color:#c90c0f;} kan ook niet op een link
Als je het op de link wilt doe je een a ervoor.
Code (php)
1
a.highlight{color:#c90c0f;}
Of als je hem op de list item wilt
Code (php)
1
.highlight{background-color:#c90c0f;}
Toevoeging op 28/01/2014 11:43:55:
Example
Gewijzigd op 28/01/2014 11:40:35 door Michael -
Ik heb gewoon een normaal menu met list-items btw.
Heb je trouwens een idee waarom de ul a, ul a:hover en ul a:highlight het niet (meer) doen?
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
/* Menu */
.navigation ul{
List-style-type: none;
height: 40px;
margin: 5px;
padding: 0;
}
/* Tabbladen menu */
.navigation li{
float: left;
padding: 0;
margin: 0;
list-style: none;
min-height: 50px;
}
/* link menu */
.navigation ul a {
padding-right: 10px;
padding-left: 10px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
color: #616dbf;
background: none;
/* Tijd kleurverandering terug */
-webkit-transition: background 0.5s;
-moz-transition: background 0.5s;
-o-transition: background 0.5s;
-ms-transition: background 0.5s;
transition: background 0.5s;
}
/* mouse over link menu */
.navigation ul a:hover {
color: #FFF;
background: #1a298e;
/* Tijd kleurverandering heen */
-webkit-transition: background 0.3s;
-moz-transition: background 0.3s;
-o-transition: background 0.3s;
-ms-transition: background 0.3s;
transition: background 0.3s;
}
.navigation ul a:highlight {
color:#C09D0B;
background: #1a298e;
}
.navigation ul{
List-style-type: none;
height: 40px;
margin: 5px;
padding: 0;
}
/* Tabbladen menu */
.navigation li{
float: left;
padding: 0;
margin: 0;
list-style: none;
min-height: 50px;
}
/* link menu */
.navigation ul a {
padding-right: 10px;
padding-left: 10px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
color: #616dbf;
background: none;
/* Tijd kleurverandering terug */
-webkit-transition: background 0.5s;
-moz-transition: background 0.5s;
-o-transition: background 0.5s;
-ms-transition: background 0.5s;
transition: background 0.5s;
}
/* mouse over link menu */
.navigation ul a:hover {
color: #FFF;
background: #1a298e;
/* Tijd kleurverandering heen */
-webkit-transition: background 0.3s;
-moz-transition: background 0.3s;
-o-transition: background 0.3s;
-ms-transition: background 0.3s;
transition: background 0.3s;
}
.navigation ul a:highlight {
color:#C09D0B;
background: #1a298e;
}
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/* Menu */
.navigation ul{
list-style-type: none;
margin: 5px;
padding: 0;
}
/* Tabbladen menu */
.navigation li{
float: left;
padding: 0;
margin: 0;
list-style: none;
}
.navigation > li a {
padding: 0 10px; //Is het zelfde als padding-right: 10px; padding-left: 10px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
color: #616dbf;
height:50px;
display:block;
line-height:50px;
/* Tijd kleurverandering terug */
-webkit-transition: background 0.5s;
-moz-transition: background 0.5s;
-o-transition: background 0.5s;
-ms-transition: background 0.5s;
transition: background 0.5s;
}
/* mouse over link menu */
.navigation > li a:hover {
color: #FFF;
background: #1a298e;
/* Tijd kleurverandering heen */
-webkit-transition: background 0.3s;
-moz-transition: background 0.3s;
-o-transition: background 0.3s;
-ms-transition: background 0.3s;
transition: background 0.3s;
}
.navigation > li a.highlight {
color:#C09D0B;
background: #1a298e;
}
.navigation ul{
list-style-type: none;
margin: 5px;
padding: 0;
}
/* Tabbladen menu */
.navigation li{
float: left;
padding: 0;
margin: 0;
list-style: none;
}
.navigation > li a {
padding: 0 10px; //Is het zelfde als padding-right: 10px; padding-left: 10px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
color: #616dbf;
height:50px;
display:block;
line-height:50px;
/* Tijd kleurverandering terug */
-webkit-transition: background 0.5s;
-moz-transition: background 0.5s;
-o-transition: background 0.5s;
-ms-transition: background 0.5s;
transition: background 0.5s;
}
/* mouse over link menu */
.navigation > li a:hover {
color: #FFF;
background: #1a298e;
/* Tijd kleurverandering heen */
-webkit-transition: background 0.3s;
-moz-transition: background 0.3s;
-o-transition: background 0.3s;
-ms-transition: background 0.3s;
transition: background 0.3s;
}
.navigation > li a.highlight {
color:#C09D0B;
background: #1a298e;
}
Zo zou het moeten werken.
.navigation ul aangepast naar .navigation > li. De link zit immers niet in de ul.
a:highlight verandert naar a.highlight
display:block toegevoegd aan de a voor de height. Ik neem aan dat deze op de knop moet? Op de li heeft dit weinig zin.
Zie ook nogmaals het voorbeeld
Daarnaast zou je CSS nog wat mooier kunnen, maar gaat er nu om dat het werkt :)
edit: height toegevoegd en line-height toegevoegd.
Gewijzigd op 29/01/2014 09:25:42 door Michael -
Fabian W op 30/01/2014 11:36:39:
Jazeker, bedankt. Ik dacht dat ik hier gister al een reactie op had geschreven, maar blijkbaar is dat niet goed gegaan.
Mooi zo! :)