[mimii]

Hallo ins Forum,

hier gibt's doch einige Profis und Java Script Cracks. Ich komme nicht weiter und bin am verzweifeln. Scheinbar ist das ein sehr kniffliges Problem.

Es geht um folgende Seite:
Test

Es gibt Hauptmenüpunkte und jeweils dazugehörige Submenüpunkte, die auf die entsprechenden Seiten verlinkt sind. Wird ein Submenüpunkt gewählt und die Seite angezeigt, soll sowohl der Hauptmenüpunkt, als auch der Submenüpunkt rot hinterlegt bleiben. Das funktioniert auch soweit.

Mein Problem ist nun die weitere Navigation im Menü.
Diese soll so funktionieren, dass bei Überfahren eines anderen (als dem gerade aktuellen) Hauptmenüpunkts
- der Menüpunkt mit Mouseover rot hinterlegt wird (das funktioniert schon), gleichzeitig aber der aktuelle, aktive Hauptmenüpunkt seinen roten Hintergrund verliert,
- das Submenü des aktuell aktiven Hauptmenüpunkts ausgeblendet wird (das funktioniert), nicht aber wenn man über eben diesen fährt

Wird kein neuer Hauptmenüpunkt geklickt soll der bereits aktive wieder rot und das Submenü mit aktiver Seite wieder eingeblendet werden.

Weiteres Problem ist, dass das aktuell angezeigte Submenü flackert, wenn man drüber fährt und man kann somit keine neue Seite auswählen.


Das bestehende Script findet ihr unter:
http://www.kunden-bzp.de/menu/script/currentPage.js


Vielen Dank für etwas Input und ein paar Tipps.

Steffi

[philosapiens]

Hi,

ich würde das Menü nicht mit einem JavaScript erstellen, sondern nur mit HTML und CSS, beispielsweise so:

WebDesign - Tips und Tricks: Dynamische Navigationsleisten

[mimii]

Hallo philosapiens,

danke für deine Antwort. Ich habe dein Vorschlag mal durchgearbeitet. Leider erfüllt deine Variante nicht mein Anliegen. Das Ein-/Ausblenden ist nicht das Problem, das funktioniert mittels CSS bereits einwandfrei.

Meine Idee ist die, dass das Menü mit Submenü eingeblendet und entsprechend der gewälten Seite markiert bleiben sollen. Das funktioniert soweit ja auch.
Das große Problem liegt nun darin, dass beim Wechsel zu einer anderen Seite, das Ein- und Ausblenden bwz. das Rot markieren und wieder entmarkieren nicht einwandfrei läuft.

Viele Grüße
Steffi

[philosapiens]

Hi,

ich hoffe Dich richtig verstanden zu haben. Kennst Du die CSS Pseudoklasse :hover?

:active: Aktiviertes Element: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Ich denke, so löse ich Dein Problem mit dem Menü von Ingo.

In Kombination mit Deppenlink entfernen [toscho.design] wird das dann eine runde Sache.

Oder meinst Du noch etwas anderes?

[mimii]

Hallo nochmal,

das ging ja rasch

mit :hover erreiche ich das Ein-/Ausblenden. Hier der entsprechende Auszug aus dem CSS. Mein CSS ist ein erweitertes Suckerfish Menü.

#menu a:hover, #menu a:active {
	color: #FFF;
	background-color: #CC3433; }

#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul{ 
/* lists nested under hovered list items */
	left: auto; }

Viele Grüße
Steffi

[philosapiens]

Hi,

sorry, ich habe mich verschrieben. Ich meinte nicht :hover, sondern :active.

Und in Deinem Fall die Definition für

#menu ul ul a:active

Also wenn man sich im Submenü befindet. Wie soll dann der aktive Button aussehen. Das hast Du bisher noch nicht näher definiert. Oder?

[mimii]

Hi nochmal,

das aktive Mainmenu und das aktive Submenü sind rot hinterlegt. Das funktioniert soweit auch. Siehe: Testseite. Je nachdem welche Seite du wählst, wird Main- und Submenü eingefärbt und das Submenü bleibt geöffnet. Das funktioniert aber in der Tat über das Javascript, in dem das der <a> Tag seine class von "inaktiv" auf "aktiv" ändert.

Mein Problem besteht zum einen beim Wechsel zu einer anderen Seite eines anderen Hauptmenüpunkts. Das aktive Submenü muss ausgeblendet werden (funktioniert auch) und der aktive Mainmenüpunkt muss demarkiert werden (also der rote Hintergrund muss weg) - as funktioniert nicht. Ebenso funktioniert nicht, dass das neu gewählte Mainmenü markiert bleibt, sobald man ins dazugehörige Submenü wechselt. Erst wenn eine neue Seite per Klick ausgewählt wird färbt sich der Hintergrund wieder rot.

Irgendwie alles sehr kompliziert :-/

Viele Grüße
Steffi

[philosapiens]

Hi,

und warum machst Du das alles dann nicht gleich ohne JavaScript und nutzt nur CSS dafür?

Die Umschaltung in eine aktive Seite würde ich immer mit php realisieren, so wie es toscho beschrieben hat.

Aber ich habe da mal noch eine andere Beschreibung gefunden:

Peter Ressel - Webmastering

Ist vielleicht nicht ganz einfach, beherzigt jedoch alle Kriterien, die Du benötigst, und zwar ohne JavaScript.

Wie Du schon bemerkt hast, habe ich da so ein wenig gegen JavaScript. Das kommt daher, weil ich immer versuche Seiten zu realisieren, die eigentlich auch nur mit HTML lesbar sind. CSS ist für mich eine Variante, wie man eine Seite optisch darstellt und JavaScript ist für mich eine Art Service. Es muß auch ohne js alles funktionieren. Daher nutze ich fast gar kein js und gebe auch immer nur Tipps ohne die Verwendung dessen. Vielleicht wäre es für Dein Menü wirklich besser, nochmal ohne js dieses aufzubauen.

[mimii]

Hallo nochmal,

php scheidet leider komplett aus

So genug der Scripterei heute, ich mach ich mich an die Vorbereitungen für heute abend.


Happy Halloween )