Slide Toggle von links nach rechts - kein :target - kein javascript nur botton

Misanthrop

Hallo liebe Forumer,
ich habe folgendes Problem: Bei meiner https://tassilosturm.de/testsite-index_B.html möchte ich ein <section> Bereich mit einem Botton hin und her Sliden, von links nach rechts und zurück bei weiterem Botton-KLICK.
Ich möchte nach Möglichkeit keine :target - Lösung (das habe ich schon ausprobiert), finde es nicht Ideal weil der Anker-Hash in der Uri steht.
Nach Möglichkeit möchte ich wenig (bis gar kein) Java-Script benutzen, ich denke schon über eine Fallback-Lösung nach wenn java-Script deaktiviert ist. Veilleicht sollte dann diese <section> in diesem Fall UNTER dem CONTENT "offen" stehen.
Mal sehen...
Naja, jedenfalls habe ich alles so in dem Quelltext stehen, aber es funktioniert gar nicht, was ist hier falsch?

HTML

/* Grundlayout */
        * { 
            margin:0; 
            padding: 0; 
            box-sizing: border-box;
        }
        html {
            height: 100vh;
        }
        html>body { 
            max-width: 66em;
            margin: 0 auto;
        }
        body { 
            border: 5px dotted #c5c5c5;
        }


        main {


        }
        header {
            width: 100%;
            height: 2.5em;
            border: 4px dotted #008686;


        }
        article#main {
            position:relative;
            overflow: hidden;
            width: 100%;
            height: 100%;
            border: 7px dashed #fdfd00;
        }
        article#menuepunkte {
            position: absolute;
            -webkit-transition: left 0.4s ease-in-out;
            -moz-transition: left 0.4s ease-in-out;
            -ms-transition: left 0.4s ease-in-out;
            -o-transition: left 0.4s ease-in-out;
            transition: left 0.4s ease-in-out;
            background-color: #ffc;
            left: -100%;
            width: 100%;
            height: 100%;
            border: 7px dashed #00aa00;             
        }
        article#contentspan {
            display: flex;
            flex-direction: row;
            position: relative;
            -webkit-transition: left 0.4s ease-in-out;
            -moz-transition: left 0.4s ease-in-out;
            -ms-transition: left 0.4s ease-in-out;
            -o-transition: left 0.4s ease-in-out;
            transition: left 0.4s ease-in-out;
            left: 0%;
            background-color: transparent;
            width: 100%;
            height: 100%;
            border: 4px dashed #ff6622;             
        }
        nav#menuebottons {
            width: 100%;
            height: 100%;
            border: 7px dashed #46eb1d;
        }
        article#maincontentspan {
            position:relative;
            overflow: hidden;
            width: 100%;
            height: 100%;
            border: 4px dashed #eb44e5;
        }
        section#maincontent_A {
            position: absolute;
            -webkit-transition: left 0.4s ease-in-out;
            -moz-transition: left 0.4s ease-in-out;
            -ms-transition: left 0.4s ease-in-out;
            -o-transition: left 0.4s ease-in-out;
            transition: left 0.4s ease-in-out;
            background-color: #ffc;
            left: -100%;
            width: 100%;
            height: 100%;
            border: 7px dashed #39bbe3;
        }
        section#maincontent_B {
            position: relative;
            -webkit-transition: left 0.4s ease-in-out;
            -moz-transition: left 0.4s ease-in-out;
            -ms-transition: left 0.4s ease-in-out;
            -o-transition: left 0.4s ease-in-out;
            transition: left 0.4s ease-in-out;
            left: 0%;
            background-color: transparent;
            width: 100%;
            height: 100%;
            border: 7px dashed #2c8099;
        }




        /* nav specific */


            nav > button {display: block; width: 3rem;}
            nav button:hover, nav button:focus {
                background: hsla(0, 100%, 100%, 0.8);
            }


            /* Buttons mit Icons anreichern */


            .submenu-button[aria-expanded='true']::before { content: '\f355'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 1.9rem; }         /* arrow-alt-left */
            .mainmenu-button[aria-expanded='true']::before { content: '\f00d'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 1.9rem; }        /* fa-times X */
            .submenu-button[aria-expanded='true']::after, .mainmenu-button[aria-expanded='true']::after { content: "schliessen"; white-space: normal; font-size: 14px; display: none; }


            .submenu-button[aria-expanded='false']::before { content: '\f356'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 1.9rem; }            /* arrow-alt-right */
            .mainmenu-button[aria-expanded='false']::before { content: '\f0c9'; font-family: 'Font Awesome 5 Pro'; src: local('Font Awesome 5 Pro'); font-size: 1.9rem; }   /* fa-bars  Sandwich */
            .submenu-button[aria-expanded='false']::after, .mainmenu-button[aria-expanded='false']::after { content: "öffnen"; white-space: normal; font-size: 14px; display: none; }


            .submenu-button[aria-expanded='false']>section#maincontent_A {
                    position:absolute;
                    width: 100%; height: 100%; overflow:hidden;
                    left: 0;
                    top: 0; 
            }   /* Sandwich Button  hidden */


            .submenu-button[aria-expanded='true']>section#maincontent_A {
                    position: relative;
                    left: -100%;
            }   /* Sandwich Button  hidden */




        /* sonstiges*/
            .visually-hidden {
                position: absolute !important;
                height: 1px; width: 1px;
                overflow: hidden;
                clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
                clip: rect(1px, 1px, 1px, 1px);
            }


    }


