www.css-voorbeelden.nl

Voor vragen over html en css, met name over de voorbeelden op deze site
https://www.css-voorbeelden.nl/forum/

Dropdown menu met een afbeelding bij hover

https://www.css-voorbeelden.nl/forum/viewtopic.php?t=70

Pagina 1 van 1

Dropdown menu met een afbeelding bij hover

Geplaatst: do 16 aug 2012, 20:24
door Naomi016
Beste lezers,

Momenteel ben ik bezig een website te bouwen, waarbij ik op een probleem stuit.

De werking van het dropdown menu zou moeten zijn:
1) wanneer de cursor op de navigatie menu staat (1ste niveau), verschijnt een rode boxafbeelding en richtingspijl naar beneden. Deze is wel gelukt!
2) op de 2e niveau van de menulijst komen teksten met richtingspijlen naar rechts tevoorschijn. Tot zoverre is dit wel gelukt. Bij de localhost (wamp) zijn de richtingspijlen wel te zien, maar wanneer ik deze online plaats zijn de richtingspijlen niet te zien.
3) op de 3e niveau verschijnt ook een menulijst, waarbij de bezoekers gelinkt worden naar externe sites.
Op deze 3e niveau zou ook richtingspijlen moeten komen wanneer men naar de desbetreffende link wil gaan.
Maar op de 3e niveau menulijst kan ik niet met de cursor naar toe omdat de menulijst meteen wegvalt/verdwijnt.
Er kan dus niet geklikt worden op de 3e niveau menulijst.

Zie mijn onderstaande html, css en js code!

Ik kom echt niet meer uit omdat ik al dagen hiermee bezig ben.
Ik weet niet wat ik fout heb gedaan. Kunnen jullie mij hiermee helpen?

B.v.d.
Naomi

-------------------------------------------------------------------------------------------------------
HTML-code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Dropdown_menu</title>
<meta name="Author" content="#" />

<link rel="stylesheet" type="text/css" href="pro_dropdown_2.css" />
<script src="stuHover.js" type="text/javascript"></script>

</head>
<body>
<span class="preload1"></span>
<span class="preload2"></span>

<ul id="nav" name="nav">
<li class="top"><a href="#nogo2" id="Gezond/Mooi" class="top_link"><span class="down">Gezond/Mooi</span></a>
<ul class="sub">
<li><a href="#nogo3" class="fly">Baby</a>
<ul>
<li><a href="#nogo4">Nikon</a></li>
<li><a href="#nogo5">Minolta</a></li>
<li><a href="#nogo6">Pentax</a></li>
</ul>
</li>
<li><a href="#nogo3" class="fly">Mannen</a>
<ul>
<li><a href="#nogo4">Nikon</a></li>
<li><a href="#nogo5">Minolta</a></li>
<li><a href="#nogo6">Pentax</a></li>
</ul>
</li>
<li><a href="#nogo3" class="fly">Vrouwen</a>
<ul>
<li><a href="#nogo4">Nikon</a></li>
<li><a href="#nogo5">Minolta</a></li>
<li><a href="#nogo6">Pentax</a></li>
</ul>
</li>
<li><a href="#nogo3" class="fly">Sportkleding</a>
<ul>
<li><a href="#nogo4">Nikon</a></li>
<li><a href="#nogo5">Minolta</a></li>
<li><a href="#nogo6">Pentax</a></li>
</ul>
</li>
<li><a href="#nogo3" class="fly">Vrijetijdskleding</a>
<ul>
<li><a href="#nogo4">Nikon</a></li>
<li><a href="#nogo5">Minolta</a></li>
<li><a href="#nogo6">Pentax</a></li>
</ul>
</li>
<li><a href="#nogo3" class="fly">Brillen</a>
<ul>
<li><a href="#nogo4">Nikon</a></li>
<li><a href="#nogo5">Minolta</a></li>
<li><a href="#nogo6">Pentax</a></li>
</ul>
</li>
<li><a href="#nogo3" class="fly">Juwelen</a>
<ul>
<li><a href="#nogo4">Nikon</a></li>
<li><a href="#nogo5">Minolta</a></li>
<li><a href="#nogo6">Pentax</a></li>
</ul>
</li>
<li><a href="#nogo3" class="fly">Schoenen</a>
<ul>
<li><a href="#nogo4">Nikon</a></li>
<li><a href="#nogo5">Minolta</a></li>
<li><a href="#nogo6">Pentax</a></li>
</ul>
</li>
<li><a href="#nogo3" class="fly">Verzorging</a>
<ul>
<li><a href="#nogo4">Nikon</a></li>
<li><a href="#nogo5">Minolta</a></li>
<li><a href="#nogo6">Pentax</a></li>
</ul>
</li>
</ul>
</li>
<li class="top"><a href="#nogo22" id="technologie" class="top_link"><span class="down">Technologie</span></a>
<ul class="sub">
<li><a href="#nogo23">Printing</a>
<ul>
<li><a href="#nogo4">Nikon</a></li>
<li><a href="#nogo5">Minolta</a></li>
<li><a href="#nogo6">Pentax</a></li>
</ul>
</li>
<li><a href="#nogo24">Photo Framing</a>
<ul>
<li><a href="#nogo4">Nikon</a></li>
<li><a href="#nogo5">Minolta</a></li>
<li><a href="#nogo6">Pentax</a></li>
</ul>
</li>
<li><a href="#nogo25">Retouching</a>
<ul>
<li><a href="#nogo4">Nikon</a></li>
<li><a href="#nogo5">Minolta</a></li>
<li><a href="#nogo6">Pentax</a></li>
</ul>
</li>

