Toggle-Navigation mit CSS :target Experiment

    Hallo liebe Forumer,

    ich unternehme gerade ein Toggle-Navigation mit CSS :target Experiment,

    um eventuell (wenn es klappt oder sinnvoll erscheint!) dies in meine bisherige Website zu erweitern.


    Aber lasst mich ersteinmal erläutern weshalb ich dies bräuchte (wenn es eben Sinn machen würde!)


    Folgende Problemstellung:

    BISHER ist es so, wenn ich den Hauptmenue-Punkt "Arbeiten" angeklickt habe (waagerechtes Menue oben, blau unterlegt!) ,

    dann eines der Bilder Icons (darunter) anklicke, meinetwegen "Drifters,2012", dann anklicke, dann öffnet sich ein neues Fenster und

    die entsprechende Dokumentation zu dieser Arbeit erscheint. Bisher bestens (Vielen Dank MrMurphy für Deine Unterstützung!!)


    Was ist aber nun, wenn ich eine andere Arbeit, meinetwegen die nächste "Waldfrieden,2006" anklicken möchte,

    dann muss ich ja oben im blau unterlegten Hauptmenue wieder "Arbeiten" anklicken um zu den Bilder-icon-Menue zu kommen.

    Das finde ich ein wenig umständlich (oderist das so normal von der Abfolge her?)


    Achso: Hier mal ein Link zur Ansicht: meine DemoSeite


    Deshalb kam mir die Idee eben auf jeder Unterseite (für "Drifters,2012", "waldfrieden,2006" etc.

    von links ein Menue "optisch einschwebt" , so wie das Icon-Menue mit den verschiedenen Bildern von den Arbeiten.

    Illustriert habe ich das hier mal (man sieht dort ein jpg): Toggle-Navigation mit CSS :target V2 für eine Unterseite


    Ein toggle-menue das eigentlich auch ganz gut funktioniert habe ich hier mal: Toggle-Navigation mit CSS :target V1


    Bis ich nun das Ganze in ein zentriertes mittiges div setze (das rot umrandete Feld), wie ja auch nun meine Website aufgebaut ist,

    (siehe: Toggle-Navigation mit CSS :target V2)

    dann wandert das (von links) "einschwebende" div vom äußersten linken Rand an und nicht vom linken Rand des mittleren (roten) "Fensters".


    Wie muss ich nun ein positions: xxx; oder ein display: block; so raffiniert setzen das ich das nun erreiche?

    Ich hoffe jetzt wird es klarer wofür ich dies alles bräuchte, wenn es Sinn macht.

    Oder es gibt andere bessere Lösungen! (Auchso ja, och bin immer bemüht eine Script-freie Lösung anzustreben, wenn dies möglich ist.)


    Gruß der einsiedelnde

    Bei dein 2 ten problem glaube ich das du das so meinst https://codepen.io/basti1012/pen/WaGGWa ?

    Der Close Button ist jetzt da wo der open Button ist ( kannst du ja wieder ändern ),, weil finde ich irgendwie blöd wenn man Open klickt und der Close Button dann auf einmal an einer ganz anderen Stelle ist. Vieleicht geschmackssache ,aber ich mag es nicht.


    Nur bei dein ersten problem ist ja so ne sache. Vieleicht solltest du dir ein Dropdown Menü bauen , oder wenn du auf "drifters" klickst und so das es sich dann in einen Popup öffnen den man mit X wieder weg klicken kann.


    Deine Zeichnung verstehe ich nicht ganz. Willst du das jetzt wie bei deinen Beispiel Menü da so machen , das die verlinkungen dann von der Seite reinfahren damit du direkt zur andere Seite wechseln kannst ? Also wie ein Dropdown Menü nur das es nicht immer sichtbar ist und von der Seite rein kommt ?

    EDIT: Zeichnung habe ich jetzt verstanden. Ok , das bekommst du hin,bist ja schon auf nen guten weg dahin.

    Habe die kleinen Veränderungen bemerkt: das "margin-left:-0%;" im " #openNav:target #closeBtn { ".


    Frage A: Könnte man das "hineinschieben und das herausschieben" das am linken und rechten äußersten Rand noch

    für eine Sekunde sichtbar ist noch ein wenig unsichtbarer machen. Also im Rand dort!

    Ginge das oder wäre das zu kompliziert?

    Ich habe versucht eine intensive Hintergrundfarbe zu setzen und ein z-index:2; für html und body.

    Es wirkte aber nicht.


    Frage B: Wäre es komplizierter wenn man die erste Seite mit dem Zombitext also bevor man OpenNavi betätigt,

    das der so stehen bleibt und die OpenNavi zieht sich darüber und ist ein wenig durchsichtig? Bei Betätigung des Bottons

    schnellt er dann wieder nach links zurück.

    Dann müsste man doch mit "position" arbeiten (villeicht position: absolute; ??). Wie sähe das aus?

    (Eventuell Frage A und Frage B kombinieren!)


    Gruß der einsiedelnde

    Ehrlich gesagt verstehe ich A nicht ganz. Hast du irgendwo mal ein Beispiel gesehen was du zeigen kannst? Oder kannst du ein Bild erstellen wie du das meinst ? Möglich ist fast alles. Was css nicht kann ,kann javascript. Aber schöner ist es halt ohne Js.


    Frage B sollte nicht das problem sein,

    Du meinst das der reingeschobene Container sich über den anderen legt und den darunter noch durch scheinen läßt ?

    Aber das solte man dann schon fast unsichtbar machen sonst scheint der Text zu doll durch und man kann nix mehr lesen

    Hey,

    zu A : Das neu geöffnete Fenster schwebt quasi vom linken äußersten Browserrand herein und für einen Bruchteil

    einer Sekunde sieht man eben zwischen dem linken äußersten Browserrand bis zu der gestrichelten roten Linie

    das neu "einschwebende" Fenster. Äquivalent an der rechten Seite wo das Fenster mit dem Zombitext sich "verdichtet",

    enger wird bis es weg ist.

    Aber vielleicht muss ich das so akzeptieren. ich dachte halt das man dies mit dem z-index oder

    display: none; irgendwie wegbekommt.


    Zu A - Botton-close: Ich dachte eben halt das es intuitiver wäre wenn man den Button beim geöffneten Menue eben

    rechts setzt, denn ich wollte an den Botton-Stellen soetwas wie: " > " und entsprechend " < " einfügen.


    zu B: Wo muss ich da mit "position" arbeiten?


    Gruß der einsiedelnde

    Zu A meinst du eigentlich das der eine Container den 2 anschiebt und ihn dann raus drückt ?

    Ich habe heute irgendwie eine blockade im Kopf. Mit Javascript kriegt man das hin, aber das sollte mit css auch gehen.


    Hier lesen ja genug Leute mit vieleicht kann da mal einer kurz rüber nachdenken wie man das ohne Javascript regeln kann.Wenn da einer was weiß dann ist gut ,ansonsten denke ich später nochmal drüber nach ,oder mache was mit js, obwohl Js eigentlich nicht sein muß wenn es auch ohne gehen sollte

    Nee, nee,

    hier habe ich es mal illustriert: Illustration website

    Ich meine rechts und links (am Rand) von : <div class="contentbox"> / das ja zentriert mittig ist (rot gestrichelt) , merkt man für einen Hauch einer Sekunde

    das von links einschwebende neue <div> obwohl ich es schöner fände, wenn es geht, das das neue Fenster ab dem linken Rand (ab der rot gestrichelten

    roten Linie von <div class="contentbox"> "hereinscrollt".

    Wenn dies so machbar ist...


    Bitte noch die anderen Bemerkungen von Post #6 beachten!


    Gruß der einsiedelnde

    Du hast geschrieben das du es schöner finden würdest das der eingescrollte Container erst ab der Line sichtbar ist.

    Das könnte man ganz leicht mit before und after verdecken. Oder mit Extra Container oder Javascript sollte auch klappen.


    Habe das mal mit before und after gemacht und sollte jetzt so aussehen wie du dir das dachtest ( Zumindest der Teil vom Script )

    Fals das jetzt Ok ist , was wolltest du jetzt noch geändert haben? Habe den Überblick verloren

    http://sebastian1012.bplaced.n…18/container-schieben.php

    Hey Sebastian,

    ich finde Deine jetzige Demo sehr gut, DANKE! Genauso stelle ich es mir vor.


    Deine Version wo sich die Ebenen überlagern (und quasi leicht durchsichtig sind!) ,

    wie Du es gestern mal kurz in Deinem Codepen hattest

    fand ich jetzt nicht so ansprechend.


    Nun bei der jetzigen neuen Version überlege ich ob ich nicht zwei <div> nebeneinander lege.

    Links ein schmales <div> wo eben ganz oben der "Botton" liegt,

    und rechts dann halt der eigentliche Inhalt. Sieht glaub ich besser aus und statischer.


    Vielen Dank!


    Gruß der einsiedelnde

    Zitat von einsiedler

    Deine Version wo sich die Ebenen überlagern (und quasi leicht durchsichtig sind!) ,

    wie Du es gestern mal kurz in Deinem Codepen hattest

    fand ich jetzt nicht so ansprechend.

    Deswegen wahr sie auch nur kurz da weil irgendwie wahr das nix und auch nur spielerrei. Hatte aber dein post aus 4# erst nicht verstanden und dann kam das raus.


    Deine Idee mit den festen Button wäre auch nee möglichkeit. Nur dann solltest du dir nur ein Button bauen der close und open kann . Dafür gibt es ja toggle(), damit kann ein Button 2 verschiedene Funktionen den man ihn zuweist. ( blöde erklärung ,aber ist ungefähr so )

    Ich bemerke gerade, es gibt Schwierigkeiten wenn man das Bildschirmfenster zusammenschiebt bzw. die Schriftgröße verändert.

    Dann verdeckt zum Beispiel das mittlere <div> etwas vom rechte Rand.

    Siehe mal: jpg vom Problem

    Du siehst das rechts (der Rand) von irgendetwas überdeckt wird, wohl vom mittleren <div>.

    Aber der Inhalt vom mittigen <div> passt sich schon der Breite an. Nur steht irgendetwas über, wohl die Breite des <div> selbst.

    Irgendwie müsste das mittlere <div> sich immer in der Breite anpassen.


    Hmmmmmm......

    Wär schön gewesen wenn es die Lösung gewesen wäre.






    Gruß der einsiedelnde

    gebe den mittleren div doch mal einen border dann siehst du ja ob es an den div liegt oder ob es an den <p> liegt was in den div ist. Hast du deine version schon online ? Damit man das man Live sehen kannst was du genau meinst ? Oder mach mal schnell ein Codepen fertig

    Und schau mal wenn das toggle Fenster geöffnet ist was dann passiert: bei geöffnetem toggle-Fenster


    Habe es online: Testversion toggle-Menue


    Das mittlere <div> hat bereits einen roten Rand (border) , schiebe mal das Bildschirmfenster etwas zusammen, dann

    überdeckt irgendwann der rechte Rand etwas vom mittleren <div> , wobei aber der Inhalt vom mittleren <div>

    sich schön der neuen aktuellen Breite anpasst. Komisch...


    Hmmmmm....

    wenn du den :after width Wert kleiner machst geht das weg. Nur ob vw Werte überhaupt optimal sind für sowas glaube ich nicht. Man sollte das mal alles mit % Versuchen und vieleicht 3 Container nehmen anstatt before und after. Das sollte eigentlich nur ein Beispiel sein und keine fertige Lösung.

    Kennst du dich mit Flexboxen aus ? Ich denke wenn man das mit 3 Container nebeneinander im Flex Layout macht um einiges besser hinbekommt als die jetztige Lösung.


    EDIT: Ich glaube ich habe einen denk fehler. Flexbox bringt glaube ich auch nicht viel weil wir z-index brauchen und z-index geht ja nur bei positionierungen. Mist., Jetzt muß ich erstmal selber überlegen was da an besten funktionieren würde.


    EDIT2:

    Mach mal aus vw prozente und rechne die padding werte mit calc() von der breite des Containers ab .Dann geht es . Zumindest konnte ich dann keine Fehler mehr finden aufder schnelle

    Ja sieht doch gut aus. Wenn du jetzt noch ein padding haben willst damit die Schrift nicht ganz an Rand ist mußt du den padding wieder von der Breite abziehen,damit nicht der Fehler aus post #14 wieder passiert.


    Aber sonst sieht es doch gut aus und beim kleinen Fenster konnte ich jetzt auch keine Fehler mehr sehen.


    PS:

    Code
    #openNav:target #content {
    margin-left:100%;
    width:80%;
    padding:0x;
    position:fixed;
}

    Bei padding fehlt ein p oder ein x zuviel

    Noch ein Tipp.

    Da du am Anfang das stehen hast

    Code
    *{
padding:0;
margin:0;
}

    brauchst du in den anderen Bereichen kein padding:0; mehr schreiben weil du am anfang das schon auf alles angewendet hast

    Hey Sebastian,

    ich weiß, ich wollte sämtliche paddings einfach mal nullen und gucken was im einzelnen passiert.

    Was eigentlich notwendigerweise stehen bleiben muss.


    Ich hatte zwischenzeitlich versucht den :target Bereich links anzuordnen und eben den Hauptteil

    mit dem eigentlichen content rechts.

    Indem ich:

    Code
    #content{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
margin: auto;
}

    setze. ich bleibe da noch ein wenig dran.


    Aber so wie es jetzt ist finde ich es schon gut.

    Ich werde nur zusätzlich links einen Botton mit einem entsprechenden Pfeil für öffnen > und schließen < einfügen,

    rechts könnte trotzalledem noch öffnen und schließen stehen.


    Mal schauen.


    Bis später...


    Gruß T.


    EDIT: Jetzt kommt meine horizontale Website dran.

    Um einen Pfeil-Botton einzufügen geht das ja nur in diesem Bereich:

    <a href="#closeNav" id="closeBtn">Close Navi</a>

    Um ein kleines png als img einzubinden.

    Wie würdest Du es machen? Ich finde kein entsprechendes Beispiel, habe gerade mal gegoogelt.


    Gruß T.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden