zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Dropdown Navigation - 2. Ebene ein-/ausblenden

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.12.2010, 13:05
img img ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.05.2008
Beiträge: 258
img befindet sich auf einem aufstrebenden Ast
Standard Dropdown Navigation - 2. Ebene ein-/ausblenden

Hallo zusammen,

ich habe eine 2-stufige Navigation: NLP

Wenn ein Untermenüpunkt aktiv ist, soll das Untermenü stehen bleiben. Beim Hover über einen Hauptmenüpunkt soll das aktive Untermenü ausgelendet werden und das entsprechende beim Hover auf einen Hauptmenüpunkt eingeblendet werden.

Jedoch hab ich jetzt ein Konflikt im CSS, da das aktive Untermenü nicht mehr angeklickt werden kann.

Hat einer eine Idee wie ich das eleganter Lösen könnte? Evtl. ist mein Denkansatz auch falsch

Code:
/*.................. NAVI ..................*/

#navi ul{  /* Menü 1. Ebene */
	list-style:none;
	font-family:verdana;
	font-size:11px;
	text-transform:uppercase;
	margin:0px;
	padding:0;
    position:absolute;  
    margin:146px 0 0 10px;
    z-index:9999;
	}

#navi ul li { /* Submenü 1. Ebene */
	float:left;
	line-height:35px;
	margin:0;
	margin-right:10px;
	}

#navi a{ /* Links 1. Ebene*/
	display:block; 
    padding:10px 8px 5px 8px;	
	height:36px;
	color: #333939;
	text-decoration:none;
	}

#navi li:hover a{
    background: url(/tl_files/playground/theme/bg_navi_hover.png) center top no-repeat;
	text-decoration:underline;
	color:#33b8cc;
    }

#navi li .active, #navi li .trail  {
	background: url(/tl_files/playground/theme/bg_navi_active.jpg) center top no-repeat;
	color:#fff;
	font-weight:bold;
    display:block; 
    padding:10px 8px 5px 8px;	
	height:41px;
    }



#navi ul li ul { /* Menü 2. Ebene ausblenden */
    display:none;
	top:47px;
	margin:0;
	padding-top:6px;
		text-transform:none;
    }
    
#navi ul li:hover ul{ /* Submenü 2. Ebene einblenden */
	display:block;
    }
    
#navi ul li ul li { /* Submenü 2. Ebene */
    float:none;
    border-left:1px solid #efefef;
    border-right:1px solid #efefef;
    border-bottom:1px solid #efefef;
    line-height:35px;
    background:#fff;
    float:left;
    margin-right:0;
    }

#navi ul li ul li a, #navi li:hover ul li a{ /*  Links 2. Ebene */
    padding:0 5px 5px 5px;
    height:30px;
    color:#333939;
    text-decoration:none;
	}

#navi li ul .active, #navi  li ul li .trail { /*  Aktiver Link 2. Ebene */
	height:30px;
	background:#fff;
	padding:0 5px 5px 2px;
	color:#33b8cc;

}

#navi li.trail ul { /*  Aktives Submenü eingeblendet lassen*/
    display:block
  
    } 

#navi ul:hover li.trail ul { /*  Ausblenden aktives Submenü wenn hover über anderer Haupt-Menüpunkt*/
    display:none
 
    } 

#navi ul li ul li a:hover {
	text-decoration:underline;
	color:#33b8cc;
    }
Danke im Voraus,
Grüße img

