zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Dropdown lange Untermenütexte ohne Zeilenumbruch

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.02.2014, 16:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2012
Beiträge: 6
Varru befindet sich auf einem aufstrebenden Ast
Standard Dropdown lange Untermenütexte ohne Zeilenumbruch

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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.02.2014, 18:00
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.02.2014, 22:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2012
Beiträge: 6
Varru befindet sich auf einem aufstrebenden Ast
Standard

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!
Mit Zitat antworten
  #4 (permalink)  
Alt 05.02.2014, 23:08
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Varru Beitrag anzeigen
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).
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #5 (permalink)  
Alt 06.02.2014, 09:03
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Antwort

Stichwörter
dropdown, menü, navigation

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
Zeilenumbruch: gleich lange Zeilen kleinpoe CSS 7 14.11.2010 21:47
Problem mit einer DropDown Liste manuel_g CSS 2 31.03.2010 10:11
Zwei DropDown Navigationen verschmelzen Drian Offtopic 1 13.02.2010 14:00
DropDown CSS/JS Mix, Kleine Frage pkipper CSS 0 01.10.2008 10:23
Auf-/Zuklappen mit JS crimi Javascript & Ajax 7 23.09.2008 16:27


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:50 Uhr.