[Taxidriver05]

Ich hatte das Problem schon einmal angesprochen, nur hat mich dies leider zu keinem brauchbaren Ergebnis geführt...

Mein Vorhaben:

• Umsetzung eines (möglichst PHP-basiert) Navigationsmenüs mit max. 2 Unterebenen,
  
• Design-Anpassung per CSS,
  
• Integration in bestehende MySQL-Datenbank-Struktur.

Voraussetzungen:

• SQL-Befehl zur Verbindung nicht erforderlich, da Verbindung per INCLUDE erfolgt,
  
• Untermenüs sollen per Hover angezeigt werden (darf im Notfall auch mit JavaScript erfolgen; möglichst aber per CSS),
  
• sollte möglichst barrierefrei sein,
  
• derzeitige Variante über (sehr unsauberes) JavaScript gelöst,
  
• Ebenen-Elemente werden aus 3 verschiedenen Tabellen ausgelesen.

Wie bereits oben beschrieben werden die Daten aus einer MySQL-Datenbank aus 3 verschiedenen Tabellen ausgelesen, die jedoch in Abhängigkeit zueinander stehen.

Die Ebenen werden aus folgenden Tabellen mit den jeweiligen Tabellenspalten ausgelesen:

street_cat ("Kopf"-Bereiche der einzelnen Menüs)

Struktur:

Zitat

• street_cat_id,
  
• street_cat_name.

street_sub_cat (1. bzw. Hauptebene (sichtbar))

Struktur:

Zitat

• street_sub_catid,
  
• street_cat_id (Zuordnung zum "Kopf"-Element),
  
• street_sub_catname.

street_sub_cat_subcat (2. Ebene; soll nur per Hover sichtbar sein)

Struktur:

Zitat

• street_sub_cat_subcatid,
  
• street_sub_catid (Zuordnung zum Element der Hauptebene),
  
• street_cat_id (Zuordnung zum "Kopf"-Element),
  
• street_sub_cat_subcatname,
  
• street_sub_cat_subcatautor (derzeit ungenutzt),
  
• street_sub_cat_subcattext (derzeit ungenutzt),
  
• street_sub_cat_subcatdat (Ziellink des Menüeintrages mit Pfadangabe),
  
• street_sub_cat_subcatstatus (derzeit nicht genutzt),
  
• street_sub_cat_subcat_subcatviews (derzeit nicht genutzt).

Falls wer Fragt, warum hier ungenutzte Tabelleneinträge drin sind...
Das derzeitige Menü wurde nicht von mir erstellt. Leider hat meine Vorgänger den Code weder auskommentiert, noch wirklich 100%ig fertig gestellt.

Daher suche ich eine möglichst einfache Lösung, die bisherige Variante zu ersetzen. Denn leider leidet hier auch die Usability etwas darunter. Und mir fehlt momentan jeglicher brauchbarer Ansatz...

Falls jemand eine Idee hat oder noch Infos benötigt, einfach hier posten...

Grüße und schonmal vielen Dank im Voraus,

Euer Taxidriver05

Dieser Beitrag wurde von Taxidriver05 bearbeitet: 09. September 2010 - 15:46

[zwutz]

wenn du es möglicht barrierefrei willst, dann zeig die Unterpunkte standardmäßig an und versteck sie am Anfang per Javascript, um sie dann später an gewünschter Position wieder einblenden zu lassen
Rein mit CSS bin ich mir nicht sicher, ob es möglich ist, und ob das dann überhaupt barrierefrei sein wird (ich bezweifle es aber).

Die Tabellenstruktur ist unflexibel. Wenn du daran was ändern kannst, schrumpf es auf eine, maximal zwei Tabellen zusammen (id, parent_id, text, target)

ul sollte klar sein, damits anpassbar bleibt

Gibts irgendwas konkretes, wozu du Fragen hast? Ich tipp hier jetzt ungern ein fertiges Skript runter

Dieser Beitrag wurde von zwutz bearbeitet: 10. September 2010 - 14:47

[Taxidriver05]

Nun...

Die Tabellenstruktur will ich eigentlich nur ungern aufgeben, da hin und wieder auch mal genzlich neue Kategorien eingefügt werden.

Die Option, die unterste Kategorie permanent anzuzeigen, kommt insofern nicht in Frage, da einzelne Menüpunkte bis zu 20 Einträge und mehr haben.

Nun...
Wie gesagt...
Mir fehlt da momentan jeglicher ansatz dazu, wie ich das realisieren kann.
Zwar habe ich da bereits schon einige Varianten im Netz gefunden, wie sich ein solch dynamisches Menü umsetzen lässt.
Nur ist mir die Integration in meine bestehende Seite schlichtweg ein Rätsel.

[zwutz]

Zitat (Taxidriver05: 10.09.2010, 17:23)

Die Tabellenstruktur will ich eigentlich nur ungern aufgeben, da hin und wieder auch mal genzlich neue Kategorien eingefügt werden.

damit hast du auch in der Ein-Tabellen-Lösung kein Problem. Alles, was keine Parent-Id hat, ist eine Kategorie. Aber nun gut, deine Sache

