Dropdown lange Untermenütexte ohne Zeilenumbruch

Varru · #1 (**permalink**) 05.02.2014, 17:28

Hallo,
vermutlich gibt es zu dieser Thematik bereits entsprechende Beiträge, habe aber sorecht nicht das richtige gefunden.

Ich versuche ein Dropdown-Menü zu bauen. Das ansich bekomme ich hin. Woran ich scheitere ist, den Bereich unter den Submenü-Punkten so breit zu machen, wie der längste Submenüeintrag ist.

Zur Verdeutlichung: JSFiddle

Wenn ich jetzt das Menü aufklappe, dann sollen die Untermenüpunkte eine Hintergrundfarbe bekommen. Da die Punkte eine variable Länge haben werden, kann ich nicht mit einer fixen Breite arbeiten und die Hauptmenüpunkte müssen exakt bei 130px bleiben. Könnte mir jemand dabei helfen oder sagen, welchen logischen Fehler ich mache?

Vielen Dank.

explanator · #2 (**permalink**) 05.02.2014, 19:00

Menüs sind nicht einfach zu verstehen und auch schwierig zu erklären.

Daher hier der Code:

HTML-Code:

<head>        
    <meta charset="utf-8">        
    <title>Tasty Testseite         
    </title>        
    <style>
        #menu {margin-left:50%;}    
        #menu ul {margin:0; margin-left:-50%; }
        #menu > ul > li {width:130px; float:left; background-color:green; list-style:none; margin:0; padding:0;height: 1.2em;}
        #menu ul li:after {clear:both;}
        #menu > ul > li:first-child {background-color:red;}
        #menu ul ul {position:relative; background-color:yellow; display:inline-block; left:-1500%; padding:2px 5px 5px 0;}
        #menu ul ul li {display:block; background-color:yellow;}
        #menu > ul > li:hover ul, #menu ul ul:hover {left:50%; Z-index:10;}
    </style>
</head>    
<body>        
    <div id="menu">            
        <ul>                  
            <li>                      
                <a href="#">TAB a</a>                    
                <ul>                          
                    <li><a href="#">aaaaaaaaa</a></li>                  
                    <li><a href="#">aaaaaaaaaaaaaaaaaa</a></li>                  
                    <li><a href="#">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a></li>            
                </ul>            
            </li>              
            <li>                  
                <a href="#1">Tab b</a>                
                <ul>                      
                    <li><a href="#1">bbbbbbbb</a></li>              
                    <li><a href="#1">bbbbbbbbbbbbbbbbbbb</a></li>              
                    <li><a href="#1">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</a></li>            
                </ul>            
            </li>            
        </ul>        
    </div>    
</body>
</html>

getestet in Firefox, Chrome und IE8.

Varru · #3 (**permalink**) 05.02.2014, 23:45

Hallo explanator,
vielen Dank für den Code. Ich habe mich dran gesetzt und versucht die Unterschiede und Gründe zu verstehen. Habe dazu einfach probiert die einzelnen Eigenschaften in meinem Schnipsel nochmal nachzubauen. Die meisten Eigenschaften und wie sie sich hier auswirken glaube ich verstanden zu haben.

HTML-Code:

