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
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 […]
Amazon startet den 10. Prime Day am 16. und 17. Juli
Prime Day 2024: Vom 16. bis 17. Juli haben Prime-Mitglieder exklusiven Zugang zu einer Vielzahl von Angeboten in verschiedenen Kategorien wie Bekleidung, Elektronik, Küche & Haushalt und Spielzeug. Neue Deals werden während des gesamten Zeitraums veröffentlicht, um Prime-Mitgliedern am zehnten Prime Day stets etwas Neues zu bieten. Die ersten Angebote sind bereits verfügbar. Weitere Produkte […]
Keine Kommentare vorhanden