CSS Menü Navigation Tasten – ohne Grafikelemente!

Ein sehr schönes Beispiel für ein Menü der intuitiven ON/OFF Tasten nur mit Hilfe von CSS. Keine einzige Grafik wird verwendet:

CSS Beispiel:
#menu a, #menu a:visited {
position:relative;
text-decoration:none;
text-align:center;
background-color:#9ab;
color:#fff;
display:block;
width:8em;
border:2px solid #fff;
border-color:#def #678 #345 #cde;
padding:0.25em;
margin:0.5em auto;
}

#menu a:hover {
top:2px;
left:2px;
color:#ffff00;
border-color:#345 #cde #def #678;
}

XHTML Beispiel:
<div id=“menu“>
<a xhref=“https://www.design-literatur.de/blog/#nogo“ mce_href=“https://www.design-literatur.de/blog/#nogo“ >Menu 1</a>
<a xhref=“https://www.design-literatur.de/blog/#nogo“ mce_href=“https://www.design-literatur.de/blog/#nogo“ >Menu 2</a>
<a xhref=“https://www.design-literatur.de/blog/#nogo“ mce_href=“https://www.design-literatur.de/blog/#nogo“ >Menu 3</a>
<a xhref=“https://www.design-literatur.de/blog/#nogo“ mce_href=“https://www.design-literatur.de/blog/#nogo“ >Menu 4</a>
<a xhref=“https://www.design-literatur.de/blog/#nogo“ mce_href=“https://www.design-literatur.de/blog/#nogo“ >Menu 5</a>
</div>

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Design Blog vom Designer

Offenlegung: Auf dieser Webseite finden Sie zum Teil Affiliate-Links. Das bedeutet, dass wir unter Umständen eine kleine Provision erhalten. Ohne zusätzliche Kosten für Sie. Damit helfen Sie uns weiterhin kostenlose Inhalte anzubieten. Vielen Dank!