navigatie probleempje

Status
Niet open voor verdere reacties.
R

Rietje49

Gebruiker
Lid geworden
1 sep 2009
Berichten
5
hallo,
Gisteren had ik deze vraag ook al gesteld maar kan in de hele site nergens terugvinden waar die staat.
Hoop dus nu op een nwe poging/ resultaat.

Ik heb in mijn site een navigatie boomstructuur gemaakt en er zit ergens een foutje in die ik er niet uit krijg. Is het een IE probleem of ligt er ergens anders aan? Ik weet niet en zou graag wat hulp en/of tips willen krijgen.

Wat heb ik:
- in mijn menu zit o.a. een scriptauculous om een hoofdmenu uit te laten schuiven.
- de submenus komen ernaast te staan/ zichtbaar.

Wat is het probleem:
- van zodra ik één pagina heb aangeklikt, verdwijnen vervolgens allle submapjes om verder te gaan naar een volgende pagina!

Mijn gegevens:
1. de pagina: menu.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Leden navigatie pagina</title>

<script src="../jscript/prototype.js" type="text/javascript"></script>
<script src="../jscript/scriptaculous.js" type="text/javascript"></script>

<link rel='stylesheet' type='text/css' href='basis.css'>
<link rel='stylesheet' type='text/css' href='boom.css'>

<script language="JavaScript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" ie_does_hover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" ie_does_hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

<script language="JavaScript">
sfHover = function() {
var sfEls = document.getElementById("nav1").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" ie_does_hover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" ie_does_hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

</head>

<body >


<div id='container_nav'>

<div class="menu" id="menu_home">
<a href="home.php">Home</a>
</div>

<div class="menu" id="menu_hn">
<a href="HN.php">Menu 1</a>
</div>

<div class="menu" id="menu_IN">
<a href="#" onmousedown="Effect.toggle('menu_IN_sub','slide'); return false;">
Menu 2
</a>
</div>

<div id="menu_IN_sub" style="display:none;margin-top:5px;">
<ul id="nav">
<li><a href="#">sub-menu 2.1</a>
<ul>
<li><a href="bla bla.php" target='_blanco'>sub-sub-menu 2.1.1</a></li>
<li><a href="bla bla.php" target='_blanco'>sub-sub-menu 2.1.2</a></li>
</ul>
</li>

<li><a href="#">sub-menu 2.2</a>
<ul>
<li><a href="bla bla.php">sub-sub-menu 2.2.1</a></li>
<li><a href="bla bla.php">sub-sub-menu 2.2.2</a></li>
<li><a href="bla bla.php">sub-sub-menu 2.2.3</a></li>
</ul>
</li>

<li><a href="#">sub-menu 2.3</a>
<ul>
<li><a href="bla bla.php">sub-sub-menu 2.3.1</a></li>
<li><a href="bla bla.php">sub-sub-menu 2.3.2</a></li>
<li><a href="bla bla.php">sub-sub-menu 2.3.3</a></li>
<li><a href="bla bla.php">sub-sub-menu 2.3.4</a></li>
</ul>
</li>

<li><a href="#">sub-menu 2.4</a>
<ul>
<li><a href="#">sub-sub-menu 2.4.1</a></li>
<ul>
<li><a href="bla bla.php">sub-sub-sub-menu 2.4.1.1</a></li>
<li><a href="bla bla.php">sub-sub-sub-menu 2.4.1.2</a></li>
<li><a href="bla bla.php">sub-sub-sub-menu 2.4.1.3</a></li>
</ul>

<li><a href="#">sub-sub-menu 2.4.2</a></li>
<ul>
<li><a href="bla bla.php">sub-sub-sub-menu 2.4.2.1</a></li>
<li><a href="bla bla.php">sub-sub-sub-menu 2.4.2.2</a></li>
<li><a href="bla bla.php">sub-sub-sub-menu 2.4.2.3</a></li>
<li><a href="bla bla.php">sub-sub-sub-menu 2.4.2.4</a></li>
<li><a href="bla bla.php">sub-sub-sub-menu 2.4.2.5</a></li>
<li><a href="bla bla.php">sub-sub-sub-menu 2.4.2.6</a></li>
<li><a href="bla bla.php">sub-sub-sub-menu 2.4.2.7</a></li>
</ul>
<li><a href="#">sub-sub-menu 2.4.3</a></li>
<ul>
<li><a href="bla bla.php">sub-sub-sub-menu 2.4.3.1</a></li>
<li><a href="bla bla.php">sub-sub-sub-menu 2.4.3.2</a></li>
<li><a href="bla bla.php">sub-sub-sub-menu 2.4.3.3</a></li>
<li><a href="bla bla.php">sub-sub-sub-menu 2.4.3.4</a></li>
<li><a href="bla bla.php">sub-sub-sub-menu 2.4.3.5</a></li>
</ul>
<li><a href="#">sub-sub-menu 2.4.4</a></li>
<ul>
<li><a href="bla bla.php">sub-sub-sub-menu 2.4.4.1</a></li>
</ul>
</ul>
</li>

<li><a href="#">sub-menu 2.5</a>
<ul>
<li><a href="bla bla.php">sub-sub-menu</a></li>
<li><a href="bla bla.php">sub-sub-menu</a></li>
<li><a href="bla bla.php">sub-sub-menu</a></li>
</ul>
</li>

</div>

<div class="menu" id="menu_hids">
<a href="#" onmousedown="Effect.toggle('menu_hids_sub','slide'); return false;">
Menu 3
</a>
</div>

<div id="menu_hids_sub" style="display:none;margin-top:5px;">
<ul id="nav1">
<li><a href="#">sub-menu 3.1</a>
<ul>
<li><a href="bla bla.php">sub-sub-menu 3.1.1</a></li>
<li><a href="bla bla.php">sub-sub-menu 3.1.2</a></li>
<li><a href="bla bla.php">sub-sub-menu 3.1.3</a></li>
<li><a href="bla bla.php">sub-sub-menu 3.1.4</a></li>
<li><a href="bla bla.php">sub-sub-menu 3.1.5</a></li>
</ul>
</li>

<li><a href="inhoud.php">sub-menu 3.2</a></li>
<li><a href="inhoud.php">sub-menu 3.3</a></li>
<li><a href="inhoud.php">sub-menu 3.4</a></li>
<li><a href="inhoud.php">sub-menu 3.5</a></li>
<li><a href="inhoud.php">sub-menu 3.6</a></li>
</ul>
</div>

<div class="menu" id="menu_home">
<a href="inhoud.php">Menu 4</a>
</div>

<div class="menu" id="menu_home">
<a href="inhoud.php">Menu 5</a>
</div>

<div class="menu" id="menu_muziek">
<a href="#" onmousedown="Effect.toggle('menu_muziek_sub','slide'); return false;">
Menu 6
</a>
</div>

<div id="menu_muziek_sub" style="display:none;margin-top:5px;">
<ul id="nav">
<li><a href="inhoud.php">sub-menu 6.1</a></li>
<li><a href="inhoud.php">sub-menu 6.2</a></li>
</ul>
</div>

<div class="menu" id="menu_home">
<a href="inhoud.php">Menu 7</a>
</div>

</div><!-- sluit navigatie -->

<div id='bottom'></div>
</div>
</body>
</html>
Klik om te vergroten...


Mijn 1e css: basis.css

body {
background-image: url(images/bg/bg_groen.jpg) ;
}

/* deze css is voor de basis en navigatie gedeelte in de ledenpagina */

div#container_nav {
width: 280px;
margin-left: 5px;
height: auto;
text-align: left;
}


div#top{
background: url(images/bg/inhoud_top.gif) no-repeat;
position: relative;
margin: -220 180 180;
width: 900px;
height: 40px;
}

div#content {
background-image: url(images/bg/inhoud_repeat.gif) ;
position: relative;
margin: auto 0 0;
width: 900px;
height: auto;


div.inhoud {
font-family: Georgia;
font-size: 18px;
color: #CD7010;
text-align: center;
margin-top: 30 ;
}

div#bottom{
background: url(images/bg/inhoud_bottom.gif) no-repeat;
position: relative;
margin: 0 0 0;
width: 900px;
height: 24px;
clear: both;
}
Klik om te vergroten...

mijn 2e css: boom.css


#nav, #nav ul, #nav ul ul, #nav1, #nav1 ul, #nav1 ul ul{
padding: 0;
margin: 0;
list-style: none;
font-family: Georgia;
font-size: 14px;
}

#nav, #nav1{
width:200px;
}

#nav li, #nav1 li{
width: 200px;
}

#nav ul, #nav1 ul{
position: absolute;
width: 200px;
left: -1000px;
margin: -22px 0 0 200px;
font-size: 14px;
}

* html #nav ul, *html #nav1 ul{
margin: -22px 0 0 200px;
}

#nav li li, #nav1 li li{
width: 200px;
}

#nav ul ul, #nav1 ul ul{
width: 200px;
margin: -22px 0 0 200px;
}

* html #nav ul ul, *html #nav1 ul ul{
margin: -23px 0 0 200px;
}

#nav li li li, #nav1 li li li{
width: 180px;
}

#nav li:hover ul, #nav li.ie_does_hover ul, #nav1 li:hover ul, #nav1 li.ie_does_hover ul{
left: auto;
}

#nav li:hover ul ul, #nav li.ie_does_hover ul ul, #nav1 li:hover ul ul, #nav1 li.ie_does_hover ul ul{
left: -1000px;
}

#nav ul li:hover ul, #nav ul li.ie_does_hover ul, #nav1 ul li:hover ul, #nav1 ul li.ie_does_hover ul{
left: auto;
}

#container_nav a {
display: block;
text-decoration: none;
padding: 2px 4px 3px 4px;
margin: 1px;
}

#nav a:link, #nav a:visited, #nav1 a:link, #nav1 a:visited{
display: block;
background: #9AD7F3;
border: 1px solid #494980;
color: #494980;
}

#nav a:hover, #nav a:active, #nav1 a:hover, #nav1 a:active{
display: block;
background: #BFDBAB;
border: 1px solid #494980;
color: #008800;
}

.menu, .menu div {
background: #9AD7F3;
border: 1px solid #494980;
color: #494980;
margin-bottom: 5px;
}

.menu a:hover{
background: #BFDBAB;
}

.menu a{
color: #494980;
}
Klik om te vergroten...

Hopelijk kan iemand me aub verder helpen en is het duidelijk wat mijn vraag is.
gr Rietje49
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan