nicht angemeldet
Denkblockade beim Einbinden weiterer Untermenüs
Matthias ApselHallo,
ich bin kurz vorm Verzweifeln, weil ich gerade eine gewaltige Denkblockade habe.
Ich möchte anhand von Arrays unser Menü aufbauen. Die Anzeige des aktuell ausgewählten Menüpunktes und Zuklappen aller anderen Untermenüs, sofern vorhanden, spielt für mich jetzt erst mal keine Rolle.
Ich möchte nur die komplette Struktur angezeigt bekommen:
function MenueAufbauen()
{
var Hauptmenue = ["Startseite", "Wir über uns", "Rüstzeug", "Waffen", "Gewandung", "Schmuck", "Lagerleben", "Bastelbedarf", "Sonstiges", "Sonderangebote", "Anfrage", "Newsletter", "Administration", "AGB / Impressum"];
var Untermenue = {};
Untermenue["WirUeberUns"] = ["Wir über uns", "Termine", "Fotos"];
Untermenue["Ruestzeug"] = ["Aus Stoff", "Aus Leder", "Aus Metall"];
/*
Untermenue["Ruestzeug"]["AusStoff"] = ["Für den Kopf", "Für den Oberkörper", "Für die Arme", "Für die Beine", "Sonstiges"];
Untermenue["Ruestzeug"]["AusLeder"] = ["Für den Kopf", "Für den Oberkörper", "Für die Arme", "Für die Beine", "Sonstiges"];
Untermenue["Ruestzeug"]["AusMetall"] = ["Für den Kopf", "Für den Oberkörper", "Für die Arme", "Für die Beine", "Sonstiges"];
*/
Untermenue["Waffen"] = ["Speere", "Hämmer", "Äxte", "Schwerter", "Messer", "Saxe", "Schilde", "Sonstiges"];
Untermenue["Gewandung"] = ["Mützen", "Tuniken", "Hosen", "Mäntel", "Umhänge", "Sonstiges"];
Untermenue["Schmuck"] = ["Mjöllnir", "Aus Bernstein", "Fibeln", "Sonstiges"];
Untermenue["Lagerleben"] = ["Licht / Feuer", "Mobiliar", "Sonstiges"];
Untermenue["Bastelbedarf"] = ["Leder", "Stoffe", "Schließen", "Knebel", "Vorgefertigtes", "Sonstiges"];
var Menue = "";
var l = Hauptmenue.length;
for (var i in Hauptmenue)
{
Menue += '<div class="Button">' + Hauptmenue[i] + '</div>';
if (i < l - 1)
Menue += '<div class="ButtonTeiler"></div>';
var Menuepunkt = TextBereinigen(Hauptmenue[i]);
if (typeof Untermenue[Menuepunkt] !== "undefined")
{
var l2 = Untermenue[Menuepunkt].length;
for (var j in Untermenue[Menuepunkt])
{
Menue += '<div class="Button">' + Untermenue[Menuepunkt][j] + "</div>";
if (j < l2 - 1)
Menue += '<div class="ButtonTeilerUntermenue"></div>';
else
Menue += '<div class="ButtonTeiler"></div>';
}
}
}
return Menue;
}
function TextBereinigen(Text)
{
if (Text.indexOf(" ") !== -1)
{
var Worter = Text.split(" ");
var Text = "";
for (var i in Worter)
{
Worter[i] = Worter[i].substr(0, 1).toUpperCase() + Worter[i].substr(1);
Text = Text.concat(Worter[i]);
}
}
Text = Text.str_replace(["Ä", "ä", "Ö", "ö", "Ü", "ü", "ß", "/"], ["Ae", "ae", "Oe", "oe", "Ue", "ue", "ss", ""]);
return Text;
}
String.prototype.str_replace = function(SuchenNach, ErsetzenMit)
{
var Text = this;
var SuchenNach = (typeof SuchenNach == "string") ? [SuchenNach] : SuchenNach;
var ErsetzenMit = (typeof ErsetzenMit == "string") ? [ErsetzenMit] : ErsetzenMit;
for (var i in SuchenNach)
Text = Text.replace (new RegExp (SuchenNach[i]), (typeof ErsetzenMit[i]!== "undefined") ? ErsetzenMit[i] : "");
return Text;
}
function isArray(o)
{
if ((o.length !== undefined && o[0] !== undefined) || (o.length === 0 && o[0] === undefined))
return true;
else
return false;
}
Es funktioniert auch alles einwandfrei, nur hänge ich gerade, wie ich die auskommentierten Arrays zum Menüpunkt "Ruestzeug" einbaue und je mehr Sekunden, Minuten ins Land verstreichen, desto weniger Plan habe ich.
Ich möchte vom Ablauf her folgendes umsetzen:
Rüstzeug
Aus Stoff
---------
Für den Kopf
---
Für den Oberkörper
---
Für die Arme
---
Für die Beine
---
Sonstiges
---------
Aus Leder
---------
Für den Kopf
---
Für den Oberkörper
---
Für die Arme
---
Für die Beine
---
Sonstiges
---------
Aus Metall
---------
Für den Kopf
---
Für den Oberkörper
---
Für die Arme
---
Für die Beine
---
Sonstiges
---------
Ich raffe einfach nicht, wie ich dies umsetzen muss.
Könnt ihr mir helfen?
Danke und Gruß,
Enrico
-
Ok, nochmal aufgestanden, weil ich eine Idee hatte, wie es gehen könnte, umgesetzt und fast zufrieden:
for (var i in Hauptmenue) { Menue += '<div class="Button Hauptmenue">' + Hauptmenue[i] + '</div>'; if (i < l - 1) Menue += '<div class="ButtonTeiler"></div>'; var Menuepunkt = TextBereinigen(Hauptmenue[i]); if (typeof Untermenue[Menuepunkt] !== "undefined") { var l2 = Untermenue[Menuepunkt].length; for (var j in Untermenue[Menuepunkt]) { +---> | if ($(Untermenue[Menuepunkt][j]).size() > 1) | { | var l3 = Untermenue[Menuepunkt][j].length; | | for (var k in Untermenue[Menuepunkt][j]) | { | Menue += '<div class="Button">' + Untermenue[Menuepunkt][j][k] + "</div>"; | | if (k < l3 - 1) | Menue += '<div class="ButtonTeilerUntermenue"></div>'; | else | Menue += '<div class="ButtonTeiler"></div>'; | } | } +---> else { Menue += '<div class="Button">' + Untermenue[Menuepunkt][j] + "</div>"; if (j < l2 - 1) Menue += '<div class="ButtonTeilerUntermenue"></div>'; else Menue += '<div class="ButtonTeiler"></div>'; } } } }Jetzt habe ich lediglich das Problem, dass das jeweils, eigentlich zu den Untermenüs "Aus Stoff", "Aus Leder" und "Aus Metall" gehörende Untermenü "Für den Kopf", "Für den Oberkörper", "Für die Arme", "Für die Beine" und "Sonstiges" hintereinander nach dem Untermenüpunkt "Aus Metall" angezeigt werden.
D.h., ich habe jetzt folgende Struktur:
Rüstzeug Aus Stoff Aus Leder Aus Metall Für den Kopf Für den Oberkörper Für die Arme Für die Beine Sonstiges Für den Kopf Für den Oberkörper Für die Arme Für die Beine Sonstiges Für den Kopf Für den Oberkörper Für die Arme Für die Beine SonstigesUnd nicht, wie beabsichtigt:
Rüstzeug Aus Stoff Für den Kopf Für den Oberkörper Für die Arme Für die Beine Sonstiges Aus Leder Für den Kopf Für den Oberkörper Für die Arme Für die Beine Sonstiges Aus Metall Für den Kopf Für den Oberkörper Für die Arme Für die Beine SonstigesWas muss ich bei meinem Code ändern?
Danke und Gruß,
Enrico-
Om nah hoo pez nyeetz, Enrico!
Ok, nochmal aufgestanden, weil ich eine Idee hatte, wie es gehen könnte, umgesetzt und fast zufrieden:
Das geht mir auch manchmal so.
Unabhängig von deinem Problem solltest du eine vernünftige Struktur bauen und keine Div-Suppe. Verwende eine verschachtelte Liste mit a-Elementen.
Matthias
-
Hallo!
Ich kann dir bei deinem aktuellen Problem nicht helfen, aber ...
Warum bastelst du das Menü clientseitig mit Javascript zusammen? Was wenn JS deaktiviert ist?
"Normalerweise" erledigt man so etwas serverseitig bspw. per PHP.Und nicht, wie beabsichtigt:
Rüstzeug
Aus Stoff
Für den Kopf Für den Oberkörper Für die Arme Für die Beine SonstigesAus Leder
Für den Kopf Für den Oberkörper Für die Arme Für die Beine SonstigesAus Metall
Für den Kopf Für den Oberkörper Für die Arme Für die Beine SonstigesBei der gewünschten Struktur teilst du deine Menüpunkte in 2 Arrays auf (Oberpunkte + Unterpunkte). Anschließend durchläufst du das Array mit den Oberpunkten und zu jedem Punkt zusätzlich das Array mit den Unterpunkten. Das vorliegende Beispiel ist für mich aber auch der "klassische" Fall, wo sich Select Auswahllisten anbieten würden: 1\. Material 2. Körperteil Stoff Kopf Leder Oberkörper Metall Arme Beine Dann bräuchtest du nur jede Auswahlliste jeweils mit den Inhalten aus dem entsprechenden Array zu befüllen. Und da du ja eh auf JS zu setzen scheinst, kannst du die entsprechenden Inhalte per AJAX laden. Gruß Gunther
-
-
Meine Herren,
~~~javascript
Untermenue["Ruestzeug"] = ["Aus Stoff", "Aus Leder", "Aus Metall"];
Untermenue["Ruestzeug"]["AusStoff"] = ["Für den Kopf", "Für den Oberkörper", "Für die Arme", "Für die Beine", "Sonstiges"];
Untermenue["Ruestzeug"]["AusLeder"] = ["Für den Kopf", "Für den Oberkörper", "Für die Arme", "Für die Beine", "Sonstiges"];
Untermenue["Ruestzeug"]["AusMetall"] = ["Für den Kopf", "Für den Oberkörper", "Für die Arme", "Für die Beine", "Sonstiges"];Das ist eine sehr eigenartige Struktur, hier mal ein Equivalent mit etwas ausführlicherer Schreibweise: ~~~javascript Untermenue["Ruestzeug"] = new Array(); var Ruestzeug = Untermenue["Ruestzeug"]; // nur der Übersicht halber Ruestzeug[0] = "Aus Stoff" Ruestzeug[1] = "Aus Leder"; Ruestzeug[2] = "Aus Metall"; Ruestzeug["AusStoff"] = new Array(); Ruestzeug["AusStoff"][0] = "Für den Kopf"; Ruestzeug["AusStoff"][1] = "Für den Oberkörper"; Ruestzeug["AusStoff"][2] = "Für die Arme"; Ruestzeug["AusStoff"][3] = "Für die Beine"; Ruestzeug["AusStoff"][4] = "Sonstiges"; Ruestzeug["AusLeder"] = new Array(); Ruestzeug["AusLeder"][0] = "Für den Kopf"; Ruestzeug["AusLeder"][1] = "Für den Oberkörper"; Ruestzeug["AusLeder"][2] = "Für die Arme"; Ruestzeug["AusLeder"][3] = "Für die Beine"; Ruestzeug["AusLeder"][4] = "Sonstiges"; Ruestzeug["AusMetall"] = new Array(); Ruestzeug["AusMetall"][0] = "Für den Kopf"; Ruestzeug["AusMetall"][1] = "Für den Oberkörper"; Ruestzeug["AusMetall"][2] = "Für die Arme"; Ruestzeug["AusMetall"][3] = "Für die Beine"; Ruestzeug["AusMetall"][4] = "Sonstiges";Du mischst auf dieser Ebene numerische und alphanumerische Schlüssel, was untypisch ist. Eigenschaften mit numerischen Schlüsseln zählen als Array-Elemente, nicht-numerische hingegen als Objekt-Eigenschaften. Das hat dich vermutlich auch dazu verleitet eine for-in-Schleife zum Itererieren über die Struktur zu verwenden.
So Fehler könnten dir direkt auffallen, wenn du derartige Datenstrukturen in JSON-Syntax notierst, gleichzeit erhöhst du damit außerdem wesentlich die Leserlichkeit.
Ein JSON-Beispiel (ohne diesen Fehler):
{ "AusStoff" : [ "Für den Kopf", "Für den Oberkörper", "Für die Arme", "Für die Beine", "Sonstiges" ], "AusLeder" : [ "Für den Kopf", "Für den Oberkörper", "Für die Arme", "Für die Beine", "Sonstiges" ], "AusMetall" : [ "Für den Kopf", "Für den Oberkörper", "Für die Arme", "Für die Beine", "Sonstiges" ] }-
{
"AusStoff" : [
"Für den Kopf",
"Für den Oberkörper",
"Für die Arme",
"Für die Beine",
"Sonstiges"
],
"AusLeder" : [
"Für den Kopf",
"Für den Oberkörper",
"Für die Arme",
"Für die Beine",
"Sonstiges"
],
"AusMetall" : [
"Für den Kopf",
"Für den Oberkörper",
"Für die Arme",
"Für die Beine",
"Sonstiges"
]
}Noch schöner finde ich übrigens: ~~~javascript [ { "title" : "Aus Stoff", "children" : [ { "title" : "Für den Kopf"}, { "title" : "Für den Oberkörper"}, { "title" : "Für die Arme"}, { "title" : "Für die Beine"}, { "title" : "Sonstiges"} ], }, { "title" : "Aus Leder", "children" : [ { "title" : "Für den Kopf"}, { "title" : "Für den Oberkörper"}, { "title" : "Für die Arme"}, { "title" : "Für die Beine"}, { "title" : "Sonstiges"} ], }, { "title" : "Aus Stoff", "children" : [ { "title" : "Für den Kopf"}, { "title" : "Für den Oberkörper"}, { "title" : "Für die Arme"}, { "title" : "Für die Beine"}, { "title" : "Sonstiges"} ], } ]So eine Struktur lässt sich übrigens kinderleicht in ein HTML-Menü mit verschachtelten Listen übersetzen.
-
Hallo 1UnitedPower,
vielen Dank für Deine ausführliche Hilfestellung.
Ich habe jetzt folgende Definitionen:
var Menue = jQuery.parseJSON { "Startseite", "Wir über uns": [ "Wir über uns", "Termine", "Fotos" ], "Rüstzeug": { "Aus Stoff": [ "Für den Kopf", "Für den Oberkörper", "Für die Arme", "Für die Beine", "Sonstiges" ], "Aus Leder": [ "Für den Kopf", "Für den Oberkörper", "Für die Arme", "Für die Beine", "Sonstiges" ], "Aus Metall": [ "Für den Kopf", "Für den Oberkörper", "Für die Arme", "Für die Beine", "Sonstiges" ] }, "Waffen": [ "Speere", "Hämmer", "Äxte", "Schwerter", "Messer", "Saxe", "Schilde", "Sonstiges" ], "Gewandung": [ "Mützen", "Tuniken", "Hosen", "Mäntel", "Umhänge", "Sonstiges" ], "Schmuck": [ "Mjöllnir", "Aus Bernstein", "Fibeln", "Sonstiges" ], "Lagerleben": [ "Licht und Feuer", "Mobiliar", "Sonstiges" ], "Bastelbedarf": [ "Leder", "Stoffe", "Schließen", "Knebel", "Vorgefertigtes", "Sonstiges" ], "Sonstiges", "Sonderangebote", "Anfrage", "Newsletter", "Administration", "AGB / Impressum" };Ist dies dann richtig?
Gruß,
Enrico
-
