Veranderde kleur moet in beeld blijven

Koenie · 14 mrt 2009

Hoi,

Ik heb een navigatie menu gemaakt met een mouse over event.
Op zich werkt dit hartstikke goed, maar....
ik wil nu eigenlijk dat de kleur van de mouse over in beeld blijft op het menu, zodat men goed kan zien in welk deel van de website men zit.

zie bijlage voor de bedoeling.

wie weet hoe ik dit moet aanpassen?

mvg.

Monique

aangepast; hier de code

Code:

var timeout	= 500;
var closetimer	= 0;
var ddmenuitem	= 0;

// open hidden layer
function mopen(id)
{	
	// cancel close timer
	mcancelclosetime();

	// close old layer
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

	// get new layer and show it
	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
	closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}

// close layer when click-out
document.onclick = mclose;

That Guy · 15 mrt 2009

ik denk dat dat een beetje lastig is met de code die je nu hebt (of iig laat zien). Het enige wat dat doet is dingen zichtbaar en onzichtbaar maken... het zou handig zijn als je wat html-code liet zien die erbij hoort.

Overgens, waarom javascript voor je navigatie gebruiken, dit kan ook met css...

:thumb:

crash · 15 mrt 2009

Graag de volgende keer even de code tussen code tags plaatsen, zoals ik dat nu voor je gedaan heb. Zie voor uitleg de volgende link;
http://www.helpmij.nl/forum/showthread.php?t=278887

Koenie · 15 mrt 2009

Hoi Vegras,

Waarom in javascript?
omdat ik wel weet hoe ik dit moet.
Mijn kennis van css is (nog) niet zo goed, dus vandaar.
Kan nog net een basis lay out maken in css en dan houd het voorlopig nog op.

hier de htmlcode;

Code:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Website titel</title>
	<link href="CSS/Stylesheet.css" rel="stylesheet" type="text/css" />
	<script src="JS/functions.js" language="JavaScript"></script>
</head>
<body>
<div align="center">
<div id="wrap">
<div id="header">
	header
</div>
<div id="menu">
	<li>
                	<a href="index.html">Home</a>
                </li>
                <li>
                	<a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Informatie</a>
                	<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
                        <a href="Take A Way.html">Take A Way</a>
                        <a href="Lunch en Dinner.html">Lunch en Dinner</a>
                        <a href="Groepen.html">Groepen</a>
						<a href="Activiteiten.html">Activiteiten</a>
               		</div>
                </li>
                <li>
                	<a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()" >Media</a>
            		<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
                        <a href="Kranten.html">Kranten</a>
                        <a href="video.html">Video's</a>
                	</div>
                </li>
                <li>
                	<a href="Foto's.html">Foto's</a>
				</li>
				
				<li>
                	<a href="Links.html">links</a>
				</li>
                <li>
                	<a href="Vacatures.html">Vacatures</a>
                </li>
                <li>
                	<a href="contact.html">Contact</a>
                </li>		
</div>

<div class="left">
<div class="content_title"></div>
	<img src="IMG/champagne-ontvangst.jpg" width="200" height="280"><p>
	<img src="IMG/terras voor.jpg" width="200" height="280"></p>
	</div>
<div class="middle">
<div class="middle_text" align="left">

	<h5>Welkom</h5>
		
	</div>
</div>
<div class="right">
	<img src="IMG/champagne-ontvangst.jpg" width="200" height="280"><p>
	<img src="IMG/terras voor.jpg" width="200" height="280"></p>
</div>
</div>

<div id="copyright" align="center">   </div>
</div>
</body>
</html>

That Guy · 15 mrt 2009

ah, kijk, dat maakt het wat duidelijker.

Het zit toch in je stijlblad. Wat je moet doen is op de home pagina, de 'home' link een extra class geven, bijvoorbeeld 'isCurrent' ofzo. Dan kan je in je stijlblad de isCurrent class maken, en zo blijft de hover op elke pagina goed.

Als je je stijlblad (Stylesheet.css) plaatst, kunnen we verder helpen.

:thumb:

Koenie · 15 mrt 2009

Hoi,

hier de stylesheet.
Onderin staat wel de layout van het dropdown menu.

Monique

Code:

/*stylesheet */

BODY{
margin: 0;
Padding: 0;
background-color: #454545;
color: #ae0004;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;

}

#wrap {
width: 900px;
height: 0 auto;
margin: 0px;

}

#header {
width: 900px;
height: 190px;
background-image:url(../IMG/logo.jpg);
background-repeat:no-repeat;

}

#menu{
width: 900px;
height: 25px;
margin-top:0px;
background-color:#7d6642;

}

.left {
margin-top: 0px;
float:left;
width:200px;
height: 600px;
background-color:#e7e0ce;

}

.middle {
margin-top: 0px;
float: left;
width: 500px;
height: 600px;
background-color:#e7e0ce;

}
.middle_title{
color: #518dff;
font-size: 16px;
padding-left: 15px;
}
.middle_text {
margin-left: 15px;
margin-top: 5px;
margin-right: 5px;
font-family: Verdana,Arial,Helvetica, Times New Roman;
font-size: 12px;
float: left;

}

.content_title {
color: #820000;
font-size: 16px;
padding-left: 10px;
}
.right {
margin-top: 0px;
float: right;
width: 200px;
height: 600px;
background-color:#e7e0ce;

}


#copyright {
color: #fff;
width: 900px;
height: 20px;
margin-top: 20px;
background-color: #454545;
font-size: 9px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* menu dropdown*/

#menu li {	
margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 13px Verdana,Arial;

}

#menu li a {	
display: block;
margin: 0;
padding: 4px 7px;
width: 110px;
background: #7d6642;
color: #FFFFFF;
text-align: center;
text-decoration: none;
height: 17px;
}

#menu li a:hover {	
background: #b78e62;
}

#menu div {	
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #72592c;
}

#menu div a {	
position: relative;
display: block;
margin: 0;
padding: 2px 5px;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #dbdbdb;
color: #7d6642;
font: bold 11px arial;
width: 110px;
}

#menu div a:hover {	
background: #b78e62;
color: #fff;
}

That Guy · 15 mrt 2009

kijk, het gaat om dit stukje.

PHP:

#menu li a {	
display: block;
margin: 0;
padding: 4px 7px;
width: 110px;
background: #7d6642;
color: #FFFFFF;
text-align: center;
text-decoration: none;
height: 17px;
}

#menu li a:hover {	
background: #b78e62;
}

Ofwel: alle a's (links) die in een li (list) staan, welke in de menu-div staan, hebben normaal de achtergrondkleur #7d6642 ( 'background: #7d6642;' ). Als je er echter overheen gaat (a:hover), wordt de achtergrond kleur #b78e62 (background: #7d6642

. Dus, zoiets zou moeten werken:

1. voeg toe in je css onderaan:

PHP:

#menu li a.activePage
{
   background: #b78e62 !important;
}

2. op elke pagina zoek je even naar de link van die pagina (bv: in home.html, is de link die je zoekt

HTML:

<a href="index.html">Home</a>

). Maak daarvan:

HTML:

<a class='activePage' href="index.html">Home</a>

. Zo ook voor alle andere pagina's: op de foto-pagina zoek je naar de foto-link in het menu en voeg je toe: " class='activePage' ".

Als het goed is zal de link dan gekleurd zijn, zodat je weet op welke pagina je zit.

Overgens, voordat je aan de gang gaat, maak even een backup voor het geval ik maar wat onzin uitkraam en het niet werkt. Scheelt je veel moeite als het niet werkt

hoop dat je het een beetje volgt,

:thumb:

Koenie · 15 mrt 2009

Hoi Vegras,

het is hem bijna, alleen weet ik niet hoe ik dit moet doen bij Informatie en Media.
Achter deze "knoppen" bevindt zich een dropdownmenu en geen link naar een eigen pagina.
Ik heb geen idee waar ik nu de class activePage toe moet passen omdat dit geen "echte" pagina's zijn.
Voor de rest werkt ie perfect.

gr.
Monique

That Guy · 15 mrt 2009

heb je de pagina toevallig online staan? (link)

Voordat je verder leest, een vraag: wil je dat als je naar bv. Kranten.html gaat, dat het 'Media' knopje activePage wordt, of dat in de dropdown van 'Media' de 'Kranten' link activePage wordt?

Anywho, ik ga er even van uit dat je de Kranten-link activePage wilt maken. De dropdow-links, worden met de css zo gedaan:

PHP:

#menu div a {	
position: relative;
display: block;
margin: 0;
padding: 2px 5px;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #dbdbdb;
color: #7d6642;
font: bold 11px arial;
width: 110px;
}

#menu div a:hover {	
background: #b78e62;
color: #fff;
}

In ieder geval, neem bijvoorbeeld media-link en zijn dropdown:

HTML:

                <li>
                	<a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()" >Media</a>
            		<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
                        <a href="Kranten.html">Kranten</a>
                        <a href="video.html">Video's</a>
                	</div>
                </li>

De links die erbij horen zijn dus Kranten.html en video.html.

1. maak weer een backup...
2. zet nu bij de dropdown links het volgende neer: (neem als voorbeeld Kranten):

HTML:

                <li>
                	<a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()" >Media</a>
            		<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
                        <a href="Kranten.html" class='activePage'>Kranten</a>
                        <a href="video.html">Video's</a>
                	</div>
                </li>

(zie html bij de <a href="Kranten" ... >)

Als je echter wilt dat de hoofdlink (die dus geen echte link is) (dus bv. 'Media') gekleurd wordt, moet je in kranten.html het menu zo veranderen:

HTML:

                <li>
                	<a href="#" class='activePage' onmouseover="mopen('m2')" onmouseout="mclosetime()" >Media</a>
            		<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
                        <a href="Kranten.html">Kranten</a>
                        <a href="video.html">Video's</a>
                	</div>
                </li>

(zie <a href='#' ...)

:thumb:

Koenie · 16 mrt 2009

Hoi Vegras,

De pagina staat (nog)niet online.
Ben nog volop aan het experimenteren.

In ieder geval is het gelukt.
Daarvoor mijn hartelijke dank.

In grote lijnen is de pagina nu af.
Nu alleen nog "even" gaan stoeien om Simpleviewer(voor op de Fotopagina) in mijn layout te intergreren en dan is ie klaar.

Nogmaals mijn hartelijke dank voor het meehelpen.

Monique

That Guy · 16 mrt 2009

geen probleem, en succes met je website. Overgens, als-ie online staat, kan je m bij websites maken > site check laten checken.

:thumb:

Veranderde kleur moet in beeld blijven

Koenie

Gebruiker

Bijlagen

That Guy

Meubilair

crash

Verenigingslid

Koenie

Gebruiker

That Guy

Meubilair

Koenie

Gebruiker

That Guy

Meubilair

Koenie

Gebruiker

That Guy

Meubilair

Koenie

Gebruiker

That Guy

Meubilair

Nieuwste berichten

Wij waarderen jouw privacy