<html>
	<head>
		<title>Dropdown lange submenues</title>
		<style type="text/css">
			#tabs > ul > li.tab {
				width:130px;	/* Wenn ich das rausnehme, klappt das darunter anordnen nicht. Warum? */
				float:left;
				list-style:none;
				margin:0;
				padding:0;
			}

			#tabs ul li:after {
				/*clear:both;	/* Welches float wird hier durch beendet? */
			}

			#tabs ul ul {
				position:relative;
				background-color:inherit;
				/*display:inline-block;*/	/* Warum inline-block und positionierung ausserhalb des Viewports? */
				/*left:-1500%;*/
				display:none;
				padding:5px 0px 5px 0px;
			}

			#tabs ul ul li {
				display:block;
				background-color:inherit;
			}
			
			#tabs > ul > li:hover ul, #tabs ul ul:hover {
				/*left:0%;*/
				display:inline-block;
				z-index:10;
			}

			a {
				display:block;
				width:100%;
			}
			
			a:hover {
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div id="tabs">
			<ul>
				<li class="tab" style="background-color:red;">
					<a href="#1">TAB a</a>
					<ul>
						<li><a href="#1">aaaaaaaaa</a></li>
						<li><a href="#1">aaaaaaaaaaaaaaaaaa</a></li>
						<li><a href="#1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a></li>
					</ul>
				</li>
				<li class="tab" style="background-color:green;">
					<a href="#1">Tab b</a>
					<ul>
						<li><a href="#1">bbbbbbbb</a></li>
						<li><a href="#1">bbbbbbbbbbbbbbbbbbb</a></li>
						<li><a href="#1">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

Der wichtigste Unterschied der mir aufgefallen ist, dass du dem Untermenü-ul statt display:block; ein display:inline-block; verpasst hast. Das bewirkt scheinbar den ganz entscheidenden Punkt.

Doch es gibt noch ein paar Dinge, die mir nicht klar geworden sind. Warum löst du das Aus- & Einblenden der Unterpunkte durch Positionieren ausserhalb bzw. innerhalb des viewports? Warum machst du das so und nicht mittels display:none;? Und dann noch das li:after { clear:both; }. Welches Element reagiert auf diese Anweisung? Ich vermute alle nachfolgenden ausserhalb des Menüs, konnte es mir aber selber nicht beweisen.

Könntest du deinen css-Code für mich kommentieren, um Licht ins Dunkel zu bringen? Die Lösung ansich ist schon mal gut, aber wenn ich's auch noch vollständig verstehen würde, wäre es natürlich perfekt.

Danke auf jeden Fall schon mal!

explanator · #4 (**permalink**) 06.02.2014, 00:08

Zitat:

Zitat von Varru

Der wichtigste Unterschied der mir aufgefallen ist, dass du dem Untermenü-ul statt display:block; ein display:inline-block; verpasst hast. Das bewirkt scheinbar den ganz entscheidenden Punkt.

Ja genau, der Rest ins Feintuning.

Zitat:

Doch es gibt noch ein paar Dinge, die mir nicht klar geworden sind. Warum löst du das Aus- & Einblenden der Unterpunkte durch Positionieren ausserhalb bzw. innerhalb des viewports?

Das ist, damit Screenreader das vorlesen können. Jemand der blind ist, kann ja nicht die Maus bewegen um ein hover auszulösen. Wenn das aber auf display:none gestellt wird dann wird das auch nicht vorgelesen und ist somit für diese Personen ein Hindernis.

Einschränkungen gibt es zudem auch bei touchscreens, da sollte man sich dann noch was anderes einfallen lassen, aber ich hatte das jetzt mal als Übung betrachtet.

Zitat:

Und dann noch das li:after { clear:both; }. Welches Element reagiert auf diese Anweisung? Ich vermute alle nachfolgenden ausserhalb des Menüs, konnte es mir aber selber nicht beweisen.

Ja damit es keinen Salat gibt. Daher auch der Z-Index, damit das runterfallende Menü nachfolgende Elemente überdeckt.

Zitat:

Könntest du deinen css-Code für mich kommentieren, um Licht ins Dunkel zu bringen? Die Lösung ansich ist schon mal gut, aber wenn ich's auch noch vollständig verstehen würde, wäre es natürlich perfekt.

Baue es nach, Stück für Stück ohne hover und ohne das rausschieben des Untermenüblockes aus dem Viewportbereich, dann wird dir einiges klarer. Fange ohne CSS an und dann nacheinander die Regeln in der Reihenfolge einsetzen wie ich sie runtergeschrieben habe, dann siehst du die Effekte die passieren. Vom anfänglichen zentrieren bis zum Einfärben des ausklappbaren Blockes(eigentlich das KInd UL).

explanator · #5 (**permalink**) 06.02.2014, 10:03

Kleine Korrektur:
Nimm das mal raus

HTML-Code:

#menu ul li:after {clear:both;}

und füge am Ende des CSS diese Zeile hinzu:

HTML-Code:

#menu:after {content:"";display:block;clear:both;}

sonst wird das float nicht aufgehoben für nachfolgende Elemente.
Findet man auch als clearfix im Netz.
Ersteres hatte ich leider nicht getestet und ist mir jetzt im Nachhinein aufgefallen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Zeilenumbruch: gleich lange Zeilen	kleinpoe	CSS	7	14.11.2010 22:47
Problem mit einer DropDown Liste	manuel_g	CSS	2	31.03.2010 11:11
Zwei DropDown Navigationen verschmelzen	Drian	Offtopic	1	13.02.2010 15:00
DropDown CSS/JS Mix, Kleine Frage	pkipper	CSS	0	01.10.2008 11:23
Auf-/Zuklappen mit JS	crimi	Javascript & Ajax	7	23.09.2008 17:27