<body>
    <main>
        <header> --header--  Bob Ross </header>
        <article id="main">     <!--  GELB  -->
        <h6 class="visually-hidden" >HIDDEN-SUBTITEL</h6>
            <nav id="menuebottons">         <!--  HELL GRÜN  -->
                <button class="submenu-button" aria-expanded="false"><span class="visually-hidden">SubNavigation Item 2</span></button>
            </nav> 
            <section id="maincontent_A">        <!--  BLAU 1 hell  -->
                <h6 class="visually-hidden" >HIDDEN-SUBTITEL</h6>
                    <p> It's life. It's interesting. It's fun. I want everbody to be happy. That's what it's all about. Let's build an almighty mountain.


                            Almost everything is going to happen for you automatically - you don't have to spend any time working or worrying. You can do anything here. So don't worry about it. Fluff that up. I guess I'm a little weird. I like to talk to trees and animals. That's okay though; I have more fun than most people. Remember how free clouds are. They just lay around in the sky all day long. I'm a water fanatic. I love water.


                            Just a little indication. Follow the lay of the land. It's most important. It's hard to see things when you're too close. Take a step back and look.


                            I think there's an artist hidden in the bottom of every single one of us. We'll lay all these little funky little things in there. I sincerely wish for you every possible joy life could bring. All kinds of happy little splashes. Everyone is going to see things differently - and that's the way it should be. You have freedom here. The only guide is your heart.


                            When things happen - enjoy them. They're little gifts. There is no right or wrong - as long as it makes you happy and doesn't hurt anyone. I really recommend you use odorless thinner or your spouse is gonna run you right out into the yard and you'll be working by yourself. Just think about these things in your mind - then bring them into your world. You can create the world you want to see and be a part of. You have that power. If it's not what you want - stop and change it. Don't just keep going and expect it will get better.                        
                    </p>
            </section>
            <section id="maincontent_B">        <!--  BLAU 1 dunkel  -->
                <h6 class="visually-hidden" >HIDDEN-SUBTITEL</h6>
                    <p> In life you need colors. You have to make these big decisions. Maybe there was an old trapper that lived out here and maybe one day he went to check his beaver traps, and maybe he fell into the river and drowned. We'll throw some old gray clouds in here just sneaking around and having fun. Just relax and let it flow. That easy. It's almost like something out of a fairytale book.


                            Nature is so fantastic, enjoy it. Let it make you happy. You can do it. I spend a lot of time walking around in the woods and talking to trees, and squirrels, and little rabbits and stuff.


                            Everybody's different. Trees are different. Let them all be individuals. Brown is such a nice color. We can fix anything. See there, told you that would be easy.


                            There are no limits in this world. We'll put a happy little bush here. Don't forget to tell these special people in your life just how special they are to you.


                            Go out on a limb - that's where the fruit is. We must be quiet, soft and gentle. We'll paint one happy little tree right here.


                            These trees are so much fun. I get started on them and I have a hard time stopping. I was blessed with a very steady hand; and it comes in very handy when you're doing these little delicate things. Play with the angles. If what you're doing doesn't make you happy - you're doing the wrong thing.                     
                    </p>
            </section>
        </article>
    </main>
    <footer>
        <p>Copyright © 2019 Bob Ross. Alle Rechte vorbehalten.</p>
    </footer>


<script>
    _items = document.querySelectorAll( '[aria-expanded]' );
        for ( x=0; x<_items.length; x++ ) {
          _items[x].setAttribute( 'aria-expanded', "false" );
          _items[x].addEventListener( 'click', function(e) {
              this.setAttribute('aria-expanded', (this.getAttribute('aria-expanded')=="false"));
            });
        }
</script>   
</body>

Alles anzeigen

Ich bitte um Mithilfe.

Euer Misanthrop

djheke

Meinst Du sowas in der Art? Ist aber schon etwas älter, Du solltest es auf Flexbox umstellen. Vielleicht kannst Du etwas davon gebrauchen.

HTML

<html>
<head>
<meta charset="UTF-8">
<title>Anker</title>
<!--<link rel="stylesheet" type="text/css" href="anker.css" media="all">-->
<style>


