horizontales Menü

horizontales Menü

Beitragvon daniele1985 » 18.10.2006, 11:47

Hallo zusammen,
Ich habe hier ein Menü gebastelt.

Als erstes würde ich gerne mal den code posten und eure Meinung dazu wissen. Lasst ihr das so durchgehen oder habt ihr vielleicht einen verbesserungsvorschlag? Ich hab das Menü noch nicht in allen Browsern getestet bin also noch unsicher ob es auch wirklich überall funktioniert.

Hier der code:
CSS:
Code: Alles auswählen
<style>
#wrapGlobalNav {margin:0;padding:0;width:100%;min-width:753px;width:expression(document.body.clientWidth < 800 ? "753px" : "100%" );
  background:url('globalNavBg.png') top left repeat-x;height:45px;}
#globalNavigation ul {margin:0;padding:0;}
#globalNavigation li {float:left;list-style:none;line-height:35px;margin:0 30px 0 0;padding:0 10px 1px 10px;}
#globalNavigation a {display:block;padding:0;margin:0;color:#D90081;text-decoration:none;}
#globalNavRight {float:right;width:25px;height:45px;padding:0;margin:0;background:url("globalNavRight.png") top left no-repeat;}
#globalNavLeft {float:left;width:25px;height:45px;padding:0;margin:0;background:url("globalNavLeft.png") top left no-repeat;}
#wrapGlobalNav .active{background:url('globalNavBgActive.png') top left repeat-x;}
</style>

HTML:
Code: Alles auswählen
<div id="wrapGlobalNav">
  <div id="globalNavLeft"></div>
  <div id="globalNavRight"></div>   
  <ul id="globalNavigation">
     <li><a href="indexLoggedIn.jsp">Start</a></li>
     <li class="active"><a href="profile">Meine Seite</a></li>
     <li><a href="events">Meine Termine</a></li>
     <li><a href="friends">Meine Freunde</a></li>
     <li><a href="messages">Postfach</a></li>
  </ul>
</div>


So! Jetzt hätte ich da allerdings noch eine Frage, und zwar hat jeder der Links auch noch "Unterlinks". Diese sollen in einer zweiten Zeile erscheinen.(Im Bild der rote Text)
Wie kann ich das umsetzen? Hat da jemand eine Idee? Ich komme da kein Stück weiter! Würde mich über Hilfe wirklich sehr freuen!

Damit ihr es euch besser vorstellen könnt hier noch ein Bild:
Bild
Zuletzt geändert von daniele1985 am 18.10.2006, 13:16, insgesamt 2-mal geändert.
daniele1985
neu hier
 
Beiträge: 2
Registriert: 18.10.2006, 11:38

Beitragvon Laus » 18.10.2006, 13:11

Hallo

Um den HTML Code richtig einzufügen musst du vor die Option "HTML in diesem Beitrag deaktivieren" hier im Forum einen Haken Setzen.
Dann seht ihr im html diese beden divs: "<div></div>" "<div></div>" Das sind meine beiden Enden.
Das sind zweit Bilder die ich eben einem mit float:left und float:right eingefügt habe. Ist diese Lösung vielleicht nicht besonders gut?

Nein ist sie nicht :wink: Gib den ersten und dem letzten <li> eine Klasse und weise ihnen das jeweilige Anfangs und Ende Hintergrundbild zu.
Eine Unternavigation erreichst du durch eine der Verschachtelung der Listen und den entsprechenden einträgen im css. Das kommt darauf an ob die unternavi sich nur auf klick öffnen soll und dann stehenbleibt, oder auf hover und dann wieder verschwinden.
Gute fertige Beispiele dafür die du dann deinen Vorstellungen entsprechend abändern kannst findest du zB. -->hier<--
unter Menus - Multi-Level CSS Only

Gruß Xaver
Lachen ist kein schlechter Anfang und bei weitem das beste Ende.
(Oscar Wilde)
Benutzeravatar
Laus
Moderator
 
Beiträge: 1229
Registriert: 25.02.2006, 00:30
Wohnort: Furth im Wald

Beitragvon daniele1985 » 18.10.2006, 13:29

Hey! Erstmals vielen Dank für diese schnelle Antwort! Ich habe den ersten Teil auch gleich umgesetzt den du angesprochen hast! Klappt auch wunderbar! NUR: Das menü ist jetzt nach wie vor 100% breit ABER die Kanten links und rechts tauchen eben mitten im DIV auf! Hab einen screenshot angefügt.

Hier mein code:
CSS:
Code: Alles auswählen
<head>
<style>
#wrapGlobalNav {margin:0;padding:0;width:100%;min-width:753px;width:expression(document.body.clientWidth < 800 ? "753px" : "100%" );
  background:url('globalNavBg.png') top left repeat-x;height:45px;}
#globalNavigation ul {margin:0;padding:0;}
#globalNavigation li {float:left;list-style:none;line-height:35px;margin:0 30px 0 0;padding:0 10px 1px 10px;}
#globalNavigation a {display:block;padding:0;margin:0;color:#D90081;text-decoration:none;}
#wrapGlobalNav .active{background:url('globalNavBgActive.png') top left repeat-x;}
.globalNavRight {float:right;width:25px;height:45px;padding:0;margin:0;background:url("globalNavRight.png") top left no-repeat;}
.globalNavLeft {float:left;width:25px;height:45px;padding:0;margin:0;background:url("globalNavLeft.png") top left no-repeat;}
</style>

HTML:
Code: Alles auswählen
<div id="wrapGlobalNav">
  <div id="globalNavLeft"></div>
  <div id="globalNavRight"></div>   
  <ul id="globalNavigation">
    <li class="globalNavLeft"></li>
    <li><a href="indexLoggedIn.jsp">Start</a></li>
    <li class="active"><a href="profile">Meine Seite</a></li>
    <li><a href="events">Meine Termine</a></li>
    <li><a href="friends">Meine Freunde</a></li>
    <li><a href="messages">Postfach</a></li>
    <li class="globalNavRight"></li>
  </ul>
</div>


Bild
So sollte das nicht sein, ich hätte gerne dass das Menü nach wie vor 100% breit ist....Ich meine ich könnte ja jetzt einfach #wrapGlobalNav weglassen, aber dann ist mein Menü eben nicht mehr 100% breit...

Ach und es reicht wenn die unteren Links erst dann erscheinen wenn der Link bereits geklickt wurde...hover spielt hier also keine Rolle. Deinen Link für deine Beispiele habe ich mir mal angeschaut, doch ehrlichgesagt fühl ich mich da ein bisschen erschlagen und überfordert mit dem ganzen CSS :(
daniele1985
neu hier
 
Beiträge: 2
Registriert: 18.10.2006, 11:38


Moderatoren: Laus, Moderatoren

Ähnliche Beiträge zu "horizontales Menü"

Zurück zu: CSS für Fortgeschrittene

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste

cron