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

[einsiedler]

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]

@@einsiedler

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.

So wie bei diesem Hamburger-Menü?

Und ich hab ja schon immer gesagt, dass das Hamburg-Icon nicht als Symbol für Menü taugt.

LLAP 🖖

PS: Ich bin nicht sicher, ob deine sections wirklich sections sind; aber deine h6 sind ganz sicher keine h6.

[einsiedler]

Ja genau, soetwas meine ich, wenn man es so "konstruiert". GUT ohne js gehts anscheinend nicht , aber wie gesagt, wenn das FallBack bei deakteviertem JS stimmt. DANKE! Danach kann ich nun "bauen".

PS: Ich bin nicht sicher, ob deine sections wirklich sections sind; aber deine h6 sind ganz sicher keine h6.

DAS verstehe ich jetzt irgendwie nicht, nur weil man der <section> eine ID mitgegeben hat?

Gute n8 der einsiedende

[Matthias Apsel]

Hallo einsiedler,

PS: Ich bin nicht sicher, ob deine sections wirklich sections sind; aber deine h6 sind ganz sicher keine h6. DAS verstehe ich jetzt irgendwie nicht, nur weil man der <section> eine ID mitgegeben hat?

Was eine section ist oder nicht, entscheidet sich nach dem Inhalt. Und da könnten es auch article- oder einfache div-Elemente sein (Ich habe mir deine Seite nicht angesehen).

Überschriften der 6. Ordnung würde bedeuten, dass du in deinem Dokument neben einer Überschrift 1. Ordnung auch solche der 2., 3., 4., und 5. Ordnung hast. Und die Notwendigkeit einer derartigen Struktur sehe ich nur in wissenschaftlichen Arbeiten, etwa einer Doktorarbeit. Und auch da wird man sicher eine so große Schachtelungstiefe vermeiden wollen.

Bis demnächst
Matthias

[einsiedler]

Aaaaahaaa, also b), eine <h6> Überschrift habe ich unwissentlich gewählt, weil ich wusste das sie formal bei einer section oder article notwendig ist, aber eben in meinem Fall nicht sichtbar sein muss (sie muss ja aber DA sein eine Überschrift!), deshalb sparte ich mir die anderen Überschriften-Typen auf und nahm den allerletzten Typ <h6>.

zu a) : Es handelt sich hier in meinem Beispiel um ein Grundgerüst, ersteinmal ohne den eigentlichen Content, DEN schreibe ich nun in die entsprechende <section> so wie ich es in meinem fertigen :target - beispiel schon stehen habe.

Eine Frage nebenbei: Kann man sagen das eine Anker-Situation (meine ich mit :target), in diesem Fall robuster und stabiler wäre (zum Beipiel für alle Browser) als Gunnars Beispiel, ich habe seins noch nicht online und getestet. Werde ich aber noch machen. Das einzigste was mich stört ist eben dass dann der # Hash in der URL, den man warscheinlich nicht so einfach "unsichtbar" machen kann, oder? Gibt es Beispiele (zumindest bei aktiviertem Script)?

Teilfrage a/2 UND / ODER, was würdet ihr für eure Projekte bevorzugen?

Lieben Gruß der misanthrop

[Gunnar Bittersmann]

@@einsiedler

Eine Frage nebenbei: Kann man sagen das eine Anker-Situation (meine ich mit :target), in diesem Fall robuster und stabiler wäre (zum Beipiel für alle Browser) als Gunnars Beispiel

Man kann nicht sagen, dass es das ist. Man kann aber sagen, dass es das nicht ist.

Siehe Postings in aktuellem Subthread.

LLAP 🖖

[einsiedler]

Ich kriege jetzt Deinen Link gerade nicht in Zusammenhang mit meinem, aber ich werde ersteinmal Dein Slide-Konzept ausprobieren, obwohl ich es nacher noch etwas mehr "verschachteln" möchte, mit 2 Menüs + SLIDE!

Der Misanthrop

[Matthias Apsel]

Hallo einsiedler,

Ich kriege jetzt Deinen Link gerade nicht in Zusammenhang mit meinem,

Eine :target-Lösung ist nicht robust.

Bis demnächst
Matthias

[einsiedler]

DANK! Es läuft (FAST) schon richtig! Siehe: Demo - Beispiel

