CSS Navigation in Typolight implementieren
Hallo Community,
dieses Thema ist schon recht oft aufgekommen, leider komme ich nicht so richtig weiter. Das Design habe ich mit Hilfe der Template-Lösung umgesetzt, funktioniert auch einwandfrei (siehe Screencast).
Das einzige Problem ist hierbei die Navigation, da es eine Javascript Navigation ist, horizontal-dropdown.
Folgenden Stylesheet-Code möchte ich im Typolight umsetzen (die Menustrüktur soll sich ja aus der Seitenstruktur ergeben). Leider bin ich ja ein kompletter Neuling in Sachen Typolight:
Code:
ul.menu {list-style:none; margin:0; padding:0}
ul.menu * {margin:0; padding:0}
ul.menu a {display:block; color:#689fc9; text-decoration:none}
ul.menu li {position:relative; height:auto; width:auto; float:left; margin-right:2px}
ul.menu ul {position:absolute; top:31px; left:auto; background:#000000; display:none; list-style:none}
ul.menu ul li {position:relative; border:1px solid #526473; border-top:none; width:148px; margin:0}
ul.menu ul li a {display:block; padding:3px 7px 5px; background-color:#526473; color:#363636}
ul.menu ul li a:hover {background-color:#a3cb51}
ul.menu ul ul {left:148px; top:-1px}
ul.menu .menulink {border:1px solid #526473; padding:5px 7px 7px; font-weight:bold; background:url(bilder/header_neu.gif); width:134px}
ul.menu .menulink:hover, ul.menu .menuhover {background:url(bilder/header_over_neu.gif)}
ul.menu .sub {background:#6da3cd url(bilder/arrow.gif) 136px 8px no-repeat}
ul.menu .topline {border-top:1px solid #526473}
Außerdem müsste in der index-Datei noch ein Javascript Snippet eingebunden werden:
Code:
<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>
Weiterhin muss natürlich auch im Head-Bereich das Javascript geladen werden. Dieses Snippet und die Einbindung der *.js-Datei habe ich in meiner *.tpl Datei realisiert.
Am Liebsten möchte ich die Navigation über das vorhandene NAVI-Template lösen. Hier bräuche ich Unterstützung. :eek:
(die Komplette Seite könnt ihr euch hier anschauen...so soll es auch mal in Typolight aussehen - www.primax-online.de).
Bitte korrigiert mich, falls etwas falsch sein sollte.
Beste Grüße
Erik
