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?
/* 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
