dropdown menu met afbeelding

Status
Niet open voor verdere reacties.
N

Naomi016

Nieuwe gebruiker
Lid geworden
16 aug 2012
Berichten
1
Beste lezers,

Momenteel ben ik bezig een website te bouwen.

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 naar externe urls.

Zie mijn onderstaande html, css en js code!

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-color: #353535;
background-image: url(images/menubox0-test.jpg);
background-repeat: no-repeat;
}
.preload2 {
background-color: #353535;
background-image: url(images/navbox_over.png);
background-repeat: 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-color: #353535;
background-image: url(images/menubox0-test.jpg);
background-repeat: 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;
}

#nav li a.top_link span.down {
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;
}

#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;
}

#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;
}

/* 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;
}

#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:30px; margin:0; padding:15px; list-style:none; color: #F00;}

#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-color: #353535;
background-image: url(images/arrow_down.png);
background-repeat: no-repeat;
}
----------------------------------------------------------------
js code:

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);
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan