• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Verschiedene Navigationsbereiche

Status
Für weitere Antworten geschlossen.
B

bigkimble

Neues Mitglied
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:

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: 
<div id="navibereich">
<ul>
<li id="main"><a href="MAB_Index.php">Übersicht</a></li>
<li id="mab100"><b>MAB 100</b></li>
<li id="mab150"><a href="mab155.php">MAB 150</a></li>
<li id="mab150"><a href="mab425.php">MAB 425</a></li>
<li id="mab150"><a href="mab455.php">MAB 455</a></li>
<li id="mab150"><a href="mab485.php">MAB 485</a></li>
<li id="mab150"><a href="mab500.php">MAB 500</a></li>
<li id="mab150"><a href="mab825.php">MAB 825</a></li>
<li id="mab150"><a href="mab845.php">MAB 845</a></li>
<li id="mab150"><a href="mab1000.php">MAB 1000</a></li>
<li id="mab150">Weiter</li>


</ul>

<ul>
<li id="mab150"><a href="automab1500.php">AutoMAB 1500</a></li>
<li id="mab150"><a href="automab2000.php">AutoMAB 2000</a></li>
<li id="mab150"><a href="airmab5000.php">AirMAB 5000</a></li>
<li id="mab150"><a href="railmab900.php">RailMAB 900</a></li>
<li id="mab150"><a href="railmab960.php">RailMAB 960</a></li>
<li id="mab150">Zurück</li>


</ul>
</div>
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;

}
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
 
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:

ie.gif


Mozilla 3:

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: 
<div id="navibereich">
<ul>
<li id="main"><a href="MAB_Index.php">Übersicht</a></li>
<li id="highlight">MAB 100</li>
<li id="mab150"><a href="mab155.php">MAB 150</a></li>
<li id="mab150"><a href="mab425.php">MAB 425</a></li>
<li id="mab150"><a href="mab455.php">MAB 455</a></li>
<li id="mab150"><a href="mab485.php">MAB 485</a></li>
<li id="mab150"><a href="mab500.php">MAB 500</a></li>
<li id="mab150"><a href="mab825.php">MAB 825</a></li>
<li id="mab150"><a href="mab845.php">MAB 845</a></li>
<li id="mab150"><a href="mab1000.php">MAB 1000</a></li>
<li id="mab150"><a href="automab1500.php">AutoMAB 1500</a></li>
<li id="mab150"><a href="automab2000.php">Weiter</a></li>



</ul>
</div>
CSS:

Code: 
#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
 
Code: 
#navibereich a:hover,
#navibereich a:focus[B][COLOR=DarkRed],
[/COLOR][/B]{
...
}
Das Komma hinter a:focus muß weg.
Dann sollte es gehen.
 
neuroleptika schrieb:
Code: 
#navibereich a:hover,
#navibereich a:focus[B][COLOR=DarkRed],
[/COLOR][/B]{
...
}
Das Komma hinter a:focus muß weg.
Dann sollte es gehen.
Zum Vergrößern anklicken....


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... ???
 
<a> hast du die border und padding direkt zugewiesen.
Bei dem hervorgehobenen Menüpunkt dem <li>-Element.
Gehe bei der Hervorhebung einfach genauso vor wie bei Links.
Also ein Inline-Element für MAP 100:
Code: 
#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: 
..
<li id="highlight"><strong>MAB 100</strong></li>
..
Anstelle von <strong> köntest du auch <span>, <i> oder <b> verwenden.
Ich finde eine echte Hervorhebung mit <strong> 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.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben