|
|||
Multi-Level Navigation mit Grafiken
Hallo miteinander.
Ich habe ein Problem mit einem Multi-Level CSS Menü. Habe dazu eines von CSS Play genommen und modifiziert. Das Menü soll nur mit Grafiken realisiert werden. Fährt man über einen Link auf der ersten Ebene, geht die zweite Ebene darunter auf usw. Das klappt soweit auch ganz gut, bloß habe ich Schwierigkeiten das Menü aufgeklappt zu lassen, wenn man sich auf einem Subnavigationspunkt befindet. Hab da schon ewig daran herumgeschraubt, leider ohne Erfolg. Hat jemand schon so eine Navigation realisiert oder gibts vielleicht ein Beispiel im Netz? Wäre super wenn mir jemand weiterhelfen könnte. Anbei der Code: CSS: Code:
#nav { padding-left: 120px; list-style:none; height:39px; position:relative; z-index:200; width:860px;} #nav li.nav_bg { background: url(../img/navi/bg.gif) no-repeat; width: 200px; display: block; height:39px; float:left; } #nav table {position:absolute; top:0; left:0; border-collapse:collapse; padding:0; width:0; height:0; margin:-1px;} #nav ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;} #nav li:hover {position:relative; z-index:200;} #nav a:hover {position:relative; white-space:normal; z-index:200;} #nav li.top {display:block; float:left;} #nav li a {display:block; float:left; text-decoration:none; padding:0; cursor:pointer;} #nav li a strong {font-size: 0; color: #fff;} #nav li a.n1 {background:url(../img/navi/1.gif); height:39px; width:101px;} #nav li a.n2 {background:url(../img/navi/2.gif); height:39px; width:121px;} #nav li a.n3 {background:url(../img/navi/3.gif); height:39px; width:115px;} #nav li a.n4 {background:url(../img/navi/4.gif); height:39px; width:122px;} #nav li a.n5 {background:url(../img/navi/5.gif); height:39px; width:81px;} #nav li a.o1 {background:url(../img/navi/1.gif); height:39px; width:101px; background-position: 0 39px;} #nav li a.o2 {background:url(../img/navi/2.gif); height:39px; width:121px; background-position: 0 39px;} #nav li a.o3 {background:url(../img/navi/3.gif); height:39px; width:115px; background-position: 0 39px;} #nav li a.o4 {background:url(../img/navi/4.gif); height:39px; width:122px; background-position: 0 39px;} #nav li a.o5 {background:url(../img/navi/5.gif); height:39px; width:81px; background-position: 0 39px;} #nav li:hover a, #nav a:hover {background-position: 0 39px;} #nav :hover ul.sub3 {left:-422px; top:39px; width:600px; height:auto; z-index:300;} #nav :hover ul li {display:block; height:37px; position:relative; float:left; font-weight:normal;} #nav :hover ul li a {display:block; text-decoration:none; padding:0; cursor:pointer;} #nav :hover ul li a strong {position:absolute; font-size: 0; color: #fff; margin:0;} #nav :hover ul li a.n3a {background:url(../img/navi/3a.gif); height:37px; width:88px;} #nav :hover ul li a.n3b {background:url(../img/navi/3b.gif); height:37px; width:138px;} #nav :hover ul li a.n3c {background:url(../img/navi/3c.gif); height:37px; width:121px;} #nav :hover ul li a.n3d {background:url(../img/navi/3d.gif); height:37px; width:100px;} #nav :hover ul li a.n3e {background:url(../img/navi/3e.gif); height:37px; width:153px;} #nav :hover ul li a.o3a {background:url(../img/navi/3a.gif); height:37px; width:88px; background-position: 0 37px;} #nav :hover ul li a.o3b {background:url(../img/navi/3b.gif); height:37px; width:138px; background-position: 0 37px;} #nav :hover ul li a.o3c {background:url(../img/navi/3c.gif); height:37px; width:121px; background-position: 0 37px;} #nav :hover ul li a.o3d {background:url(../img/navi/3d.gif); height:37px; width:100px; background-position: 0 37px;} #nav :hover ul li a.o3e {background:url(../img/navi/3e.gif); height:37px; width:153px; background-position: 0 37px;} #nav :hover ul li:hover a, #nav :hover ul li a:hover {background-position: 0 37px; position:relative;} #nav ul.sub3 :hover ul.sub3d {left:0; padding-left: 100px; top:37px; width:152px; height:auto; z-index:400;} #nav ul.sub3 :hover ul li {display:block; height:36px; position:relative; float:left; font-weight:normal;} #nav ul.sub3 :hover ul li a {display:block; text-decoration:none; padding:0; cursor:pointer;} #nav ul.sub3 :hover ul li a strong {position:absolute; font-size: 0; color: #fff; margin:0;} #nav ul.sub3 :hover ul li a.n3d1 {background:url(../img/navi/3d1.gif); height:36px; width:76px;} #nav ul.sub3 :hover ul li a.n3d2 {background:url(../img/navi/3d2.gif); height:36px; width:76px;} #nav ul.sub3 :hover ul li a.o3d1 {background:url(../img/navi/3d1.gif); height:36px; width:76px; background-position: 0 36px;} #nav ul.sub3 :hover ul li a.o3d2 {background:url(../img/navi/3d2.gif); height:36px; width:76px; background-position: 0 36px;} #nav ul.sub3 :hover ul li a:hover {background-position: 0 36px; position:relative;} Code:
<ul id="nav"> <li class="nav_bg"> </li> <li class="top"><a href="index.php" <?php if($seite=="willkommen"){ ?>class="o1"<?php } else { ?>class="n1" <?php } ?> title="Willkommen"><strong>Willkommen</strong></a></li> <li class="top"><a href="wir.php" <?php if($seite=="wir"){ ?>class="o2"<?php } else { ?>class="n2" <?php } ?> title="Wir über uns"><strong>Wir über uns</strong></a></li> <li class="top"><a href="#nogo" <?php if($seite=="leistungen"){ ?>class="o3"<?php } else { ?>class="n3" <?php } ?> title="Leistungen"><strong>Leistungen</strong><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub3"> <li><a href="leistungen.php?p=sanierung" class="n3a" title="Sanierung"><strong>Sanierung</strong></a></li> <li><a href="leistungen.php?p=malerarbeiten" class="n3b" title="Malerarbeiten"><strong>Malerarbeiten</strong></a></li> <li><a href="leistungen.php?p=fussboden" class="n3c" title="Fußboden"><strong>Fußboden</strong></a></li> <li><a href="#nogo" class="n3d" title="Tadelakt"><strong>Tadelakt</strong><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub3d"> <li><a href="leistungen.php?p=tadelakt&s=einleitung" class="n3d1" title="Einleitung"><strong>Einleitung</strong></a></li> <li><a href="leistungen.php?p=tadelakt&s=seminare" class="n3d2" title="Seminare"><strong>Seminare</strong></a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="leistungen.php?p=naturfarben" class="n3e" title="Naturfarbenhandel"><strong>Naturfarbenhandel</strong></a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="top"><a href="impressum.php" <?php if($seite=="impressum"){ ?>class="o4"<?php } else { ?>class="n4" <?php } ?> title="Impressum"><strong>Impressum</strong></a></li> <li class="top"><a href="kontakt.php" <?php if($seite=="kontakt"){ ?>class="o5"<?php } else { ?>class="n5" <?php } ?> title="Kontakt"><strong>Kontakt</strong></a></li> </ul> Danke und Gruß |
Sponsored Links |
|
||||
Hey. Ich habe auch unter Vorlage von CSS Play eine solche Navigation so verändert, dass es nur mit Grafiken aufgebaut ist. Das Problem ist dann nur, dass es ohne JavaScript für den IE6 im IE6 nicht geht. Der braucht nämlich die Hintergrundfarbe zum Ändern, damit der den hover erkennt. Wenn du das Bild tauschst, dann stört den das auch nicht....
Nen Beispiel dafür gibt es unter Webdesign und TYPO3-Agentur Frankfurt (nicht auf der Startseite ) Die JavaScript datei ist dabei als csshover.htc eingebunden und die CSS findest du hier: http://www.wacon.de/inc/navi.css Ich habe es mit IE 6 und 7 sowie FF2 und 3 probiert und es klappt in allen Browsern gleich
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade! |
Sponsored Links |
|
|||
Hmmm ... also auf der genannten Seite habe ich nichts entsprechendes gefunden was mir weiterhelfen könnte... meinen wir das gleiche?
So siehts momentan aus: Code:
http://bogar.info/ |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit Navigation | safari | CSS | 12 | 20.04.2011 12:11 |
Hilfe bei CSS Navigation | trimalchio | CSS | 7 | 10.01.2011 14:13 |
Float-Problem? | mischaef | CSS | 33 | 20.10.2010 17:20 |
Multi Level Navigation | Carino | CSS | 0 | 03.07.2008 11:41 |
Javascript UL Navigation im IE6 | ven | CSS | 7 | 29.04.2008 16:29 |