nicht angemeldet
onclick statt hover bei eiem dynamischen Menüs
0 0 
Gernot Back
onclick statt hover bei eiem dynamischen Menüs
hi leute,
ich möchte für eine website ein dropdown-menü mit onclick ansteuern nicht mit :hover. wie kann ich das bei dem folgenden script, welches ich in den weiten von selfhtml gefunden habe, erreichen?
http://de.selfhtml.org/css/layouts/anzeige/nav_modern.htm
gruß KeYara
-
hi leute,
Hallo Leut,
ich möchte für eine website ein dropdown-menü mit onclick ansteuern nicht mit :hover. wie kann ich das bei dem folgenden script, welches ich in den weiten von selfhtml gefunden habe, erreichen?
In den von dir verlinkten Beispielen:
document.getElementById("Rahmen").getElementsByTagName("ul")[0].style.display = "block";
resp.
document.getElementById("Rahmen").getElementsByTagName("ul")[1].style.display = "block";
Es bietet sich natürlich an, den <ul>-Elementen Identifier zuzuweisen und sie direkt anzusprechen. Außerdem solltest Du eine Funktion zwischenschalten, die überprüft, ob sie das Menü einblenden oder ausblenden soll. Ich meine sowas:
if (document.getElementById("Rahmen").getElementsByTagName("ul")[0].style.display == "block") {
document.getElementById("Rahmen").getElementsByTagName("ul")[0].style.display = "none";
}Ich habe das alles nicht getestet, aber so ungefähr müsste es funktionieren.
Gute Nacht
Nico
-
danke nico für deine Hilfe,
habe deinen script erfolgreich bei mir einbauen können und es funzt.
<html>
<head>
<title>windows-Menüleiste (firefox-menü: datei, ansicht, chronik, usw.)</title>
<script type="javascript">if (document.getElementById("nav1").getElementsByTagName("ul")[0].style.display == "none") {
document.getElementById("nav1").getElementsByTagName("ul")[0].style.display = "block";
}</script>
</head>
<body>
<dl id="Navigation1" style="position:absolute; top: 1%; left: 1%;"><img src="img/ffdat1.png" name="Grafik1" alt="" border="0"
onmouseover="document.images['Grafik1'].src='img/ffdat2.png';"
onmouseout="document.images['Grafik1'].src='img/ffdat1.png';"
onclick="document.getElementById('nav1').style.display = 'block';"
ondblclick="document.getElementById('nav1').style.display = 'none';">
<ul id="nav1" style="display:none">
<dt><img src="img/but1.png" name="Grafik2" border="0" onmouseover="document.images['Grafik2'].src='img/but2.png';"
onmouseout="document.images['Grafik2'].src='img/but1.png';"></dt><br>
<dt><img src="img/but1.png" name="Grafik3" border="0" onmouseover="document.images['Grafik3'].src='img/but2.png';"
onmouseout="document.images['Grafik3'].src='img/but1.png';"></dt><br>
<dt><img src="img/but1.png" name="Grafik4" border="0" onmouseover="document.images['Grafik4'].src='img/but2.png';"
onmouseout="document.images['Grafik4'].src='img/but1.png';"></dt>
</ul>
</dl>
</body>
</html>hab jetzt nur noch ein problem: die ausrichtung!
mein submenu erscheint unter der rechten ecke meiner linkgrafik(ffdat1.png). ich würde es aber gerne direkt unter diesem bild haben. habe es bereits mit style="position:absolute;..." versucht, aber ohne erfolg.
gibts da evtl. noch ne möglichkeit das untermenu auszurichten - würd es auch mit css versuchen, habe aber da noch nicht all so viel erfahrung.danke im voraus
gruß KeYara-
Also das solltest du ein wenig anders machen.
<script type="javascript">
if (document.getElementById("nav1").getElementsByTagName("ul")[0].style.display == "none") {
document.getElementById("nav1").getElementsByTagName("ul")[0].style.display = "block";
}</script>
Das war von mir eigentlich nur als Fragment einer Funktion gedacht. Mach da am besten eine Funktion draus, der du das Navigationselement, das betroffen sein soll, übergibtst. Außerdem sollte das Menü ja auch wieder ausgeblendet werden können.
function menue(welches) {
if (document.getElementById(welches).style.display == "none") {
document.getElementById(welches).style.display = "block";
} else {
document.getElementById(welches).style.display = "none";
}
}<img src="img/ffdat1.png" name="Grafik1" alt="" border="0"
onmouseover="document.images['Grafik1'].src='img/ffdat2.png';"
onmouseout="document.images['Grafik1'].src='img/ffdat1.png';"
onclick="document.getElementById('nav1').style.display = 'block';"
ondblclick="document.getElementById('nav1').style.display = 'none';">Dann kannst du auch auf dieses seltsame "ondblclick" verzichten. Schreib lieber:
onclick="menue('nav1');"
Bedenke außerdem, dass das Menü so nur den Besuchern mit aktivierten Javascript zur Verfügung steht. Gestalte das Ganze lieber als Link und vergib einen Alternativtext für diejenigen, die keine Bilder sehen können (weil sie blind sind) oder sehen wollen (weil es sie nervt):
<a href="meineseite.html" onclick="menue('nav1');return false;"><img src="img/ffdat1.png" name="Grafik1" alt="Alternativtext" /></a>
Auch für den Grafikwechsler solltest du m. E. über eine Funktion nachdenken.
mein submenu erscheint unter der rechten ecke meiner linkgrafik(ffdat1.png). ich würde es aber gerne direkt unter diesem bild haben. habe es bereits mit style="position:absolute;..." versucht, aber ohne erfolg.
Hier bist du mit CSS schon auf dem richtigen Weg gewesen. So müsste es gehen, prüf das aber am besten in verschiedenen Browsern. Differenzen beruhen vielleicht darauf, dass du keine Dokumenttypdeklaration am Anfang deiner Seite eingefügt hast.
#nav1 { position: relative;
left: -???px; }Die Pixelbreite ergibt sich aus dem Bild. Du solltest übrigens konsequent Layoutinformationen in eine extrene CSS-Datei auslagern. Das:
<dl id="Navigation1" style="position:absolute; top: 1%; left: 1%;">
hat in einer HTML-Datei nichts zu suchen. schreibe in der CSS-Datei:
dl { position: absolute;
top: 1%;
left: 1%; }oder, falls es speziell sein soll:
dl#Navigation1 { ... }
Überleg dir außerdem, ob das semantisch stimmt, was du da codest. Ist das wirklich eine Definitionsliste? Oder nicht einfach nur eine Liste von Links?
Du scheinst ja noch relativ unerfahren zu sein. Wenn Du nicht genau verstehst, was du tust, dann solltest du auf jeden Fall die entsprechenden Kapitel in SELFHTML lesen: JavaScript/DOM und Stylesheets (CSS). Das ist natürlich zeitaufwendig. Aber Rom ist auch nicht an einem Tag erbaut worden. :-)Viel Spaß!
Nico
-
hi Nico,
danke für deine ausführliche Hilfe. das mit der funktion hatte ich schonmal in ähnlicher weise, aber ich bekam ständig ne meldung das in zeile X ein Objekt erwartet wird. sobald ich die funktion rausnehme funzt es. hab jetzt auch mal deinen lösungsweg eingebaut und selbes problem
<img src="img/ffdat1.png" name="Grafik1" alt="alt" border="0"
onmouseover="document.images['Grafik1'].src='img/ffdat2.png';"
onmouseout="document.images['Grafik1'].src='img/ffdat1.png';"hier kommt diese meldung! mit dem zeilenobjektproblem.
onclick="menue('nav1');">
und das nur wenn ich das in eine funktion einbaue.
weißt du evtl. woran das liegen könnte?.»»Du scheinst ja noch relativ unerfahren zu sein. Wenn Du nicht genau verstehst, was du tust, dann solltest du auf jeden Fall die entsprechenden Kapitel in SELFHTML lesen: JavaScript/DOM und Stylesheets (CSS).
ich bin kein blutiger anfänger, ich hab halt bis jetz son zeugs wie javascript und css nie so wirklich in betracht gezogen. bin mit html auch immer irgendwie so klargekommen (jetz nicht online oder so - sondern nur auf meinem rechner). bin jetzt seit einem jahr dabei mir javascript anzueignen. vor css hab ich noch ein bisse bammel, aber egal.
wenn ich mit javascript arbeite, verstehe ich schon was ich tue, es klappt bloß nicht immer alles. und dann seh ich manchmal den wald vor lauter bäumen net mehr.gruß KeYara
-
weißt du evtl. woran das liegen könnte?.
Da müsstest Du schon spezifischer sein. Welche Meldung kommt? Wann oder nach welcher Aktion tritt der Fehler auf? Dann musst du feststellen, in welcher Zeile der Seite der Fehler auftritt. Ist es in der Funktion, dann versuch ihn durch Auskommentieren (Zeilen mit //, Textblöcke mit /* */) zu finden.
Kommt die Meldung, dass ein Objekt fehlt, kann es daran liegen, dass das Objekt noch nicht geladen ist, die Funktion also zu früh aufgerufen wird. Es kann ferner sein, dass es falsch bezeichnet wird. Vielleicht wird es der Funktion auch nicht korrekt übergeben. So etwas kannst du festellen, indem du dir die Variablen mit alert(variable); auswerfen lässt, um zu kontrollieren, ob sie da sind.
Oft sind es auch einfache Tippfehler. Grundsätzlich: Kreise das Problem ein, indem du die Komplexität deines Codes reduzierst. Nach jedem Reduktionsschritt (z.B. nach dem temporären Löschen eines Eventhandlers wie onclick) testest du, ob es noch weiter auftritt. Dann wirst du es i.d.R. problemlos finden.
ich bin kein blutiger anfänger, ich hab halt bis jetz son zeugs wie javascript und css nie so wirklich in betracht gezogen.
Ich sags doch: _relativ_ unerfahren. :-)
Gruß
Nico
-
Kommt die Meldung, dass ein Objekt fehlt, kann es daran liegen, dass das Objekt noch nicht geladen ist, die Funktion also zu früh aufgerufen wird. Es kann ferner sein, dass es falsch bezeichnet wird. Vielleicht wird es der Funktion auch nicht korrekt übergeben. So etwas kannst du festellen, indem du dir die Variablen mit alert(variable); auswerfen lässt, um zu kontrollieren, ob sie da sind.
so hab die funktion nochmal geschrieben mit dem dazugehörigen link und hab festgestellt, er meckert immer bei zeile 20 rum, auch wenn er die zeile 21 meint.
zeile20: onmouseout="document.images['Grafik1'].src='img/ffdat1.PNG';"
hier kommt die meldung: Zeile: 20
Fehler: Objekt erwartet
zeile21: onclick="menu('nav1'); return false;">//!!!!das mag er offenbar net.
gibst für zeile 21 noch ne andere möglichkeit die funktion aufzurufen?
gruß KeYara
-
zeile20: onmouseout="document.images['Grafik1'].src='img/ffdat1.PNG';"
hier kommt die meldung: Zeile: 20
Fehler: Objekt erwartetzeile21: onclick="menu('nav1'); return false;">//!!!!das mag er offenbar net.
Wie heißt denn die Funktion? Heißt die "menue" oder "menu"? Funktionen sind nämlich auch Objekte und wenn die Funktion "menue" heißt im onclick aber nach "menu" gesucht wird, dann fehlt das Objekt.
N
-
Wie heißt denn die Funktion? Heißt die "menue" oder "menu"? Funktionen sind nämlich auch Objekte und wenn die Funktion "menue" heißt im onclick aber nach "menu" gesucht wird, dann fehlt das Objekt.
die funktion heißt "menu"
gruß KeYara
-
Wie heißt denn die Funktion? Heißt die "menue" oder "menu"? Funktionen sind nämlich auch Objekte und wenn die Funktion "menue" heißt im onclick aber nach "menu" gesucht wird, dann fehlt das Objekt.
die funktion heißt "menu"
Tja, geh einfach nach der Strategie vor, die ich gepostet habe, dann wirst du den Fehler finden. Du solltest m.E. damit beginnen, verdächtigen Code zu löschen.
N
-
hi Nico,
hab jetzt mal den code völlig auseinander genommen und ein grundgerüst erstellt welches auch funzt. zwar läuft bei dem code hier das einklappen noch nicht, aber der rest wenigstens.
jetz noch mal die frage, wahrscheinlich jetzt blöd aber egal.wie müsste ich den code jetzt verändern damit das jetzt wieder einklappt auf onclick?
gruß KeYara
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<meta name="author" content="KeYa">
<script type="text/javascript">
function menue(block) {
document.getElementById("a").style.display = block;
}
</script>
</head>
<body>
<ul><a href="javascript:menue('block')">1</a>
<dl id="a" style="display:none">
<dt>a</dt>
<dt>b</dt>
<dt>c</dt>
<dt>d</dt>
<dt>e</dt>
</dl>
</ul>
</body>
</html>Ps.: das Design soll mal später so aussehn wie zum bleistift: das menü von firefox - mit onmouseover-effekten und klickmenü.
-
So KeYara,
eigentlich ist das ja nicht die Idee von SELFHTML. Aber ich poste dir jetzt mal eine fertige Lösung:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<meta name="author" content="KeYa">
<script type="text/javascript">
function menue(identifier) {
var element = document.getElementById(identifier);
if (element.style.display == "block") {
element.style.display = "none";
} else {
element.style.display = "block";
}
}
</script>
<style type="text/css">
#a, #c { display: none; }
</style>
</head>
<body>
<ul>
<li><a href="test.html" onclick="menue('a');return false;">1</a>
<ul id="a">
<li>1a</li>
<li>1b</li>
<li>1c</li>
<li>1d</li>
<li>1e</li>
</ul></li>
<li><a href="andereSeite1.html">3</a></li>
<li><a href="test.html" onclick="menue('c');return false;">3</a>
<ul id="c">
<li>3a</li>
<li>3b</li>
<li>3c</li>
</ul></li>
<li><a href="andereSeite2.html">4</a></li>
</ul>
</body>
</html>Dann noch ein paar Kommentare zu deinem Code:
<script type="text/javascript">
function menue(block) {
document.getElementById("a").style.display = block;
}
</script>Das, was hinter dem Funktionsnamen in Klammern steht, ist eine Variable, die den Übergabewert enthält. Wenn Du die Funktion mit menue('Herrje') aufrufst, dann bekommt die Variable block (so hast du sie genannt) den Wert Herrje zugeschrieben. Oben benutze ich diesen Teil der Funktion, um die ID des Elements zu übergeben, das von der Funktion bearbeitet werden soll. Was du gecodet hast, ist so nicht nötig. Man kann eine Funktion durchaus aufrufen, ohne ihr Werte zu übergeben. Die Funktion, die du gecodet hast, ist zwar korrekt. Aber sie würde einfacher ohne Übergabewert funktionieren.
<ul><a href="javascript:menue('block')">1</a>
<dl id="a" style="display:none">
<dt>a</dt>
<dt>b</dt>
<dt>c</dt>
<dt>d</dt>
<dt>e</dt>
</dl>
</ul>Das ist kein valides HTML:
1. Du hast die <li> Kind-Elemente der <ul> vergessen.
2. Noch einmal: Ist das wirklich eine Definitionsliste? Wenn das ein Navigationsmenü sein soll, dann verwende *nicht* <dl> und <dt>. Das wäre semantisch falsch. <dl> und <dt> verwendet man für Defitinionslisten (Glossarlisten).<dl id="a" style="display:none">
Das style="display:none" betreffend: Du solltest dir gleich am Anfang angewöhnen, CSS-Anweisungen auszulagern. Ich habe das im Lösungsbeispiel nur der Übersichtlichkeit halber im Kopf der Datei eingebunden.
<ul><a href="javascript:menue('block')">1</a>
Ferner solltest du den Link nicht so coden, sondern lieber einen Eventhandler verwenden. Wer Javascript abgeschaltet hat, kann mit diesem Link nichts anfangen. Bestimmt möchtest du hier die Seiten in einem Bereich auflisten. Verlink doch einfach den Bereich und benutze ein onclick-Event, wie ich es gecodet habe. Wer Javascript hat bekommt dann das Menü, denn die Anweisung "return false" blockiert den Link. Wer keins hat, geht direkt auf die Startseite des Bereichs.
So, ich hoffe jetzt ist es dir klar geworden, was ich in den vorherigen Posts meinte.
Viel Spaß beim Weiterbasteln
Nico
-
hi nico,
danke für dein post.(:-) naja, ich hab gestern den wald vor lauter bäumen net gesehn. aber ich war offenbar echt kurz davor. hatte das auch schon mit ner variable, aber leider an einer stelle - die ich nicht gesehen hab - falsch benannt. darum funzte es net.
also noch ma vielen dank.gruß KeYara
-
-
-
-
-
-
-
-
-
-
-
-
Hallo KeYara,
ich möchte für eine website ein dropdown-menü mit onclick ansteuern nicht mit :hover. wie kann ich das bei dem folgenden script, welches ich in den weiten von selfhtml gefunden habe, erreichen?
"Onclick" bedeutet doch, dass der den untergeordneten Link-Items übergeordnete Doorpage-Link aufgerufen würde. Wenn die untergeordneten Links gleichzeitig auch noch aufklappen sollen, läuft wohl alles auf ein unschönes IFRAME-Konstukt hinaus. Warum reicht dir ein MouseOver/Hover nicht? Das ist doch auch für die BesucherInnen deiner Seite viel komfortabler.
Gruß Gernot
--
super me-
hi gernot,
Warum reicht dir ein MouseOver/Hover nicht? Das ist doch auch für die BesucherInnen deiner Seite viel komfortabler.
das reicht aus dem grund nicht, weil es nicht in dieses gesamtkonzept der webseite passt. es ist ein versuchsprojekt welches noch lange brauchen wird bis es fertig ist.
gruß KeYara
-
Hallo KeYara,
Warum reicht dir ein MouseOver/Hover nicht? Das ist doch auch für die BesucherInnen deiner Seite viel komfortabler.
das reicht aus dem grund nicht, weil es nicht in dieses gesamtkonzept der webseite passt. es ist ein versuchsprojekt welches noch lange brauchen wird bis es fertig ist.
was soll denn passieren, wenn man auf einen Punkt mit Unterpunkten in deiner Navigation klickt? Sollen da nur die Unterpunkte aufklappen, der übergeordnete Punkt selbst aber gar nicht zu einer diesen Inhaltspunkten übergeorneten Seite verlinken?
Wenn man dann unter diesem per Klick geöffneten Punkt gar keine interessanten Punkte findet, die man anklicken will, soll der Hauptpunkt dann aufgeklappt bleiben, bis man einen anderen Hauptpunkt anklickt? Wie soll ein Hauptpunkt der Navigation wieder zuklappen? Das Gesamtkonzept wird noch nicht klar.
Gruß Gernot
--
super me
-
-