nicht angemeldet
Dynamische Menüleiste nur mit roll-over
Guten Tag.
Ich habe mir verschiedene Beispiele, Beiträge und Scripte angesehen, bisher aber nichts gefunden, was der folgenden Aufgabenstellung nahekommt:
Es gibt ein framset, in dessen linkem Frame eine Datei links.htm Menüeinträge auflistet.
Diese Menüeinträge sind Oberbegriffe,
z. B. "Auto", "Garten", "Urlaub", ...
Sie stehen untereinander und werden optisch mit css gestaltet.
Wenn man nun z. B. über "Auto" mit der Maus darüberfährt (mouse-over), verändert sich nur die Menüleiste im linken Frame.
Dann steht zwischen den Menüeinträgen "Auto" und "Garten", die ja als Oberbegriffe fungieren, z. B. weitere Untermeüeinträge mit den Themen "Audi", "BMW", "Fiat", ....
Wenn man nun auf einen dieser Untermeüeinträge klickt, verändert sich im rechten Framebereich der Inhalt. Der linke Framebereich bleibt unverändert, bis man mit der Maus im linken Framebereich entweder ein anderes Untermenü anklickt oder über einen anderen Oberbegriff mit der Maus darüberfährt. Im letzteren Fall sollen im linken Frame die Untermeüeinträge aus "Auto" wieder einfahren und dafür die neuen Untermenüeinträge von dem neu ausgewählten Oberbegriff erscheinen.
Optimalerweise wird dies durch einen Aus- und Einrolleffekt dargestellt.
Das Problem sind nicht die frames und die Aktualisierung der Hauptinhalte, sondern der linke Framebereich mit der Datei links.htm. Nach Möglichkeit soll dies mit reinen Texten gelöst werden und nicht mit Grafiken.
Ist das mit Javascript realisierbar und wer kann mir Verweise nennen, wo beschrieben wird, wie man so etwas lösen kann. Ich bin kein Profi und bin vor allem für solche Beispiele dankbar, die ausführlich die Funktionsweise beschreiben oder bei denen man bereits funktionierenden Quellcode durch Probieren praktisch erproben und ändern kann.
Nochmals sorry, wenn das ein alter Hut ist, aber ich habe nichts gefunden.
Vielen Dank für alle Antworten bereits im voraus.
Viele Grüße, Frank.
-
Wenn man nun z. B. über "Auto" mit der Maus darüberfährt (mouse-over), verändert sich nur die Menüleiste im linken Frame.
Dann steht zwischen den Menüeinträgen "Auto" und "Garten", die ja als Oberbegriffe fungieren, z. B. weitere Untermeüeinträge mit den Themen "Audi", "BMW", "Fiat", ....
Wenn man nun auf einen dieser Untermeüeinträge klickt, verändert sich im rechten Framebereich der Inhalt. Der linke Framebereich bleibt unverändert, bis man mit der Maus im linken Framebereich entweder ein anderes Untermenü anklickt oder über einen anderen Oberbegriff mit der Maus darüberfährt. Im letzteren Fall sollen im linken Frame die Untermeüeinträge aus "Auto" wieder einfahren und dafür die neuen Untermenüeinträge von dem neu ausgewählten Oberbegriff erscheinen.Warum versuchst du das nicht ganz normal mit HTML umszusetzten. Damit machst du dir's leichter und es funktioniert auch in allen Browsern (soweit du gültiges HTML schreibst). Also eine Seite start.html wo alle Menüpunkte geschlossen sind *klick auf Auto* -> Seite:auto.html in dem die untermenüpunkte aufgelistet sind.
Das ist das was eigentlich jeder im Internet erwartet, wenn ich auf einen Link klicke öffnet sich eine neue Seite. Oder?
Struppi.
-
Hallo Frank.
Mit einer Kombination aus Javascript und CSS kann man sowas gut hinbekommen:
<html>
<head>
<style type="text/css">
ul.Menu { display:none; }
</style>
</head><body>
<script type="text/javascript">
function setVisible( nr ){
objs = document.getElementsByName( "Menu" );
// Erst alle unsichtbar machen
for( i = 0; i < objs.length; i++ ){
objs[i].style.display = "none";
}
// Das gewünschte sichtbar machen
objs[nr].style.display = "block";
}
</script><ul>
<li><a href="#" onMouseOver="setVisible(0);" onClick="return false;">Auto</a>
<ul name="Menu" class="Menu">
<li><a href="" target="">Audi</a></li>
<li><a href="" target="">BMW</a></li>
<li><a href="" target="">Fiat</a></li>
<li><a href="" target="">Mercedes</a></li>
</ul></li>
<li><a href="#" onMouseOver="setVisible(1);">Garten</a>
<ul name="Menu" class="Menu">
<li><a href="" target="">Garten 1</a></li>
<li><a href="" target="">Garten 2</a></li>
<li><a href="" target="">Garten 3</a></li>
<li><a href="" target="">Garten 4</a></li>
</ul></li>
<li><a href="#" onMouseOver="setVisible(2);">Urlaub</a>
<ul name="Menu" class="Menu">
<li><a href="" target="">Urlaub 1</a></li>
<li><a href="" target="">Urlaub 2</a></li>
<li><a href="" target="">Urlaub 3</a></li>
<li><a href="" target="">Urlaub 4</a></li>
</ul></li>
</ul></body>
</html>Das dürfte aber nur mit neueren Browsern funktionieren, die gut Javascript und CSS unterstützen.
Gruß Manuel
-
Hallo,
Das dürfte aber nur mit neueren Browsern funktionieren, die gut Javascript und CSS unterstützen.
und genau deshalb würde ich es bei der _Navigation_ nicht so realisieren. Es sei denn, Du bietest zusätzlich eine Alternative auf html-Basis an.
Die Navigation muss unter _allen_ Umständen verfügbar sein.Gruß Fritz
-
Lieber Manuel,
vielen Dank für dein gelungenes Beispiel. Werde mich gleich mal dransetzen und versuchen, die einzelnen Schritte nachzuvollziehen und zu verstehen, was die jeweiligen Programmschritte tun.Gruß, Frank.
-
Das dürfte aber nur mit neueren Browsern funktionieren, die gut Javascript und CSS unterstützen.
Gruß Manuel
Hallo Manuel,
im Netscape 7 funktioniert es hervorragend, im IE6 gibt es eine Fehlermeldung und zwar in der Zeile
objs[nr].style.display = "block";
Dort meckert der IE, 'objs[...].style' ist null oder kein Objekt.
Hast Du eine Idee, wie man den IE auch dazu bringt, das Script korrekt auszuführen?
Merci für Deine Mühe
Gruß, Frank.-
Hallo Manuel,
im Netscape 7 funktioniert es hervorragend, im IE6 gibt es eine Fehlermeldung und zwar in der Zeile
objs[nr].style.display = "block";
Dort meckert der IE, 'objs[...].style' ist null oder kein Objekt.
Hast Du eine Idee, wie man den IE auch dazu bringt, das Script korrekt auszuführen?
Merci für Deine Mühe
Gruß, Frank.Ich glaube, der IE unterstützt das "style" Objekt nicht. Das "style" Objekt
dürfte das gleiche wie das Objekt selber sein.Lösungsvorschlag:
var style;
if( objs[nr].style ){
style = objs[nr].style;
}
else{
style = objs[nr];
}
style.display = "block";Das gleiche auch in der for-Schleife, um alle anderen unsichtbar zu machen.
-
Lösungsvorschlag:
var style;
if( objs[nr].style ){
style = objs[nr].style;
}
else{
style = objs[nr];
}
style.display = "block";Hallo Manuel,
das funzt leider auch nicht. Die gleiche Fehlermeldung taucht gleich in der Zeile
if( objs[nr].style )
auf.Also, irgendwas stört den IE6 da ganz besonders.
Erst einmal danke für deine Mühe. Vielleicht fällt dir oder sonst jemand im Forum noch was anderes ein.
Gruß, Frank.
-
-
-