Menü-Ausrichtung ändern

[MaexxDesign]

Hallo liebe Community,

auf meiner Homepage (http://maexxdesign.de/) sieht man links oben ein aufklappbares Menü, welches mit "Radeon" anfängt. Die einzelnen Produktreihen reihen sich darunter auf und spezielle Grafikkarten rechts davon. Das gleiche System möchte ich auch auf der rechten Bildschirmseite mit GeForce-Karten haben. Aber ich schaffe es leider nicht, dass sich das Menü links aufbaut, wenn man die Maus über die Produktreihe bewegt. Was muss man bitte am Code ändern ?

http://maexxdesign.de/testindexgeforce.html

PS: Ich weiß, dass meine Seite keine SSL-Zertifizierung hat. Das muss ich noch ändern.

Gruß !

[Gunnar Bittersmann]

@@MaexxDesign

auf meiner Homepage (http://maexxdesign.de/) sieht man links oben ein aufklappbares Menü, welches mit "Radeon" anfängt. Die einzelnen Produktreihen reihen sich darunter auf und spezielle Grafikkarten rechts davon.

Nein, da reiht sich nichts auf, weder darunter noch rechts davon. Nicht bei Tastaturbedienung.

Außerdem verwendest du die falschen HTML-Elemente: Das menu-Element dient nicht für Links (Navigation). Und menuitem gibt es gar nicht.

Was muss man bitte am Code ändern ?

a-Elemente für Links verwenden.

Zur Auslösung von Aktionen (Aufklappen von (Unter-)Menüs) buttons verwenden. Ein beim Button gesetztes aria-expanded-Attribut sollte den Zustand des jeweiligen Menüs ansagen.

Siehe Inclusive Components: Menus & Menu Buttons.

😷 LLAP

[JürgenB]

Hallo Gunnar,

Zur Auslösung von Aktionen (Aufklappen von (Unter-)Menüs) buttons verwenden. Ein beim Button gesetztes aria-expanded-Attribut sollte den Zustand des jeweiligen Menüs ansagen.

oder das dafür gedachte details/summary, da kann man dann auf aria-Attribute verzichten.

Gruß
Jürgen

[klawischnigg]

Hi there,

Das gleiche System möchte ich auch auf der rechten Bildschirmseite mit GeForce-Karten haben.

Zusätzlich zum von Gunnar Gesagten: "rechte Bildschirmseite" kann nicht bedeuten, rechte Bildschirmseite auf Deinem Monitor! Bei einer durchaus noch verwendeten Auflösung von 1650x1080 findet man den Geforce-Menüpunkt überhaupt nicht, wenn einem nicht auffällt, daß man nach rechts scrollen "muß".

Von der absoluten Unbrauchbarkeit einer solchen Konstruktion auf einem Smartphone oder ähnlichem Gerät einmal ganz abgesehen. Nachdem Du aber davon ausgehen kannst, daß mittlerweile rund die Hälfte aller Anwender einer Seite mit so einem Gerät daherkommen, halbierst Du schlicht und ergreifend einfach noch vor dem Online-Gehen der Seite bereits die Anzahl Deiner möglichen Besucher.

PS: Ich weiß, dass meine Seite keine SSL-Zertifizierung hat.

Das wäre an Deiner Stelle die geringste meiner Sorgen...😉

[Der Martin]

Hallo,

Das gleiche System möchte ich auch auf der rechten Bildschirmseite mit GeForce-Karten haben.

Zusätzlich zum von Gunnar Gesagten: "rechte Bildschirmseite" kann nicht bedeuten, rechte Bildschirmseite auf Deinem Monitor! Bei einer durchaus noch verwendeten Auflösung von 1650x1080 findet man den Geforce-Menüpunkt überhaupt nicht, wenn einem nicht auffällt, daß man nach rechts scrollen "muß".

bevor du das kritisierst, schau lieber nochmal nach, ob da überhaupt was ist.
Das Menü an der rechten Seite existiert nämlich noch gar nicht. Nicht einmal im Quelltext.

Btw, ich bevorzuge 1600x1200.

Ich weiß, dass meine Seite keine SSL-Zertifizierung hat.

Das wäre an Deiner Stelle die geringste meiner Sorgen...😉

+1

Immer eine Handbreit Wasser unterm Kiel
 Martin

[klawischnigg]

Hi there,

Das gleiche System möchte ich auch auf der rechten Bildschirmseite mit GeForce-Karten haben.

Zusätzlich zum von Gunnar Gesagten: "rechte Bildschirmseite" kann nicht bedeuten, rechte Bildschirmseite auf Deinem Monitor! Bei einer durchaus noch verwendeten Auflösung von 1650x1080 findet man den Geforce-Menüpunkt überhaupt nicht, wenn einem nicht auffällt, daß man nach rechts scrollen "muß".

bevor du das kritisierst, schau lieber nochmal nach, ob da überhaupt was ist.
Das Menü an der rechten Seite existiert nämlich noch gar nicht. Nicht einmal im Quelltext.

Das stimmt, aber im Posting ist weiter unten ein zweiter Link, in dem der OP das Geforce-Karten-Menü versuchsweise aufgebaut hat. Und bevor aus dem "versuchsweise" ein "endgültige Fassung" wird wollt' ich ihn auf ein paar, äh, Unstimmigkeiten in seiner Konstruktion aufmerksam machen...😉

[MaexxDesign]

Danke für die hilfreichen Antworten. 😀

Ich habe mir nun eine Vorlage mit "button"-Navigation rausgesucht und angefangen den Code an meine Vorstellungen anzupassen. Ist das Code-Grundgerüst in Ordnung ?

http://maexxdesign.de/

Ich habe erst vor einigen Tagen angefangen mich mit html und css zu beschäftigen.

Diese Website soll nur als Ergänzung zu meinen Grafikkarten-Museum-Threads dienen: https://www.hardwareluxx.de/community/threads/hardwareluxx-computerbase-grafikkarten-museum-ati-amd.1201276/

Ich will keine Werbung schalten, irgendwelche Daten sammeln oder sonst etwas tun, um Besucher zu vergraulen. Für mich haben Übersicht, Navigation und Bedienbarkeit Priorität.

[klawischnigg]

Hi there,

Ich habe mir nun eine Vorlage mit "button"-Navigation rausgesucht und angefangen den Code an meine Vorstellungen anzupassen.

Ich seh da keinen einzigen Button.

Ist das Code-Grundgerüst in Ordnung ? Ich habe erst vor einigen Tagen angefangen mich mit html und css zu beschäftigen.

Ja, aber ich habe den Eindruck, das hast Du nicht getan. Du hast irgendwelchen Code von irgendwoher zusammengestoppelt. Und ohne Verständnis, was da eigentlich passiert, wirst Du auch nicht wirklich weiterkommen.

Versteh' das bitte nicht falsch, das ist keine prinzipielle Kritik an Deinem Vorhaben oder ähnliches, irgendwo muß man ja schliesslich anfangen, aber anfangen mit irgendeinem Code, der noch dazu im Grunde genommen unbrauchbar ist, weil er auf vielen Geräten gar nicht funktioniert, ist irgendwie der falsche Weg.

Für mich haben Übersicht, Navigation und Bedienbarkeit Priorität.

So soll es ja auch sein, aber in dieser Hinsicht passiert auf Deiner Seite noch nicht wirklich viel, um es einmal freundlich zu formulieren. Da sind vor allem viele optische Effekte, die das ganze irgendwie professionell wirken lassen sollen, aber so etwas solllte, wenn überhaupt, ganz zum Schluss hinzugefügt werden. Auch und besonders, weil das Deinen Besuchern idR völlig egal ist. Die wollen wirklich "Übersicht, Navigation und Bedienbarkeit". Das wirst Du aber mit dieser Menükonstruktion meiner bescheidenen Meinung nach nie erreichen. Das ist bestenfalls ein optischer Gimmik für Desktop-Nutzer mit Riesenmonitoren. Ich an Deiner Stelle würde das Konzept überdenken und das Ganze mit entsprechender Anleitung von Grund auf neu aufbauen, auch und vor allem für Dein Verständnis von diesen Dingen...

[MaexxDesign]

Danke für die ausführliche Antwort !

Das man noch keine visuellen Buttons sieht, liegt daran, dass ich das Design und den Menü-Aufbau noch nicht angepasst habe, was ich noch tun werde, sobald das Grundgerüst auf gängigen Geräten wie Tablets und Smartphones funktioniert. Wäre ja sonst vergeudete Arbeit und Zeit.

Den Code habe ich natürlich kopiert,

(https://www.w3schools.com/howto/howto_js_dropdown_sidenav.asp)

da ich nicht in der Lage bin von Grund auf eine Website zu programmieren.

Das Verständnis, was passiert, wenn ich Parameter ändere, eigne ich mir im Moment durch trial and error an, was man natürlich fragwürdig finden kann. Es gibt halt viele Lernmethoden.

Was wäre denn noch nötig, um die Seite mit den heutigen Programmier- und Sicherheitsbedürfnissen kompatibel zu machen ? Und was ist an dem Code unbrauchbar ? Welche entsprechende Anleitung schwebt dir denn vor ? Ich suche halt nach entsprechenden Schlagworten, um Antworten zu finden. Und ein Suchergebnis hat mich zu w3schools geführt. Welcher Anlaufpunkt wäre denn abgesehen von selfhtml sinnvoller ?

[klawischnigg]

Hi there,

Den Code habe ich natürlich kopiert,

(https://www.w3schools.com/howto/howto_js_dropdown_sidenav.asp)

Kopiert vielleicht aber definitiv nicht von dort. Da unterscheiden sich Markup und CSS in praktisch allen Punkten von Deiner Seite.

Das Verständnis, was passiert, wenn ich Parameter ändere, eigne ich mir im Moment durch trial and error an, was man natürlich fragwürdig finden kann.

Ich finde das nicht fragwürdig. Aus meiner Sicht ist das eh der beste Weg, etwas zu lernen. Nur, das Herumprobieren macht nur Sinn, wenn man wenigstens schon etwas Ahnung von der Sache hat. Ohne diese kleine aber feine Voraussetzung ist das einfach nur ein Stochern im Nebel, vor allem hast Du nichts davon, wenn einmal dann etwas (zufällig) funktioniert, wie Du Dir das vorstellst, wenn Du nicht weißt, warum es funktionert.

Was wäre denn noch nötig, um die Seite mit den heutigen Programmier- und Sicherheitsbedürfnissen kompatibel zu machen ?

Mit Sicherheit oder entsprechenden Problemen hat das soweit ich sehe bis jetzt nichts zu tun; mit "Programmieren" im eigentlich Sinn genaugenommen auch nicht. Bis jetzt gehts eigentlich nur ums Markup (die richtigen HTML-Elemente an der richtigen Stelle verwenden) und um die Stylesheets.

Und was ist an dem Code unbrauchbar ?

Unter anderem, wenn nicht vor allem, daß er nur auf maximal der Hälfte aller Geräte funktioniert. Das ist aus meiner Sicht bei der verwendeten Konstruktion (die, wie ich lästig bin zu erwähnen, mit dem Drowdown-Menü auf der w3schools-Seite, deren Link zu gepostet hast, nichts zu tun hat) auch nicht reparierbar. Natürlich könnte man die einzelnen Menüpunkte richtig auszeichnen und auch das CSS komplett überarbeiten, aber dann kannst Du das gleich neu machen.

Welche entsprechende Anleitung schwebt dir denn vor ?

Naja, ich schätze, bei selfhtml findet sich sicher irgendetwas brauchbares, auch die von Dir gepostete Seite zeigt ein besseres Menü als das, das Du verwendest (wobei die Frage ist, ob man dazu wirklich Javascript verwenden will).

Ich suche halt nach entsprechenden Schlagworten, um Antworten zu finden.

Das wären Dropdown-Menü, Responsibilität, Barrierefreiheit, Usability…

Welcher Anlaufpunkt wäre denn abgesehen von selfhtml sinnvoller ?

Ich kann Dir da konkret nichts nennen, ich bin Praktiker, kein Webdesignpädagoge (😉), aber hier bist Du anyway unter Garantie schon einmal recht gut aufgehoben...

[Matthias Scharwies]

Herzlich willkommen bei SELFHTML,

Danke für die ausführliche Antwort !

Du bist ja schon mitten drin in den Diskussionen!

da ich nicht in der Lage bin von Grund auf eine Website zu programmieren.

Das ist das Grundproblem. HTML & CSS haben mit Programmierung an sich wenig zu tun, sind aber trotzdem Grundlagen, deren Fehlen den Profis später auf die Füße fällt.

Zuerst solltest du aber...

1. Dein HTML-Markup durch den Validator „jagen“ und ggfalls korrigieren. Das Ergebnis: https://validator.w3.org/nu/?doc=http%3A%2F%2Fmaexxdesign.de%2F sieht doch gar nicht so schlecht aus: Zeichencodierung und title solltest Du aber auf jeden Fall einfügen.
2. Deine Seite einmal ohne CSS anschauen
3. Mit dem Seiteninspektor schauen, welche CSS-Regelsätze vorhanden sind und welche schon bestehenden Regelsätze durch weiter untenstehende wieder überschrieben werden.

Lies mal schnell folgende Einstiegskurse:

• HTML/Tutorials/Einstieg
• HTML/Tutorials/Navigation
  • Die Fortsetzung JavaScript/Tutorials/zugängliche_Dropdown-Navigation sollte das von dir Gewünschte enthalten.

Viel Spaß!

Herzliche Grüße

Matthias Scharwies

[Der Martin]

Hallo,

Das man noch keine visuellen Buttons sieht, liegt daran, dass ich das Design und den Menü-Aufbau noch nicht angepasst habe, was ich noch tun werde, sobald das Grundgerüst auf gängigen Geräten wie Tablets und Smartphones funktioniert.

also erst die grundsätzliche Funktion sicherstellen, dann "hübsch" machen. Ist nicht der schlechteste Ansatz.

Den Code habe ich natürlich kopiert, da ich nicht in der Lage bin von Grund auf eine Website zu programmieren.

Wenn man Code kopiert, handelt man sich mehrere Probleme ein. Man weiß nicht, was der Code wirklich leisten kann, welche Einschränkungen er hat, und was man vielleicht selbst noch nachbessern muss.

https://www.w3schools.com/howto/howto_js_dropdown_sidenav.asp

Oh je. Das ist jetzt kein Stöhnen über w3schools.com, aber hast du eine Ahnung, wie alt das Beispiel ist? Nein? Ich auch nicht. Aber das völlige Fehlen von Elementen aus dem HTML-5-Sprachschatz, und die Tatsache, dass man sie mit aussagefreien div-Elementen und entsprechenden Klassen nachbilden will, deutet auf mindestens 10 Jahre hin.

Das Verständnis, was passiert, wenn ich Parameter ändere, eigne ich mir im Moment durch trial and error an, was man natürlich fragwürdig finden kann. Es gibt halt viele Lernmethoden.

Ja, und prinzipiell spricht nichts gegen trial & error. Nur sollte man das dann immer, wenn man was ausprobiert, nicht nur einfach beobachten, wie es wirkt, sondern das auch parallel in irgendeiner Dokumentation nachlesen. Denn viele Effekte und Nebenwirkungen bemerkt man nicht sofort.

Das muss nicht immer die hochoffizielle Spezifikation von HTML, CSS oder Javascript sein. Auch das SELFHTML-Wiki kann da oft ganz gut aushelfen. Die Tutorials richten sich eher an die Einsteiger, die auf breiter Front unterstützt werden wollen; die Referenz-Seiten richten sich eher an Fortgeschrittene, die nur nochmal eben nachlesen wollten, wie denn noch gleich die korrekte Syntax für irgendein Attribut, eine CSS-Eigenschaft oder eine Javascript-Funktion ist.

Was wäre denn noch nötig, um die Seite mit den heutigen Programmier- und Sicherheitsbedürfnissen kompatibel zu machen ?

Komplett neu aufbauen. Unser Wiki hat beispielsweise ein Tutorial, in dem Schritt für Schritt der Aufbau einer modernen, zugänglichen, mehrstufigen Navigation entwickelt wird. Dabei werden auch die besonderen Bedürfnisse von Mobilgeräten berücksichtigt.

Ich suche halt nach entsprechenden Schlagworten, um Antworten zu finden.

Barrierefreiheit, Zugänglichkeit, Accessibility (alles in etwa dasselbe).

Welcher Anlaufpunkt wäre denn abgesehen von selfhtml sinnvoller ?

Ich denke nicht, dass du hier falsch bist. Wir verstehen uns aber vor allem als Hilfe zur Selbsthilfe. Wir möchten die Leute dahin bringen, dass sie verstehen, was sie tun. Wir möchten sie beim Lernen unterstützen. Wir gehen aber davon aus, dass die Initiative und die eigentliche Arbeit von den Leuten selbst kommt.

Auch hier im Forum sind die meisten Stammgäste gern bereit zu helfen und ihre Freizeit zu investieren, wenn sie erkennen, dass jemand wirklich interessiert mitarbeitet. Was nicht gern gesehen wird: Die Anspruchshaltung "Mach mir mal bitte".

Ach übrigens: Du plenkst. Ist aber heilbar, sagt man.

Immer eine Handbreit Wasser unterm Kiel
 Martin