31.08.2008, 19:39
|
|||
|
|||
Dropdown Menue wird durch Untermenue gestreckt
Schönen guten Abend.
Ich bin gestern aus zufällig auf dieses Menue Drop Down Menus || CSS Menu Builder gestoßen. Bisher war ich immer mit statischen Menues ausgekommen, aber warum nicht mal etwas neues probieren? Aber da ich meine Seite selbst schreiben will, habe ich mich heute hingesetzt und versucht das oben verlinkte Menue zu verstehen und soweit ist das nicht sonderlich schwer. Bin ich doch zu einer abgespeckten Version gekommen, die als vertikales Menue super funktionieren würde. Leider jedoch nicht als horizontales Menue, da bei Aufklappen des Submenues das beinhaltende Listenfeld die Breite annimmt. Wie kann ich das vermeiden? Ich bin quasi im Urlaub und habe hier weder Bücher noch Webspace, deshalb poste ich einfach nur den Code, den ich mir heute überlegt habe. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="formate.css">
<meta name="generator" content=
"HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
<title></title>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="#">A</a>
</li>
<li>
<a href="#">B</a>
<div class="sub">
<ul>
<li>
<a href="#">Test</a>
</li>
<li>
<a href="#">Test2</a>
</li>
<li>
<a href="#">Test3</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">C</a>
<div class="sub">
<ul>
<li>
<a href="#">Test</a>
</li>
<li>
<a href="#">Test2</a>
</li>
<li>
<a href="#">Test3</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">D</a>
</li>
<li>
<a href="#">E</a>
<div class="sub">
<ul>
<li>
<a href="#">Test</a>
</li>
<li>
<a href="#">Test2</a>
</li>
<li>
<a href="#">Test3</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>
Code:
* {
margin: 0;
padding: 0;
}
.nav {
background: #aaa;
width: 750px;
}
.nav ul {
width: 100%;
background: #fff;
}
.nav ul li a, .sub ul li a{
display: block;
background: red;
text-decoration: none;
}
.nav ul li {
padding-left: 10px;
padding-right: 10px;
background: lime;
overflow: hidden;
float: left;
z-index: 1;
}
.sub ul {
float: left;
width: 150px;
display: block;
}
.sub ul li {
padding: 0;
margin: 0;
width: 150px;
background: yellow;
overflow: hidden;
display: block;
}
.nav ul li, .sub ul li {
list-style: none inside;
}
.sub ul {
display: none;
}
.nav ul li:hover .sub ul {
display: block;
}
Ich vermute mal, dass es an der Positionierung / dem teilweisen Floaten liegt... Danke und einen schönen Abend noch. Schelm.isch 
|
| Sponsored Links |
|
31.08.2008, 19:50
|
|||
|
|||
|
Das Submenü ist Kind des Menüs, und es hat eine Breite, und du lässt es mit display:none -> block einblenden. Daher muss das elterliche Menü aufgedrückt werden: hier enthält ein Float ein Float.
Überleg mal weiter: Was passiert, wenn diesem Menü Inhalt folgt? Und wie kannst du das dann sichtbare Problem vermeiden? Geändert von IChao (31.08.2008 um 19:52 Uhr)
|
| Sponsored Links |
|
31.08.2008, 20:18
|
|||
|
|||
|
Hrm, es wäre schön, wenn man das unabhängig koppeln könnte. Ich hatte schon geschaut, aber z-Index ist wirklich nur zur Angabe von Reihenfolgen da. Der Zusammenhang einzelner Objekte bleibt leider erhalten.
 Was meinst du mit nachfolgendem Inhalt? Normalweise würde ich das Menue als ganzes in einen Wrapper stecken und dann nachfolgende Inhalte darunter setzen. Vielleicht muss ich nochmal Floats neu nachlesen. CSS liegt bei mir schon etwas zurück, dazu hab ich im Moment wenig Zeit und ich mache das eh nur als Hobby. Aber zur Größendefinition. Das Blockattribut habe ich erstmal rausgeworfen, das hat nicht wirklich etwas verändert. Aber auf die Größenangabe kann ich doch nicht verzichten, wenn ich später Grafiken als Hintergründe einbinden will. Oder verzettel ich mich da in der Logik von CSS?
|
|
31.08.2008, 22:13
|
|||
|
|||
|
Mit nachfolgendem Inhalt meine ich z.B. ein <p>Lorem ipsum ...</p>. Steht dieses nach dem Menü, wird der Zeileninhalt zur Seite geschoben, wenn das Submenü ausklappt. Und richtig so: es ist ja ein Float, nachfolgende Boxen sehen es nicht, doch die Zeilenboxen machen Platz. Jedesmal also, wenn das Float-Submenü ausklappt, würde sich der nachfolgende Inhalt auf der Seite verschieben.
Die meisten Nutzer fänden dieses Verhalten ungewöhnlich. "unabhängig koppeln" ist ein paradoxer Begriff. Wie wärs mit "komplett aus dem Fluss nehmen"? Das wäre eine Box, die absolut positioniert ist. Und nur dann, wenn eine Box positioniert ist, greift z-index. Der Block, der dann absolut positioniert ist, benötigt die Größendefinition wie das Float. Aber das kratzt kein anderes Element auf der Seite; denn es ist aus dem Fluss der Seite entfernt.
|
|
31.08.2008, 22:31
|
|||
|
|||
|
Prima, vielen Dank dir!
Manchmal macht man sichs selbst aber auch extra schwer. Habs nun mittels absoluter Position festgemacht und es läuft. 
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| 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 Menü verschwindet | andre-ne | CSS | 2 | 18.11.2009 10:44 |
| DropDown CSS/JS Mix, Kleine Frage | pkipper | CSS | 0 | 01.10.2008 10:23 |
| Suche CSS Dropdown Menü | Lloyd Larkin | CSS | 0 | 11.10.2006 20:50 |
Linear-Darstellung