<li><a href="#nogo26">Archiving</a>
<ul>
<li><a href="#nogo4">Nikon</a></li>
<li><a href="#nogo5">Minolta</a></li>
<li><a href="#nogo6">Pentax</a></li>
</ul>
</li>

</ul>
</li>
<li class="top"><a href="#nogo27" id="kantoren/wonen" class="top_link"><span class="down">Kantoren/Wonen</span></a>
<ul class="sub">
<li><a href="#nogo23">Printing</a>
<ul>
<li><a href="#nogo4">Nikon</a></li>
<li><a href="#nogo5">Minolta</a></li>
<li><a href="#nogo6">Pentax</a></li>
</ul>
</li>
<li><a href="#nogo24">Photo Framing</a>
<ul>
<li><a href="#nogo4">Nikon</a></li>
<li><a href="#nogo5">Minolta</a></li>
<li><a href="#nogo6">Pentax</a></li>
</ul>
</li>
<li><a href="#nogo25">Retouching</a>
<ul>
<li><a href="#nogo4">Nikon</a></li>
<li><a href="#nogo5">Minolta</a></li>
<li><a href="#nogo6">Pentax</a></li>
</ul>
</li>
<li><a href="#nogo26">Archiving</a>
<ul>
<li><a href="#nogo4">Nikon</a></li>
<li><a href="#nogo5">Minolta</a></li>
<li><a href="#nogo6">Pentax</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#nogo27" id="search_box">Search_box</a></li>
</ul>
</body>
</html>

-------------------------------------------------------------------------------------------------------
css:
.preload1 {
background:#353535 url(images/menubox0-test.jpg) no-repeat;
}
.preload2 {
background:#353535 url(images/navbox_over.png) no-repeat;
}

#nav {
padding:0;
margin:0 auto 0 auto;
list-style:none;
height:60px;
width:900px;
position:relative;
z-index:500;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color: #FFF;
background:#353535 url(images/menubox0-test.jpg) no-repeat;
}
#nav li.top {
display:block;
float:left;
height:60px;
background-color:#353535;
}
#nav li a.top_link {
display:block;
float:left;
height:60px;
line-height: 33px;
color:#FFF;
text-decoration:none;
font-size:16px;
font-weight: bold;
padding:0 0 0 0;
cursor:pointer;
background-image:url(images/menubox0-test.jpg);
}
#nav li a.top_link span {
float:left;
display:block;
height:60px;
width:217px;
background-color: #353535;
background-image: url(images/menubox0-test.jpg);
background-repeat: no-repeat;
padding: 0px 0px 0px 0px;
background-position: 175px 60px;
}

