Wie bekomme ich die Navigation so wie auf http://www.wbb-world.de/ hin ?
Vielen Dank
Navigationsfrage
-
BenHW -
24. Januar 2010 um 16:36 -
Erledigt
-
Mit Grafiken und CSS...
-
- Teambeitrag
@ Ben
Was genau meinst du denn?
-
lukix, eine super Antwort von Dir. Respekt.
Tom, diese Navigation wie er sieh hat und auch mit dem Hover Effekt.
-
- Teambeitrag
Das ist die Standardnavi wie ich sie in jedem Stil drin habe, du kannst dir also einen beliebigen Stil von mir Herunterladen und das Mainmenü unten aus den CSS-Deklarationen Herauskopieren (der WBB-World-Stil ist von mir), am besten Simplicity oder Bar.
Du musst nur:
1. Die Menüicons wieder einblenden (ich mach die ja immer raus)
Der Hovereffekt ist eine einfache Hintergrundgrafik (das Dreieck) und der blaue Streifen ist Teil der Headergrafik.
-
- Teambeitrag
Davon bin ich ausgegangen. Du sollst ja auch nur die Deklarationen aus dem Stil kopieren. Ich poste dir das morgen hier mal.
-
- Teambeitrag
So, du nimmst einfach das hier:
CSS
Alles anzeigen#mainMenu { position: absolute; top: 207px; <--- Abstand von Oben einstellen z-index: 100; height: 35px; padding-right: 5px; padding-left: 0px; border: 0px; margin-left:30px; <--- Abstand von Links einstellen width:950px; } .mainMenu a { background-position: center top; float:left; font-size:1.1em; <--- Texthöhe einstellen font-weight:bold; height:35px; line-height:42px; text-align:center; text-decoration:none; border:none!important; padding: 0px 5px 0px 7px; text-shadow: 0 -1px 0 #237199; <--- Textschatten einstellen margin-right:3px; } .mainMenu .active a, .mainMenu .firstActive a, .mainMenu .lastActive a { background:transparent url(../images/stilordner/menuBG.png) no-repeat scroll 0 0; <--- Hovergrafik einstellen background-position: center top; text-shadow: 0 1px 0 #292A29; <--- Textschatten einstellen background-repeat: no-repeat; } .mainMenu a:hover { background:transparent url(../images/stilordner/menuBG.png) scroll 0 0; <--- Hovergrafik einstellen background-position: center top; text-shadow: 0 1px 0 #292A29; <--- Textschatten einstellen background-repeat: no-repeat; }Damit sollte das dann passen. Alle relevanten Teile sind markiert.