Horiz. DropDown-Menü, Aufbau nur über css
0 Syntax
Felix Riesterer
0 0 0 gelu
Horiz. DropDown-Menü, Aufbau nur über css
Hallo,
und wiedermal muß (darf) ich Euch um Eure Unterstützung bitten.
Aktuell geht es mir darum, ein rein auf css-Definitionen aufgebautes horizontales DropDown-Menü zu erstellen.
Hier ist mein, derzeit noch minimalistischer Code, der auch nur für die Funktionalität des Menüs sorgen soll(te):
<html>
<head>
<style type="text/css">
<!--
ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
li
{
position: relative;
}
ul li
{
float: left;
padding-right: 7px;
}
ul li ul
{
display: none;
}
ul li:hover ul
{
display: block;
}
//-->
</style>
</head>
<body>
<ul>
<li>Anfangsbuchstabe
<ul>
<li>C</li>
<li>G</li>
<ul>
</li>
<li>Genre
<ul>
<li>Action</li>
<li>Horror</li>
<ul>
</li>
<li>FSK
<ul>
<li>16</li>
<li>18</li>
<ul>
</li>
<li>Darsteller
<ul>
<li>BULLOCK, Sandra</li>
<li>REEVES, Keanu</li>
<ul>
</li>
<li>Produzent
<ul>
<li>BRUCKHEIMER, Jerry</li>
<li>SILVER, Joel</li>
<ul>
</li>
</ul>
</body>
</html>
Leider wird das Menü aber überhaupt nicht so aufgebaut, wie ich das beabsichtigt habe:
Ich habe nur einen Einstiegspunkt am Bildschirm, nämlich den Menüpunkt "Anfangsbuchstabe", alle anderen Menüpunkte
inkl. deren bereits aufgeklappte Untermenüs werden mir beim hover über den Menüpunkt "Anfangsbuchstabe" angezeigt.
Eigentlich will ich aber, dass die Menüpunkte "Anfangsbuchstabe", "Genre", "FSK", "Darsteller" und "Produzent" gleich
von Anfang sichtbar sind, nebeneinander angeordnet und das jeweilige Untermenü dann erst beim Drüberfahren über den
jeweiligen Oberpunkt.
Könnte Ihr mir hier bei der Umsetzung meines Vorhabens behilflich sein ?
Ich hätte mir durchaus den Code einer Seite "stipizen" können, diese sind aber meistens so mit Definitionen ect.
vollgestopft, die den Code erheblich unnötig aufblähen und es zudem schwierig ist, die Funktionsweise nachzuvollziehen.
Vielen Dank auf jeden Fall schon mal im Voraus.
Gruß
Enrico
-
Lieber Enrico,
<style type="text/css">
<!--
...
//-->
</style>das ist nicht gut! Browser, die kein CSS verstehen, mögen ja den HTML-Kommentar benötigen, um das CSS vor ihnen zu verstecken (welche sind das wohl??), andere bekommen dagegen zuerst ungültigen CSS-Code verabreicht und müssen das ignorieren! Außerdem kann man mit // in CSS keinen einzeiligen Kommentar einleiten, da es sowas in CSS nicht gibt (in JavaScript schon, daher hast Du diese Schreibweise).
Besser so:
<style type="text/css"> /* <![CDATA[ */ ... /* ]]> */ </style>Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:) -
Hi,
ich glaube Du hast einfach nur beim schließen der ul-tags den Slash vergessen - so müsste es daher klappen:
<html>
<head>
<style type="text/css">
<!--ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}li
{
position: relative;
}ul li
{
float: left;
padding-right: 7px;
}ul li ul
{
display: none;
}ul li:hover ul
{
display: block;
}//-->
</style>
</head>
<body>
<ul>
<li>Anfangsbuchstabe
<ul>
<li>C</li>
<li>G</li>
</ul>
</li>
<li>Genre
<ul>
<li>Action</li>
<li>Horror</li>
</ul>
</li>
<li>FSK
<ul>
<li>16</li>
<li>18</li>
</ul>
</li>
<li>Darsteller
<ul>
<li>BULLOCK, Sandra</li>
<li>REEVES, Keanu</li>
</ul>
</li>
<li>Produzent
<ul>
<li>BRUCKHEIMER, Jerry</li>
<li>SILVER, Joel</li>
</ul>
</li>
</ul>
</body>
</html>Hallo,
und wiedermal muß (darf) ich Euch um Eure Unterstützung bitten.
Aktuell geht es mir darum, ein rein auf css-Definitionen aufgebautes horizontales DropDown-Menü zu erstellen.
Hier ist mein, derzeit noch minimalistischer Code, der auch nur für die Funktionalität des Menüs sorgen soll(te):
<html>
<head>
<style type="text/css">
<!--ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}li
{
position: relative;
}ul li
{
float: left;
padding-right: 7px;
}ul li ul
{
display: none;
}ul li:hover ul
{
display: block;
}//-->
</style>
</head>
<body>
<ul>
<li>Anfangsbuchstabe
<ul>
<li>C</li>
<li>G</li>
<ul>
</li>
<li>Genre
<ul>
<li>Action</li>
<li>Horror</li>
<ul>
</li>
<li>FSK
<ul>
<li>16</li>
<li>18</li>
<ul>
</li>
<li>Darsteller
<ul>
<li>BULLOCK, Sandra</li>
<li>REEVES, Keanu</li>
<ul>
</li>
<li>Produzent
<ul>
<li>BRUCKHEIMER, Jerry</li>
<li>SILVER, Joel</li>
<ul>
</li>
</ul>
</body>
</html>Leider wird das Menü aber überhaupt nicht so aufgebaut, wie ich das beabsichtigt habe:
Ich habe nur einen Einstiegspunkt am Bildschirm, nämlich den Menüpunkt "Anfangsbuchstabe", alle anderen Menüpunkte
inkl. deren bereits aufgeklappte Untermenüs werden mir beim hover über den Menüpunkt "Anfangsbuchstabe" angezeigt.Eigentlich will ich aber, dass die Menüpunkte "Anfangsbuchstabe", "Genre", "FSK", "Darsteller" und "Produzent" gleich
von Anfang sichtbar sind, nebeneinander angeordnet und das jeweilige Untermenü dann erst beim Drüberfahren über den
jeweiligen Oberpunkt.Könnte Ihr mir hier bei der Umsetzung meines Vorhabens behilflich sein ?
Ich hätte mir durchaus den Code einer Seite "stipizen" können, diese sind aber meistens so mit Definitionen ect.
vollgestopft, die den Code erheblich unnötig aufblähen und es zudem schwierig ist, die Funktionsweise nachzuvollziehen.Vielen Dank auf jeden Fall schon mal im Voraus.
Gruß
Enrico-
Hallo Jankins,
vielen Dank für Deine Rückantwort.
Mit Deinem Hinweis und folgenden css-Definitionen habe ich jetzt die
Oberpunkte horizontal, die Unterpunkte vertikal:<html>
<head>
<style type="text/css">ul
{
list-style: none;
margin: 0px;
padding: 0px;
width:auto;
}li
{
position:relative;
}ul li
{
float:left;
padding-right: 7px;
}ul li ul
{
display: none;
}ul li:hover ul
{
display: block;
}ul li ul li
{
clear:both;
float:left;
}</style>
</head>
<body>
<ul>
<li>Anfangsbuchstabe
<ul>
<li>C</li>
<li>G</li>
</ul>
</li>
<li>Genre
<ul>
<li>Action / Drama</li>
<li>Horror</li>
</ul>
</li>
<li>FSK
<ul>
<li>16</li>
<li>18</li>
</ul>
</li>
<li>Darsteller
<ul>
<li>BULLOCK, Sandra</li>
<li>REEVES, Keanu</li>
</ul>
</li>
<li>Produzent
<ul>
<li>BRUCKHEIMER, Jerry</li>
<li>SILVER, Joel</li>
</ul>
</li>
</ul>
</body>
</html>Wie bekomme ich es jetzt noch hin, dass die Oberpunkte beim Anzeigen der jeweiligen
Unterpunkte nicht auseinandergezogen werden, wenn die Unterpunkte "breiter" sind als
die Oberpunkte bzw. beim Verbergen des jeweiligen Menüs wieder zusammengeschoben werden?Beispiel zur Verdeutlichung:
Ausgangszustand:
+----------------+ +-----+ +---+ +----------+ +---------+
|Anfangsbuchstabe| |Genre| |FSK| |Darsteller| |Produzent|
+----------------+ +-----+ +---+ +----------+ +---------+hover am Menüpunkt "Genre":
+----------------+ +-----+ +---+ +----------+ +---------+
|Anfangsbuchstabe| |Genre| |FSK| |Darsteller| |Produzent|
+----------------+ +--------------+ +---+ +----------+ +---------+
|Action / Drama|
|Drama |
+--------------+hover am Menüpunkt "Darsteller":
+----------------+ +-----+ +---+ +----------+ +---------+
|Anfangsbuchstabe| |Genre| |FSK| |Darsteller| |Produzent|
+----------------+ +-----+ +---+ +---------------+ +---------+
|BULLOCK, Sandra|
|REEVES, Keanu |
+---------------+Ich möchte (und kann) nicht mit festen Breiten arbeiten, da diese nicht feststehen oder
ausgelesen werden können.Ich möchte erreichen, dass die Oberpunkte immer, wie im Ausgangszustand, stehen bleiben und
nur die Unterpunkte, ihrer Breite etsprechend und ohne Zeilenumbruch, angezeigt werden.Kannst Du mir auch nochmal weiterhelfen?
Vorab nochmals Danke hierfür.
Gruß
Enrico -
-