CSS
Desk
ß
Reset
Reset the code to the default
Blueprint
Grid
Desk
White
Black
12 col
16 col
Change the background
Save
Save your changes to this link
Share
Create a permanent link for this code
Download
Download this code as a file
«
HTML
<div id="wrapper"> <div id="navigation"> <ul> <li class="navileft" id="navileft_css"><a href="http://www.freizeitler.de/category/css/" title="CSS">CSS »</a> <div class="naviinner"><h5>Codeschnippsel, Lösungen & Tipps zu CSS</h5> <ul> <li><a href="http://www.freizeitler.de/2010/11/html5-und-css3-immer-nur-am-ball-bleiben-reicht-nicht/" rel="bookmark" title="HTML5 und CSS3: Immer nur am Ball bleiben reicht nicht…">HTML5 und CSS3: Immer nur am Ball bleiben reicht nicht…</a></li> <li><a href="http://www.freizeitler.de/2009/09/css-f-i-m-%e2%80%93-die-fake-image-map-ohne-gif/" rel="bookmark" title="CSS: F.I.M. (Fake Image Map) – eine CSS-Image-Map ohne Gif">CSS: F.I.M. (Fake Image Map) – eine CSS-Image-Map ohne Gif</a></li> <li><a href="http://www.freizeitler.de/2009/07/css-highlighting-boxes-produkte-hervorheben-mit-hover/" rel="bookmark" title="CSS: Highlighting Boxes. Produkte hervorheben mit :hover">CSS: Highlighting Boxes. Produkte hervorheben mit :hover</a></li> <li><a href="http://www.freizeitler.de/2009/04/css-ein-vertikales-undoder-horizontales-dropdown-menu/" rel="bookmark" title="CSS: Ein vertikales und/oder horizontales Dropdown-Menü">CSS: Ein vertikales und/oder horizontales Dropdown-Menü</a></li> <li><a href="http://www.freizeitler.de/2009/02/css-fim-fake-image-map-eine-alternative-zur-image-map/" rel="bookmark" title="CSS: F.I.M. – Fake Image Map. Eine Alternative zur echten Image Map">CSS: F.I.M. – Fake Image Map. Eine Alternative zur echten Image Map</a></li> </ul> </div> </li> <li class="navileft" id="navileft_tools-n-tipps"><a href="http://www.freizeitler.de/category/tools-n-tipps/" title="Tools & Tipps">Tools & Tipps »</a> <div class="naviinner"><h5>Tipps zu Software, Tools und Coding</h5> <ul> <li><a href="http://www.freizeitler.de/2010/11/adobes-project-rome-eine-fur-alles-neues-multimedia-browser-tool/" rel="bookmark" title="Adobes Project ROME: Eine für alles. Neues Multimedia (Browser-)Tool">Adobes Project ROME: Eine für alles. Neues Multimedia (Browser-)Tool</a></li> <li><a href="http://www.freizeitler.de/2010/10/data-storage-kostenloser-speicherplatz-im-netz/" rel="bookmark" title="Data Storage: Kostenloser Speicherplatz im Netz">Data Storage: Kostenloser Speicherplatz im Netz</a></li> <li><a href="http://www.freizeitler.de/2010/09/typografie-schriftsatz-im-webdesign-die-theoretischen-grundlagen/" rel="bookmark" title="Typografie: Schriftsatz im Webdesign – die theoretischen Grundlagen">Typografie: Schriftsatz im Webdesign – die theoretischen Grundlagen</a></li> <li><a href="http://www.freizeitler.de/2010/08/kleine-werkzeugkunde-die-api-von-dreamweaver/" rel="bookmark" title="Kleine Werkzeugkunde: Die API von Dreamweaver">Kleine Werkzeugkunde: Die API von Dreamweaver</a></li> <li><a href="http://www.freizeitler.de/2010/07/kurz-notiert-neue-webschriften-mit-google-font-api/" rel="bookmark" title="Kurz notiert: Neue Webschriften mit Google Font API">Kurz notiert: Neue Webschriften mit Google Font API</a></li> </ul> </div> </li> <li class="navileft" id="navileft_downloads"><a href="http://www.freizeitler.de/category/downloads/" title="Downloads">Downloads »</a> <div class="naviinner"><h5>Codesnippets, Experimente, Vorlagen zum runterladen</h5> <ul> <li><a href="http://www.freizeitler.de/2010/11/html5-und-css3-immer-nur-am-ball-bleiben-reicht-nicht/" rel="bookmark" title="HTML5 und CSS3: Immer nur am Ball bleiben reicht nicht…">HTML5 und CSS3: Immer nur am Ball bleiben reicht nicht…</a></li> <li><a href="http://www.freizeitler.de/2010/08/kleine-werkzeugkunde-die-api-von-dreamweaver/" rel="bookmark" title="Kleine Werkzeugkunde: Die API von Dreamweaver">Kleine Werkzeugkunde: Die API von Dreamweaver</a></li> <li><a href="http://www.freizeitler.de/2009/09/css-f-i-m-%e2%80%93-die-fake-image-map-ohne-gif/" rel="bookmark" title="CSS: F.I.M. (Fake Image Map) – eine CSS-Image-Map ohne Gif">CSS: F.I.M. (Fake Image Map) – eine CSS-Image-Map ohne Gif</a></li> <li><a href="http://www.freizeitler.de/2009/07/css-highlighting-boxes-produkte-hervorheben-mit-hover/" rel="bookmark" title="CSS: Highlighting Boxes. Produkte hervorheben mit :hover">CSS: Highlighting Boxes. Produkte hervorheben mit :hover</a></li> <li><a href="http://www.freizeitler.de/2009/04/css-ein-vertikales-undoder-horizontales-dropdown-menu/" rel="bookmark" title="CSS: Ein vertikales und/oder horizontales Dropdown-Menü">CSS: Ein vertikales und/oder horizontales Dropdown-Menü</a></li> </ul> </div> </li> <li class="navileft" id="navileft_javascript"><a href="http://www.freizeitler.de/category/javascript/" title="Javascript">Javascript »</a> <div class="naviinner"><h5>JS, JQuery, Mootools...</h5> <ul> <li><a href="http://www.freizeitler.de/2010/12/head-js-externe-javascripte-asynchron-laden/" rel="bookmark" title="head.js: Externe JavaScripts asynchron laden">head.js: Externe JavaScripts asynchron laden</a></li> <li><a href="http://www.freizeitler.de/2010/08/kurz-notiert-die-suche-nach-der-smart-sticky-floating-box/" rel="bookmark" title="Kurz notiert: Die Suche nach der Smart Sticky Floating Box">Kurz notiert: Die Suche nach der Smart Sticky Floating Box</a></li> <li><a href="http://www.freizeitler.de/2008/11/wordpress-freizeitlers-nonpurista-theme/" rel="bookmark" title="Wordpress: Freizeitlers NonPurista!-Theme">Wordpress: Freizeitlers NonPurista!-Theme</a></li> <li><a href="http://www.freizeitler.de/2008/10/mootools-fading-opacity-schickes-menu-mit-mouseover/" rel="bookmark" title="MooTools: Fading Opacity. Schickes Menü mit Mouseover">MooTools: Fading Opacity. Schickes Menü mit Mouseover</a></li> <li><a href="http://www.freizeitler.de/2008/10/javascript-von-der-multibox-uber-tooltips-zu-mootools/" rel="bookmark" title="Javascript: Von der Multibox über Tooltips zu MooTools">Javascript: Von der Multibox über Tooltips zu MooTools</a></li> </ul> </div> </li> <li class="navileft" id="navileft_html"><a href="http://www.freizeitler.de/category/html/" title="HTML">HTML »</a> <div class="naviinner"><h5>Rund um HTML</h5> <ul> <li><a href="http://www.freizeitler.de/2010/11/html5-und-css3-immer-nur-am-ball-bleiben-reicht-nicht/" rel="bookmark" title="HTML5 und CSS3: Immer nur am Ball bleiben reicht nicht…">HTML5 und CSS3: Immer nur am Ball bleiben reicht nicht…</a></li> <li><a href="http://www.freizeitler.de/2010/08/kurz-notiert-paul-irish-und-seine-html5-boilerplate/" rel="bookmark" title="Kurz notiert: Paul Irish und seine HTML5 ★ Boilerplate">Kurz notiert: Paul Irish und seine HTML5 ★ Boilerplate</a></li> <li><a href="http://www.freizeitler.de/2009/08/html-farbliche-konzeption-im-sinne-des-w3c-wcag-20/" rel="bookmark" title="Webkrauts: Kontrastreiche Farbwelten">Webkrauts: Kontrastreiche Farbwelten</a></li> <li><a href="http://www.freizeitler.de/2009/03/html-was-bedeutet-eigentlich-semantik/" rel="bookmark" title="HTML: Was bedeutet eigentlich Semantik?">HTML: Was bedeutet eigentlich Semantik?</a></li> <li><a href="http://www.freizeitler.de/2009/02/html-form-action-mehr-uber-formulare-in-aktion/" rel="bookmark" title="HTML: form action. Mehr über Formulare in Aktion">HTML: form action. Mehr über Formulare in Aktion</a></li> </ul> </div> </li> <li class="navileft" id="navileft_schlagzeilen"><a href="http://www.freizeitler.de/category/schlagzeilen/" title="Kurz notiert">Kurz notiert »</a> <div class="naviinner"><h5>Nachrichten</h5> <ul> <li><a href="http://www.freizeitler.de/2010/12/head-js-externe-javascripte-asynchron-laden/" rel="bookmark" title="head.js: Externe JavaScripts asynchron laden">head.js: Externe JavaScripts asynchron laden</a></li> <li><a href="http://www.freizeitler.de/2010/10/data-storage-kostenloser-speicherplatz-im-netz/" rel="bookmark" title="Data Storage: Kostenloser Speicherplatz im Netz">Data Storage: Kostenloser Speicherplatz im Netz</a></li> <li><a href="http://www.freizeitler.de/2010/08/kurz-notiert-paul-irish-und-seine-html5-boilerplate/" rel="bookmark" title="Kurz notiert: Paul Irish und seine HTML5 ★ Boilerplate">Kurz notiert: Paul Irish und seine HTML5 ★ Boilerplate</a></li> <li><a href="http://www.freizeitler.de/2010/08/kurz-notiert-die-suche-nach-der-smart-sticky-floating-box/" rel="bookmark" title="Kurz notiert: Die Suche nach der Smart Sticky Floating Box">Kurz notiert: Die Suche nach der Smart Sticky Floating Box</a></li> <li><a href="http://www.freizeitler.de/2010/07/kurz-notiert-neue-webschriften-mit-google-font-api/" rel="bookmark" title="Kurz notiert: Neue Webschriften mit Google Font API">Kurz notiert: Neue Webschriften mit Google Font API</a></li> </ul> </div> </li> </ul> </div><!--End Navigation --> </div>
CSS
body { background: #666; font: 14px/1.5 Geneva, Arial, Helvetica, sans-serif; } #wrapper { width: 60%; position: relative; } #navigation { position: relative; } #navigation .navileft { width: 120px; height: 40px; background: #000; position: absolute; z-index: 21; overflow: hidden; padding: 9px 10px 0 10px; font-size: 1em; color: #fff; } #navigation .navileft:hover { width: 100%; height: auto; background: #ddd; z-index: 20; color: #fff; padding: 9px 0px 0px 10px; margin-left: 10px; } #navigation .naviinner { margin: -55px 0 0 130px; padding: 0 60px 10px 0; font-weight: normal; font-style: normal; color: #000; background: #ddd; position: relative; } #navigation .naviinner h5 { background: #660000; color: #eee; font-size: 1.1em; padding: 0px 40px 0px 3px; margin: 1.5em 0 15px 0; font-weight: normal; } #navigation .naviinner ul li a { width: auto; height:auto; color: #333; background: #CDCCCC; text-decoration: none; font-size: 0.9em; text-align: left; text-shadow: 1px 1px 0px #efefef; padding-top: 0; } #navigation .naviinner ul li a:hover { color: #fff; background: #660000; text-shadow: 1px 1px 0px #222; } #navigation .naviinner ul{ list-style: none; } #navigation .naviinner ul li{ margin: 0 0 0.5em 0; padding: 0 0 0 15px;; } #navigation .navileft a { font-size: 1.1em; display: block; width: 120px; height: 33px; text-decoration:none; color: #aaa; background:none; text-align: right; padding: 7px 2px 0 2px; margin: 0 -2px; } #navigation .navileft a:hover { color: #000; background: none; } #navigation .navileft, #navigation .naviinner { -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } #navigation .naviinner h5, #navigation .navileft a { -moz-border-radius: 5px; -khtml-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } #navigation .navileft:hover { -moz-box-shadow: 3px 3px 5px #222; -webkit-box-shadow: 3px 3px 5px #222; box-shadow: 3px 3px 5px #222; } /* XXXXX Kategorien einzeln ansprechen XXXXX*/ #navileft_css { top: 50px; } #navileft_downloads { top: 250px; } #navileft_html { top: 100px; } #navileft_javascript { top: 200px; } #navileft_tools-n-tipps { top: 150px; } #navileft_schlagzeilen { top: 0px; }
