Willkommen im TP-Hilfe-Forum! Dies ist ein Forum zu den Themen Photoshop, Dreamweaver, Flash, Selbständigkeit und mehr, in dem Du Hilfe, Anleitung oder eine Lösung zu Deinen Problemen erhältst.
Aktuell bist Du in unseren Foren als Gast mit reinen Leserechten unterwegs. Wenn Du Dich registrierst, kannst Du eigene Themen verfassen, deine Frage stellen und privat mit anderen TPlern kommunizieren. Weitere Foren werden zugänglich, und Du wirst – falls gewünscht – per Mail über neue Beiträge informiert. Die Registrierung ist schnell und kostenlos. Sollten bei der Registrierung Fragen auftauchen, reicht ein Klick in unsere Hilfe - Häufig gestellte Fragen oder eine kurze Mitteilung an das Support-Team.
CSS-Only-Pulldown-Menü (mit JS-"Hilfsmotor" für IE) AKTUALISIERT
Ein komplett in CSS realisiertes Multilevel-Dropdown-Menü für alle Browser mit Unterstützung der CSS-Pseudoklasse ':hover' für beliebige Elemente (nicht nur für Links), also alle halbwegs modernen Vertreter der Mozilla-Familie, Opera und Safari.
Obwohl der Internet Explorer nicht dazugehört, funktioniert es dort trotzdem dank einer kleinen JS-Funktion, die ihm die fehlende Funktionalität quasi 'nachrüstet'.
Das CSS wandelt fest ins Dokument geschriebene UL-Listen in Menüs um und ist damit barrierefrei, da kein Code per Javascript erzeugt wird und bei fehlender CSS-Unterstützung immer noch die unformatierte UL-Standarddarstellung verwendet werden kann.
Ich hab lediglich das CSS ein wenig optimiert (möglicherweise auf Kosten von Browsern, mit denen ich es nicht testen konnte) und den JS-Workaround für IE so umgeschrieben, dass man <ul>-Listen einfach per CSS-Klassenangabe als Dropdown-Menü definieren kann.
Danke für das Menü. An genau soetwas saß ich gerade
Ich hab's heute morgen mal in unserem "Usabillity-Labor" an unserer Zielgruppe getestet. Leider fährt das Menü zu schnell zu. Besonders, wenn man nicht gut mit der Maus umgehen kann und das Listenelement kurzzeitig verlässt.
Hast Du spontan eine Idee, wie man das verbessern könnte?
__________________
class GetProfileCustomerEntityReceiverInformationReceiverAndProgrammingInforma...{
public function __construct(){ if(!$this) die(' '); } } http://www.thedailywtf.com/
Das stört mich auch, aber CSS allein gibt dir keine Möglichkeit, das zu kontrollieren.
Dazu müsste man wieder mit JS dran, wo dieses Experiment ja eigentlich zeigen soll, dass so ein Menü - einen modernen Browser vorausgesetzt - auch mit CSS allein umgesetzt werden kann.
Allerdings könnte man es wirklich auch mit Javascript erweitern, ohne dass die "graceful degradation" (Bezeichnung in Fachartikeln für den Erhalt der Nutzbarkeit bei fehlendem CSS und/oder Javascript) verloren geht.
Insofern ist dieser Ansatz schonmal wesentlich besser als mein altes Menü, das Javascript unbedingt braucht und ohne einfach garnichts anzeigt.
Vielleicht probier ich das mit der JS-basierten "Bremse" mal aus...
Hola!
Als Neuling voll begeistert von deinem Menü, seb, wollte ich das naturlich auch gleich verwenden. Denke mal das geht in Ordnung, wenn du es soooo offen darlegst. Wenn nicht bitte ich hier auch gleich um deine Erlaubnis.
Nur wollte ich es an eine Tabelle anpassen und bin langsam aber sicher am Verzweifeln.
Ich habe mir das so vorgestellt:
Tabellenzeile, mit mehreren Zellen.
Jede Zelle ist das Erste Level seines eigenen Menüs.
Nur bekomm ich es nicht gebacken - Habe als Anfänger wohl auch etwas zu hohe Erwartungen an meine Seite. Vielleicht habt Ihr ja Interesse, das Menü hier zu erweitern. Mir wäre es eine große Hilfe.
Und wer meinen Code sieht wird gleich erkennen, dass ich noch einiges lernen sollte. Aber dennoch - Vielleicht hilft mir ja jemand (*bitte*bitte*verzweifel)
Wollte nur anmerken das das Demo bei mir im Opera 7.22 nicht einwandfrei funktioniert.
Beim ersten mal wenn ich ins Menür gehe, funktionierts einwandfrei. Wenn ich es aber mehrmals versuche streikts.
Nun hat aber jeder Menüeintrag eine fixe Breite. Kann ich das so machen, dass die Breite autom. angepasst wird? Wenn ich die Breite einfach kleiner mache, ist das aufklappende Menü zu "dünn"
Dazu musst du für die <LI>s der ersten Ebene ein 'float:left' definieren.
Ich zeig hier nochmal die grundlegenden CSS-Regeln, wie ich sie für so ein Menü z.Zt. verwende. Jegliche optische Gestaltung fehlt, es liefert nur die Funktionalität:
hi seb, schaut momentan ganz gut aus, bis auf einen hässlichen Linken Rand -> das ganze Menü wird etwa 50 px vom linken Rand hereingeschoben. An was kann das liegen?
hier mein css:
HTML-Code:
/* -------------------------- BEGIN do not change --------------------------- */
ul.dropdown * ul
{
list-style: none;
margin:0;
padding: 0;
display:none;
position:absolute;
z-index:99;
}
ul.dropdown li
{
list-style:none;
float:left;
background-color:#f9f9f9;
padding:2px; /* helps Opera < 7.5x with hover - do not remove! */
}
ul.dropdown li * li
{
float:none;
position: relative; /* required? */
}
ul.dropdown ul * ul
{
left:98%;
top:0;
width:100%;
}
ul.dropdown a
{
display:block;
}
ul.dropdown ul * a
{
width:13em;
}
ul.dropdown li:hover ul ul, ul.dropdown li:hover ul ul ul, ul.dropdown li:hover ul ul ul ul
{
display:none;
}
ul.dropdown li:hover ul, ul.dropdown ul li:hover ul, ul.dropdown ul ul li:hover ul
{
display:block;
}
/* -------------------------- END do not change --------------------------- */
ul.dropdown a.has_submenu
{
/*background:url(arrow_right.gif) no-repeat right;*/
}
#nav
{
font:10px verdana;
background-color:#f9f9f9;
}
#nav a
{
color:#000;
padding:3px;
text-decoration:none;
}
#nav a:hover
{
background-color:#e4faec;
color:#000;
}
#nav ul
{
background-color:#f9f9f9;
border:1px outset #cfcfcf;
}
dann hätte ich da noch eine Sache:
Ab und zu geth das Menü nicht auf IE. Habe die JS Function mit menu = function(){ ... } definiert und dann per window.onload=menu; gestartet. Ab und zu gibts auf meinen Seiten aber auch einen Onload per body. Kann es sein, dass es da Zwistigkeiten gibt?
Der linke Rand ist wahrscheinlich einfach der standardmäßige Einschub der Liste. Setz auf das oberste UL mal padding:0 und margin:0.
Und was das JS-Problem betrifft, bin ich unwissend. Hast du ermittelt, dass das Menü ausschließlich bei einem onload im <body> nicht funktioniert? Wenn ja, kann man davon ausgehen, dass es daran liegt.
ok, das mit dem Rand habe ich jetzt mit deiner Hilfe beheben können.
ZUm JS Ding:
Habe ich getestet und ist wirklich so wie ich vermutet habe. Wie löst man das am elegantesten. WIll nämlich nicht meine ganzen onLoad functions uim enable_ ... erweitern.
Nochwas:
Wie würdest du das Problem mit den Selektboxen und dem IE lösen, is wirlich ein hässlicher Effekt, der in meiner Applikation weg muss!
Da wird wohl die einzige Möglichkeit sein, alle onLoad-Sachen in das JS-Script unter window.onload = ... zu schreiben.
Es ist sowieso 'sauberer', ins HTML überhaupt keinen JS-Code (über Event-Handler oder <script>-Bereiche) einzustreuen und statt dessen alles in eine separate .js-Datei auszulagern.
Man trennt praktisch Struktur (HTML) und Verhalten (JS) nach dem gleichen Prinzip und aus den gleichen Gründen, wie wir es für Struktur und Aussehen (CSS) mittlerweile gelernt haben.
