Sep
10

CSS drop down Navigation

Files under CSS, Tutorials, Web, scripting/coding, xhtml | Posted by SchmaR

Heute gibt es mal wieder ein kleines Tutorial auf SchmaRs-World.de. Dieses Mal geht es um eine Simple „drop down Navigation“. Die „Inspiration“ zu diesem Tutorial habe ich durch ein Codesnippet zum Thema „Mouseover mit CSS“ von Raph im Eurostyle-Webmedia.de Forum bekommen. Herzlichen Dank an dieser Stelle dafür ;) .

Wir werden die Navigation mit 4 ineinander verschachtelten Listen realisieren. 1 Dieser Listen ist die „Hauptnavigation“ in welche die anderen eingebettet werden.

Dieses Tutorial richtet sich an Anfänger/Fortgeschrittene um es verstehen zu können sollte man bereits einige Grundkenntnisse in (x)html und CSS haben.


Hier ist eine Preview unseres Ziels

Das xhtml Grundgerüst

Als erstes Fangen wir mit dem xhtml- Code an. Den Anfang bildet wie immer der obligatorische Link zum Stylesheet innerhalb der <head></head> tags. 

  1.  
  2. <link href="style.css" media="screen" type="text/css" rel="stylesheet" />

Als nächstes brauchen wir eine Liste hierfür eignet sich eine ungeordnete Liste also <ul></ul>. Diese liste bekommt nun 3 Einträge für die Kategorien unserer Navigation. Jedem dieser Einträge weisen wir die CSS-Klasse „navi“ zu, welche wir später noch definieren werden. Die list-Items (<li>) bekommen jetzt noch den Inhalt „Kategorie 1-3“. Unser Quellcode sieht nun wie folgt aus.

  1.  
  3. <li class="navi">Kategorie 1</li>
  4. <li class="navi">Kategorie 2</li>
  5. <li class="navi">Kategorie 3</li>
  6. </ul>
  7.  

Jetzt bekommt jedes Element unserer Liste eine weitere Liste als Inhalt, auch hier bietet sich eine wieder eine ungeordnete Liste an. Jeder dieser „Unterlisten“ weisen wir die CSS-Klasse „submenu“ zu. Alle Listen mit der „submenu- Klasse“ bekommen jeweils 3 list-tems mit dem Inhalt „link1-3“. 

  1.  
  3. <li class="navi">Kategorie 1
  4. <ul class="submenu">
  5. <li>link1</li>
  6. <li>link1</li>
  7. <li>link1</li>
  8. </ul>
  9. </li>
  10. <li class="navi">Kategorie 2
  11. <ul class="submenu">
  12. <li>link2</li>
  13. <li>link2</li>
  14. <li>link2</li>
  15. </ul>
  16. </li>
  17. <li class="navi">Kategorie 3
  18. <ul class="submenu">
  19. <li>link3</li>
  20. <li>link3</li>
  21. <li>link3</li>
  22. </ul>
  23. </li>
  24. </ul>
  25.  

So das war es auch schon von der xhtml Seite, weiter geht’s mit dem Cascading Style Sheet.

Die style.css

Der CSS Code ist recht minimalistisch, jedoch sehr wirkungsvoll.

Als erstes beginnen wir mit einigen Allgemeinen Eigenschaften.

  1. *,
  2. html,
  3. body{
  4. 	margin:0;
  5. 	padding:0;
  6. }
  7.  
  8. body{
  9. 	color:#000000;
  10. 	background-color:#EFEFEF;
  11. 	font-family:Arial, Helvetica, sans-serif;
  12. 	font-size:12px;
  13. }

(Der Code der in der body klasse enthalten ist, dient lediglich dem Layout.)

Nun ist die Klasse "Navi" dran. Wir setzen die Eigenschaft display auf inline um aus den (in den meisten Fällen) standardmäßig als Block-Elemente deklarierten List-items ein Inline-Element zu formen. Die restlichen Angaben in dieser Klasse sind lediglich für das Layout zuständig und können nach belieben gestaltet oder weggelassen werde.

  1. .navi{
  2. 	display:inline;
  3. 	background:#97E1FD;
  4. 	font-size:16px;
  5. 	border:#66FFFF 2px dotted;
  6. 	margin-left:100px;
  7. }

