nicht angemeldet
Slide Toggle von links nach rechts (und zurück!) - kein :target - kein javascript nur botton Mithilfe [aria-haspopup] oder [aria-expandet] je nachdem was in diesem Fall richtig ist
Hallo liebe Forumer, ich habe folgendes Problem: Bei meiner DEMOSEITE 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. Villeicht sollte dann diese <section> - Bereich in diesem Fall UNTER dem CONTENT "offen" stehen. Mal sehen...
Ich habe meine :target - Lösung versucht zu übersetzen, mit einem Botton und [aria-haspopup] oder [aria-expandet], je nachdem was in diesem Fall richtig ist. Naja, jedenfalls habe ich jetzt alles so in dem Quelltext stehen, 1 zu 1 übersetzt (meiner Meinung nach!), aber es funktioniert gar nicht, was ist hier falsch? Der Wechsel bei einem KLICK des Bottons von "false" zu "true" funktioniert jedenfalls nur slidet der <section> - Bereich nicht hin und her!
CSS
`<style>
@media all {
/*Farben + Hintergrundbild*/
html {
background-color: #6f7f90;
background-color: rgba(111, 127, 144, 0.05);
background-color: hsla(211, 13%, 50%, 0.05);
-ms-filter: 'progid:DXImageTransform.Microsoft.MotionBlur(strength=05), progid:DXImageTransform.Microsoft.BasicImage(mirror=1)';
}
#main-nav {
background-color: #9299a0;
background-color: rgba(146, 153, 160, 0.15);
background-color: hsla(210, 7%, 60%, 0.15);
-ms-filter: 'progid:DXImageTransform.Microsoft.MotionBlur(strength=15), progid:DXImageTransform.Microsoft.BasicImage(mirror=1)';
color: #000000;
}
footer {
background-color: #ff6e00;
background-color: rgba(255, 110, 0, 0.65);
background-color: hsla(26, 100%, 50%, 0.65);
-ms-filter: 'progid:DXImageTransform.Microsoft.MotionBlur(strength=65), progid:DXImageTransform.Microsoft.BasicImage(mirror=1)';
color: #000000;
}
/*Schrift*/
html {
font-family: 'Variable-Bold';
font-size: 120%;
line-height: 100%;
hyphens: auto;
}
p, li, dl, dt, a, address {
font-family: 'Variable-Bold';
font-size: 1rem;
font-style: normal;
margin: 0.15rem 0 0 0;
}
/* 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"]~#maincontent_A {
position: relative;
left: 0%;
} /* Sandwich Button hidden */
.submenu-button[aria-expanded="true"]~#maincontent_B {
position:absolute;
width: 100%; height: 100%; overflow:hidden;
left: 100%;
top: 0;
} /* 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);
}
}
</style>`
<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.
</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.
</p>
</section>
</article>
</main>
<footer>
<p>Copyright © 2019 Bob Ross. Alle Rechte vorbehalten.</p>
</footer>
<script>
var btnSubMenueButton = document.querySelectorAll( 'button.submenu-button' );
for ( x=0; x<btnSubMenueButton.length; x++ ) {
btnSubMenueButton[x].setAttribute( 'aria-expanded', false );
}
var btnMainMenueButton = document.querySelectorAll( 'button.mainmenu-button' );
for ( x=0; x<btnMainMenueButton.length; x++ ) {
btnMainMenueButton[x].setAttribute( 'aria-expanded', false );
}
</script>
<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>
Gunnar Bittersmann
Matthias Apsel
Rolf B