wieder mal ein Problem mit der Navigation:
Mittlerweile wurde ich schon des Öfteren mit einem Fragezeichen darauf hingewiesen, ob eine Navigation wirklich links, oder in einem kleineren Screenbereich, unten, angebracht werden sollte (Stichpunkt Übersichtlichkeit).
Gerade in kleineren Screenbereichen (responsive Darstellung, oder auf mobilen Endgeräte) habe ich bisher diese Darstellung für mich begründet, dass User sowieso nach unten scrollen, um Inhalte aufzunehmen.
Gerade , was also den herkömmlichen Screen >960px betrifft, wurde ich nun schon aus dem privaten Umfeld darauf angesprochen, dass eine Navi oben sinnvoller wäre.
Für mich stellt sich nun das Problem, meine ursprüngliche Navi von "left" (obwohl sie derzeit bis vor 60sec. rechts dargestellt wurde - nach einem "Crash") nach oben zu befördern.
Ich möchte darauf hinarbeiten, die Navi oben darstellen zu lassen und ab einen bestimmten Screenbereich nur noch oben, in der Kopfzeile, ein pull-down-menü, einblenden zu lassen.
Nach den vielen Crash's, die ich hatte, habe ich den Faden verloren, wo genau die Einstellung zur oben liegenden Navi-Zeile lag. Das Layout habe ich schon umgestellt - soweit funktioniert es auch, dass die Navigation in der Kopfzeile mit den gewünschte Abständen nach oben dargestellt wird - Aber eben Level 1 und abwärts noch untereinander...
1. Vielleicht hat jemand hierzu einen dicken Stubs für mich, wo ich ansetzen muss?
2. Wie löse ich es am besten und sinnvollsten, dass die Navi, ab level2, ordentlich dargestellt wird (Stichwort Umbrüche)?
Es geht um diese Seite - Die entsprechenden Einträge in den aktivierten und bearbeitbaren CSS habe ich angehangen:
basic.css:
Code:
waagerechte Navi-NEU
.mod_navigation {
max-width:1140px;
bottom:1px;
left:0;
right:0;
top:10px;
position:relative;
border-width:2px 0px;
border-style:double;
border-color:#807171;
}
Aussehen der Navigation im Level 1
.mod_navigation a,
.mod_navigation li,
.mod_navigation span {
font:14px/1.5em Ubuntu,sans-serif,arial;
font-weight:bold;
color:#055b80;
text-transform:capitalize;
text-indent:5px;
}
Aussehen der Navigation im Level 2
.mod_navigation .level_2 a,
.mod_navigation .level_2 li,
.mod_navigation .level_2 span {
font:12px Ubuntu,sans-serif,arial;
font-weight:normal;
color:#000;
text-transform:none;
text-indent:10px;
}
Farbe des aktuellen Menüpunktes
.mod_navigation span.active {
font:14px Ubuntu,sans-serif,arial;
font-weight:bold;
text-decoration:underline;
color:#147e87;
}
Hover-Effekt im Menü - Farbänderung
.mod_navigation a:hover {
font:14px Ubuntu,sans-serif,arial;
font-weight:bold;
color:#0e689c;
}
und die default.css:
Code:
.mod_navigation {
width:200px;
top:43px;
position:absolute;
z-index:999;
}
.mod_navigation ul {
margin:0 5px;
padding:0;
border-bottom:1px solid #c6ad8d;
list-style-type:none;
}
Listen der Nav-Teile nebeneinander
.mod_navigation li {
margin:0;
padding:5px 0;
border-top:1px solid #c6ad8d;
}
.mod_navigation .level_2 {
padding:3px 0 0 9px;
border-bottom:0px;
}
.mod_navigation .level_2 li {
padding:0 0 3px;
border-top:0px;
}
.mod_navigation a,
.mod_navigation li,
.mod_navigation span {
font-size:14px;
font-weight:bold;
color:#000;
}
.mod_navigation .level_2 a,
.mod_navigation .level_2 li,
.mod_navigation .level_2 span {
font-size:12px;
font-weight:normal;
}
Vielen Dank für Eure Mühen, Beste Grüße und einen angenehmen Abend, Berliner
Lesezeichen