Nur wie bekomme ich es hin:

A) das das eingeslidete <div> innerhalb von <section id="maincontent"> (also im hellblau umrandeten Feld) bleibt

B) das der button[aria-controls="nav-collapsible"][aria-expanded="true"] auch dort bleibt wo er hinsoll, er wird jetzt irgendwo anders dargestellt!

C) alles im besch.....n IE EDGE auch so aussieht wie in den übrigen Browsern. ODER: gibt es hier nur die Möglichkeit mit <noscript></noscript> eine alternative Darstellung anzugeben?

Gute N8 der misanthrop

[Rolf B]

Hallo einsiedler,

alles im *beep* IE EDGE auch so aussieht

1. Was denn nun? IE oder EDGE? Das sind zwei Browser mit ganz unterschiedlichen Vorzügen und Einschränkungen.

2. Wie sagt Gunnar immer so schön: Ich programmiere für jeden Browser und optimiere für keinen. Wenn's im MS-Kosmos anders aussieht, aber benutzbar ist: Lass es dabei. Der IE stirbt aus, und der Browserkern von EDGE wird vom Microsoft demnächst durch Chromium ersetzt.

Guck Dir Deine Seite mal unter Lynx an. Wie klappt es da?

Rolf

[einsiedler]

Willst mich "veräppeln" von wegen Lynx... *grummel×

Nunja bleiben dann noch Problem A) das das eingeslidete <div> innerhalb von <section id="maincontent"> (also im hellblau umrandeten Feld) bleibt und sich nicht nach dem gelben umrandeten Feld richtet.

B) das der button[aria-controls="nav-collapsible"][aria-expanded="true"] auch dort bleibt wo er hinsoll, er wird jetzt irgendwo anders dargestellt!

Gruß der misanthrop

[Rolf B]

Hallo einsiedler,

Willst mich "veräppeln" von wegen Lynx... grummel

Tatsächlich nicht. Eine ordentliche Seite sollte selbst unter Lynx noch einen brauchbaren Kern anzeigen. Aber ich gebe zu, dieser Grad von progressive enhancement ist schon was für Fortgeschrittene und ich habe sowas auch noch nicht gemacht.

Aber leider habe ich dieses Wochenende - außer für dumme Sticheleien - zu wenig Zeit um mir das anzuschauen.

Rolf

[einsiedler]

Aber bitte, danach, denk mal daran, okay?

Gruß der Misanthrop

[Matthias Apsel]

Hallo einsiedler,

 			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)';

Welche Browser möchtest du unterstützen, die keine teiltransparenten Farben darstellen können?

			html {
					font-family: 'Variable-Bold';
					font-size: 120%;
					line-height: 100%;
					hyphens: auto;
			}

Was passiert, wenn Variable-Bold nicht zur Verfügung steht? Gib eine Reihe von Alternativen an. Als letztes eine generische Fontfamilie.

Bei der Silbentrennung solltest du hingegen noch den einen oder anderen Präfix verwenden.

			html>body { 
				max-width: 66em;
				margin: 0 auto;

Warum dieser Selektor?

			article#menuepunkte {
				-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;
			}

Welche Browser möchtest du unterstützen, die keine Transitionen darstellen können?

Bis demnächst
Matthias

[einsiedler]

Okay, okay, du meinst das diese ausführliche "Auszeichnung" hier nicht nötig ist, richtig? Bin ich da zu genau? Das mit der Font-Family verstehe ich, das mit dem Selektor auch, man kann ihn weglassen. GUT & SCHÖN

Nur das:

Bei der Silbentrennung solltest du hingegen noch den einen oder anderen Präfix verwenden.

  	html>body { 
  		max-width: 66em;
  		margin: 0 auto;

verstehe ich jetzt nicht?

Ratlos, der Misanthrop

[Matthias Apsel]

Hallo einsiedler,

Bei der Silbentrennung solltest du hingegen noch den einen oder anderen Präfix verwenden.

  	html>body { 
  		max-width: 66em;
  		margin: 0 auto;

verstehe ich jetzt nicht?

Das gehört anders zusammen, sorry.

			html {
					hyphens: auto;
			}

Bei der Silbentrennung solltest du hingegen noch den einen oder anderen Präfix verwenden.

Bis demnächst
Matthias