Schwieriges Menü mit Javascript umsetzen?

Pfohl · 07.10.2010

Morgen,
ich erstelle derzeit einem Freund eine neue Homepage!

Die Seite (derzeit noch im Aufbau) findet ihr hier:

Grundgerüst steht aber, und der Quelltext dazu ist bis auf die linke Spalte (left column) fertig.

Ich möchte in die Linke Spalte (id="left column") ein Untermenü einbauen (siehe Bild), das jeweils einem der 4 Menüpunkte im Menü unter dem Header (id="menue") zugeordnet ist.
Zusätzlich hätte ich gerne den Hover-Effekt, wie auf dem jpg zu sehen.

Die Fotos, links des Menüs, sollen passend zum jeweiligen Menüpunkt wechseln. (Heizung -> Foto einer Heizung, Solar -> Bild einer Solaranlag, etc. ...)

Mein Problem ist die Umsetztung. Durch den Bogen im Menü, werde ich mit einer Unsorted List wie beim oberen Menü nicht weiter kommen!?
Außerdem sollen ja die Bilder links davon wechseln! :uhm:

Frage:
Wie setze ich es am besten um? -> Bietet Javascript hier möglichkeiten?; speziell auch für den Bilderwechsel. Irgend ein if.this.page - this.photo befehl oder so?

(Arbeite leider noch viel zu selten mit Java)

fexx · 07.10.2010

AW: Schwieriges Menü mit Javascript umsetzen?

also den bilderwechsel links könntest du per css mit einer body klasse lösen

Code:

<body class="heizung">
.heizung #divwodeinbilddrinist { ... }

<body class="solar">
.solar #divwodeinbilddrinist { ... }

mit der rundung ... da würde ich wohl auch mit klassen und ids arbeiten ;-)

owieortho · 07.10.2010

AW: Schwieriges Menü mit Javascript umsetzen?

Ich würde das schon serverseitig anlegen. Der linken Spalte eine id in Abhängigkeit von der Auswahl im Head-Menü geben und diese mit unterschiedlichen Hintergründen versehen.
Den li-tags in der linken Navigation gibst Du z. B. id="pos1"/"pos2"... diese kannst Du dann einzeln weter nach rechts rücken lassen und mit entsprechenden css-hovers ausstatten.

P.S.: Im Header-Menü solltest Du Network Marketing korrigieren

P.P.S.: Weil das Leben schön ist und man es geniessen soll, gründet man ein Dienstleistungsunternehmen??? Ich hoffe Ihr feilt auch noch an den Texten.

P.P.P.S.: Javascript und Java sind zwei sehr unterschiedliiche Sprachen

Pfohl · 07.10.2010

AW: Schwieriges Menü mit Javascript umsetzen?

owieortho schrieb:
Ich würde das schon serverseitig anlegen. Der linken Spalte eine id in Abhängigkeit von der Auswahl im Head-Menü geben und diese mit unterschiedlichen Hintergründen versehen.
Den li-tags in der linken Navigation gibst Du z. B. id="pos1"/"pos2"... diese kannst Du dann einzeln weter nach rechts rücken lassen und mit entsprechenden css-hovers ausstatten.

Ok, das macht Sinn.
Wie schreibe ich das dann in dem Code?

1. Das jeweilige Untermenü:
Bspw. nennen ich die Spalten LeftColumnDienstleistungen, LeftColumnNetworkmarketing, etc. ,
baue innerhalb dieser in HTML jeweils das passenden Untermenü (bsp. submenuDienstleistungen) in Form einer Ul ein,
und formatiere die ul über CSS -> verschiebe die li-tags jeweils nach rechts.
Welchen Befehl verwende ich dann, um bei Klick auf Dienstleistungen automatisch die Linke Spalte mit dem Menü submenuDienstleistungen aufzurufen?

2. Die Bilder links:
Wie löse ich dieses Problem dann? Ich will zu jedem Punkt des Untermenüs ein eigenes Bild!

Das habe ich noch nicht ganz verstanden

...

P.S.:
Das Menü möchte ich grafisch machen, also mit Grafiken für die jeweiligen Punkt. Soll ich dann png's verwenden, die teilw. transparent sind?

P.S.: Im Header-Menü solltest Du Network Marketing korrigieren

Oh vielen Dank!

Böser Fehler, den hätt ich glatt übersehen!

P.P.S.: Weil das Leben schön ist und man es geniessen soll, gründet man ein Dienstleistungsunternehmen??? Ich hoffe Ihr feilt auch noch an den Texten.

Who knows? - Ich werd mit ihm seine Texte auf jeden Fall noch mal durchgehen. Der Text ist einfach 1:1 von ihm übernommen

P.P.P.S.: Javascript und Java sind zwei sehr unterschiedliiche Sprachen[/QUOTE]
Stimmt

... War nur faul!

