XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Multi-Level Navigation mit Grafiken (http://xhtmlforum.de/showthread.php?t=52972)

koncrete 01.08.2008 14:50

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;}

HTML
Code:

<ul id="nav">

    <li class="nav_bg">&nbsp;</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&amp;s=einleitung" class="n3d1" title="Einleitung"><strong>Einleitung</strong></a></li>
                    <li><a href="leistungen.php?p=tadelakt&amp;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ß

Praktikant 01.08.2008 16:18

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 :)

koncrete 01.08.2008 16:26

Hmmm ... also auf der genannten Seite habe ich nichts entsprechendes gefunden was mir weiterhelfen könnte... meinen wir das gleiche? :mrgreen:

So siehts momentan aus:

Code:

http://bogar.info/
Die Navi bleibt auf der Unterseite von "Leistungen" nicht stehen. Das möchte ich noch ändern... Javascript brauche ich eigentlich keines dafür, und die Navi sollte auch in den gängigen Browsern soweit funktionieren...

Praktikant 02.08.2008 02:28

hmm... doch ^^ ich habe die Seite selber gemacht xD da werde ich ja auch wissen da dran ist ^^ und nen Drop-Down Menü ist dabei ^^ aber eben nicht auf der Startseite sondern nur auf den Unterseiten ^^

Das Drop-Down Menü bei mir ist aber nur einstufig und eine untereinander angeordnete Liste. Bei dir ist die Liste ja dann nebeneinander, was der einzige Unterschied ist. Bei mir funktioniert die Navigation im IE auch nur mit JavaScript, da ich weder Hintergrund- noch Textfarbe änder. Ich habe nur ein Bild dahinter, welches sich aber auch nicht verändert.


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:02 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020