Auf der Webseite von csstea.com gibt es in der Rubrik Freebies ein tolles Free CSS Menu-Package zum freien Download.
Das kostenlose Download-Angebot beinhaltet fünf verschiedene horizontale CSS Menüs in den Farben rot, grün, blau, gelb, schwarz.
Lizenzbedingungen:
Zitat: You are allowed to use it for commercial or non-commercial projects (keine Einschränkungen hinsichtlich der Verwendung!).
Meine Bearbeitung ansehen:
Im Gegensatz zu csstea.com können Sie hier in meinem Artikel alle 5 CSS-Menüs in einer HTML-Datei ansehen und downloaden. Der Quelltext ist für alle Farben der gleiche und auch die CSS-Anweisungen ändern sich nur hinsichtlich der Farbe der Grafiken.
Fertiges Beispiel: (*zip*Datei: 14KB)
Quellcode-Beispiel für das rote CSS Menü:
HTML:
1 2 3 4 5 6 7 8 9 10 11 | <h2>Red Horizontal Menu</h2> <div id="redline"> <ul> <li><a title="Home" href="#">Home</a></li> <li><a title="About us" href="#">About us</a></li> <li><a title="Services" href="#">Services</a></li> <li><a title="Products" href="#">Products</a></li> <li><a title="Support" href="#">Support</a></li> <li><a title="Contact us" href="#">Contact us</a></li> </ul> </div> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 | /* ---------- MENU: REDLINE CSS STYLE -------------- */ #redline, #redline ul, #redline ul li, #redline ul li a { margin: 0; } #redline, #redline ul { padding: 0; } #redline ul li a , #redline ul li { display: block; float: left; } #redline { width: 100%; margin: 0; font-size: 95%; } #redline ul { list-style: none; background: url(images/red/menubg.gif) repeat-x 0 50%; overflow: hidden; border: 1px solid #c01700; } #redline ul li { padding: 0 2px 0 0; background: url(images/red/separator.gif) no-repeat 100% 50%; } #redline ul li a { color: #fff; font-weight: bold; text-decoration: none; } #redline ul li a:link, #redline ul li a:visited { padding: 7px 10px; } #redline ul li a:hover, #redline ul li a:active { background: url(images/red/menubg_h.gif) repeat-x 0 50%; } |
Fertiges Beispiel: (*zip*Datei: 14KB)
Ähnliche Artikel:
Diagonale CSS-Navigation mit Rollover-Effect (CSS)
5 Beispiele, wie Sie ungeordnete Listen formatieren können
Zitate mit CSS gestalten – Styling Blockquotes
Tags: CSS, css menu, free css menus, gratis CSS Menüs, HTML, kostenlose CSS-Menüs, www.csstea.com