VIELEN DANK schon mal für euere Hilfe!
Ihr habt mir bereits sehr geholfen, bzgl. des Verständnisses wie ich die linke Spalte aufbauen soll

LG Andi

owieortho · 07.10.2010

AW: Schwieriges Menü mit Javascript umsetzen?

Pfohl schrieb:
Welchen Befehl verwende ich dann, um bei Klick auf Dienstleistungen automatisch die Linke Spalte mit dem Menü submenuDienstleistungen aufzurufen?

Da Du ja auf dienstleistungsservice.php verlinkt hast, ist es nahe liegend, dass Du genau in dieser Datei dieses Submenu einträgst.

Pfohl schrieb:
Wie löse ich dieses Problem dann? Ich will zu jedem Punkt des Untermenüs ein eigenes Bild!

Das hatte ich erst falsch verstanden. Da für diese Navigation noch kein Quelltext vorhanden ist, kann ich nur annehmen, dass Du diesen wahrscheinlich ähnlich wie die Header-Navigation aufbaust, also jeweils eigene Seiten aufrufst. In dem Fall könntest Du wieder die Einträge in der jeweiligeen Seite vornehmen.

Pfohl schrieb:
Das Menü möchte ich grafisch machen, also mit Grafiken für die jeweiligen Punkt. Soll ich dann png's verwenden, die teilw. transparent sind?

Halte ich für die praktikabelste Lösung. Oder Du suchst mal nach Transparenz, Hover und CSS3.

Pfohl · 07.10.2010

AW: Schwieriges Menü mit Javascript umsetzen?

Quelltext für die Sumenüs ist jetzt in der index.html vorhanden

Vll. willst noch einmal einen Blick drauf werfen?

Hatte mir überlegt die 4 Submenüs in 4 extra php-Dateien zu legen und dann für jeden Unterpunkt der Submenüs eine php-Seite anzulegen.
In jede dieser binde ich dann neben Header und Footer auch das passende Submenü.
Bsp: solar.php mit header.php, submenu_dienstleistungen.php und footer.php eingebunden!
Guter Plan ?

ABER: Ich weiß noch nicht, was ich mit den wechselnden Bildern links des Menüs machen soll!!!

Noch jemand eine Idee? - Wäre euch sehr verbunden!

owieortho · 07.10.2010

AW: Schwieriges Menü mit Javascript umsetzen?

Pfohl schrieb:
ABER: Ich weiß noch nicht, was ich mit den wechselnden Bildern links des Menüs machen soll!!!

Sollen die Bilder eigentlich schon beim Hover wechseln oder erst beim Aufruf der verlinkten Seite?

sokie · 07.10.2010

AW: Schwieriges Menü mit Javascript umsetzen?

wann sollen die denn wechslen? beim hover? dann javascript.
wenn die beim Laden der jeweiligen Seite erst gewechselt werden, verstehe ich das problem nicht:

und dann für jeden Unterpunkt der Submenüs eine php-Seite anzulegen.

dann werden auch dort die regeln festgelegt, welches Bild geladen werden soll.

Pfohl · 07.10.2010

AW: Schwieriges Menü mit Javascript umsetzen?

Bin derzeit noch am abwägen, welche Variante besser geeignet ist.

1. Wie würde ich das mit Javascript umsetzten? Gibt's da vordefinierte Befehle oder Scripts?

-> Folgefrage: Würde ich dann das komplette Submenü mit Javascript machen?

Wie lautet bei Javascript der Befehl, um beim Laden des Submenu einen bestimmten Menüpunkt als "aktiv" zu wählen?

Ist es eigentlich zwingend notwendig für jeden Menüpunkt eine eigene php.-Seite zu erstellen oder könnte man mit Javascript einen bestimmten Text / Content in die rechte Spalte laden, bei Klick auf einen Menüpunkt?

2. Variante: Scheint mir die einfachere, aber nicht so elegante Variante zu sein?

Wenn ich die Bilder immer mit der php.Datei laden lasse, soll ich diese dann als png. speichern und bei dem Bogen freistellen, so dass der Bereich transparent ist. - Die Bilder sollen sich ja nicht mit dem Menü überschneiden.

Oder die Bilder als gif. (mit angeschnittenem Bogen) in den Hintergrund legen und lediglich die Menübuttons darüber legen.

Sorry für die etwas blöde Frage.

& Vielen dank für eure Hilfe nochmal

Pfohl · 07.10.2010

AW: Schwieriges Menü mit Javascript umsetzen?

owieortho schrieb:
Sollen die Bilder eigentlich schon beim Hover wechseln oder erst beim Aufruf der verlinkten Seite?

Habe es mir jetzt noch mal durch den Kopf gehen lassen: JA, würde sie gerne beim Hover wechseln lassen!

Wüsstest du denn, wie sich das realisieren ließe? :uhm:

LG