|
|||
Crocko.com Navigation Nachbau
Hallo, würde gerne mal die Navigation von crocko.com nachbauen, nun meine Frage wie wurde die umgesetzt - Only HTML/CSS oder auch Javascript?
Hier ein Bild: http://abload.de/img/555o6kie.png Wenn einer weis in welche "Richtung" es geht bitte ein paar Stichworte nennen, ich google mich da recht fix durch. Gruß me01 |
Sponsored Links |
|
||||
Hab mal was auf die schnelle gemacht.
Ist reines HTML + CSS. Für neue Browser ist das aufjedenfall ausreichend und crock.com nutzt das auch. Kann nur sein das ältere Browser damit schwierigkeiten haben, ich würde sogar sicher sein Für mehr informationen: SELFHTML: Stylesheets / CSS-basierte Layouts / Navigationsleisten LG Hut HTML-Code:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <style> .navi .activ{background-color:#90b53b; padding:4px 18px; float:left;color:#FFF; margin:0px 8px 0px 8px; font-family:Franklin Gothic Demi, Arial,Tahoma,Helvetica,sans-serif;font-size:14px; text-shadow: #000 0 1px 1px; -moz-border-radius:12px;-webkit-border-radius:12px;border-radius:12px; } .navi ul{ margin:0px;padding:0px; float:left; } .navi li{ float:left;display: inline; list-style:none;padding:0px;margin:0px; } .navi li a{ margin:0px; display:block;font-family:Franklin Gothic Demi, Arial,Tahoma,Helvetica,sans-serif; text-align:center; text-decoration:none; padding:4px 18px;color:#7a7a7a; text-shadow: #fff 0 1px 1px;font-size:14px; } .navi li a:hover{ display:block; text-align:center; text-decoration:none;background-color:#d6dec5; padding:4px 18px;color:#7a7a7a;font-size:14px; -moz-border-radius:12px;-webkit-border-radius:12px;border-radius:12px; } </style> </head> <body> <div class="navi"> <ul> <li><span class="activ">Dateien Hochladen</span></li> <li><a href="#">Tour</a></li> <li><a href="#">Premium</a></li> </ul> </div> </body> </html> Geändert von Schwarzerhut (22.06.2013 um 01:28 Uhr) |
Sponsored Links |
|
|||
Hab dein Code für meine Zwecke mal angepasst:
Code:
<style> #navigation .active{ font: 12px Verdana, Tahoma, Arial; font-weight: bold; text-shadow: #000 0 1px 1px; color: #fff; background-color: #333; border-radius: 12px; padding: 5px 18px; -moz-border-radius: 12px; -webkit-border-radius: 12px; } #navigation ul{ float: left; margin: 13px 0px 0px 175px; } #navigation li{ float: left; list-style: none; padding: 0px; margin: 0px; } #navigation li a{ font: 12px Verdana, Tahoma, Arial; font-weight: bold; text-align: center; text-shadow: #fff 0 1px 1px; color: #7a7a7a; padding: 5px 18px; margin: 0px 3px; } #navigation li a:hover{ font: 12px Verdana, Tahoma, Arial; font-weight: bold; color: #7a7a7a; background-color: #e2e2e2; padding: 5px 18px; border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px; } </style> <div id="navigation"> <ul> <li><a href="#"><span class="active">Startseite</span></a></li> <li><a href="#">Seite 1</a></li> <li><a href="#">Seite 2</a></li> <li><a href="#">Seite 3</a></li> <li><a href="#">Seite 4</a></li> </ul> </div> Die Startseite ist natürlich auch eine URL - jetzt taucht das Problem auf das wenn ich über "Startseite" fahre das #navigation li a:hover vom CSS mit angezeigt wird, heißt das der graue border background von den anderen nicht class="active" ebenfalls versetzt angezeigt wird. Einfache Lösung: die background-color von #navigation li a:hover anpassen und die gleiche Farbe wie in #navigation .active verwenden. Funktioniert auch, allerdings gilt dieser background dann auch für die anderen nicht class="active" links auch. Hat da jemand eine saubere Lösung? Das einzige was noch nicht funktioniert bzw. stört ist das wenn ich über den link Startseite fahre der graue border background von #navigation li a:hover angezeigt wird. |
|
|||
Perfekt! So ähnlich hatte ich vorher auch rumprobiert aber anders: ich hatte
statt deinem #navigation .active:hover ein a.active1:hover gemacht und #navigation .active2 diese hab ich dann beide verwendet, was aber nicht richtig funktioniert hatte. Wusste halt nicht das man ner class direkt ein hover geben kann. Danke dir nochmals |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Ausrichtung Kalender | greece4u | CSS | 20 | 14.05.2012 14:32 |
Navigation ist nicht mittig | Schokokrapfen | CSS | 29 | 20.09.2011 00:19 |
Problem mit Navigation | safari | CSS | 12 | 20.04.2011 12:11 |
Float-Problem? | mischaef | CSS | 33 | 20.10.2010 17:20 |
Javascript UL Navigation im IE6 | ven | CSS | 7 | 29.04.2008 16:29 |