Zitat (Taxidriver05: 10.09.2010, 17:23)

Die Option, die unterste Kategorie permanent anzuzeigen, kommt insofern nicht in Frage, da einzelne Menüpunkte bis zu 20 Einträge und mehr haben.

Wer sagt was von permanent anzeigen?
Du willst eine möglichst barrierefreie Lösung. Also muss es auch ohne Javascript und auch ohne css funktionieren.
Daher anzeigen und sofort bei Aufruf der Seite per Javascript ausblenden. Wer kein Javascript hat, sieht das Menü und wer einen Screenreader nutzt hat auch kein Javascript. Für diejenigen ist das Menü also trotzdem nutzbar.
Würdest du es standardmäßig ausblenden und erst bei Bedarf einblenden, hätten diese Nutzer kein vollständiges Menü

Zitat (Taxidriver05: 10.09.2010, 17:23)

Nur ist mir die Integration in meine bestehende Seite schlichtweg ein Rätsel.

Das sollte das kleinere Problem sein. Wenn du es isoliert hinbringst, dann musst du es nur noch an die richtige Stelle im Code kopieren.

Ich lass mir das aber mal durch den Kopf gehen. Hab nämlich auf die schnelle auch nichts zufriedenstellendes gefunden. Die meisten Javascript-Menüs versuchen mit Slide- oder Einblend-Effekten zu punkten, aber das ist so ziemlich das hässlichste, was ich mir vorstellen kann.
Bin leider in Javascript bis auf die üblichen DOM-Spielereien auch nicht so bewandert, also fällt mir aus dem Stegreif nichts ein. Eine praktikable, reine CSS-Lösung kann ich aber so ziemlich ausschließen.


Bah. Ich weiß schon, warum ich lieber im Backend unterwegs bin. Da bleib ich von solchen Kundenwünschen verschont

[LostSoul]

Guten Abend.

Ersteinmal zum Thema Barrierefreiheit: Wer hier CSS ausschließt und eine JavaScript-Lösung präferiert, gehört wohl grundlegend jede Erlaubnis zum Programmieren entzogen, bis er CSS verstanden hat. CSS ist exakt *DAS* Mittel, um die Darstellung auf unterschiedlichen Ausgabemedien zu regeln - egal, ob es sich dabei um einen Monitor, Drucker oder eben einen Screenreader handelt.

Im Fall eines solchen Screenreaders sollte natürlich beachtet werden, dass man auf dynamische Elemente etc. verzichtet. Hier hilft aber letztlich vor allem nur eines: Sich tatsächlich mal mit einer Person die seheingeschränkt ist vor die Webseite zu setzen und deren Feedback einzuholen.

Wer hingegen anfängt mit JavaScript oder noch schlimmer mit Java oder Flash an einer Lösung zu basteln, schafft keine Barrieren ab, sondern setzt die Hürde noch höher, da damit bestimmte Nutzergruppen pauschal ausgeschlossen werden. Entweder, weil z.B. Tools/Addons wie NoScript aktiviert sind, weil dem Nutzer (in Unternehmen) Änderungen der Einstellungen (aus Sicherheitsgründen) nicht gestattet sind, der Nutzer kein Java installiert hat oder Flash für Teufelswerk hält.

Obendrein - dazu gibt es eine Reihe an Usability-Forschungen - sinkt die Akzeptanz einer Seite ganz merklich, wenn diese, sofern der Nutzer bestimmte Techniken deaktiviert hat, wenn diese dem Nutzer, eventuell sogar unnötigerweise, solche Techniken wieder aufdrängen will.

Wie gesagt: Die Darstellung einer Webseite, auf unterschiedlichen Ausgabegeräten, bis hin zur unterschiedlichen Darstellung bestimmter Inhalte nur auf bestimmten Anzeigegeräten, ist gerade einer der Kernziele von CSS gewesen.

Und nun zum Problem der Programmierung:
Wo genau ist denn das Problem, das habe ich gerade noch nicht verstanden? Im Moment arbeitest du mit Tabellen? Dann gibst Du denen einen ID und lässt sie bei hover bestimmte Elemente anzeigen bzw. wieder ausblenden. Dazu gibt es wahrscheinlich Millionen Beispiele im Netz. Wo liegt also das genaue Problem?

[Taxidriver05]

Naja...

Irgendwie verfolgt da jedes Konzept, was ich da bisher gefunden habe irgendwie einen anderen Ansatz...
Das irritiert mich da irgendwie etwas...

Zwar hatte ich mal ein konzept gefunden, was sich auch (theoretisch) für meine Seite umsetzen ließe.
Nur gab es da probleme mit der rekursiven Abfrage (also mit der 2. Eben im Hover)...

Daher wollte ich einfach mal Fragen, ob jemand nen Ansatz hat, wie man das am Effektivsten umsetzen kann.

Leider Sind meine PHP-Kenntnisse nicht unbedingt so gut, dass ich behaupten kann, ich hacke mal eben so n Skript in den Editor...
Daher wäre es hilfreich, wenn da jemand n paar Quellen hätte, sodass ich mich auch mal richtig in die Materie vertiefen kann...