#nav li a.top_link span.down {
float:left;
display:block;
text-align:center;
line-height: 50px;
background-color: #353535;
background-image: url(images/menubox0-test.jpg);
background-repeat: no-repeat;
background-position: 175px 60px;
width: 217px;
padding: 0px;
}
#nav li a.{
float:left;
display:block;
text-align:center;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0;
padding-left: 0px;
line-height: 50px;
background-color: #353535;
background-image: url(images/menubox0-test.jpg);
background-repeat: no-repeat;
background-position: right top;
}

#nav li:hover a.top_link {
color:#FFF;
background-color: #353535;
background-image: url(images/menubox0-test.jpg);
background-repeat: no-repeat;
width: 217px;
background-position: 175px 60px;
}

#nav li:hover a.top_link span {
background-color: #353535;
background-image: url(images/menubox0-test.jpg);
background-repeat: no-repeat;
background-position: right top;
width: 217px;
}

#nav li:hover a.top_link span.down {
background-color: #353535;
background-image: url(images/navbox_over.png);
background-repeat: no-repeat;
background-position: right top;
width: 217px;
}

/* Default list styling */

#nav li:hover {
position:relative;
z-index:200;
}

#nav li:hover ul.sub
{
left:0px;
top:60px;
background: #353535;
padding:3px;
white-space:nowrap;
width:217px;
height:auto;
z-index:300;
/*.shadow-box {*/
-moz-box-shadow: 5px 5px 5px lightgray;
-webkit-box-shadow: 5px 5px 5px lightgray;
box-shadow: 5px 5px 5px lightgray;
}

#nav li:hover ul.sub li
{
display:block;
height:auto;
position:relative;
float:left;
width:217px;
font-weight:normal;

}

#nav li:hover ul.sub li a
{
display:block;
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
height:auto;
width:217px;
line-height:25px;
text-indent:5px;
color:#FFF;
text-decoration:none;
}

#nav li ul.sub li a.fly
{
background-color: #353535;
background-image: url(images/arrow_over.png);
background-repeat: no-repeat;
background-position: right top;
}

#nav li:hover ul.sub li a:hover
{background:#353535; color:#FFF;
}


#nav li:hover ul.sub li a.fly:hover
{
color:#F00;
background-color: #353535;
background-image: url(images/arrow_over.png);
background-repeat: no-repeat;
background-position: right top;
}

#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{
left:220px;
top:-6px;
padding:6px;
white-space:nowrap;
width:217px;
z-index:400;
height:auto;
background: #353535;
color: #FFF;
}

#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{
position:absolute;
left:-9999px;
top:-9999px;
width:217px;
height:auto;
margin:0;
padding:15px;
color: #F00;
cursor:pointer;
display: block;
list-style-image: none;
list-style-type: none;
/*.shadow-box {*/
-moz-box-shadow: 5px 5px 5px lightgray;
-webkit-box-shadow: 5px 5px 5px lightgray;
box-shadow: 5px 5px 5px lightgray;
text-decoration: none;
white-space: nowrap;
}


