ich habe eine Navigationleiste auf meiner Website integriert, welche leider zu viele Elemente / Links enthält und ich diese deshalb durch ein „weiter“ -klicken verschieben möchte. Das ganze sieht bis jetzt so aus:
Wir Ihr sehen könnt, ist der 2. Navigationsbereich (beginnend bei „AutoMAB 15000“ unterhalb des 1. Navigationsbereichs (beginnend bei „Übersicht“). Der 2. Navibereich soll aber verschwinden und nur dann auftauchen, wenn man im 1. Navibereich auf „weiter“ klickt. Der 1. Navigationsbereich soll dann natürlich auch verschwinden und nur dann wieder auftauchen, wenn mann auf „zurück“ im 2. Navibereich klickt.
[/code]Hat vielleicht irgendjemand eine Idee wie man dies umsetzen kann? Vielleicht mit der „onclick“ Funktion? Javascript - oder gibt es eine einfachere Lösung?
Was mir spontan einfällt:
Mach einfach zwei Seiten:
Eine mit der oberen Navi. Wenn du dort auf „weiter“ klickst öffnet sich die zweite Seite, die grundsätzlich mit der ersten identisch ist, jedoch zusätzlich die zweite Navi-Reihe enthält.
Vermutlich lässt sich das auch anders mit javascript lösen, aber da kenn ich mich nicht mit aus.
Ich würde
a) das nicht mit JavaScript machen, das Menü soll ja auch bei abgeschaltetem JavaScript unbedingt benutzbar bleiben
b) die Idee ganz verwerfen und lieber mehrzeilig bleiben, dann hat man als Nutzer die Menüpunkte wenigstens vor augen und muss nicht erst Rumklicken, um die Wahlmöglichkeiten zu erfassen.
c) Evtl. ausreichend und besser wäre auch, die Menüpunkte in Kategorien und Unterkategorien zusammenzufassen, damit auf oberster Ebene weniger Punkte übrig bleiben. Also so ein klassisches popupmenü mit CSS.
Oder wenn es das Design nicht anders hergibt ein css-Hovermenü einsetzen.
Es gibt auch schöne Javascriptlösungen die Suchmaschinenfreundlich sind.
Bei abgeschalteten Javascript könnte (per Klick) ein php-Script eine Seite mit der weiterführenden Navigation senden
erst einmal vielen Dank für die Hinweise. Nach langem hin und her habe ich mich doch für die einfache Variante entschlossen - den Navibereich auf 2 Seiten zu verlegen.
Jetzt tritt aber folgendes Problem auf: IE 7 und Mozilla 3 stellen den Navibereich jeweils unterschiedlich da:
Die Darstellung in Mozilla ist vollkommen korrekt, mit Ausnhame das der „Hover“ Effekt nicht funktioniert.
In IE ist die Darstellung nicht korrekt. Das markierte Inline „MAB 100“ ist etwas nach rechts verrückt und fällt in die anderen Elemente. Dafür funktioniert aber der Hover - Effekt.
Nun ist dieses Problem schon mal gelöst. Kannst Du mir auch verraten, warum die Darstellung bei „MAB 100“ in IE falsch ist. Mozilla macht dort den Rahmen genau richtig, IE versetzt in nach rechts… ???
Nochwas: Du gibst fälschlicherweise mehreren Elementen die selbe ID (mab150). Das ist nicht erlaubt. Eine ID ist immer eindeutig über eine Seite. Verwende stattdessen Klassen.