Florians Forum » Webmaster » Homepage & Anderes » Netzwerkleiste in Javascript
Hallo Florian
Ich habe ein problem mit Javascript, undzwar möchte ich eine Netzwerkleiste / netzwerkbutton haben, in welchem ich die Netzwerkseiten eintragen kann. Das Problem hierdran ist, dass es eine datei sein soll, die ich dann mit dem script tag in den seiten einbinden kann.
Hier ist die Netzwerkleiste: http://www.welt-der-rollenspiele.tk/netz...werkleiste.html
So soll es also Grafisch aussehen, und die Einträge soll man in der Javascript datei ändern können. Sowas ähnliches hab ich schonmal in einem Array gesehen, hier: http://static.globalgameport.com/nl/pulldown.js
da ich leider kaum ahnung von Javascript hab, brauche ich Hilfe dabei, meine HTML Netzwerkleiste in Javascript zu bringen, weißt du wie man das am besten löst?

Hallo Movert,
prinzipiell geht das zwar mit JavaScript, aber eigentlich hast du bereits die bessere Variante verwendet.
Bedenke, dass die HTML-CSS-Variante auch in Browsern angezeigt wird, welche JavaScript nicht aktiviert haben.
Auch Script-Fehler stellen dann keine Probleme dar.
Falls du also immer noch an einer JavaScript-Lösung interessiert bist, werden wir schauen was wir tun können.
Ein Array mag zwar toll anzulegen sein, aber die HTML-Liste wäre trotzdem vorzuziehen.
Sag also einfach nochmal, bei welcher Variante du bleiben möchtest.
ich denke eher Javascript, mit HTML gibt es immer Probleme mit dem einbinden, und da das ganze Zentral eine datei sein soll, ist javascript die beste lösung. Javascript muss aber onehin aktiv sein, sonst gehen auf den Seiten die Funktionen die Forum, Umfragen, ... sowieso nicht, die meisten besucher haben es daher wohl aktiv.

Hallo Movert,
ich habe nun eine Lösung gefunden.
Nach einigem Überlegen kam ich zu dem Entschluss, dass es das Beste wäre, den CSS-Style beizubehalten.
Alle zu der CSS äquivalenten JavaScript-Anweisungen aufzuschreiben wäre eine große Arbeit und würde evtl. an den verwendeten Pseudo-Klassen scheitern.
Hier ist eine einmalige Wartung der CSS um einiges einfacher.
Ich habe neben minimalen Kürzungen übrigens noch die Klassen first und after entfernt und über Pseudo-Klassen realisiert.
Um ein angelegtes Menü letztendlich einzubinden, reicht es, in die HTML-Datei irgendwo innerhalb des Body-Tags die Skript-Datei direkt einzubinden.
An der Stelle, wo das Skript definiert wurde, steht dann am Ende die Navigation.
In der Skript-Datei wirst du sehen, dass ein ganz einfaches Objekt namens navMenu angelegt wurde.
Dies ist die kürzeste Syntax, die überhaupt verwendet werden kann. (s. auch JSON-Notation)
Du definierst einfach einmal einen Haupt-Link und dann beliebig viele URLs für das Untermenü.
Wenn der Hauptmenüpunkt nicht verlinkt werden soll, dann lasse einfach die Anführungs-Zeichen für die Website-Adresse wie im Beispiel leer.
Danach rufst du die Methode printMenu(MENUOBJEKT); auf, wobei als Parameter für MENUOBJEKT in diesem Fall das Objekt navMenu eingesetzt werden muss.
Der Aufruf heißt dann also hier printMenu(navMenu);
Für weitere Navigations-Menüs legst du einfach weitere Menü-Objekte unter anderem Namen an und rufst für jedes die printMenu(...)-Methode auf.
Sie wird dann die Objekte korrekt auslesen, in HTML-Code umsetzen und in die Seite reinschreiben.
Falls du statt direktem reinschreiben in die Seite lieber einen Rückgabe-String hättest, müsstest du nur die Methode dementsprechend anpassen.
Beachte dann aber, dass dann zum Einbinden in der HTML-Seite die bloße Definition der Skript-Datei nicht mehr ausreichen wird.
Dan bräuchtest du noch Anweisungen, welche den HTML-String in andere HTML-Elemente einfügen kann.
Vielen Dank, das funktioniert schonmal, nun habe ich aber das Problem, dass wenn ich es mit <script type="text/javascript" src="http://www.welt-der-rollenspiele.tk/netzwerk/pulldown.js"> </script> einbinde, erscheint entweder garnichts, oder nur das obere menüelement, aber das untere lässt sich nicht aufklappen. das soll aber eigendlich wie hier funktionieren: http://www.dsa-drakensang.de/ (rechte Seite unter Netzwerk).
MfG. Movert

Hast du auch mal die Testseite genau so ausprobiert?
Also bei mir wurden die Menüelemente aufgeklappt.
Wenn ich http://www.welt-der-rollenspiele.tk/netzwerk/pulldown.html aufrufe, funktioniert das Menü bei mir wie es soll.
Mir fällt gerade noch auf, dass ich zum Testen im Style vor jedes Hintergrundbild noch die absolute URL http://www.welt-der-rollenspiele.tk/netzwerk/... vornen hinzugefügt habe.
Auch wenn es keine Probleme bereiten sollte, und bei mir ja auch so im Moment funktioniert, könntest du mal probieren, die Pfade wieder in relative umzuwandeln.
Hab ich schon. Wenn ich das ganze in WordPress mit dem Script tag in der Sidebar oder an anderer stelle einbinde, funktioniert es aber irgendwie nichtmehr :(

Evtl. tritt ja vorher schon ein JavaScript-Fehler auf, der dann dieses Skript blockiert.
Oder die Funktions- bzw. Variablen-Benennung wurde bereits verwendet und ist doppelt belegt.
Aber versuche erstmal den Style auszuschließen, welcher für das Ein- und Ausblenden der Navigation verantwortlich ist.
Baue also mal testweise deine erste Version, welche du auch oben gepostet hast, in die Seite ein.
Wenn er trotz vorgegebenem HTML-Gerüst das nicht hinbekommt, liegt es wohl nicht am Generieren des HTML-Codes.
Ich habe hier im Forum auch des Öfteren mal Probleme mit der Positionierung aufgrund der Verschachtelung verschiedener Elemente.
Die Beiträge stehen ja selbst in einer Vielzahl anderer DIVs und Tabellen, da treten glaube ich gerne mal solche ungereimtheiten wegen der relativen Positionierung auf.
Ich musste bisher z.B. nach jedem Template-Wechsel die Abstände eines Tooltips vom Text aus dem Tooltip-Skript hier anpassen.
Bei 10px Abstand von oben kann es also z.B. sein, dass andere Abstände nochmal dazuaddiert werden und die Positionierung viel zu weit unten stattfindet.
Oder eben die Abstände nicht beachtet und die 10px dann vom Rand ganz oben ausgehen, was natürlich viel zu hoch ist.
Bin mir jetzt nicht mehr ganz sicher, welches die wahrscheinlichere Variante war.
Aber manchmal, falls die Boxen unten rausrutschen, sieht man, dass beim Hovern sich auf einmal der Scrollbalken (vertikal oder auch horizontal) vergrößert.
Eigentlich ein Zeichen, dass die Box unten rausgerutscht ist.
Nach oben hin sieht man leider nichts am Scrollbalken, da ist es einfach außerhalb des Bildbereiches.
Vielleicht erreichst du dann mit sehr großen Höhen und Breiten, dass die Boxen dennoch zumindest teilweise ins Bild reinragen, dann kannst du evtl. abschätzen wie weit sie oben/links aus dem Bild gerutscht sind.
Habe leider gerade nichts konkretes mehr dazu gefunden und habe selbst für diese Art des Problems selbst keine konkrete Lösung.
Da hilft nur, mit Werten herumzuprobieren.
Ansonsten hilft dir vielleicht, dass du es womöglich mit einem Problem durch falsche Offset-Werte zu tun hast.
Viel Glück!