Nems
Mitglied
Registriert: 08.07.2005
Beiträge: 2
|
|
Hallo,
kann mir jemand bitte bei diesem kleinen Script helfen.
Es ein Untermenu bzw. Liste:
<lu>
<li>..........</li>
<li>..........</li>
<li>..........</li>
<li>..........</li>
</lu>
sichtbar und das ist gut so.
Aber wenn ich den zweiten Link anklicke, muss die augeklapte <ul></ul> unsitbar werden, was eigentlich nicht passiert, sonst das selbt geöffnete Menü wird geschloßen.
Wie kann ich es erreichen, daß das andere geöffnete Menü geschloßen wir und nicht das von dem ich die aktion führe.
Danke und Gruß
Nems
Der Code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenannt</title>
<script type="text/javascript">
function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;
do {
if(LI.firstChild) { // A (SPAN)
if(LI.firstChild.nextSibling) { // #text
if(LI.firstChild.nextSibling.nextSibling) { // UL ?
LI.onclick = switchItem; //LI.onmouseout = ausblenden;
}
}
}
LI = LI.nextSibling;
}
while(LI);
}
function switchItem() {
if (this.firstChild.nextSibling.nextSibling.style.display == "block") {
this.firstChild.nextSibling.nextSibling.style.display = "none";
} else {
this.firstChild.nextSibling.nextSibling.style.display = "block";
this.firstChild.nextSibling.nextSibling.style.backgroundColor = "#C6EFFF";
}
}
window.onload=hoverIE;
</script>
<style>
ul#Navigation {
width: 160px;
margin: 40px 0 0 5px;
padding: 0em;
background-color: #C6EFFF;
float: left;
}
* html ul#Navigation { /* Korrekturen fuer IE 5.x */
width: 8em;
w\idth: 10em;
padding-left: 0;
padd\ing-left: 0em;
float: left;
}
ul#Navigation li {/* This one here*/
list-style: none;
margin: 0em;
padding: 0;
}
ul#Navigation li ul {
margin: 0 0 0 0em;
padding: 0 0 0 0em;
}
ul#Navigation li ul li {
margin: 0.1em 0;
width: 6em;
}
* html ul#Navigation li ul li { /* Korrektur fuer IE 5.x */
margin-left: 1em;
ma\rgin-left: 0;
}
* html ul#Navigation a {
width: 100%; /* Breitenangabe fuer IE 5.x */
w\idth: 6em; /* Breitenangabe fuer IE 6 */
text-decoration: none;
color: #0050AA;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
}
* html ul#Navigation li ul li a {
width: 100%; /* Breitenangabe fuer IE 5.x */
w\idth: 6em; /* Breitenangabe fuer IE 6 */
background-color: #C6EFFF;
margin: 0 0 0 28px;
}
ul#Navigation normal a {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
display:block;
padding: 0em;
text-decoration: none;
color: #0050AA;
background-color: #C6EFFF;
}
ul#Navigation highlight a:hover {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #0055AA;
background-color: #C6EFFF;
}
ul#Navigation a:active {
color: blue;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
background-color: #C6EFFF;
text-decoration: none;
}
</style>
</head>
<body>
<ul id="Navigation">
<li><a href="#" target="_blank">Seite 1</a></li>
<li><a href="#">Seite 2</a>
<ul style="display:none;background-color: #C6EFFF;">
<li><a href="#Beispiel">> Seite 2a</a></li>
<li><a href="#Beispiel"> Seite 2b</a></li>
<li><a href="#Beispiel"> Seite 2c</a></li>
</ul>
</li>
<li><a href="#Beispiel">Die zweite Navi</a>
<ul style="display:none;">
<li><a href="#Beispiel">Seite 2a</a></li>
<li><a href="#Beispiel">Seite 2b</a></li>
<li><a href="#Beispiel">Seite 2c</a></li>
</ul>
</li>
<li><a href="#Beispiel">Seite 3</a></li>
<li><a href="#Beispiel">Die vierte Navi</a>
<ul style="display:none;">
<li><a href="#Beispiel">Seite 2a</a></li>
<li><a href="#Beispiel">Seite 2b</a></li>
<li><a href="#Beispiel">Seite 2c</a></li>
</ul>
</li>
<li><a href="#Beispiel">Seite 4</a></li>
</ul>
</body>
</html>
|
|
| 08.07.2005 18:23:55 |
|
|
|
hallo
kurze bemerkung vorweg:
ich hab mir auch den code von selfhtml als vorlage genommen und es klappt bei mir.
zu deinem code:
du benutzt onclick und nicht onmouseover
das problem in nicht ie browser ist, dass a:active nicht onclick entspricht, sondern onmousedown. dh laesst du die maustaste wieder loss ist alles beim alten.
mit js funktioniert in ie browser da du onklick benutzt.
zum ausblenden: ich hab das onmouseout wieder einkommentiert :) und es erfuellte prommt seine aufgabe. wird halt nichts angezeigt.
so einen aehnlichen effekt hatte ich auch. im ie flimmerte mein menu, da es laufend ein und ausgeblendet wurde. ich hab das so geloest:
1. jedem ul eine id geben.
2. beim onmouseout nen settimeout starten
wenn du im untermenu bist wird der timeout wieder geloescht und nichts ausgeblendet.
function hoverie() {
obj = this.firstChild.nextSibling.nextSibling;
if(obj.display_to != null) {
clearTimeout(obj.display_to);
obj.display_to = null;
}
if(obj.style.display != 'block')
obj.style.display = 'block';
}
function normie() {
obj = this.firstChild.nextSibling.nextSibling;
obj.display_to = setTimeout('displaynone(\''+obj.id+'\')', 100);
}
function displaynone(id) {
obj = document.getElementById(id);
obj.style.display = 'none';
obj.display_to = null;
}
soweit zum ja code und ie
was die andere browser angeht ...
ich kenne keine pseudoklasse die dem onclick entspricht
halt nur onmousedown = :active
notfalls musste halt fuer alle browser die js version nehmen
hoffe du kommst irgendwie weiter
arkas
|
|
| 17.07.2005 20:36:44 |
|
Wechsel zu
Die letzten Beiträge aus diesen Forum
|
|
