Hilfe bei meiner Seite

einsiedler · 6. März 2019

Hallo liebe Forumer,

ich plane etwas, so ungefähr wie das hier :

nur das eben das "ein-schwebene Fenster" nicht mit a und :target geregelt wird sondern mit einem botton.

Ein Fenster (das ersteinmal "unsichbar" ist), soll von links mit einem Botton-KLICK "einschweben"

Daher hier um ersteinmal das Prinzip zu verstehen

mein html:

HTML

<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="mainmenu-button" 
                    aria-expanded="false"><span class="visually-hidden">HauptNavigation</span></button>
                <button class="submenu-button" 
                    aria-expanded="false"><span class="visually-hidden">SubNavigation Item 2</span></button>
            </nav> 
            <article id="maincontentspan">        <!--  ORANGE  -->
                <h6 class="visually-hidden" >HIDDEN-SUBTITEL</h6>
                <section id="galerie-uebersicht">        <!--  BLAU hell  -->
                    <h6 class="visually-hidden" >HIDDEN-SUBTITEL</h6>
                        <p> It's life. It's interesting. It's fun.</p>
                </section>
                <section id="content">        <!--  BLAU dunkel  -->
                    <h6 class="visually-hidden" >HIDDEN-SUBTITEL</h6>
                        <p> In life you need colors. You have to make these big decisions.</p>
                </section>
            </article>
    </article>
</main>

Alles anzeigen

Mein CSS:

CSS

header {
    width: 100%;
    height: 2.5em;
    border: 4px dotted #008686;                
}
article#main {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border: 7px dashed #fdfd00;
}
nav#menuebottons {
    width: 4em;
    height: 100%;
    border: 7px dashed #46eb1d;
}

article#maincontentspan {
    position:relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border: 4px dashed #eb44e5;
}
section#galerie-uebersicht {
    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#content {
    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#galerie-uebersicht {
                        position:absolute;
                        width: 100%; height: 100%; overflow:hidden;
                        left: 100%;
                        top: 0; 
                }   /* Sandwich Button  hidden */
                
                .submenu-button[aria-expanded="true"] section#content {
                        position: relative;
                        left: 0%;
                }   /* Sandwich Button  hidden */

Alles anzeigen

So, das Ganze ist noch ein wenig WIRR.

#galerie-uebersicht ist ja nach auf der linken Seite unsichtbar & ausgeblendet und wenn der button gedrückt wird soll eben dieser Teil "sichtbar" werden indem er von links einscrollt.

Umgekehr wenn wiederum der button gedrückt wird das eben #content wieder (zurück von rechts) eingescrollt wird.

Wie eben in meinem Beispiel :

Könnt ihr mir mit einem Anschauungs-Beispiel helfen das ich mir alles weitere erarbeiten kann?

Lieben Gruß der einsiedelnde

basti1012 · 6. März 2019

du willst genau das gleiche bauen , nur das es kein <a> ist sondern ein Button ?

Wenn du jetzt ja sagst dann solltest du das selber hinbekommen. Du bist ja auch schon ein paar Tage dabei und ich denke das kriegst du hin.

Falls ich es falsch verstanden habe gib mir noch mal ein a.., tritt und erklär mal für mich ( dummis )

einsiedler · 6. März 2019

Ich bekomme es wirklich nicht hin, mit einem botton, habe schon ein online Beispiel das jedoch nicht funktioniert.

Kann das Ganze nicht in aria-expandet"false" und aria expandet"true" übersetzen.

Seid doch bitte so gut. Ich finde im netz kein gutes onlinebeispiel, habe villeicht auch nicht das richtige Suchwort benutzt.

der einsiedelnde

basti1012 · 6. März 2019

am einfachsten wäre doch wenn du deine Links mit css einen Button style gibst. Ist schnell gemacht.

Mit deinen aria-expandet"false" und true muss ich auch erstmal wieder testen ob es da unterschiede gibt zwischen <a> und <buttin> weil habe mich damit noch nie richtig beschäftigt

einsiedler · 6. März 2019

Wenn ich doch nur ein Link zu einem Online-Beispiel hätte oder ich einen richtigen Suchbegriff wüsste, wie sich soetwas nennt. :o(

Dann könnte ich etwas ableiten von dem Beispiel.

einsiedler · 7. März 2019

Ich suche immer noch nach einer Möglichkeit dies mit einem Botton zu realisieren.

Momentan interessiert mich jetzt aber wie man den „hashtag-Link“ der immer an die Standard-URL hängt, nicht mehr angezeigt wird.

Zumindest bei aktiviertem Java-Script, da geht es ja nur. Wie macht man das? Mit einem script?

gute n8 der einsiedelnde

basti1012 · 7. März 2019

Probier es damit .

https://wiki.selfhtml.org/wiki…ript/History/replaceState

Habe das gerade auch versucht und scheint ganz gut zu klappen.

Wenn ich das richtig verstehe ist der neue Wert dann auch über die history ereichbar

einsiedler · 7. März 2019

Ja, in diese Richtung muss es gehen.

Ich habe noch etwas gefunden, was hälst Du davon?

JavaScript

function remove_hash_from_url() 
{ 
    var uri = window.location.toString(); 
    if (uri.indexOf("#") > 0) { 
     var clean_uri = uri.substring(0, uri.indexOf("#")); 
     window.history.replaceState({}, document.title, clean_uri); 
    } 
}

es geht mir (ersteinmal nur darum das das #HASH in der URI nicht angezeigt wird (zumindest bei aktiviertem java-script)

WICHTIG: Ich habe irgendwo gelesen das solche .target Konstruktionen für meinen Fall das "stabilste" wäre anstatt mit einem Botton?

Richtig oder falsch?

Ich denke aber immer noch über eine Botton - Lösung nach wie man das mit aria-expandet="false" und "true" löst.

Finde da aber im Netz nicht die sinnvolle Anleitung / oder Beispiel dazu.

Gruß der einsiedelnde. *seufZ*

Hilfe bei meiner Seite

Jetzt mitmachen!

Teilen