In diesen kleinen aber feinen Schritt definieren wir die Klasse „submenu“. Sie bekommt lediglich die Eigenschaft „display“ mit dem Wert „none“ zugewiesen wodurch alle „submenu-Elemente“ nicht angezeigt werden.

  1. .submenu{
  2. 	display:none;
  3. }

Jetzt kommt das Herzstück unserer Navigation. Die Deklaration des Verhaltens der Klasse „submenu“, wenn sich der Mauszeiger über einen „navi“ Element befindet. Die Eigenschaft „display“ wird auf „inline“ gesetzt wodurch die zuvor nicht sichtbare Liste als inline-Element dargestellt wird. Das setzen der Eigenschaft „position“ auf „absolute“ ist neben den eben bei display angewandten verfahren Elementar. Das setzen von absolute entfernt die „submenu-Elemente“ aus dem normalen Textfluss sodass sie über oder unter den anderen Elementen angezeigt werden und nicht das Layout zerstören. Mit der Eigenschaft „z-index“ wir angeben welches Element über welchen liegt. z.B. wird ein Element das einen „z-index“ von 1 hat unter einem mit einem „z-index“ von 2 dargestellt. Die Eigenschaft „margin-left“ hat in diesem Fall nur Layouttechnische Bedeutung.

  1. .navi:hover .submenu{
  2. 	display:inline;
  3. 	position:absolute;
  4. 	z-index:2;
  5. 	margin-left:1px;
  6. }

Nun ist es fast geschafft jetzt folgt noch eine kleine Definition des Verhaltens von List-Items innerhalb eines „submenu“ Elements. Hierbei sind die Eigenschaften „display“ und „list-style-position“ wichtig. Die auf Block gestellte Eigenschaft „display“ sorgt dafür dass die Listenelemente untereinander also als Block Elemente dargestellt werden. list-style-position:outside; ist lediglich ein Fix für den IE7 da dieser ansonsten vor den Inhalt der List-Item einen freien platz darstellt.

  1. .navi:hover .submenu li{
  2. 	display:block;
  3. 	background-color:#6699FF;
  4. 	border:#66FFFF 1px dotted;
  5. 	list-style-position:outside;
  6. }

Hier die Tutorial Dateien.

So da war es auch schon mit unserem kleinen Turorial ich hoffe es hat euch weitergeholfen und war gut zu verstehen. Für Kritik positive wie negative bin offen, also lasst eure Meinung in den Kommentaren da.

ÄHNLICHE ARTIKEL

Social Bookmarking


4 Responses to “CSS drop down Navigation”

  1. By koellmania on Sep 10, 2008 | Reply

    Gute Aufteilung!
    Ich würde es aber angenehmer finden, wenn die Dateien nicht als .rar zur Verfügung gestellt werden sondern auch noch online zu besichtigen sind. Aber tolles Tutorial, gefällt mir!

    koellmanias letzter Artikel..Blogparade die 2te: Worauf achtest Du beim PC-Kauf?

  2. By SchmaR on Sep 12, 2008 | Reply

    Hi freut mich das dir das Tutorial gefällt.

    Die Datein sind Online einsehbar in der Preview hast den Htmlquelltext von welchen aus man sich auch die CSS angucken könnte aber hier noch einmal ein Konfotabler Link.

    http://www.schmars-world.de/inhalt/tutorials/demos/navi/style.css

  3. By Huggy on Sep 18, 2008 | Reply

    Schöne Anleitung, auch wenn mein browser (safari) es manchmal falsch anzeigt..firefox perfekt :)

  4. By SchmaR on Sep 18, 2008 | Reply

    Hi Huggy schön das dir das Tutorial gefällt, das mitn Safari ist ärgerlich ich hatte nicht viel Zeit als ich das Tutorial gemacht habe deshalb habe ich es nur in IE 7 und FF 3 getestet.

Post a Comment

CommentLuv Enabled

Stoppt die Vorratsdatenspeicherung! Jetzt klicken &handeln! Willst du auch an der Aktion teilnehmen? Hier findest du alle relevanten Infos und Materialien: