zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Multi-Level Navigation mit Grafiken

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 01.08.2008, 15:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.08.2008
Beiträge: 5
koncrete befindet sich auf einem aufstrebenden Ast
Standard 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ß
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 01.08.2008, 17:18
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

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!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.08.2008, 17:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.08.2008
Beiträge: 5
koncrete befindet sich auf einem aufstrebenden Ast
Standard

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/
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...
Mit Zitat antworten
  #4 (permalink)  
Alt 02.08.2008, 03:28
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

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.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


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