#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{
color:#F00;
background-color: #3A3A3A;
background-image: url(images/arrow_over.png);
background-repeat: no-repeat;
}

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{
background-image: url(#353535%20url(images/arrow_down.png) no-repeat);
}
-------------------------------------------------------------------------------------------------------
js:
stuHover = function() {
var cssRule;
var newSelector;
for (var i = 0; i < document.styleSheets.length; i++)
for (var x = 0; x < document.styleSheets.rules.length ; x++)
{
cssRule = document.styleSheets.rules[x];
if (cssRule.selectorText.indexOf("LI:hover") != -1)
{
newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
document.styleSheets.addRule(newSelector , cssRule.style.cssText);
}
}
var getElm = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<getElm.length; i++) {
getElm.onmouseover=function() {
this.className+=" iehover";
}
getElm.onmouseout=function() {
this.className=this.className.replace(new RegExp(" iehover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", stuHover);
-------------------------------------------------------------------------------------------------------

Zie ook de afbeeldingen!!

Re: Dropdown menu met een afbeelding bij hover

Geplaatst: vr 17 aug 2012, 02:19
door Goeroeboeroe
Hallo,

Lekker overzichtelijke code, dat zie je wel 'ns anders.
Ik begrijp dat je 'n server hebt. Dan is het veel makkelijker als je hier even 'n link naar je code op die server kunt neerzetten. Dit forum wordt geïndexeerd, dus het is misschien verstandig die link hier via http://goo.gl/ neer te zetten. Of zet wat spaties of zo in de link, zodat hij niet als link wordt herkend door Google. Anders heb je 'n grote kans dat de link in dit forum boven de echte site komt te staan in zoekmachines.

Code kopiëren vanuit het forum is veel meer werk dan op de server 'spelen', vandaar de vraag. En de afbeeldingen missen. Ik heb al wel even gekeken, en er zitten wat fouten in die 'n browser nogal op hol kunnen doen slaan. Afhankelijk van de browser kun je dan verschillende fouten krijgen. Het beste is om eerst even die fouten eruit te halen, dan weet je zeker dat dat de oorzaak niet is. Als die code dan vervolgens foutloos op de server staat, zou het te vinden moeten zijn. Niet alle fouten zijn echt serieus, maar sommige kunnen de meest vreemde verschijnselen veroorzaken.

Dit soort fouten kun je er zelf trouwens ook uithalen met een validator. Voor de html is dat op http://validator.w3.org/
voor de css op http://jigsaw.w3.org/css-validator/

Regel 231 in je css verklaart mogelijk de missende afbeelding
background-image: url(#353535%20url(images/arrow_down.png) no-repeat);
Dat moet zijn:
background: #353535 url(images/arrow_down.png) no-repeat;
Achter background-image mag alleen de afbeelding staan. De kleur moet apart met background-color. Of zoals hier, de zogenaamde shorthand. Achter 'background:' kun je dingen combineren.

In regel 64 van je css staat achter #nav li a een punt. Daardoor kunnen sommige browsers in de war raken. Die punt moet weg.

In je html is het doctype niet correct. Dat kan vreemde problemen opleveren. In je doctype staat in het tweede deel .../TR/xhtml2/DTD...
Die 2 moet een 1 zijn. Sommige browsers raken bij een foutief doctype echt helemaal het spoor bijster.

Niet heel ernstig, maar om zeker te weten dat dit geen problemen veroorzaakt: in het begin van je html, gelijk na <body>, staat twee keer een <span>. Dat mag niet in xhtml strict. Een span is een inline-element en die mogen alleen in een blok-element zoals een <p> of een <div> staan. Het simpelste is om die <span> in een <div> te veranderen. Dan preloadt het nog steeds, maar een <div> mag wel zo apart staan. Een div heeft geen grootte als hij verder leeg is, dus je ziet de afbeeldingen nog steeds niet.

Regel 16 in je html: <ul id="nav" name="nav">
name wordt al jaren niet meer gebruikt, behalve in formulieren en image-maps. Niet heel ernstig, maar hoe minder fouten hoe beter.

Twee fouten die weer wel serieus zijn:
regel 17 id="Gezond/Mooi" en regel 118 id="kantoren/wonen"
een / mag niet in een id-naam. Sommige browsers kunnen hierdoor de naam negeren. Je gebruikt de id's hier niet, maar als je ze zo zou gebruiken kan het misgaan. Het beste is om alleen kleine letters te gebruiken voor id's (en classes) en alleen letters, cijfers en - (en geen cijfer aan het begin). Ik zou ook geen hoofd/kleine letters door elkaar gebruiken. In theorie mag dat, maar in oudere browsers kan het problemen geven.
Ik zou id="gezond-mooi" en id="kantoren-wonen" doen, bijvoorbeeld.

Als het dan verbeterd op de server staat, kan het nog eens worden bekeken.

Re: Dropdown menu met een afbeelding bij hover

Geplaatst: vr 07 sep 2012, 11:34
door Naomi016
Beste Goeroeboeroe,

Nog dank voor jouw reactie!!
Best laat, maar ik heb het probleem zelf kunnen oplossen.
Jouw genoemde adviespunten zal ik meenemen na mijn verdere perfectie van de site.

Fijne dag verder en gr
Naomi

Re: Dropdown menu met een afbeelding bij hover

Geplaatst: vr 07 sep 2012, 13:32
door Goeroeboeroe
Leuk dat je dat nog even laat weten!
Alle tijden zijn UTC+02:00
Pagina 1 van 1

Powered by phpBB® Forum Software © phpBB Limited

Nederlandse vertaling door phpBB.nl.