Verschiedene Navigationsbereiche

Hallo zusammen,

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:

http://www.kernbohrer.de/bild.gif

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.

Der Code sieht bis jetzt wie folgt aus:

Navigationsbereich:

[code]

[/code]Der CSS Teil ist der folgende:

[code]

#navibereich {

color: #333333;
background-color: white;

margin: 0;
padding: 1x 0px 0px 0px;
border-bottom: solid 1px #edecec;
}

#navibereich li {
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
}

#navibereich a,
#navibereich strong {
background-color: #edecec;
color: black;
font-weight: normal;
padding: 4px 8px;
border-right-color: 1px solid black;

}

#navibereich a:hover,
#navibereich a:focus,
{

color: black;
background-color: white;
border: 1px solid #edecec;

}

[/code]Hat vielleicht irgendjemand eine Idee wie man dies umsetzen kann? Vielleicht mit der „onclick“ Funktion? Javascript - oder gibt es eine einfachere Lösung?

Für Eure Hilfe wäre ich sehr dankbar.

Gruss

Hat denn hier keiner ein Ideechen?

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.

Gruß,
-Efchen

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

Hallo zusammen,

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:

IE 7:

http://www.kernbohrer.de/ie.gif

Mozilla 3:

http://www.kernbohrer.de/mozilla.gif

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.

Hier der Code:

[code]

[/code]CSS:


#navibereich *  {
   padding: 8px 0 0 0 ;
margin:0;

}
#navibereich {


color: #333333;
background-color: white;
text-align: left;
margin: 0;
padding: 0px 0px 6px 6px;
border-bottom: solid 1px #edecec;
}

#navibereich li {
display: inline;
list-style-type: none;
margin: 0;
padding: 0;



}



#navibereich a
 {
background-color: #edecec;
color: #333333;
color: black;
font-weight: normal;
padding: 4px 8px;


}

#navibereich #highlight {
background-color: white;
color: black;

font-weight: bold;
padding: 3px 4px 8px 4px;
margin: 0;

border-right: 1px solid #edecec;
border-left: 1px solid #edecec;

border-top: 1px solid #edecec;
border-bottom: 4px solid white;
}


#navibereich a:hover,
#navibereich a:focus,
{

color: black;
background-color: white;

border-right: 1px solid #edecec;
border-left: 1px solid #edecec;

border-top: 1px solid #edecec;
border-bottom: 1px solid white;



}

#navibereich a:active {
color: black;
background-color: white;
}


Irgendwelche Vorschläge woran das liegen könnte?

Was haltet Ihr generell von meinem Code?

Gruss

Ich verzweifle… bitte helft mir :wink:

#navibereich a:hover,
#navibereich a:focus[B],
[/B]{
...
}

Das Komma hinter a:focus muß weg.
Dann sollte es gehen.

Hey super, danke Dir!

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… ???

hast du die border und padding direkt zugewiesen.
Bei dem hervorgehobenen Menüpunkt dem

  • -Element.
    Gehe bei der Hervorhebung einfach genauso vor wie bei Links.
    Also ein Inline-Element für MAP 100:

    #navibereich strong { padding: 4px 8px; color: black; background-color: white; border-right: 1px solid #edecec; border-left: 1px solid #edecec; border-top: 1px solid #edecec; border-bottom: 4px solid white; } html:
    [code]

  • MAB 100
  • .. [/code]Anstelle von köntest du auch , oder verwenden. Ich finde eine echte Hervorhebung mit am sinnigsten.

    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.