Archivlink: javarea.de Forum > JavaScript > Problem mit Mouseovermenü
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Problem mit Mouseovermenü
Pages: [1]
| geschrieben von obsti am 04.07.2005 - 16:57 |
Hallo, ich habe folgendes Problem!
Ich habe ein horizontales Menü mit Mouseover, wo dann jeweils das Untermenü (auch horizontal) öffnet. wenn ich jedoch auf ein Untermenü gehe, und ich möchte gern in ein neues Hauptmenü, dann sollte das erste Untermenü schließen.
Es bleibt jedoch bestehen. Vielleicht habt ihr eine Lösung:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<title>Diving-College</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function montre(id) {
if (document.getElementById) {
document.getElementById(id).style.display="block";
} else if (document.all) {
document.all[id].style.display="block";
} else if (document.layers) {
document.layers[id].display="block";
} }
function cache(id) {
if (document.getElementById) {
document.getElementById(id).style.display="none";
} else if (document.all) {
document.all[id].style.display="none";
} else if (document.layers) {
document.layers[id].display="none";
} }
//-->
</script>
<style type="text/css">
<!--
body {
margin: 10px;
padding: 0;
font: 14px Verdana, sans-serif;
background-color: #000059;
}
ul, li {
list-style-type: none;
margin: 0;
padding: 0;
}
div.menu {
position: absolute;
width: 920px;
top: 28px;
z-index: 3;
left: 61px;
}
div.menu li {
float: left;
width: 130px;
}
div.menu a {
margin: 0 2px;
height: 20px;
display: block;
text-align: center;
font-weight: bold;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: #ffffcc;
}
div.menu a:hover {
background: #000059;
color: #cccccc;
border: 1px solid gray;
}
#smenu1 {
display: none;
float: left;
position: absolute;
margin-left: -100px;
width: 920px;
font-size: 12px;
}
#smenu2 {
display: none;
float: left;
position: absolute;
margin-left: -200px;
width: 920px;
font-size: 12px;
}
#smenu3 {
display: none;
float: left;
position: absolute;
margin-left: -200px;
width: 920px;
font-size: 12px;
}
#smenu4 {
display: none;
float: left;
position: absolute;
margin-left: -200px;
width: 920px;
font-size: 12px;
}
#smenu5 {
display: none;
float: left;
position: absolute;
margin-left: -500px;
width: 920px;
font-size: 12px;
}
#smenu6 {
display: none;
float: left;
position: absolute;
margin-left: -600px;
width: 920px;
font-size: 12px;
}
#smenu7 {
display: none;
float: left;
position: absolute;
margin-left: -700px;
width: 920px;
font-size: 12px;
}
#smenu1 a, #smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6 {
font-weight: normal;
border-top: 0 none;
}
.site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
.mentions {
position: absolute;
top : 300px;
left : 10px;
color: #000;
background-color: #ddd;
}
a {text-decoration: none;
color: #222;
}
-->
</style></head>
<body>
<div class="menu">
<ul>
<li><a href="main.htm" target="mainFrame" onmouseover="cache('smenu1', 'smenu2', 'smenu3', 'smenu4', 'smenu5', 'smenu6')">Start </a>
</ul></li>
<ul><li><a onmouseover="montre('smenu1'); cache('smenu2','smenu3','smenu4','smenu5','smenu6')"; >Tauchtouren</a> <ul style="display: none;" id="smenu1" >
<li><a href="html/deutschland.htm" target="mainFrame">Deutschland</a></li>
<li><a href="html/oesterreich.htm" target="mainFrame">Österreich</a></li>
<li><a href="html/kroatien.htm" target="mainFrame">Kroatien</a></li>
<li><a href="html/Italien.htm" target="mainFrame">Italien</a></li>
<li><a href="html/Deutschland.htm" target="mainFrame">Ägypten</a></li>
</ul></li>
<li><a onmouseover="montre('smenu2'); cache('smenu1','smenu3','smenu4','smenu5','smenu6')"; >Gallerie</a> <ul style="display: none;" id="smenu2" ; >
<li><a href="html/Deutschland.htm" target="mainFrame">Deutschland</a></li>
<li><a href="html/Deutschland.htm" target="mainFrame">Österreich</a></li>
<li><a href="html/Deutschland.htm" target="mainFrame">Kroatien</a></li>
<li><a href="html/Deutschland.htm" target="mainFrame">Italien</a></li>
<li><a href="html/Deutschland.htm" target="mainFrame">Ägypten</a></li>
<li><a href="html/Deutschland.htm" target="mainFrame">Wracks</a></li>
</ul></li>
<li><a onmouseover="montre('smenu3'); cache('smenu1','smenu2','smenu4','smenu5','smenu6')"; >Diverses</a> <ul style="display: none;" id="smenu3";>
<li><a href="html/Deutschland.htm" target="mainFrame">Checkliste</a></li>
<li><a href="html/Deutschland.htm" target="mainFrame">Handzeichen</a></li>
<li><a href="html/Deutschland.htm" target="mainFrame">Tauchtauglichkeit</a></li>
<li><a href="html/Deutschland.htm" target="mainFrame">Ausrüstungspflege</a></li>
</ul></li>
<li><a onmouseover="montre('smenu4'); cache('smenu1','smenu2','smenu3','smenu5','smenu6')">Kontakt</a><ul id="smenu4" >
<li><a href="html/grundlsee.htm" target="mainFrame">Kontakt</a></li>
<li><a href="html/Deutschland.htm" target="mainFrame">Gästebuch</a></li>
<li><a href="html/Deutschland.htm" target="mainFrame">Impressum</a></li>
</ul></li>
<li><a onmouseover="montre('smenu5'); cache('smenu1','smenu2','smenu3','smenu4','smenu6')" >Links</a><ul id="smenu5" >
<li><a href="html/grundlsee.htm" target="mainFrame">Tauchschulen</a></li>
<li><a href="html/Deutschland.htm" target="mainFrame">Tauchverbände</a></li>
<li><a href="html/Deutschland.htm" target="mainFrame">Hersteller</a></li>
<li><a href="html/Deutschland.htm" target="mainFrame">private Homepages</a></li>
<li><a href="html/Deutschland.htm" target="mainFrame">Partner</a></li>
</ul></li>
<li><a onmouseover="montre('smenu6'); cache('smenu1','smenu2','smenu3','smenu4','smenu5')">über mich</a><ul id="smenu6" >
<li><a href="html/grundlsee.htm" target="mainFrame">Ausbildung</a></li>
<li><a href="html/Deutschland.htm" target="mainFrame">Ausrüstung</a></li>
<li><a href="html/Deutschland.htm" target="mainFrame">Tauchgänge</a></li>
<li><a href="html/Deutschland.htm" target="mainFrame">Tauchpartner</a></li>
<li><a href="html/Deutschland.htm" target="mainFrame">Fotos</a></li>
</ul></li>
</ul>
</div>
</body></html> |
| geschrieben von weisnix am 04.07.2005 - 18:39 |
Hallo,
wenn dann so. Ist aber keine hervorragende Lösung. Bei zu schneller Mausbewegung klappt es nicht immer.
Gruß
|
|