Menü Beispiel 03
    
Home
Quellcode   DOWNLOAD  ZURÜCK SITEMAP  

 03 CSS-Formatierung - Zuweisung mit 'class'

Hier werden die CSS-Anweisungen für die <a>-Tags über das Attribut 'class' zugewiesen, das in jedem Link notiert ist. Die Definition in den CSS-Anweisungen sieht unterschiedliche Formatierungen für die Pseudo-Klassen link, visited, hover und activ vor.

Zuordnung der CSS-Formatierung der Unterklasse über 'class'


  Vorteile dieses Menüs:

1) die gesamte Breite (nicht nur der Linktext) ist anklickbar
2) leiche Anpassung in den CSS-Anweisungen
2) CSS-Zuweisung durch Notierung von Unterklassen in den Links

CSS-Anweisungen werden notiert für die Pseudo-Klassen:
link, visited, hover und active
  Laubbäume    Nadelbäume    Büsche    Sträucher    Stauden    Balkonblumen    Topfpflanzen    Schnittblumen  

a.nav2:link    { Anweisungen für Linkformatierung }
a.nav2:visited { Anweisungen für besuchte Links }
a.nav2:hover   { Anweisungen für MouseOver }
a.nav2:activ  { Anweisungen für aktive Links (niedergedrückte Maustaste) }
Zuordnung der CSS-Formatierungen durch Notierung der Unterklasse 'nav2': 
<table width="190" ... ><tr><td>
  <a class="nav2" href=" ...
  <a class="nav2" href=" ...
Die CSS-Anweisungen für die Textlinks werden «verbunden» über das zusätzliche Attribut 'class' mit dem Eintrag "nav2".


  Aufwand:

  • CSS-Anweisungen im Head notieren
  • Menülinks z.B. in einer Tabelle platzieren
  • Linkbreite und Tabellenbreite anpassen
  • Farben und Textformatierung anpassen
Das Menü steht innnerhalb einer Tabelle. Verwendet werden CSS formatierte Textlinks. Für die Linkformatierung wird eine Unterklasse 'nav2 / nav3 ' festgelegt (Breite, Höhe; Rand, Textfarbe, Textgröße, ... ).

Die Formatierung des Tabellenrands und der Tabellenzelle der Überschrift wird nun ebenfalls mit CSS umgesetzt.


Menü 03 c
Greifvögel Adler Bussarde Falken Geier Habichte Milane Sperber Weihen habichtartige falkenartige
width:160px;
margin-top:2px;
padding:1px



  Link-Formatierung Menü 03-c 


/* Menü 03 c */

a.nav1:link {
display:block;
background-color:#EFEFEF;
color:#5F5F5F;
font-family:Verdana,Helvetia,sans-serif;
font-size:11px;
text-decoration:none;
border: 1px solid #5F5F5F;
margin-top:2px;
padding:1px;
width:160px;
height:14px;
text-align:center;
vertical-align:middle;
text-transform:none;
}

a.nav1:visited {
display:block;
background-color:#EFEFEF;
color:#5F5F5F;
font-family:Verdana,Helvetia,sans-serif;
font-size:11px;
text-decoration:none;
border: 1px solid #5F5F5F;
margin-top:2px;
padding:1px;
width:160px;
height:14px;
text-align:center;
vertical-align:middle;
text-transform:none;
}

a.nav1:hover {
display:block;
background-color:#3F3F3F;
color:#FFFFFF;
font-family:Verdana,Helvetia,sans-serif;
font-size:11px;
text-decoration:none;
border: 1px solid #5F5F5F;
margin-top:2px;
padding:1px;
width:160px;
height:14px;
text-align:center;
vertical-align:middle;
text-transform:none;
}

a.nav1:active {
display:block;
background-color:#0070C0;
color:#FFFFFF;
font-family:Verdana,Helvetia,sans-serif;
font-size:11px;
text-decoration:none;
border: 1px solid #5F5F5F;
margin-top:2px;
padding:1px;
width:160px;
height:14px;
text-align:center;
vertical-align:middle;
text-transform:none;
}



  Link-Notierung Menü 03-c 


<a class="nav1" href="#">Greifvögel</a>



  Menü-Titel CSS-Anweisung Menü 03-c

Das Menü habe ich in eine Tabelle eingebettet. Sämtliche Links stehen innerhalb einer einzigen Tabellenzelle! So ist es mir möglich eine zweite Tabellenzelle oberhalb der Links für einen Menütitel zu nutzen. Die Inline-Formatierung (Farben) passen sie dem Menü an. 
<table width="160" cellpadding="0" border="0" cellspacing="1">
<tr><td style="border: 1px solid #000000;
font-size:12px; color:#FFFFFF" align="center"
bgcolor="#FF80FF" height="25">

Menü 03 c

</td></tr>
<tr><td>

hier stehen die Links

</td></tr>
</table>









NACH OBEN