Hallo liebe Forumer,

ich benötige dringend eure hilfe bei der Anpassung eines Menüs.

Hierum geht es. Also bei Opera und Chrome sieht es soweit gut aus, nur halt im Firefox und Edge gibt es Probleme.

Wenn man dort also das Bildschirmfenster ganz schmal macht wie hier:

Ich komme dort nicht weiter, es ist mir zu kompliziert und mir raucht der Kopf vom experimentieren,

Ab diesen Punkt, also @media screen and (max-width: 28.125em) {

soll dieses Menü immer schmaler werden bis eben das Browserfenster nicht mehr schmaler zu machen geht, probiert es selbst aus:

Der Bottons sollen in die nächste Zeile rutschen und mittig angeordnet sein.

Der Links sollen sich, klar, umbrechen wenn sie zu lang sind (also: Aktuelles, Arbeiten ... ) , gerade im Edge ist das nötig.

Bisher habe ich alle kombinationen von width /maxwidth 100%; & auch auto, ausprobiert aber keine Wirkung gezeigt.

Was ist da nötig?

Lieben Gruß der misanthrop

Danke ihr beiden, ich werde mir (beides) anschauen! 👍👍👍

Ja toll, Danke. 👍👍

ABER MOMENT

Wenn man schon ganz leicht seitlich über dieses a:getaggte Feld geht

dann wird BISHER a)

die <h4> ((ist auch ein link für sich allein wenn man es für sich hovern und klikken würde)) und (wird beim hovern) somit unterstrichen und wird schwarz

und b) wird momentan der hintergrund bei mir smokewhite (AnM: Das IMG ist etwas schmaler als der gesamte <section> Bereich)

So ... , wenn man mit dem Cursor weiter mittig im a.getaggten Bereich geht, dann bekommt erst das IMG eine opacity von .6

SO ist es bisher, was ich nicht gut finde.

Wie ich es eigentlich möchte:

IST, wenn man schon ganz leicht seitlich rein hovert (AnM: Das IMG ist etwas schmaler als der gesamte <section> Bereich der dann smokewhite wird)

und ganz leicht (seitlich) ins a:getaggte Feld kommt

das dann <h4> (beim hovern) als LINK unterstrichen und schwarz zu erkennen ist und so erscheint

und dann (beim hovern) sofort gleichzeitig auch schon das IMG opak (unsichtbarer) wird (opacity: .6 bekommt)

was momentan nur passiert wenn man direkt auf dem IMG hovert

wie stellt man das nun an?

Gruß der misanthrop

Hallo liebe Forumer,

wie stelle ich es am besten an: Ich habe folgendes Konstrukt:

<section>
                                    <a class="a-modul" href="arbeit01.html">
                                        <h4 class="header-tabelle">
                                            <span class="table-row">
                                                <span class="table-cell">
                                                    Arbeit, 2012
                                                </span>
                                            </span>
                                        </h4>
                                       <figure>
                                          <img src="http://misanthrop.bplaced.net/foo/foo/foo.jpg" alt="Arbeit, 2012">
                                       </figure>
                                    </a>
                                    <p>
                                        Performance
                                        <span>Kunsthalle Münster,</span>
                                        <span>Speicher II, Münster</span>
                                    </p>
</section>

mein CSS

nav a,
      nav a:link,
      nav a:visited {
         background-color: #384d86;
      }
      nav a:hover,
      nav a:focus,
      nav a:active {
         background-color: whitesmoke;
         color: black;
      }
      nav a,
      nav a:link,
      nav a:visited,
      nav p {
         padding: 0.8rem 0;
      }

.a-modul {
         display: block;
         padding: 0.3rem 0;
      }
      .header-tabelle {
         display: table;
         width: 100%;
         height: 2.7rem;
         margin: 0 0 0.8rem 0;
         padding: 0 0.3rem 0 0.3rem;
         text-align: center;
      }
      .table-row {
         display: table-row;
      }
      .table-cell {
         display: table-cell;
         vertical-align: bottom;
         line-height: 1.2rem;
      }
      .arbeiten-galerie div {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-around;
      }

      .arbeiten-galerie>h4 {
         display:none;
         text-align: center;
         margin: 0.3rem 0 0.2rem 0;
      }
      .arbeiten-galerie div>* {
         margin: 0.3rem auto 0.8rem auto;
         flex-grow: 0;
         flex-shrink: 0;
         flex-basis: 400px;
      }
      .arbeiten-galerie div section img:hover {
         opacity: .6;
         -webkit-transition: opacity 0.2s ease-in-out;
         -moz-transition: opacity 0.2s ease-in-out;
         -o-transition: opacity 0.2s ease-in-out;
         -ms-transition: opacity 0.2s ease-in-out;
         transition: opacity 0.2s ease-in-out;
      }

