|
||||
CSS Tab-Menu
Hallo,
ich würde gerne ein schönes Tab-Menu bauen analog zu dem Beispiel hier: soll ungefär so aussehen:Dynamic Drive DHTML Scripts -DD Tab Menu (5 styles) Code:
<style> html, body { margin: 0px; padding: 0px; } body { text-align: center; } #Wrapper { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #333333; text-align: left; width: 765px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding: 0px; } #Container { background-color: #D0D2C1; color: #333; clear: both; margin: 0px; padding-top: 2.2em; padding-right: 0; padding-bottom: 0; padding-left: 0; width: 765px; float: left; border: 1px solid #C0C0C0; display: block; } #Content { background-color: #FFFFFF; border-top-width: 1px; border-top-style: solid; border-top-color: #C0C0C0; padding-top: 10px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; margin: 0px; width: auto; height: auto; } #Navigation { margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #333333; position: relative; height: 50px; display: block; width: auto; } ul#primary { margin: 0; padding: 0; position: absolute; bottom: -1px; width: 658px; } ul#primary li { display: inline; list-style: none; } ul#primary a,ul#primary a.active { width: 10em; display: block; float: left; text-align: center; font-family: tahoma, verdana, sans-serif; font-size: 11px; text-decoration: none; color: #333; letter-spacing: .1em; margin-top: 0px; margin-right: 2px; margin-bottom: 0; margin-left: 0; padding-top: 4px; padding-right: 0; padding-bottom: 4px; padding-left: 0; } ul#primary a.active,ul#primary a.active:hover { border-top: 1px solid #c0c0c0; border-right: 1px solid #c0c0c0; border-bottom: none; border-left: 1px solid #c0c0c0; background: #D0D2C1; color: #333; margin-top: 0; margin-right: 2px; margin-bottom: 0px; margin-left: 0px; padding-top: 4px; padding-right: 0px; padding-bottom: 4px; padding-left: 0px; } ul#primary a { background: #e8e9e1; border-top: 1px solid #c0c0c0; border-right: 1px solid #c0c0c0; border-bottom: none; border-left: 1px solid #c0c0c0; margin-top: 0px; margin-right: 2px; margin-bottom: 0px; margin-left: 0px; padding-top: 4px; padding-right: 0px; padding-bottom: 3px; padding-left: 0px; } ul#primary a:hover { margin-top: 1; border-color: #c0c0c0; background: #F1F1ED; color: #333; padding-bottom: 3px; margin-right: 2px; margin-bottom: 0px; margin-left: 0px; padding-top: 4px; padding-right: 0px; padding-left: 0px; } ul#secondary { position: absolute; margin: 0; padding: 0; bottom: -1.6em; left: 1px; width: 100%; } ul#secondary li a { width: auto; display: block; float: left; padding: 0 10px; margin: 0; text-align: center; border-top: none; border-right: 1px dotted #c0c0c0; border-bottom: none; border-left: none; background: none; color: #666; background-color: #D0D2C1; text-decoration: none; } ul#secondary li a:hover { color: #333; background-color: #D0D2C1; border-top: none; border-right: 1px dotted #c0c0c0; border-bottom: none; border-left: none; margin: 0px; padding-top: 0; padding-right: 10px; padding-bottom: 0; padding-left: 10px; } ul#secondary li a:active { color: #000; background-color: #D0D2C1; } ul#secondary li:last-child a { border: none; } </style> </head> <body> <div id="Wrapper"> <div id="Navigation"> <ul id="primary"> <li><a href="#">home</a></li> <li><a href="#" class="active">services</a> <ul id="secondary"> <li><a href="#">web design</a></li> <li><a href="#">flash design</a></li> <li><a href="#">content management</a></li> </ul> </li> <li><a href="#">about us</a></li> <li><a href="#">contact us</a></li> </ul> </div> <div id="Container"> <div id="Content"> </div> </div> </div> Die habe ich als 2.te ul/li Liste dargestellt. Jetzt würde ich gerne das wenn ich mit der Mouse darüber fahre(Rollover), das bereits das Submenu angezeit wird, und auch auf die Tabs geklickt werden kann. Hat jemand evtl. eine Idee oder schon Erfahrung mit solchen schönen Menüs? Viele liebe Grüße jenny |
Sponsored Links |
|
||||
Hier hat Langenberg so etwas gebaut: Cascading Style Sheets { Tutorial : Hybride CSS Menüs }
Allerdings kommt du so um JavaScript nicht herum d.h. alle ohne JS können deinen Navigation nicht ausreichend verwenden.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen! Foren-FAQ |
Sponsored Links |
|
||||
Ich würde das JavaScript nur benutzen, damit der IE es auch kapiert, alle anderen beherrschen ":hover" auch für andere Elemente als <a>.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen! Foren-FAQ |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Kindelement eines ausgeblendeten Elternelementes ansprechen | wandler | CSS | 7 | 19.06.2010 02:32 |
CSS Flyout Menu z-index Problem? | Deluxestyler | CSS | 6 | 18.05.2010 13:05 |
Css Tree Fly Menu | thiagojonas | CSS | 7 | 30.12.2008 21:10 |
CSS Menu - active Seite hervorheben | celine70 | CSS | 2 | 20.12.2008 00:59 |
CSS Tips & Tricks | Webnauts | Ressourcen | 0 | 26.08.2006 00:04 |