Geändert von img (16.12.2010 um 23:01 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.12.2010, 10:37
img img ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.05.2008
Beiträge: 258
img befindet sich auf einem aufstrebenden Ast
Standard

Hi,

war meine Frage unlogisch gestellt oder ist es tatsächlich nicht so einfach? Ich komm leider nicht weiter... meine Idee war dem aktiven Submenü (ul) einfach eine eigene Klasse zuweisen und dann für diese den display:none wieder rauszunehmen... aber ich hab leider keine Möglichkeit das so umzusetzen da ich die Klassen nicht manuell zuweisen kann.

Vielleicht hat jemand ja noch eine Idee wie es mit dem aktuellen Quellcode funktionieren könnte.

Viele Grüße

Geändert von img (16.12.2010 um 23:01 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.12.2010, 11:31
Benutzerbild von Unsk1ll3d
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 03.01.2006
Beiträge: 215
Unsk1ll3d befindet sich auf einem aufstrebenden Ast
Standard

Du beeinflusst mehrfach die erste Ebene durch :hover

nämlich mit:
#navi li:hover a{
#navi ul li:hover ul{ /* Submenü 2. Ebene einblenden */
#navi ul li ul li a:hover {

Lies' dir mal den Artikel hier durch:
Quick Tip: Understanding CSS Specificity | Nettuts+

PS: Das alles ginge mit sehr viel weniger Code durch die Nutzung von ">"

Grüßel,
Christoph
Mit Zitat antworten
  #4 (permalink)  
Alt 16.12.2010, 11:53
img img ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.05.2008
Beiträge: 258
img befindet sich auf einem aufstrebenden Ast
Standard

Danke für deine Antwort.

Der Beitrag war sehr interessant, das war mir bisher nicht bekannt
Trotzdem sehe ich leider nicht, wie mir die Gewichtung von IDs bzw Klassen hier weiterhilft. Ich habe leider nicht die Möglichkeit, manuell auf die Klassen bzw. IDs einzuwirken, ich kann auch zusätzlich keine hinzufügen.

Ich habe hier l lediglich #menu und dann die verschachtelten Listen ohne weitere Klassen/IDs.

Elegant ist mein CSS tatsächlich nicht möchte es aber erstmal hinbekommen, dass es passt. Anschließend bekommt es eine Schlankheitskur...

Danke trotzdem für deine Antwort.

Geändert von img (16.12.2010 um 23:01 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 16.12.2010, 12:20
Benutzerbild von Unsk1ll3d
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 03.01.2006
Beiträge: 215
Unsk1ll3d befindet sich auf einem aufstrebenden Ast
Standard

Dadurch, dass li:hover die gleiche Gewichtung wie li.active hat, kann dein Aufbau so nicht funktionieren. Deswegen nennt man es auch "Pseudoklasse".

ul li>ul { betrifft nur die unteren Listen, da diese zwangsweise Kindelemente von li sind }

ul li { betrifft ul>li aber auch ul>li>ul>li !!! }
Mit Zitat antworten
  #6 (permalink)  
Alt 16.12.2010, 12:50
img img ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.05.2008
Beiträge: 258
img befindet sich auf einem aufstrebenden Ast
Standard

OK, Danke. Das muss ich mir heute Abend nochmal in Ruhe anschaun.
Wie nennen sich die Operatoren wie > , habe ich bisher nie benutzt. Hast Du da zufällig eine Quelle?

Grüße

Geändert von img (16.12.2010 um 23:02 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 16.12.2010, 12:52
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Google "Kindselektor". Ist aber nur interessant, falls der IE < 7 egal ist.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #8 (permalink)  
Alt 16.12.2010, 23:02
img img ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.05.2008
Beiträge: 258
img befindet sich auf einem aufstrebenden Ast
Standard

OK danke für die Infos. Habe das Problem jetzt anders gelöst (bzw. erstma nicht gelöst). Das Menü wurde nochmal anders strukturiert und jetzt ergibt sich das Problem nicht mehr.
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 11:11
Float-Problem? mischaef CSS 33 20.10.2010 16:20
Javascript UL Navigation im IE6 ven CSS 7 29.04.2008 15:29
Dropdown Hover 3.Ebene klappt nicht auf Maztah CSS 0 22.03.2008 22:35
Probleme mit einem CSS-Menü (UL-Liste)! hagbard_2605 CSS 0 21.10.2006 10:03


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:25 Uhr.