webmatze.de

Profi Tipps für einen erfolgreichen Internetauftritt

Hierarchische Menüs mit CSS erstellen

| 12 Kommentare

Eines der wichtigsten Elemente eines Webauftritts ist das Menü. Das Menü hilft dem Nutzer dabei, sich in komplizierten Seitenstrukturen zurechtzufinden und um schnell an jeden gewünschten Punkt in dieser Hierarchie springen zu können.

Auf vielen Seiten werden immer noch Navigationsmenüs verwendet, welche vollständig auf JavaScript aufbauen und bei ausgeschaltetem JavaScript nicht mehr funktionieren. Solche Seiten sind dann für Nutzer mit Behinderungen meistens nicht mehr bedienbar.

Das barrierefreie CSS Menü

In diesem Beitrag möchte ich euch zeigen, dass man Menüs auch auf behindertengerechte und barrierefreie Weise erstellen kann. Ziel ist es ein Menü zu bauen, dass nur auf aktuellen Standards wie HTML und CSS beruht und keine Verwendung von JavaScript macht. So soll es möglich sein, dass Menü auch dann noch bedienen zu können, wenn der Nutzer JavaScript oder gar CSS im Browser ausgeschaltet hat.

So sieht das fertige Menü aus

Hier könnt Ihr schon einmal sehen, wie das Menü aussehen wird. (Wird im IE6 als vertikales Menü angezeigt, während es alle modernen Browser als Drop Down Menü angezeigen.)

 

Dieses Beispiel hat insgesamt vier Ebenden, wobei jede einzelne Ebene auch noch unterschiedlich per CSS angepasst werden kann.

Der HTML Code

Der Aufbau dieses Menüs per HTML erfolgt über verschachtelte unsortierte Listen <ul>. Zur besseren Veranschaulichung könnt Ihr hier den HTML Code betrachten:

  1.  
  2. <UL class="cssmenu">
  3. <LI><a href="http://webmatze.de/">Start</a></LI>
  4. <LI><a href="http://webmatze.de/">Informationen</a>
  5. <UL>
  6. <LI><a href="http://webmatze.de/">Webseiten erstellen</a>
  7. <UL>
  8. <LI><a href="http://webmatze.de/">HTML</a></LI>
  9. <LI><a href="http://webmatze.de/">CSS</a></LI>
  10. <LI><a href="http://webmatze.de/">Programmieren</a>
  11. <UL>
  12. <LI><a href="http://webmatze.de/">JavaScript</a></LI>
  13. <LI><a href="http://webmatze.de/">PHP</a></LI>
  14. <LI><a href="http://webmatze.de/">Java</a></LI>
  15. <LI><a href="http://webmatze.de/">ActionScript</a></LI>
  16. <LI><a href="http://webmatze.de/">Ruby</a></LI>
  17. </UL>
  18. </LI>
  19. <LI><a href="http://webmatze.de/">Flash</a></LI>
  20. </UL>
  21. </LI>
  22. <LI><a href="http://webmatze.de/">Multimedia</a>
  23. <UL>
  24. <LI><a href="http://webmatze.de/">Grafiken</a></LI>
  25. <LI><a href="http://webmatze.de/">Videos</a></LI>
  26. </UL>
  27. </LI>
  28. </UL>
  29. </LI>
  30. <LI><a href="http://webmatze.de/">Suchen</a>
  31. <UL>
  32. <LI><a href="http://webmatze.de/">Google</a></LI>
  33. <LI><a href="http://webmatze.de/">Yahoo</a></LI>
  34. <LI><a href="http://webmatze.de/">MSN</a></LI>
  35. </UL>
  36. </LI>
  37. <LI><a href="http://webmatze.de/">Über</a></LI>
  38. </UL>
  39.  

Wie man sehen kann, gibt es keine besonderen Tricks. Es handelt sich einfach um ganz normalen standardkonformen HTML Code. Auch ohne CSS kann man dieses Menü bedienen und alle einzelnen Links aufrufen.

Um das Menü aber etwas ansprechender zu gestalten, wird es durch die folgenden CSS Anweisungen in die richtige Form gebracht.

Der CSS Code

Ich werde jetzt nicht ins Detail gehen, wie genau die einzelnen Anweisungen sich auf die Darstellung des Menüs auswirken. Zum besseren Verständnis habe ich ein paar Kommentare in den CSS Code mit aufgenommen. Anmerken möchte ich jedoch, dass ich den letzten Teil nur mit aufnehmen musste, weil sich der IE 6 hier etwas quer stellt und sich nur durch spezielle CSS Anweisungen dazu bringen lässt, das Menü ebenfalls richtig darzustellen. (Wer möchte, kann den IE 6 speziellen Teil natürlich weglassen.)

  1. ul.cssmenu {
  2. position: relative;
  3. display: block;
  4. margin: 0px;
  5. padding: 0px;
  6. }
  7. ul.cssmenu ul {
  8. position: relative;
  9. display: none;
  10. }
  11. ul.cssmenu li {
  12. position: relative;
  13. display: inline;
  14. float: left;
  15. }
  16. /* Menupunkt stylen */
  17. ul.cssmenu li a {
  18. font-family: arial, sans-serif;
  19. font-size: 12px;
  20. line-height: 20px;
  21. text-decoration: none;
  22. text-align: center;
  23. display: block;
  24. width: 100px;
  25. height: 20px;
  26. }
  27. ul.cssmenu li:hover > a {
  28. background-color: #666666;
  29. color: #FFFFFF;
  30. font-weight: bold;
  31. }
  32. /* Untermenüpunkt einblenden */
  33. ul.cssmenu li:hover > ul {
  34. position: absolute;
  35. top: 20px;
  36. left: -40px;
  37. display: inline;
  38. }
  39. /* ab zweite Ebene */
  40. ul.cssmenu li li:hover > ul {
  41. top: 0px;
  42. left: 110px;
  43. }
  44. ul.cssmenu li li a {
  45. width: 150px;
  46. }
  47. /* Farben der einzelnen Ebenen (werden vererbt)*/
  48. ul.cssmenu a {
  49. color: #000000;
  50. background-color: #e4e4e4;
  51. }
  52. ul.cssmenu ul a {
  53. background-color: #d4d4d4;
  54. }
  55. ul.cssmenu ul ul a{
  56. background-color: #c4c4c4;
  57. }
  58. ul.cssmenu ul ul ul a{
  59. background-color: #b4b4b4;
  60. }
  61.  
  62. /* zusätzliche Styleangaben für IE 6 */
  63. /* das Menü wird dort untereinander dargestellt */
  64. ul.cssmenu {
  65. _text-indent: 10px;
  66. }
  67. ul.cssmenu ul {
  68. _display: inline;
  69. _margin-left: 0px;
  70. _text-indent: 20px;
  71. }
  72. ul.cssmenu ul ul {
  73. _text-indent: 30px;
  74. }
  75. ul.cssmenu ul ul ul {
  76. _text-indent: 40px;
  77. }
  78. ul.cssmenu li {
  79. _float: none;
  80. }
  81. /* Menupunkt stylen */
  82. ul.cssmenu li a {
  83. _text-align: left;
  84. _width: 150px;
  85. }
  86. ul.cssmenu a:hover {
  87. _font-weight: bold;
  88. _background-color: #666666;
  89. }

Fazit

Wie Ihr sehen könnt ist es gar nicht so schwer auch ohne JavaScript ein ansprechendes Menü zu gestalten. Das hier gezeigte Beispiel lässt sich natürlich leicht durch andere Farben oder Hintergrundgrafiken per CSS noch weiter verschönern und an die eigenen Bedürfnisse anpassen. Alle modernen Browser sollten damit zurecht kommen - selbstverständlich auch Googles neuer Chrome Browser.

Diese Artikel könnten dich auch interessieren:

  • stefan

    beitrag is genial,
    allerding mit IE 7 hackelt es gewaltig,
    erst wenn man die IE6 anmerkungen wegnimmt
    stellt der IE7 die erste Zeile komplett richtig dar, die submenüs kan er dann noch immer nicht, werde versuchen mir das morgen / heute einmal anzusehen
    vielleicht ist ja jemand schneller
    scheint ein bekanntes problem mit dem IE7 zu sein

    lg
    stefan

  • Das ist komisch, denn bei mir sieht es im IE7 richtig aus.
    Ich verwende allerdings eine Standalone Version von IE7. Möglicherweise rendert diese die Seiten anders?

  • schöner beitrag, matze. bei solch hierarchischen menüs gibt es ab und zu ärger mit externen dienstleistern, die z.b. per iframe module in corporate websites einbinden (z.b. maps-applikationen per iframe). diese schönen menüs können dann eine menge ärger bereiten – da sie auf seiten mit „externen“ iframes im normalfall nicht mehr über dem iframe erscheinen und somit nicht mehr bedienbar sind (nur hauptlevel). ein guter rat ist von daher immer eine vertikale navi für ebene 2 und 3 im contentbereich vorzusehen und die hierarchische navigation somit zu unterstützen. dies gilt jedoch nur für grössere webprojekte, die auf externe applikationen zugreifen werden.

    dies nur als kleine randnotiz.

    cheerio
    chris

  • Pingback: CSS Down Hoover Men? im IE geht nicht - CSS @ tutorials.de: Forum, Tutorial, Anleitung, Schulung & Hilfe()

  • andre

    brüchte genau so was nur als vertikales menü
    und das bei frames
    naja noch ein bisscehn suchen

    wer mir helfen will bitte an redwolfhome@arcor.de

  • Tada

    Genial! Leider versteh‘ ich von CSS herzlich wenig bis auf das wenige, das ich mir selbst beigebracht habe. Kannst du mir sagen, WIE ich die beiden verbinde???
    Danke,
    Tada^^

  • Pingback: Anonymous()

  • Steingi

    Hi Super Beitrag.
    Hab endlich das mit dem Menu schreiben auf eine einfache Art gecheckt. War mir eine riesen hlfe. Danke.
    Nach einigen Anpassungen im CSS läuft es jetzt auch wunderbar in allen gängigen Browsern

  • Danke man echt leicht!(Website entsteht)

  • cih

    Danke

  • Wilhelm

    Hi Matze!

    Wirklich eine Klasse Anleitung. Sie hat mir schon mal sehr geholfen bei einem Projekt. Jetzt habe ich allerdings versucht erneut ein Projekt damit auszustatten und irgendwie will es nicht gelingen … :-/

    Könnte ich Dir mal einen Ausschnitt aus meinem Quelltext schicken?