nicht angemeldet
Wie erstelle ich ein "gutes" Aufklappmenü?
Hallo,
Ich würde gerne ein Aufklappmenü schreiben. Hier im Forum wird ja oft geschrieben, dass man dabei auf JavaScript zwar nicht verzichten braucht, dass Aufklappmenü aber auch ohne JavaScript bedienbar bleiben muss.
Ich habe es mir nun so gedacht:
-Aufklappmenü zeigt nur "Übermenüpunkte" (Kategorien) an, wenn das JavaScript aktiviert ist (es versteckt sozusagen die divs der Menüpunkte). Ohne JavaScript wird alles angezeigt.
-Klickt man auf einen Übermenüpunkt, so klappt sich bei den JavaScript-Benutzern das Untermenü auf.
Wie realisiere ich das mit den divs am besten (das Aufklappmenü soll ja entsprechend die Unterpunkte nach unten rutschen, also eben aufklappen, wenn ich auf den Hauptmenüpunkt klicke)? Ist mein Aufklappmenü so theoretisch in Ordnung? Wie würdet Ihr das Aufklappmenü verbessern?
HAUPTMENÜPUNKT 1
-Unterpunkt 1 (am Anfang mit JavaScript unsichtbar, sonst sichtbar
-...
HAUPTMENÜPUNKT 2
-...
-...
Gute Nacht,
Timmi
-
hi,
Wie realisiere ich das mit den divs am besten (das Aufklappmenü soll ja entsprechend die Unterpunkte nach unten rutschen, also eben aufklappen, wenn ich auf den Hauptmenüpunkt klicke)?
die display-eigenschaft von CSS wird in selfhtml als "Anzeigeart bzw. Nichtanzeige ohne Platzhalter" beschrieben.
sprich, wenn ein element darüber ausgeblendet ist, nimmt es keinen platz weg, wenn es wieder eingeblendet wird, nimmt es sich den platz, den es braucht.wie du solche CSS-eigenschaften dynamisch manipulierst, findest du unter http://selfhtml.teamone.de/javascript/objekte/style.htm.
gruss,
wahsaga-
Jo Tach auch! Ich hab da ein Problem! Ich hab ein Aufklappmenü abba noch ein Problem damit! Und zwar sieht man das Menü nicht solange es nicht aufgeklappt ist! Ich das gerne wie auf der Seite http://www.futurezone.tv Da Links ist ist son eni Menü abba da sieht man noch ein bild auch wenn es nicht aufgeklappt ist! Wie schaffe ich das es so aussieht? DAs steht in der html:
<html><head><title>Test</title> <script type="text/javascript" src="dhtml.js"></script> <script type="text/javascript"> <!-- function Menue() { if(DOM) { if(MS) getElem("id","Nav",null).style.top = document.body.scrollTop + 50; else getElem("id","Nav",null).style.top = window.pageYOffset + 50; } if(DOM || MS) { if (!DOM) getElem("id","Nav",null).style.top = document.body.scrollTop + 50; if (OP) getElem("id","NavLinks",null).style.pixelTop = NavLinksPos; getElem("id","Nav",null).style.visibility = "visible"; } else if(NS) { getElem("id","Nav",null).visibility = "show"; getElem("id","Nav",null).top = window.pageYOffset + 50; } }
function noMenue() { if(DOM || MS) getElem("id","Nav",null).style.visibility = "hidden"; if(NS) getElem("id","Nav",null).visibility = "hide"; }
function handleMove(ev) { if(!MS) { Event = ev; if(Event.screenX < 270) Menue(); else if(Event.screenX > 420) noMenue(); } }
function MShandleMove() { if(MS) { if(window.event.clientX < 270) Menue(); else if(window.event.clientX > 420) noMenue(); } }
function Event_init() { if(DOM && !MS && !OP) { getElem("tagname","body",0).addEventListener("mousemove", handleMove, true); } if(NS) { document.captureEvents(Event.MOUSEMOVE); document.onmousemove=handleMove; } if (DOM && OP) { document.onmousemove=handleMove; NavLinksPos=42; //Position des Bereiches NavLinks getElem("id","NavLinks",null).style.pixelTop=NavLinksPos;
} if (MS) getElem("tagname","body",0).onmousemove=MShandleMove; } //--> </script> <style type="text/css"> <!-- body { margin-left:50px; margin-top:20px; margin-right:50px; } #Nav { position:absolute; top:50px; left:0px; padding:0px; visibility:hidden; margin:0px; } #NavLinks { position:absolute; top:42px; left:42px; padding:0px; } a.nav:link { color:#000080; font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; } a.nav:visited { color:#000080; font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; } a.nav:hover { color:#FFFFFF; background-color:#000080; font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; } a.nav:active { color:#000080; font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; } --> </style> </head> <body onLoad="Event_init()" background="navigation_back.gif" bgcolor="#FFFFFF">
<div id="Nav"> <img src="navigation.gif" width="250" height="450" border="0" alt=""> <div id="NavLinks"> <style type="text/css"> <!-- a.nav:link { color:#000080; font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; } a.nav:visited { color:#000080; font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; } a.nav:hover { color:#FFFFFF; background-color:#000080; font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; } a.nav:active { color:#000080; font-family:Tahoma,sans-serif; font-weight:bold; font-size:10pt; text-decoration:none; } --> </style> <a class="nav" href="http://selfhtml.teamone.de/"><b>SELFHTML</b></a><br> <a class="nav" href="http://selfaktuell.teamone.de/"><b>SELFHTML aktuell</b></a><br> <a class="nav" href="http://forum.de.selfhtml.org/"><b>SELFHTML Forum</b></a><br> <a class="nav" href="http://selfaktuell.teamone.de/artikel/"><b>Feature Artikel</b></a><br> </div> </div>
<h1>Die Seite mit der pfiffigen Navigation</h1>
<p>Einfach mit die Maus Richtung linken Fensterrand bewegen. Um das Menü wieder wegzubekommen, Maus wieder zum rechten Fensterrand bewegen.</p>
<p>Und jetzt kommen noch etliche leere Absätze, damit auch sichtbar wird, daß das Menü immer an der gleichen Stelle angezeigt wird, egal wie weit man scrollt.</p>
<p> </p><p> </p><p> </p><p> </p> <p> </p><p> </p><p> </p><p> </p> <p> </p><p> </p><p> </p><p> </p> <p> </p><p> </p><p> </p><p> </p> <p> </p><p> </p><p> </p><p> </p> <p> </p><p> </p><p> </p><p> </p> <p> </p><p> </p><p> </p><p> </p> <p> </p><p> </p><p> </p><p> </p>
<p>Na, das dürfte reichen :-)</p>
</body></html>
Und Das STEHT IN DER DHTML::::
/* DHTML-Bibliothek */
var DHTML = 0, DOM = 0, MS = 0, NS = 0, OP = 0;
function DHTML_init() {
if (window.opera) { OP = 1; } if(document.getElementById) { DHTML = 1; DOM = 1; } if(document.all && !OP) { DHTML = 1; MS = 1; } if(window.netscape && window.screen && !DOM && !OP) { DHTML = 1; NS = 1; } }
function getElem(p1,p2,p3) { var Elem; if(DOM) { if(p1.toLowerCase()=="id") { if (typeof document.getElementById(p2) == "object") Elem = document.getElementById(p2); else Elem = void(0); return(Elem); } else if(p1.toLowerCase()=="name") { if (typeof document.getElementsByName(p2) == "object") Elem = document.getElementsByName(p2)[p3]; else Elem = void(0); return(Elem); } else if(p1.toLowerCase()=="tagname") { if (typeof document.getElementsByTagName(p2) == "object" || (OP && typeof document.getElementsByTagName(p2) == "function")) Elem = document.getElementsByTagName(p2)[p3]; else Elem = void(0); return(Elem); } else return void(0); } else if(MS) { if(p1.toLowerCase()=="id") { if (typeof document.all[p2] == "object") Elem = document.all[p2]; else Elem = void(0); return(Elem); } else if(p1.toLowerCase()=="tagname") { if (typeof document.all.tags(p2) == "object") Elem = document.all.tags(p2)[p3]; else Elem = void(0); return(Elem); } else if(p1.toLowerCase()=="name") { if (typeof document[p2] == "object") Elem = document[p2]; else Elem = void(0); return(Elem); } else return void(0); } else if(NS) { if(p1.toLowerCase()=="id" || p1.toLowerCase()=="name") { if (typeof document[p2] == "object") Elem = document[p2]; else Elem = void(0); return(Elem); } else if(p1.toLowerCase()=="index") { if (typeof document.layers[p2] == "object") Elem = document.layers[p2]; else Elem = void(0); return(Elem); } else return void(0); } }
function getCont(p1,p2,p3) { var Cont; if(DOM && getElem(p1,p2,p3) && getElem(p1,p2,p3).firstChild) { if(getElem(p1,p2,p3).firstChild.nodeType == 3) Cont = getElem(p1,p2,p3).firstChild.nodeValue; else Cont = ""; return(Cont); } else if(MS && getElem(p1,p2,p3)) { Cont = getElem(p1,p2,p3).innerText; return(Cont); } else return void(0); }
function getAttr(p1,p2,p3,p4) { var Attr; if((DOM || MS) && getElem(p1,p2,p3)) { Attr = getElem(p1,p2,p3).getAttribute(p4); return(Attr); } else if (NS && getElem(p1,p2)) { if (typeof getElem(p1,p2)[p3] == "object") Attr=getElem(p1,p2)[p3][p4] else Attr=getElem(p1,p2)[p4] return Attr; } else return void(0); }
function setCont(p1,p2,p3,p4) { if(DOM && getElem(p1,p2,p3) && getElem(p1,p2,p3).firstChild) getElem(p1,p2,p3).firstChild.nodeValue = p4; else if(MS && getElem(p1,p2,p3)) getElem(p1,p2,p3).innerText = p4; else if(NS && getElem(p1,p2,p3)) { getElem(p1,p2,p3).document.open(); getElem(p1,p2,p3).document.write(p4); getElem(p1,p2,p3).document.close(); } }
DHTML_init();
-
-
Hi,
Ich habe es mir nun so gedacht:
-Aufklappmenü zeigt nur "Übermenüpunkte" (Kategorien) an, wenn das JavaScript aktiviert ist (es versteckt sozusagen die divs der Menüpunkte). Ohne JavaScript wird alles angezeigt.diese Lösung finde ich - wenn es viele Menüpunkte sind - sehr schlecht!
Es wird so für die Besucher ohne Javascript extrem unübersichtlich.Versetze Dich in einen Besucher. Wenn er eine kleine Anzahl an (Haupt-)Links sieht, kann er sich sehr schnell orientieren. Klickt er nun einen dieser Links an und bekommt eine Übersichtsseite mit weiterführenden Links, so kann er sich hier wieder bestens orientieren. Warum also nicht so?
Du könntest bei dieser Lösung zwar auch zusätzlich für Besucher mit aktiviertem Javascript die entsprechenden Submenüpunkte "aufklappen", allerdings überlege Dir auch hier, ob dies dem Besucher wiklich hilft.Versetze Dich dazu wieder in einen Besucher. Er verschafft sich schnell eine Übersicht der Links, überlegt sich, einen anzuwählen und dann wird er - bevor er geklickt hat - mit bisher unsichtbaren weiteren Links konfrontiert. Die Folge: er wird sich womöglich erstmal erneut eine Übersicht verschaffen wollen - was steckt hinter den anderen Links bei mouseover? Oder er hat einfach keine Lust mehr, sich weiter mit der Seite auseinanderzusetzen und geht lieber zum nächsten Angebot. Ohne Aufklappmenü hätte er aber einen Menüpunkt angeklickt und sich in Ruhe die dort angegebenen weiterführenden Links angesehen.
Mein Fazit: Aufklappmenüs sind für nur sehr wenige Fälle wirklich sinnvoll und hilfreich. Wenn z.B. eine Seite über spezielle Computerlösungen im Stil einer grafischen Benutzeroberfläche erstellt ist, wird ein Besucher m.E. auch ein Aufklappmenü erwarten und es zu schätzen wissen (zumal er ja aus Erfahrung weiß, was sich i.d.R. wohinter verbigt.
freundliche Grüße
Ingo-
Moin!
diese Lösung finde ich - wenn es viele Menüpunkte sind - sehr schlecht!
Das ist nicht korrekt. Korrekt wäre "nicht optimal". Weil "sehr schlecht" ist es auf eine Lösung für Benutzer ohne JS zu verzichten. Optimal ist sicherlich für Benutzer ohne JS ein serverseitiges Skripting anzubieten. Wobei: was "optimal" ist dann auch von der Anzahl der Menüpunkte abhängt. Das bedeutet meines Ermessens: Mit steigender Zahl der Punkte nähert sich der Autor der "Note 6" ohne sie aber zu erreichen. Einen "1er" gibts bis zu dem Punkt, wo die Anzahl der Menüelemente 7 nicht übersteigt. (Wobei dann die Notwendigkeit des Klappmenüs wieder fragwürdig ist.)
Es wird so für die Besucher ohne Javascript extrem unübersichtlich.
Nun, das hängt ,wie geschrieben, von der Anzahl der Punkte ab. Zum anderen erwarten Benutzer mit deaktiviertem JS mit Sicherheit nicht das volle Kompott der Seite.
MFFG (Mit freundlich- friedfertigem Grinsen)
fastix®
--
Als Freiberufler bin ich immer auf der Suche nach Aufträgen: Schulungen, Development. Auch für seriöse Agenturen.-
Hi,
Das ist nicht korrekt. Korrekt wäre "nicht optimal". Weil "sehr schlecht" ist es auf eine Lösung für Benutzer ohne JS zu verzichten.
da hast Du natürlich auch Recht. "Sehr schlecht" war überzogen - "schlecht" wäre zutreffender gewesen, da es so noch steigerungsfähig ist...
Es wird so für die Besucher ohne Javascript extrem unübersichtlich.
Nun, das hängt ,wie geschrieben, von der Anzahl der Punkte ab. Zum anderen erwarten Benutzer mit deaktiviertem JS mit Sicherheit nicht das volle Kompott der Seite.Schon klar. Aber der Einsatz eines "Klappmenüs" impliziert für mich eine entsprechend hohe Zahl an Links, und die dann "ausgeklappt" anzubieten, empfinde ich fast schon als Frechheit. Und Nein: ich erwarte - von einer guten Seite - auch bei deaktiviertem Javascript ein übersichtliches Menü. Wenn mich eine Seite hier nervt und sie hat a) nicht zufällig den genau passenden Inhalt, den ich woanders nicht finde, und/oder ist b) nicht wichtig für mich, dann kommt sie auch nicht in meine Bookmarks. Ansonsten mach' ich mir im IE schonmal die Mühe, und trage sie bei den "vertrauenswürdigen Sites" ein oder rufe sie - bei einmaliger Nutzung - kurz im Mozilla auf.
freundliche Grüße
Ingo
-
-