[JavaScript/CSS] Dropdown Menu ohne Frames?
0 
Felix Riesterer
0 0 Felix Riesterer
[JavaScript/CSS] Dropdown Menu ohne Frames?
Hallo liebe Kollegen,
ich stehe hier vor einem kleinen Problem, das ich irgendwie nicht lösen kann, ich versuche mal es zu Beschreiben:
-
es wird mit Hilfe von php eine Seite generiert, ohne frames, verschiedene Inhalte.
-
Links hab ich 3 Topmenus, die auf klick geöffnet werden sollen, die habe ich soweit mit <div> Tags (style: Display:Block/none) realisiert. Eine Javascript-Funktion wechselt mir die Styles von sichtbar nach unsichbar. Dies klappt auch hervorragend, aber:
Klickt man nun auf einen Link wird die Seite (incl. Nav) wieder mit anderen Inhalten erzeugt, und die 3 Topmenus alle wieder geschlossen, weil das ja der Ausgangspunkt war.
Ich möchte aber eigentlich, dass sie offen bleiben, je nachdem, wie die User der Site sie auf- oder zugeklappt haben. Hab schon irgendwie etwas mit Variablen versucht, die ich ja mit php beim Site-generieren auslesen könnte, nur hab ich keinen Plan, wie ich eben diese Variablen zb mit javaScript setzen kann..
Habt Ihr da eine Idee, oder könnt mir helfen?
Vielen Dank schonmal,
Tobias
-
Lieber Tobias,
eine Möglichkeit wäre, die entsprechenden <div>s mit inline-Styles von PHP schon ausgeklappt oder eingeklappt auszuliefern, sodass das Javascript nur noch die Veränderungen des Users daran manipulieren muss.
Wie allerdings die nicht von der aktuellen Seite betroffenen Navileisten in ihrem aktuellen Status auf die nächste Seite "gerettet" werden könnten, steht meines Wissens irgendwo in SelfHTML versteckt. Aber um Dir einen Tipp zu geben: Verwende window.name um darin irgendwelche Zustände deiner Navigation (als String!) "abzuspeichern"...
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
Hallo Felix,
Vielen Dank erstmal für deine Hilfe, der Tip mit windows.name hat schon sehr geholfen, und funktioniert auch soweit, aber nun hab ich folgendes problem:
ich öffne eines der Dropdowns und klicke etwas darin an, nun wird eine neue Seite erzeugt, (das Dropdown ist zuerst geschlossen) und wird dann per onLoad geöffnet ,irgendwie sieht es unprofessionell aus.. *klack-klack*Per Javascript etwas in die Session schreiben und es dann mit PHP auslesen geht wohl nicht, oder?
Tobias;-)
-
Lieber Tobias,
wie ich vorhin schon geschrieben habe: Was spricht denn dagegen per PHP dem Navigationselement ein Inline-Style zu verpassen, welches ja sonst nur über Javascript auf diese Elemente angewendet würde? Beispiel: "impressum.php" ist eine Unterseite von "Rechtliches" => Navi-Element "Rechtliches" bekommt ein ~~~html <ul id="navi">
<li class="aufgeklappt">Rechtliches
<ul>
<li><a href="impressum.php">impressum</a></li>
<li><a href="disclaimer.php">disclaimer</a></li>
</ul>
</li>
<li class="zugeklappt">ueber mich
<ul>
<li><a href="bio.php">biographie</a></li>
</ul>
</li>
</ul>Im Übrigen sollte ich mich weigern, ohne einen Link auf die betroffene Seite, oder aber eines aussagekräftigen Code-Beispiels weiter herumzuraten. > Per Javascript etwas in die Session schreiben und es dann mit PHP auslesen geht wohl nicht, oder? Nicht dass ich wüsste. Aber ich habe auch noch nie mit Sessions gearbeitet... Liebe Grüße aus [Ellwangen](http://www.ellwangen.de/), Felix Riesterer.-
Hi Felix, hier kommt also der code:
JavaScript im Header:
function showMenu(name, wert) {
icons=new Array();
icons["Hauptmenu"]=document.imgHauptmenu;
icons["Special"]=document.imgSpecial;
var cname="nav"+name;
var bild=icons[name];
var inhalt=document.getElementById(cname);
if (inhalt.style.display=="none") {
inhalt.style.display="block";
bild.src="../design/arrow_close.gif";
bild.alt="Schließe Menu";
} else {
inhalt.style.display="none";
bild.src="../design/arrow_open.gif";
bild.alt="Öffne Menu";
}
}so sieht meine Navigation aus:
<table width="250" valign="top">
<tr><td>
<table class="navTitle">
<tr>
<td class="header_titleLeft"><IMG alt="" src="../design/topleft.gif" border=0><br></td>
<td><font class="mainmenue"><a href="javascript:showMenu('Hauptmenu', 1);" class="mainmenue">Hauptmenu</a><br></font></td>
<td class="navTitleIcon"><a href="javascript:showMenu('Hauptmenu', 1);"><IMG alt="Öffne Menu" name=imgHauptmenu src="../design/arrow_open.gif" border=0></a></td>
<td class="header_titleRight"><IMG alt="Öffne Hauptmenu" src="../design/topright.gif" border=0><br></td>
</tr>
</table>
</td></tr>
<tr><td>
<DIV style="DISPLAY: none" name="navHauptmenu" id="navHauptmenu">
<table class="navInside">
<tr>
<td class="nav_Left"> </td>
<td class="nav_Center"><font class="submenue"><a class="menu" TITLE="Startseite" href="start.php"><img alt="Startseite" border="0" src="../design/icon/maison.gif" width="24" height="24" style="vertical-align: middle"> Startseite</a><br></font></td>
<td class="nav_Right"> </td>
</tr>
<tr>
<td class="nav_Left"> </td>
<td class="nav_Center"><font class="submenue"><a class="menu" TITLE="Eigene Gruppe(n) ansehen" href="user_overview.php"><img alt="Eigene Gruppe(n) ansehen" border="0" src="../design/icon/group.gif" width="24" height="24" style="vertical-align: middle"> Eigene Gruppe(n) ansehen</a><br></font></td>
<td class="nav_Right"> </td>
</tr>
<tr>
<td class="nav_Left"> </td>
<td class="nav_Center"><font class="submenue"><a class="menu" TITLE="Eigene Arbeiten ansehen" href="user_work.php"><img alt="Eigene Arbeiten ansehen" border="0" src="../design/icon/work.gif" width="24" height="24" style="vertical-align: middle"> Eigene Arbeiten ansehen</a><br></font></td>
<td class="nav_Right"> </td>
</tr>
<tr>
<td class="nav_Left"> </td>
<td class="nav_Center"><font class="submenue"><a class="menu" TITLE="Status bearbeiten" href="user_status.php"><img alt="Status bearbeiten" border="0" src="../design/icon/connected.gif" width="24" height="24" style="vertical-align: middle"> Status bearbeiten</a><br></font></td>
<td class="nav_Right"> </td>
</tr>
</table>
</DIV>Den ganzen Code darzulegen, wäre vielleicht etwas viel, ich hoffe, du kommst so damit klar, einen Link kann ich leider nicht angeben, weil es ein Login erfordert.
Jetzt versuche ich nochmal das Problem zu beschreiben:
man öffnet ein Menu, und klickt darin etwas an, nun wird die Site mit neuen Inhalten aufgebaut, das Menu aber sollte offen bleiben.Ich hab schon versucht etwas in window.name zu schreiben, und diese daten dann beim nächsten Öffnen wieder auszulesen, aber dabei öffnet sich die Site halt mit vorerst geschlossenen Menus, dann poppen sie auf (onLoad), finde ich net ganz so schön ;-)
Vielen vielen Dank nochmal für deine Hilfe,
Tobias-
Lieber Tobias,
Dein Code ist eine wilde Mischung aus ansatzweise sinnvollem CSS (die Klassen, HTML-Elemente sinnvoll durch <div>s gruppiert) und total veraltetem Markup (<font>-Elemente *grrr*). Das sollten wir ändern (Stichwort: Semantisches Markup).
Ich möchte folgendes vorschlagen: Eine Navigation ist eine Liste von Links, also wird sie auch als solche ausgezeichnet. Es sind keine tabellarischen Daten, daher verwendet man im Quelltext keine Tabelle (erst recht keine verschachtelte!). Siehe hierzu das SelfHTML-Kapitel zu CSS-basierten Navigationsleisten. Dass das im beschriebenen Kapitel (obwohl äußerlich irreführend) tatsächlich Dein Vorhaben direkt betrifft, magst Du auf dieser Seite im Quelltext studieren, denn auch hier wurde eine Liste (<ul>-Element) verwendet.
Wenn Du dann den Quelltext Deiner Seite entsprechend umgebaut hast, dann kann man den <li>-Elementen, die eine weitere (verschachtelte) <ul> enthalten, eine entsprechende CSS-Klasse zuweisen, die das Auf- bzw. Zuklappen realisiert. Obige Seite hat zwar nicht den besten Javascript-Code, jedoch arbeitet sie mit semantischem Markup und passenden CSS-Klassen.
Wenn Du dann im Menü auf einen Link zu einer weiteren Seite geklickt hast, dann kann ja das PHP-Script (das Du ja ohnehin verwendest) Deiner Navigations-Liste im entsprechenden <li>-Element (in welchem sich der Menü-Unterpunkt von vorhin zwangsläufig befinden muss) per passender CSS-Klasse zum Aufklappen das Menü/die Navigation entsprechend einstellen.
Klar, was ich meine? Und tue Dir selbst den Gefallen, dieses unhandliche und monströse Tabellengebilde restlos zu entsorgen!
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
Hallo Felix,
Mit Deinem Tip, die Tabellen zu vergessen hast Du sicherlich Recht, ich hatte dies auch erst so angedacht, aber leider war es mir mit Div's und Styles nicht möglich etwas am unteren Rand zu positionieren, ohne das es richtig viele Probleme machte.
Mit Postion: absolut / Relative kam ich einfach nicht weiter, als mit einer "verbotenen" Tabelle mit Höhe 100% ( Ich weiß, ist auch verboten ;-) ) ... irgendwann in einer späteren Zukunft werde ich das Dingen auch noch umschreiben zu reinen CSS - aber im Moment ist es egal, es befindet ich in der Entwicklung und ist nicht fertig.Du schriebst:
"Wenn Du dann im Menü auf einen Link zu einer weiteren Seite geklickt hast, dann kann ja das PHP-Script (das Du ja ohnehin verwendest) Deiner Navigations-Liste im entsprechenden <li>-Element (in welchem sich der Menü-Unterpunkt von vorhin zwangsläufig befinden muss) per passender CSS-Klasse zum Aufklappen das Menü/die Navigation entsprechend einstellen."
.. und genau da ist mein Problem, ich kann mit keinem PHP-Script der Welt abfragen, was der User geklickt hat (in meinem Fall z.B. Menu öffnen), weil das Client-Seitig läuft und PHP schon vor Seitenansicht also Server-Seitig seine Möglichkeiten der Überprüfung abgibt.Muss ich wohl doch soetwas mit Javascript abfangen, also zuerst die geschlössenen Menus hinnehmen, die dann per window.name Auf- oder Zugeklappte werden.
vielen Dank auf jeden Fall!
Jetzt nochmal was anderes, in eigener Sache:
Genau wegen Deiner Antwort, nimm es mir bitte nicht übel, hatte ich keinen Code gepostet. Leider kommen dann nämlich immer dieselben Antworten. (Zu wenig/zu viel CSS, Tabellen, Falscher Doctype usw)
Mir ist selber klar, dass man Tabellen dafür nicht nutzt, aber darum ging es ja auch eigentlich in meiner Frage nicht.
Dies ist für mich seit langem ein Punkt, weswegen ich hier nur im absoluten Notfall etwas poste.
Schade, denn auch beim Suchen finde ich zu Hauf solche Posts: igendjemand fragt, wie man ein Link beim Mousover unterstreichen kann - und es gibt ca 20 Antworten, in denen sich die Foren-User über den Html-Stil des Entwicklers zerreissen, manchmal sogar heftige Beleidigungn aussprechen usw.. - Das hilft eigentlich keinem so richtig, werder dem der gefragt hat, noch denen die gerne helfen möchten. (Nochmals, Deine Antworten haben mir sehr geholfen, und ich bin äusserst Dankbar, das Du mir diese Antworten gegeben hast)
Ein Hinweis auf Fehler ist natürlich ok, aber manchmal ist es damit einfach zu viel.
Aber nun frag Dich bitte selber einmal, hätte ich im ersten Post den Quelltext gepostet, so würden wir jetzt wahrscheinlich seit 3-5 Posts nur noch über Tabellen, Div oder so etwas reden, das eigentliche Problem wäre unbehandelt geblieben. ( Und in diesem Fall hat es ja nun auch wirklich nichts mit dem Quelltext, bzw "Fehlern" darin zu tun. )
Und damit ich mich noch ein drittes mal entschuldigen kann, möchte ich nochmal sagen, dass ich Dich damit nicht angreifen wollte oder ähnliches. ;-)Just my 2 cents,
Tobias-
Lieber Tobias,
Mit Deinem Tip, die Tabellen zu vergessen hast Du sicherlich Recht, ich hatte dies auch erst so angedacht, aber leider war es mir mit Div's und Styles nicht möglich etwas am unteren Rand zu positionieren, ohne das es richtig viele Probleme machte.
Und im Selfraum hast Du nix dergleichen gefunden? Da war doch was mit Footer und so...
ich kann mit keinem PHP-Script der Welt abfragen, was der User geklickt hat (in meinem Fall z.B. Menu öffnen), weil das Client-Seitig läuft und PHP schon vor Seitenansicht also Server-Seitig seine Möglichkeiten der Überprüfung abgibt.
Das ist zwar richtig, aber kann es nicht sein, dass wenn der Server Dokument "mypage.php" ausgeben soll, dass dann beim User MenüpunktX aufgeklappt hat sein müssen? Ich weiß, dass PHP nicht mitbekommt, was der User mit seiner Maus alles so anstellt, aber es kann "erraten", welche Menüzweige aktiviert werden mussten, um die angeforderte Seite anzuklicken. Wenn "mypage.php" nur im Menüzweig "X" enthalten ist, dieser aber default-mäßig zugeklappt ist, dann kann man doch PHP folgendes ausgeben lassen:
<li class="schon-offen">MenüzweigX <ul> <li><a href="mypage.php">my page</a></li> </ul> </li>Muss ich wohl doch soetwas mit Javascript abfangen, also zuerst die geschlössenen Menus hinnehmen, die dann per window.name Auf- oder Zugeklappte werden.
Das klappt ganz sicher, auch mit dem "Schönheitsfehler", dass es verzögert reagiert. Aber was spricht denn gegen obige Lösung? Ich kann Deine Argumentation ("PHP ist auf dem Client blind") nicht ganz akzeptieren...
Jetzt nochmal was anderes, in eigener Sache:
Genau wegen Deiner Antwort, nimm es mir bitte nicht übel, hatte ich keinen Code gepostet. Leider kommen dann nämlich immer dieselben Antworten. (Zu wenig/zu viel CSS, Tabellen, Falscher Doctype usw)Tja, wie immer versuchen viele auf althergebrachte Weise (und dazu gehörte ich vor 1,5 Jahren auch noch!) angeblich schneller und leichter Dinge zu realisieren. Und wenn's dann im Probeaufbau nicht klappt, dann wird umständlich (weil der Code IST umständlich!) nach Ursachen gesucht. Sind sie gefunden und behoben, wird das Projekt so wie es ist (also der Probeaufbau) fertiggestellt. Das angeblich hehre Ziel, zukünftig das Ganze in "sauberes HTML mit CSS" umzubauen wird dann aufgrund der bereits investierten Zeit und Mühe nicht mehr wirklich eingesehen, jedenfalls wird es nicht gemacht.
Dabei ist der "Probeaufbau" mit semantischem HTML und sinnvollem CSS kein Bisschen umständlicher oder zeitaufwendiger, wenn man sich denn ebenso genügend darin eingearbeitet hat, wie man es sich bei HTML4_inklusive_allem_deprecatetem für sich einbildet.
Mir ist selber klar, dass man Tabellen dafür nicht nutzt, aber darum ging es ja auch eigentlich in meiner Frage nicht.
Das mag ja sein, aber es macht eine Analyse wesentlich komplexer! Ich helfe gerne; ganz besonders gerne helfe ich, wenn ich mir dabei meine Augen und mein Hirn nicht verrenken muss. ;-)
Dies ist für mich seit langem ein Punkt, weswegen ich hier nur im absoluten Notfall etwas poste.
Schade, denn auch beim Suchen finde ich zu Hauf solche Posts: igendjemand fragt, wie man ein Link beim Mousover unterstreichen kann - und es gibt ca 20 Antworten, in denen sich die Foren-User über den Html-Stil des Entwicklers zerreissen, manchmal sogar heftige Beleidigungn aussprechen usw.. - Das hilft eigentlich keinem so richtig, werder dem der gefragt hat, noch denen die gerne helfen möchten. (Nochmals, Deine Antworten haben mir sehr geholfen, und ich bin äusserst Dankbar, das Du mir diese Antworten gegeben hast)
Ein Hinweis auf Fehler ist natürlich ok, aber manchmal ist es damit einfach zu viel.Wenn Du meinen obigen Post auch in seiner Absicht einmal hinterfragst (Zitat: "Und tue Dir selbst den Gefallen, dieses unhandliche und monströse Tabellengebilde restlos zu entsorgen!"), dann solltest Du hoffentlich einsehen, dass es ein wohlgemeinter Rat war, der Dir die Dinge tatsächlich erleichtern soll! Wenn Du in Zukunft von vornherein semantisch auszeichnest, um dann die Gestaltung rein mit CSS vorzunehmen, dann fällt es Dir nicht nur mit jedem Male leichter, Du produzierst nebenbei gleich Projekte, die im fertigen Zustand eben keine Probeaufbauten mehr sind. Halbe Arbeit!
Aber nun frag Dich bitte selber einmal, hätte ich im ersten Post den Quelltext gepostet, so würden wir jetzt wahrscheinlich seit 3-5 Posts nur noch über Tabellen, Div oder so etwas reden, das eigentliche Problem wäre unbehandelt geblieben. ( Und in diesem Fall hat es ja nun auch wirklich nichts mit dem Quelltext, bzw "Fehlern" darin zu tun. )
Da fasse ich mich mal an meine eigene Nase und überprüfe pflichtschuldigst, ob ich das Ursprungsthema tatsächlich aus den Augen verloren habe, oder ob ich in jedem Posting tatsächlich weiterführend darüber diskutiert habe. *nachguckz* Ja, ich bin vielleicht mengenmäßig weniger auf das Ursprungsproblem zu sprechen gekommen, aber ich habe dazu wirklich alles in dieser Diskussionsphase dazu Sagenswerte geäußert!
Und damit ich mich noch ein drittes mal entschuldigen kann, möchte ich nochmal sagen, dass ich Dich damit nicht angreifen wollte oder ähnliches. ;-)
Oh, ich fühle mich in keiner Weise angegriffen. Aber es ist sehr nett, dass Du diesen Umstand nocheinmal verdeutlichen möchtest! Feiner Zug.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
-
-
-
-
-