CSS Menüs
Hier finden Sie verschiedene Menüs die per CSS und HTML-Listen gestaltet sind. Alle vorgestellten Codebeispiele können Sie frei in Ihren Webseiten verwenden.
CSS Menübeispiel 1
Bei diesem CSS Menü können Sie verschiedene Kategorientrenner definieren (#menuebox li.trenner). Mit der Maus überfahrene Links werden mit einem Hover Effekt hellblau dargestellt, aktive Links können Sie mittels #menuebox a.aktuell hervorheben.
Komplettes Codebeispiel
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>CSS Menü</title>
<style type="text/css">
/* - - - - - - - - - - - - - - - - - - - - */
/* BODY */
/* - - - - - - - - - - - - - - - - - - - - */
body, html {
background-color: #F5F6F8;
font-family: Verdana, Arial, sans-serif;
color: #000000;
}
/* - - - - - - - - - - - - - - - - - - - - */
/* MENUE CSS */
/* - - - - - - - - - - - - - - - - - - - - */
#menuebox {
margin: 0;
padding: 1px;
border: 1px solid #dddddd;
background-color: #ffffff;
font-size: 12px;
position: relative;
top: 0;
left: 0;
}
#menuebox ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#menuebox li {
margin: 0;
padding: 0;
text-align: left;
}
#menuebox li.trenner {
background-color: #495398;
color: #ffffff;
padding: 4px;
margin: 1px;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
}
#menuebox a {
display: block;
background-color: #f5f5f5;
color: #990000;
padding: 3px 6px 3px 6px;
margin: 1px;
width: auto;
font-size: 11px;
text-decoration: none;
border-left: 4px solid #e8e8e8;
border-right: 4px solid #e8e8e8;
}
#menuebox a:hover {
background-color: #e9eaf3;
color: #000000;
border-left: 4px solid #ffcc00;
border-right: 4px solid #ffcc00;
}
#menuebox a.aktuell {
background-color: #ffcc00;
color: #000000;
border-left: 4px solid #495398;
border-right: 4px solid #495398;
}
</style>
<script type="text/javascript">
<!--
function no_linkborder() {
allelinks = document.getElementsByTagName('a');
for(i = 0; i < allelinks.length; i++) {
allelinks[i].onfocus = new Function("if (this.blur) this.blur()");
}
}
onload = no_linkborder;
-->
</script>
</head>
<body>
<!-- CODEBLOCK ANFANG -->
<div id="menuebox" style="width: 160px;">
<ul>
<li class="trenner">» Kategorie 1</li>
<li><a href="#">Homepage</a></li>
<li><a class="aktuell" href="#">Forum</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Impressum</a></li>
<li class="trenner">» Kategorie 2</li>
<li><a href="#">Google</a></li>
<li><a href="#">Yahoo</a></li>
<li><a href="#">Heise</a></li>
</ul>
</div>
<!-- CODEBLOCK ENDE -->
</body>
</html>
Das im Quellcode des CSS Menüs eingebaute Javascript dient hier dazu die gepunkteten Linien um angeklickte Links zu unterdrücken. Hierbei werden alle Links des Dokumentes erfasst (document.getElementsByTagName(‚a‘)) und automatisch auf blur() gesetzt.
Weitere Beiträge
Letzter Tag: Amazon Black Friday Deals für Technik-Liebhaber
Die Black Friday Woche bei Amazon endet heute, und Technik-Liebhaber sollten jetzt zugreifen. Für Betreiber von Webseiten oder Kreative gibt es viele spannende Angebote. Von leistungsstarken Laptops bis hin zu Software-Lizenzen finden Sie heute zahlreiche reduzierte Produkte. Auch Zubehör wie kabellose Tastaturen, externe Festplatten oder USB-Hubs sind oft günstiger erhältlich.
Meta Quest 3: Entdecken Sie das aktuelle VR-Headset
Die Meta Quest 3 ist das aktuelle Mixed-Reality-Headset von Meta, das innovative Technologien vereint, um ein einzigartiges VR-Erlebnis zu bieten. Diese VR-Brille stellt sowohl für Gelegenheitsnutzer als auch für Technikenthusiasten eine aufregende Möglichkeit dar, die Grenzen zwischen der physischen und digitalen Welt zu erkunden. Eine echte Alternative zur Apple Vison Pro. Wer etwas günstiger in […]
Amazon Prime Deal Days: Günstige Hardware-Angebote für Technikfans
Amazon bietet während der Prime Deal Days besonders günstige Hardware an. Das beliebte Shopping-Event läuft vom 8. bis 9. Oktober. Prime-Mitglieder dürfen sich auf exklusive Rabatte und Angebote freuen. Besonders Technikfans kommen in diesen zwei Tagen voll auf ihre Kosten.
Amazon-Vergleichstabellen erhöhen die Affiliate-Einnahmen
Amazon-Vergleichstabellen: Wer im Internet kaufen will, vergleicht zunächst Preise und Produkteigenschaften. Hier ist bei vielen Interessenten Amazon die erste Wahl. Gleichzeitig bietet der Branchenriese ein interessantes Partnerprogramm für Empfehlungen an. Wer sich damit ein zusätzliches Einkommen sichern möchte, bietet seinen Besuchern spezielle Amazon-Vergleichstabellen auf seiner Webseite an. So findet der Kunde schneller die relevanten Informationen […]
Keine Kommentare vorhanden