Meine Frage: Wie stelle ich es nun an das alles was vom a:tag umschlossen ist eine opacity: .6; bekommt wenn man .hovert,

der Hintergrund als auch das IMG gleichzeitig -- ABER --

das der Text umschlossen von <span> eine opacity: 1; behält (also KEINE opacity hat!) und halt wie ein Link Unterstrichen ist und die Schriftfarbe schwarz hat.

Wie stelle ich es am besten an, das beides erfüllt wird.

Gruß der misanthrop

Ja, in diese Richtung muss es gehen.

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

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*

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

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.

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

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:

<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>

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

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

Hallo liebe Forumer,

ich komme nicht weiter, habe soweit das --  -- erreicht

Übrigens kommen die gestrichelten Hilfs-Linien weg.

Mein Problem A)

ist die Überschrift links, wie ich es sehe macht (das neue) opera, firefox und chrome es so wie gedacht / gewollt nur der sch... bek.... IE will nicht so.

Der schriftzug wird von mittig an nach oben hin angezeigt.

Ich habe dies mit inline svg gelöst, weil man mir sagte das das so funtioniert. Ich bitte darum kein IMG zu verwenden nach Möglichkeit.

<main>            
            <h1>
                <svg viewBox="0 0 50 250" preserveAspectRatio="xMidYMid meet"
                    xmlns="http://www.w3.org/2000/svg">
                    <path id="verticalPath" fill="none" stroke="none" d="M37.05,250 V0"/>
                    <rect x=4 y=4 width=42 height=242 stroke-width="3" stroke="#ff6e00" fill="none"/>
                    <text x="125" text-anchor="middle"fill="#ff6e00">
                        <textpath href="#verticalPath">Meine Überschrift</textpath>
                    </text>
                </svg>
            </h1>
            <section id="content-span">
[ ... ]

(siehe fiddle: Fiddle Link)

Wie also passt man das an den IE bzw. auch an die alten firefox, opera und chrome an?

Dort wird auch der Schriftzug verschoben angezeigt.

2)

Wenn man das Bildschirmfenster auf unter 50em zusammenschiebt, (ja richtig gelesen ich hab die media-queries auf " em " umgeschrieben)

soll die Überschrift / der Schriftzug wieder horizontal angezeigt werden. Spielt es bitte mal durch.

Problem B)

wenn man die Menüpunkte ausklappt stimmt es irgendwann mit den Höhen nicht mehr so.

Das overflow: auto ist wohl hier nicht richtig. Am einfachsten wäre wohl wenn der Schriftzug /die Überschrift links flex-start (also oben!) ist,

(Ich meine das sonst der Schriftzug ewig "zappelt")

Das der Schriftzug mittig bleibt das wird wohl schwierig wenn der nicht fixed ist, oder?

Ersteinmal das... es kommt nochmehr dazu...

Lieben Gruß der einsiedelnde

Dank!

Und ja ich habe es eingesetzt und es funktioniert.

Der 7ben - Zeiler... :o) ...er ist ausreichend.

Gut finde ich das man mit der Space Taste oder mit Return das Unter-Menü auf und zuklappen kann. 👍👍👍

Ich denke mal, es ist nicht notwendig wenn man neben der nav klickt dann space oder return das dann die Menüs zuklappen.

Jedenfalls kümmere ich mich jetzt mal um das CSS und baue media-queries ein...

Liebe tatkräftige HELFER Arne Drews & basti1012

VIELEN DANK für eure tatkräftige Unterstützung

und entschuldigt bitte einem in diesen Sachen dummen KERL wie mich.

Bitte helft mir auch weiterhin, obwohl ich, ja, etwas schwierig bin.

der einsiedelnde

EDIT:

Oder wollen sie mir damit sagen das Ihre 7 Zeilen nur die function init(){ .... (bei #36) ersetzt...

Dann verstehe ich es nicht, wie Ihre 7 Zeilen angewendet werden.

Verstehe ich jetzt nicht ganz.

Also das hier:

<script>
        function globalClickManager(ev){
            // ev.target gibt uns das Element auf dem der Click geschah.
            // steuere expanded Buttons
            if(ev.target.hasAttribute("aria-expanded") ){
                ev.target.setAttribute("aria-expanded", ( ev.target.getAttribute("aria-expanded") == "false") ); 
            }
            // Buttons die lediglich den Click transferieren ähnlich zu label Elementen
            else if(ev.target.hasAttribute("data-for-id") ){
                document.getElementById( ev.target.getAttribute("data-for-id") ).click();
            }
            else if( Element.prototype.closest){
                if( ev.target.closest("nav") == null ){
                    var temp = document.querySelector("nav > [aria-expanded='true']");
                    if(temp) temp.setAttribute("aria-expanded","false");
                }
            }
        }
        function init(){
            var col = document.querySelectorAll("nav > [aria-expanded]");
            for(var i=0; i<col.length; i++){
                col[i].setAttribute("aria-expanded","false");
            }
            document.body.addEventListener("click",globalClickManager);
        }
        document.addEventListener("DOMContentLoaded", init, false);
    </script>

Aber da ist es ja die function dort erhalten, also:

else if( Element.prototype.closest){
                if( ev.target.closest("nav") == null ){
                    var temp = document.querySelector("nav > [aria-expanded='true']");

if(temp) temp.setAttribute("aria-expanded","false");
                }
            }

Aber wie lautet mein ganzes script nun.

Alles übrige (also das mit den Buttons und dem sichtbarmachen des Inhalts der Unterpunkte) werde ich mit media-queries regeln.

Gute n8

der einsiedelnde

Ja genau, ich schau es mir grad an wie man media-queries einsetzen könnte.

Danke für das javascript, werde es mal einbauen.

EDIT: Eine Frage , das script von Ihnen ersetzt das hier:

<script>
        function globalClickManager(ev){
            // ev.target gibt uns das Element auf dem der Click geschah.

            // steuere expanded Buttons
            if(ev.target.hasAttribute("aria-expanded") ){
                ev.target.setAttribute("aria-expanded", ( ev.target.getAttribute("aria-expanded") == "false") ); 
            }
            // Buttons die lediglich den Click transferieren ähnlich zu label Elementen
            else if(ev.target.hasAttribute("data-for-id") ){
                document.getElementById( ev.target.getAttribute("data-for-id") ).click();
            }
            else if( Element.prototype.closest){
                if( ev.target.closest("nav") == null ){
                    var temp = document.querySelector("nav > [aria-expanded='true']");
                    if(temp) temp.setAttribute("aria-expanded","false");
                }
            }
        }
        function init(){
            var col = document.querySelectorAll("nav > [aria-expanded]");
            for(var i=0; i<col.length; i++){
                col[i].setAttribute("aria-expanded","false");
            }
            document.body.addEventListener("click",globalClickManager);
        }
        document.addEventListener("DOMContentLoaded", init, false);
    </script>

Aber da ist noch eine Funktion, wenn eine beliebige Tastaturtaste gedrückt wird, das sich das Menü-Punkt schließt.

Richtig basti1012,

für Herrn Drews: In meinem ursprünglichen html Quelltext (anfangs) setze ich ersteinmal alle aria-expandet auf "true" ,

sodaß nun alle Unterpunkte geöffnet werden. das für den Fall wenn javascript ausgeschaltet ist.

Nun jetzt im normal Fall, javascript ist an, laß ich den Sandwich-Button versteckt, die Buttons für die Unterpunkte sind sichtbar.

Zusätzlich lass ich die bisher aufgeklappten Inhalt der Unterpunkte versteckt, da ja aria-expandet="false".

UND da eben habe ich mit javascript manipuliert.

Habe es bisher so:

Und es wird schon annäherns so wie ichs mir denke.

Ich pass gerade das CSS ein wenig an.

Ich denke auch darüber nach wie man das mit media queries regeln könnte oder ob man das zusätzlich einsetzt.

Neee, neee Herr Drews, das war nur ein kopiertes Beispiel von diese Seite wo ich das herhabe.

Hat nichts mit meinem script zu tun.

Sehen sie es sich bitte mal mein Quelltext an , ganz unten ist das javascript.

LG der einsiedelnde

Hey basti1012, hast mein PN bei FB gelesen.

Hier möchte ich mich bei Dir auch nochmal für Deine tatkräftige Unterstützung bedanken.

Guck Dir mal im html Quelltext (ganz unten) an was ich letztendlich genutzt habe.

Sag mal, kann es sein das der IE das Array.forEach nicht kennt?

Dazu habe ich das hier gefunden: https://coderwall.com/p/kvzbpa…y-foreach-use-for-instead

Zitat

Don't use Array.forEach, use for() instead

javascript

Array.ForEach is about 95% slower than for() in for each for Arrays in JavaScript.

So, don't use:

Code

arr.forEach(function (item) {  someFn(item);
})

Use:

Code

for (var i = 0, len = arr.length; i < len; i++) {  someFn(arr[i]);
}

See this performance test online: http://jsperf.com/fast-array-foreach

Es sollte im IE alles genauso funktionieren.

b) Mach mal folgendes schieb das Bildschirmfenster ein wenig zusammen und vergrößere das Bildschirmfenster anschließend wieder.

Du siehst das das Sandwich dann immer noch sichtbar ist bei maximaler Fenstergröße.

Du schriebst dass man irgendwie mit else if arbeiten könnte wenn nur es nur eine if - Anweisung in der schleife gibt.

Jetzt ist es ja so, guck mal im meinem Quelltext.

Kann man da etwas machen?

c) Kann es sein das ich zu den 1440 px bei der javascript - Berechnung etwa 16 px dazurechnen muss das der Wert stimmt?

Ich meine dort: if(window.outerWidth<=1456){ .... usw. ...

Denn wenn ich mit media-queries arbeite, dann ist der Umbruch bei 1400 px ein anderer als die 1400 px mit dem ich im javascript arbeite,

rechne ich aber dort eben 16 px dazu dann stimmt es und ist synchron (also dort: if(window.outerWidth<=1456){ ... )

Und sag mal, später einmal, villeicht kommt noch etwas dazu oder fällt weg, kann man das alles dann irgendwie "verkürzen"?

Momentan stelle ich das CSS um, passe es an, langsam, ganz langsam wirds so wie ich es mir denke.

Gute n8

der einsiedelnde

Hehe... Danke!

Also es funktioniert schon prima, aber meinerseits habe ich ein Denkfehler.

Zur Erläuterung:

Sie mal:

Zum einen ist da der Sandwich-Button bzw das X zum wieder schließen .

Damit öffnet / schließt man das Untermenü

Des weiteren sind da die Untermenü-Buttons, die Pfeile auf und ab damit öffnet und schließt man die Untermenü-Punkte (Abb. ganz rechts)

Dein script muss um wenige Zeilen erweitert werden.

ich hab folgendes (habe es ein wenig modifiziert & geändert):

Damit : wenn das Bildschirmfenster < 1400px ist ==> setze ich den (obersten) Sandwich Button ==> aria-expandet="false"

& der Sandwich-Button wird sichtbar.

es fehlt NUN nur noch folgendes:

wenn Bildschirmfenster größer > 1400px ist dann sollen die .treeitem Buttons aria-espandet="false" werden

& das hidden von <button class="treeitem hidden" aria-expanded="true" .... muss dann verschwinden .

Das benötige ich noch für den Fall wenn javascript AN ist.

Kannst Du das noch ergänzen, bitte?

EDIT:

Achso: da Fällt mir gerade etwas auf, denn wenn man das Bildschirmfenster wieder größer zieht nachdem es kleiner als

1400px gezogen wurde, dann muss der .treeitenmain Button wieder verschwinden, also der (oberste) Sandwich-Button.

Kann man das irgendwie hinbekommen?

Ich denke DANN ist alles perfekt und es läuft so wie gewünscht!

gute n8 der einsiedelnde

Prima, nun was wenn man sagt (IF) Bildschirmfenster kleiner < 1400px

dann bei button class="treeitemmain hidden" soll das hidden verschwinden

UND sämtliche (es sind mehrere) button class="treeitem" aria expandet="true"

wird zu button class="treeitem" aria expandet="false"

Ich glaube DAS in javascript damit wäre mir geholfen.

:o)

Würde mich mal interessieren das auszuprobieren.

Ich habe bisher DAS als mein html

Lieben Gruß der einsiedelnde