Beiträge von einsiedler

    Warte kurz mal, mir fällt da etwas ein, und zwar kann man die aktuelle Bildschirmbreite mit js ermitteln?

    Wenn ja könnte man doch eine "Art Weiche" (in Anführungszeichen) bauen wenn das Bildschirmfenster kleiner als 1400px ist.

    Und dann alles so wie in meinem Post #10

    Bisher läuft bei mir alles mit aria-expandet wunderbar, die Buttons zwitchen/verändern sich (von Sandwich zu X & Pfeil down zu pfeil up)


    Wenn man nun aus Ausgangslage anfangs alle aria-expandet = "true" setzen würde also im html

    und dann halt weiterlesen Post #10

    zu A) Nee, die Ausgangsposition soll sein das alle Unter-Menüpunkte ( div.nav-group ) geschlossen sind.

    Wollte Dir/Euch mit dem rechten Abbildung zeigen das man die Unterpunkte auch aufklappen könnte/kann.


    zu B)

    Auch hier ist die Ausgangssituation das alle Unterpunkte anfangs geschlossen sind.

    mit dem dritten ganz rechten Abbildung wollte ich wiederum nur zeigen das das man die Unterpunkte aufklappen kann.

    Habe es nocheinmal neu illustriert:


    Â) javascript ausgeschaltet





    Fall B) Großer Bildschirm 1920px & javascript an





    Fall C) mittlerer Bildschirm <1440px & javascript an



    Fall D) schmalster Bildschirm <850px & javascript an




    Hoffentlich kann man nun die Links anklicken.

    Ansonsten:



    Mit der Bitte um Mithilfe ! Schaut euch mal Bitte die jpg`s bzw die PDF an.


    Mein Angebot steht noch:

    Ich suche jemanden der gegen "Bezahlung" mir diese Navigation schreibt.

    (erst Überweisung dann den Quelltext oder auf Rechnung egal...)


    Ernstgemeinte Angebote, bitte eine PN an mich, dann gebe ich euch meine Anschrift, Telefonnummer etc.


    Hauptsache ich bekomme es mal gelöst.



    der einsiedelnde

    Was wäre, wenn man grundsätzlich alle Buttons aria-expandet = "true" setzen würde , den Sandwich Button und die Unter-Buttons der einzelnen Menüpunkte.


    Fall A) javascript ausgeschaltet:

    Die Menüpunkte (ul.group von mir genannt) (also Aktuelles , Arbeiten , CV etc.) werden angezeigt.

    Dann müßte NUR noch die Unter-Menüpunkte (div.nav-group von mir genannt) (bei Aktuelles wäre das aktuelle ausstellungen, Blog / bei Arbeiten wäre das Drifte

    rs, Waldfrieden etc. usw. ) auch noch eingeblendet werden.

    Aber dann setzt man die Unter - Menue Buttons auch aria-expandet = "true" dann werden diese Unter-Punkte auch angezeigt.

    (Also im html alles aria-expandet ="true" setzen!)


    Soweit zu javascript ausgeschaltet!


    Nun Fall B) javascrip an und großer Bildschirm


    Der Sandwich Button ist immer noch aria-expandet = "true" wird aber nicht angezeigt da ja per KLICK nichts angezeigt/umgeschaltet werden muss.

    Die einzelnen Menüpunkte (also Aktuelles , Arbeiten , CV etc.) werden ja angezeigt.

    Hier könnte man ja wie du angedeutet hast <button aria-hidden ="true" aria-expandet="true" ... usw.

    oder <button hidden .... usw. oder button aria-hidden aria-expandet="true" class ="treeitemmain hidden" benutzt werden.

    Sowohl bei ausgeschaltetem javascript und eben für den Fall B)


    Nun schieben wir das Bildschirmfenster zusammen, die magische 1440px Marke

    Dann müßte eben a) das hidden per javascript aus dem html entfernt werden (wie auch immer man es macht, siehe oben)

    UND b) sämtliche aria-expandet = "true" zu aria-expandet = "false" werden

    Denn dann werden die Menüpunkte als auch die Untermenü-Punkte ausgeblendet UND die Buttons werden angezeigt die nötig sind.

    Ersteinmal der Sandwich-Button.


    Für den letzten Fall (bei ganz schmalem Bildschirmfenster) gilt ja das selbe.


    Siehe das ganze im Test


    Bin mir nicht sicher ob ich damit richtig liege oder ob das auch nur MIST ist und viel zu kompliziert gedacht!


    Jetzt aber gute n8


    der einsiedelnde

    Hallo liebe Leute, ich benötige dringend eure Hilfe und zwar von jem mit javascript-kenntnisse

    Folgende Ausgangssituation: Im Fall vom ausgeschaltetem javascript sollen alle Menüpunkte (auch die ausgeblendeten) alle angezeigt werden,

    doch nun benötige ich eine Weiche wenn also javascript aktiv ist , bedeutet also: von aria-expandet="undefined" auf aria-expandet="false" umschaltet.

    Bei aria-expandet="undefined" werden alle Menüpunkte angezeigt (bei ausgeschaltetem javascript, wie gewünscht:

    Dann muss, bei eingeschaltetem javascript, aus aria-expandet="undefined" aria-expandet="false" werden, da die Buttons auf Anfang stehen und alle Untermenüpunkte versteckt sein sollen.


    Wie schreibt man dieses script!


    Beispielseite:


    Bitte helft mir bitte damit bis morgen!


    Liebe Gruß & gute n8 der einsiedelnde

    basti1012 Auch Deine Mithilfe ist mir wertvoll und gewünscht!


    Hab mal ein wenig weitergearbeitet nach einer längeren Pause.

    Dabei treten zweierlei Probleme im IE auf:


    A) Siehe screen :



    Der header (im IE) , weshalb werden die Überschriften rechts und links abgeschnitten, ja da muss es wohl ein overflow:hidden geben

    aber kann es daran auch liegen?


    B) Ebenfalls im IE



    Mit einem Text lief ja alles reibungslos, er wurde einfach umgebrochen wenn das Bildschirmfenster schmaler wurde.

    Doch nun bei einem IMG sieht es anders aus.

    Im Opera, firefox und chrome wird das Img beim zusammenschieben des Bildschirmfensters schmaler, es verkleinert sich.

    Doch nur im IE macht er dieses Verhalten nicht.

    Wie im screen wird das Foto nicht "verkleinert", irgendwann wird es einfach rechts ausgebelndet wegen overflow: hidden;



    C) Habe gearde gesehen das wohl noch Fehler bestehen, siehe Validator


    Doch ich verstehe hier nicht was er mir sagen möchte!




    Wie löst man beide Probleme?


    Mit der Bitte um Mithilfe


    der einsiedelnde

    Ich brauche nochmal euren Rat + Hilfe


    Bisher habe ich die Menüführung so geplant wie unter


    Ich möchte das Ganze ein wenig erweitern siehe B)

    Wenn man den + Botton drückt das weitere Informationen sichtbar werden , die man durch - wieder "zurückschiebt"

    Die Verlinkungen sind ja ohnehin schon "sichtbar" und "benutzbar",

    also wenn das Browserfenster zu schmal wird brauchen diese Zusatzinformationen nicht angezeigt werden.

    Haltet ihr soetwas für (einfach) machbar?

    Und/oder überhaupt sinnvoll?

    Was denkt ihr?


    Werde mich morgen daranmachen...



    Gruß der einsiedelnde

    Also bis jetzt gefällt mir alles, selbst im IE10 sieht es (NOCH) vernünftig aus und es scheint so, das alles funktioniert.

    Selbst im IE9 sieht alles ganz gut aus:



    Ich überlege mir ob ich mir die Mühe mache, das im IE9 der Link und der Botton per Tabelle nebeneinander angezeigt wird.

    Wenn nicht noch mehr Probleme im IE9 (durch mehr/anderen Content) entstehen, würde das ja doch gehen.


    Werde jetzt mal das mit dem align-self: flex-start; ausprobieren @Sempervivum


    Ja @basti1012, das ist mir auch schon aufgefallen. Eigentlich wollte ich den Zusatztext (Menü öffnen / schliessen) verschwinden lassen das nur der Botton

    wirkt. eigentlich weiß man ja heute was mit dem Sandwich und dem X gemeint ist, und das mit den Pfeilen nach oben / unten kann man sich leicht erschliessen.

    Wenn ich aber den Button als auch den (Zusatz)-Text möchte, müsste man beides wohl jeweils in eine Tabelle packen um beides zu "bändigen", oder?


    Gruß der einsiedelnde

    Kannst die jetzt alles mal anschauen:

    Was jetzt noch ist, das im IE das #main-nav bis nach ganz unten "stretched", sowohl als Button als auch wenn das Untermenü sichtbar ist. Im Opera, Firefox und Chrome scheint es so, das die Höhe der Menge des Contents anzupassen scheint, nur nicht im Edge. Ein einfaches height: auto; funktioniert nicht. Ist wohl nav button[aria-expanded="true"]+ul {} richtig die Höhe "anzusprechen"? Nur mit was? align-items: ??? und stretch .... Was funktioniert da?


    Gute n8 der einsiedelnde