* {
 margin:0;
 pading:0;
}


html , body {
 height:100%;
 overflow:hidden;
}


#p1 , #p2 , #p3 , #p1 + a , #p2 + a , #p3 + a {
 position:fixed;
}


input {
 z-index:1000;
 height:39px;
 opacity:0;
 cursor:pointer;
}


h1 {
 background:#d59;
 padding:20px;
}


h2 , p {
 padding:40px;
}


a {
 display:inline-block;
 padding:10px 0;
 text-align:center;
 text-decoration:none;
 font-weight:bold;
 color:#333;
}


#p1 , #p1 + a{ left:0;       width:33.334%; background:#dea; }
#p2 , #p2 + a{ left:33.334%; width:33.334%; background:#ded; }
#p3 , #p3 + a{ left:66.667%; width:33.334%; background:#dda; }




label {
 cursor:pointer;
}


label:before , label:after  {
 content:"<";
 position:absolute;
 bottom:10px;right:65px;
 width:50px;
 height:50px;
 background:#ddd;
 display:block;
 line-height:50px;
 text-align:center;
 border-radius:50%;
 z-index:1100;
}


label:after  {
 content:">";
 bottom:10px;right:5px;
}




footer {
 height:80px;
 width:100%;
 background:#444;
 position:fixed;
 bottom:0;
 color:#ddd;
}


main {
 position:relative;
 top:39px;
 width:300%;
 height:calc( 100% - 195px );
 transition: all 0.6s ease-in-out;
}


#home , #about , #impressum {
 width:33.3334%;
 height:100%;
 float:left;
 left:0;
 background:#add;
 overflow:auto;
}
 
#home , #impressum {
 background:#aa0;
}


#p1:checked ,
#p2:checked ,
#p3:checked {
 cursor:default;
}


#p1:checked + a ,
#p2:checked + a ,
#p3:checked + a {
 background:#aaa;
}


#p1:checked ~ #l3:after,
#p3:checked ~ #l3:before,
#p2:checked ~ #l2:before,
#p2:checked ~ #l3:before,
#p1:checked ~ #l2:before,
#p1:checked ~ #l3:before
 {
 display:none;
}


#p1:checked ~ #l1:before,
#p3:checked ~ #l1:after,
#p3:checked ~ #l2:after,
#p3:checked ~ #l3:after
{
 background:#aaa;
 color:#444;
 cursor:default;
}
#p1:checked ~ main  {
 transform:translateX(0%);
}


#p2:checked ~ main {
 transform:translateX(-33.3334%);
}


#p3:checked ~ main {
 transform:translateX(-66.6667%);
}</style>
</head>
<body>


<h1>Homepage</h1>
<input type="radio" name="scroll" id="p1" checked="checked"><a href="#home">Home</a>
<input type="radio" name="scroll" id="p2"><a href="#about">About</a>
<input type="radio" name="scroll" id="p3"><a href="#impressum">Impressum</a>
<label id="l1" for="p1"></label>
<label id="l2" for="p2"></label>
<label id="l3" for="p3"></label>
<main>
<div id="home">
<h2>Willkommen</h2>
<p>Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. Ich bin allein und freue mich meines Lebens in dieser Gegend, die für solche Seelen geschaffen ist wie die meine. Ich bin so glücklich, mein Bester, so ganz in dem Gefühle von ruhigem Dasein versunken, daß meine Kunst darunter leidet. Ich könnte jetzt nicht zeichnen, nicht einen Strich, und bin nie ein größerer Maler gewesen als in diesen Augenblicken. Wenn das liebe Tal um mich dampft, und die hohe Sonne an der Oberfläche der undurchdringlichen Finsternis meines Waldes ruht, und nur einzelne Strahlen sich in das innere Heiligtum stehlen, ich dann im hohen Grase am fallenden Bache liege, und näher an der Erde tausend mannigfaltige Gräschen mir merkwürdig werden; wenn ich das Wimmeln der kleinen Welt zwischen Halmen, die unzähligen, unergründlichen Gestalten der Würmchen, der Mückchen näher an meinem Herzen fühle, und fühle die Gegenwart des Allmächtigen, der uns nach seinem Bilde schuf, das Wehen des Alliebenden, der uns in ewiger Wonne schwebend trägt und erhält; mein Freund! Wenn's dann um meine Augen dämmert, und die Welt um mich her und der Himmel ganz in meiner Seele ruhn wie die Gestalt einer</p>
</div>
<div id="about">
<h2>Paule Pulmo</h2>
<p>Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. Ich bin allein und freue mich meines Lebens in dieser Gegend, die für solche Seelen geschaffen ist wie die meine. Ich bin so glücklich, mein Bester, so ganz in dem Gefühle von ruhigem Dasein versunken, daß meine Kunst darunter leidet. Ich könnte jetzt nicht zeichnen, nicht einen Strich, und bin nie ein größerer Maler gewesen als in diesen Augenblicken. Wenn das liebe Tal um mich dampft, und die hohe Sonne an der Oberfläche der undurchdringlichen Finsternis meines Waldes ruht, und nur einzelne Strahlen sich in das innere Heiligtum stehlen, ich dann im hohen Grase am fallenden Bache liege, und näher an der Erde tausend mannigfaltige Gräschen mir merkwürdig werden; wenn ich das Wimmeln der kleinen Welt zwischen Halmen, die unzähligen, unergründlichen Gestalten der Würmchen, der Mückchen näher an meinem Herzen fühle, und fühle die Gegenwart des Allmächtigen, der uns nach seinem Bilde schuf, das Wehen des Alliebenden, der uns in ewiger Wonne schwebend trägt und erhält; mein Freund! Wenn's dann um meine Augen dämmert, und die Welt um mich her und der Himmel ganz in meiner Seele ruhn wie die Gestalt einer</p>


</div>
<div id="impressum">
<h2>Impressum</h2>
<p>Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. Ich bin allein und freue mich meines Lebens in dieser Gegend, die für solche Seelen geschaffen ist wie die meine. Ich bin so glücklich, mein Bester, so ganz in dem Gefühle von ruhigem Dasein versunken, daß meine Kunst darunter leidet. Ich könnte jetzt nicht zeichnen, nicht einen Strich, und bin nie ein größerer Maler gewesen als in diesen Augenblicken. Wenn das liebe Tal um mich dampft, und die hohe Sonne an der Oberfläche der undurchdringlichen Finsternis meines Waldes ruht, und nur einzelne Strahlen sich in das innere Heiligtum stehlen, ich dann im hohen Grase am fallenden Bache liege, und näher an der Erde tausend mannigfaltige Gräschen mir merkwürdig werden; wenn ich das Wimmeln der kleinen Welt zwischen Halmen, die unzähligen, unergründlichen Gestalten der Würmchen, der Mückchen näher an meinem Herzen fühle, und fühle die Gegenwart des Allmächtigen, der uns nach seinem Bilde schuf, das Wehen des Alliebenden, der uns in ewiger Wonne schwebend trägt und erhält; mein Freund! Wenn's dann um meine Augen dämmert, und die Welt um mich her und der Himmel ganz in meiner Seele ruhn wie die Gestalt einer</p>




<p>Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. Ich bin allein und freue mich meines Lebens in dieser Gegend, die für solche Seelen geschaffen ist wie die meine. Ich bin so glücklich, mein Bester, so ganz in dem Gefühle von ruhigem Dasein versunken, daß meine Kunst darunter leidet. Ich könnte jetzt nicht zeichnen, nicht einen Strich, und bin nie ein größerer Maler gewesen als in diesen Augenblicken. Wenn das liebe Tal um mich dampft, und die hohe Sonne an der Oberfläche der undurchdringlichen Finsternis meines Waldes ruht, und nur einzelne Strahlen sich in das innere Heiligtum stehlen, ich dann im hohen Grase am fallenden Bache liege, und näher an der Erde tausend mannigfaltige Gräschen mir merkwürdig werden; wenn ich das Wimmeln der kleinen Welt zwischen Halmen, die unzähligen, unergründlichen Gestalten der Würmchen, der Mückchen näher an meinem Herzen fühle, und fühle die Gegenwart des Allmächtigen, der uns nach seinem Bilde schuf, das Wehen des Alliebenden, der uns in ewiger Wonne schwebend trägt und erhält; mein Freund! Wenn's dann um meine Augen dämmert, und die Welt um mich her und der Himmel ganz in meiner Seele ruhn wie die Gestalt einer</p>


</div>
</main>
<footer>


</footer>
</body>
</html>

Alles anzeigen

Misanthrop

Ja, DANKE, so in der Richtung,
ich möchte es schon MODERNER haben und deshalb stört mich das <input> und <lable> , das bei mobilen Geräten wiederum ohne javascript nicht zu gebrauchen ist.
Das möchte ich nach Möglichkeit vermeiden,
Es gibt eine Möglichkeit mit [aria-haspopup] oder [aria-expandet] je nachdem was in diesem Fall richtig und angesagt ist, das möchte ich im CSS verwenden und nach Möglichkeit
so wenig javascript verwenden. DENN: Wie dann die Alternative bei "ausgeschaltetem javascript" ist muss ich mir noch ausdenken, werde die section wohl aber unterhalb der CONTENT <section> anzeigen lassen.
Wer kann mir BITTE beim konstruieren helfen?
BITTE BITTE BITTE! Ich bin momentan ratlos warum es nicht funktioniert.

Gruß der misanthrop

Tags