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
Amazon Black Friday Woche startet
Auch in diesem Jahr präsentiert Amazon während der Black Friday Woche wieder erstklassige Schnäppchen in allen Kategorien. Kundinnen und Kunden können sich auf einzigartige Geschenkideen und interessante Angebote für die bevorstehende Weihnachtszeit freuen. Darüber hinaus gibt es eine Vielzahl weiterer Produkte mit attraktiven Preisnachlässen – und das elf Tage lang. Ab Freitag, den 17. November […]
Mit eigenem Buch zum Expertenstatus
Eigenes Buch. Nutzen Sie diese sensationelle Chance, ihre Reputation zu steigern und Bestsellerautor zu werden. Haben Sie sich auch schon immer gefragt, wie bekannte Größen der Wirtschaft es immer wieder schaffen, Bestseller zu landen? Nun, es gibt kein Geheimrezept für den Erfolg als Autor. Doch eins ist sicher: Sie müssen Ihre Leser begeistern und fesseln […]
Amazon Black-Friday-Woche vom 17. bis 27. November
Amazon Black-Friday-Woche. Der Shopping-Monat November beginnt und damit auch die Vorweihnachtszeit. Den Anfang macht der Singles Day Shopping am 11. November. Gefolgt vom Black Friday. Natürlich ist auch Amazon an diesem Tag wieder mit vielen Angeboten am Start. Schnäppchenjäger sollten sich daher die Zeit vom 17. bis 27. November vormerken. Die ersten Angebote sind bereits […]
Empfehlung: Die besten Midjourney Prompts
Midjourney Prompts. Künstliche Intelligenz (KI) ist heutzutage ein heiß diskutiertes Thema. Midjourney trägt zweifellos zu diesem Erfolg bei. Es handelt sich um einen benutzerfreundlichen KI-Generator, der hochwertige Bilder mit verschiedenen Motiven erzeugt. Der Zugriff auf Midjourney erfolgt ausschließlich über Textbefehle an einen Discord-Bot. Durch die Verwendung dieser Befehle, auch Prompts genannt, können neue KI-generierte Bilder […]
Keine Kommentare vorhanden