[CSS] Tab menu: hoe de actieve tab juist weergeven? - Softwareontwikkeling

maandag 26 mei 2008 14:24

Acties:

Verwijderd

Topicstarter

Ik heb een menuutje geknutseld met wat hulp van code die ik op het net heb gevonden. Op de site waarmee ik nu bezig ben kan je het menu bekijken.

De HTML code:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" "type="text/css">
<title>Laurens & Jolanda gaan trouwen!</title>
</head>
<body>
<div id="main">
<div id="head">
</div>
<span class="preload17a"></span>
<span class="preload17b"></span>
<ul class="menu17">
<li class="current"><a href="Welkom.html" target="iframe"><b>Welkom</b></a></li>
<li><a href="aanzoek.html" target="iframe"><b>Het Aanzoek</b></a></li>
<li><a href="uc.html" target="iframe"><b>De Datum</b></a></li>
<li><a href="uc.html" target="iframe"><b>Planning</b></a></li>
<li><a href="gb/index.php" target="iframe"><b>Gastenboek</b></a></li>
</ul>
<div id="iframe">
<iframe name="iframe" src="Welkom.html" frameborder="0" width="98%" height="98%"></iframe>
</div>
</div>
</body>
</html>

CSS:

code:

@charset "utf-8";
/* CSS Document */

body    {
background: #595952;
margin: auto;
font-family: Helvetica, Arial, Helvetica, sans-serif;
}

#main   {
width: 760px;
height: 100%;
background: #d9d7c7;
margin-left: -380px;
margin-top: 0px;
position: absolute;
left: 50%;
z-index: 1;
}

#head   {
background: #FFFFFF url(Images/header.jpg);
width: 100%;
height: 250px;
}

.preload17a {
background: url(Images/pro_seventeen_1a.gif);
}

.preload17b {
background: url(Images/pro_seventeen_1b.gif);
}

.menu17 {
padding:5px 0 0 1em;
margin:0;
list-style:none;
height:35px;
position:relative;
background:transparent url(Images/pro_seventeen_0c.gif) repeat-x left bottom;
font-size:11px;
}

.menu17 li {
float:left;
height:35px;
margin-right:1px;
}

.menu17 li a {
display:block;
float:left;
height:35px;
line-height:33px;
color:#333;
text-decoration:none;
font-family:arial, verdana, sans-serif;
font-weight:bold;
text-align:center;
padding:0 0 0 4px;
cursor:pointer;
background:url(Images/pro_seventeen_0a.gif) no-repeat;
}

.menu17 li a b {
float:left;
display:block;
padding:0 16px 5px 12px;
background:url(Images/pro_seventeen_0b.gif) no-repeat right top;
}

.menu17 li.current a {
color:#000;
background:url(Images/pro_seventeen_2a.gif) no-repeat;
}

.menu17 li.current a b {
background:url(Images/pro_seventeen_2b.gif) no-repeat right top;
}

.menu17 li a:hover {
color:#000;
background: url(Images/pro_seventeen_1a.gif) no-repeat;
}

.menu17 li a:hover b {
background:url(Images/pro_seventeen_1b.gif) no-repeat right top;
}

.menu17 li.current a:hover {
color:#000;
background: url(Images/pro_seventeen_2a.gif) no-repeat;
cursor:default;
}

.menu17 li.current a:hover b {
background:url(Images/pro_seventeen_2b.gif) no-repeat right top;
}


#iframe {
width: 720px;
height: 100%;
background: #f3f3ef;
position: absolute;
margin-top: 0;
padding: 20px;
}

Nu snap ik niet helemaal hoe ik de tabs kan aanpassen, zodat de tab die bij de actieve pagina hoort gekleurd blijft. Op dit moment is dat alleen de tab (li) die de class "current" heeft meegekregen.

Is dat hier niet mogelijk omdat ik mijn pagina's in een iframe open? Of moet ik nog ergens een stukje code toevoegen zodat dit mogelijk wordt?

[ Voor 2% gewijzigd door Verwijderd op 26-05-2008 14:27 . Reden: CSS leesbaarder gemaakt ]

maandag 26 mei 2008 14:29

Acties:

Dnomaid

Met javascript zou je naar het <ul> - element kunnen navigeren, de childs ophalen en hun css-classes resetten. Daarna op de parent van je linkje styleclass current zetten.

Edit: Je hebt dit voor omdat je je inhoud niet op 6 pagina's wil dupliceren. In pakweg php zou je het menu ook includen en moest je iets gelijkaardigs maken.

[ Voor 32% gewijzigd door Dnomaid op 26-05-2008 14:31 ]

maandag 26 mei 2008 14:31

Acties:

mithras

Waarom gebruik je een iframe. Het heeft in dit geval alleen maar nadelen. Als je geen iframe gebruikt heb je hier geen problemen mee.

/edit ik zie dat je host wel php ondersteunt (ik neem aan dat de site op dezelfde server als landiej.nl draait). Dan kan je de content met php includen in je hoofd document. Met een beetje logica kan je dan een klasse aan je tabs hangen

[ Voor 47% gewijzigd door mithras op 26-05-2008 14:33 ]

maandag 26 mei 2008 14:32

Acties:

Dnomaid

mithras schreef op maandag 26 mei 2008 @ 14:31:
Waarom gebruik je een iframe. Het heeft in dit geval alleen maar nadelen. Als je geen iframe gebruikt heb je hier geen problemen mee.

Da's dus in het geval dat je het menu op elke pagina dupliceert. Iets wat onze TS'er wou vermijden door een iframe te gebruiken, gok ik.

maandag 26 mei 2008 14:37

Acties:

Verwijderd

Topicstarter

BobbyD82 schreef op maandag 26 mei 2008 @ 14:32:
[...]

Da's dus in het geval dat je het menu op elke pagina dupliceert. Iets wat onze TS'er wou vermijden door een iframe te gebruiken, gok ik.

Dat was inderdaad het idee. Ik ben niet zo'n ster in php, en kan dus nog geen pagina's openen in divs, hoewel dat volgens mij vrij simpel zou moeten zijn.

Óf ik heb het geduld niet om het goed door te nemen, óf ik ben achterlijk; het lukt me in elk geval niet.

Maar met php is dit dus wel makkelijk op te lossen? Door voor elke pagina een eigen menu te laden waarin de actieve class aan een andere tab (li) gekoppeld is?

maandag 26 mei 2008 14:38

Acties:

steffex

Ik zou toch van de iframe afstappen, de images worden toch gecached!
Als je toch een iframe wilt gebruiken moet je met een javascript (onclick) de current class toekennen aan het aangeklikte LI item

JavaScript:

1	document.getElementById(clickeda).parent.className='current';

Kleine opmerking over het laden in divs. Dit is toch niet nodig. Aangezien je toch met je iframe aparte contentpagina's maakt! Kun je ook gewoon de hele layout in die pagina's zetten

[ Voor 42% gewijzigd door steffex op 26-05-2008 14:42 ]

maandag 26 mei 2008 15:09

Acties:

Dnomaid

stef-o schreef op maandag 26 mei 2008 @ 14:38:
Ik zou toch van de iframe afstappen, de images worden toch gecached!
Als je toch een iframe wilt gebruiken moet je met een javascript (onclick) de current class toekennen aan het aangeklikte LI item
JavaScript:
1
document.getElementById(clickeda).parent.className='current';
Kleine opmerking over het laden in divs. Dit is toch niet nodig. Aangezien je toch met je iframe aparte contentpagina's maakt! Kun je ook gewoon de hele layout in die pagina's zetten

Zie mijn eerste post, daar zeg ik hetzelfde, maar je vergeet dat je de css-class van alle andere li's moet resetten, anders blijven de vorige 'currents' ook gehighlight.

maandag 26 mei 2008 15:11

Acties:

mithras

No way dat je dit met javascript moet oplossen. Het php gedeelte is zeer minimaal (maar wel belangrijk anders krijg je XSS gevallen). Dan kan je met een klein beetje moeite het zo in elkaar draaien!

Je gaat toch niet meer rommel in de website brengen in plaats van minder