Die Navigation einer Website ist deren Herzstück:

• Sie bietet die Möglichkeit einer gut durchdachten internen Verlinkung.

• Sie bietet Orientierung für den potentiellen Kunden.

• Sie bietet jede Menge Möglichkeit Textlinks unterzubringen.

• Sie soll auch eine Augenweide sein und so lieblos aneinandergereihten Links den Garaus machen.

Eine verschachtelte Liste bietet dafür alle Möglichkeiten, die man sich vorstellen kann und mehr.

So sieht eine korrekt verschachtelte ungeordnete Liste aus.

   

       
Menü1

          

              

               

         

       

   

Um sich die Gestaltung per Cascading Style Sheet (CSS) zu erleichtern hat es sich als hilfreich erwiesen, wenn man die Navigation in einen eigenen Div Container packt und diesem z.B.: eine Class zuweist:

    die Liste.....

In der externen CSS Datei kann man dann diese Liste ganz nach Gutdünken gestalten:

.navigation ul,
                      .navigation ul ul {list-style-type:none;}

Dies nimmt der Liste, die sonst automatisch erscheinenden Listenpunkte und gibt den Platz frei für ein kleines Bildchen davor:

.navigation ul li ul li{
                      background:url (images/ul.gif)no-repeat 0% 6px; 
                     padding:2px 12px;
                     line-height:140%;
}

Dies setzt ein kleines Bild vor den einzelnen Navigationsteilen der zweiten Liste, zum Beispiel einen kleinen Pfeil.

Um die Überschriften in der Navigation abzuheben, kann man in die CSS Datei folgendes schreiben:

.navigation ul li h2{
           font-size:1em;
          line-height:1.6em;
         color:#fff;
         background-color:#000;
}

Dies macht nur die h2 in dieser ungeordneten Liste Weiß mit schwarzem Hintergrund oder jede andere Farbe, die Ihnen gefällt und passend ist.

.navigation ul,
                  .navigation ul ul{
                                       margin:0px 5px;
          }

Monika Thon-Soun
mets[at]texto.de