Menue einklappen durch Klick ausserhalb des Menues

  • Hallo. Ich habe als Anfänger das Toggle Menue aus dem Seminar hier nachgebildet und es funktioniert soweit. Man muss aber zum Einklappen des Menues immer den Button verwenden. Nun habe folgendes Ziel: Das Menue soll nicht nur durch den Menue button wieder eingeklappt werden sondern auch durch einen weiteren link, der sich ausserhalb des Menues befindet. Dadurch möchte ich den Effekt erzeugen, dass man durch einen Klick neben das offene Menue dasselbe wieder einklappt.

    Der Link hinter dem Button zum Ausblenden funktioniert einwandfrei, aber der zweite Link wird nicht eingeblendet, wenn das Menue ausgeklappt wird.


    Natürlich verschwimmen nach all den Versuchen auch Klammern, Strich- und Doppelpunkte ...

    Ich hoffe, es findet jemand den Haken.


    Ich stelle html und stylesheet vollständig hier rein, an den fraglichen Stellen sind zur besseren Übersicht aber Kommentare


    <!DOCTYPE html>

    <html lang="de">

    <head>

    <meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8">

    <link rel="stylesheet" href="formate kurz.css">

    </head>

    <body>



    <!-- -------------- ZWEITER LINK ZUM SCHLIESSEN DES MENU soll nur

    eingeblendet werden, wenn menu geöffnet ist-------------- -->

    <div id="test">

    <a href="#nav-menue-zu">--------Zweiter Link zum Schliessen---------------------</a>

    </div>



    <header id="nav-menue">

    <nav id="steuerung" role="navigation">

    <ul>

    <li><a class="Menu" href="example.com" >Home</a></li>

    <li><a class="Menu" href="example.com" >seite1</a></li>

    <li><a class="Menu" href="example.com" >seite2</a></li>

    <li><a class="Menu" href="example.com" >seite3</a></li>

    </ul>

    </nav>

    <a class="menue-button menue-button-beschr-close"

    href="#nav-menue-zu">&#8801 ist-auf</a>

    <a class="menue-button menue-button-beschr-open"

    href="#nav-menue">&equiv;zu</a>

    </header>

    <!-- -------------- Seiteninhalt ----------------- -->

    <div id="Block">

    <div id="scroller">

    <div id="Text">

    <p>---------------------- BEISPIELTEXT ------------------------</P>

    </body>

    </html>


    Zugehöriges CSS


    /* ---------------------------------------------- FORMAT PC ------------------------------------------*/

    @media screen and (min-width: 61em)

    {

    nav { display: none;}

    #Titel-m { display: none;}

    #nav-menue { display: none;}

    #nav-menue-zu { display: none;}

    #test { display: none;}

    #Block {position:fixed; top:28.5%; right:0px; bottom:2.7%; width:60%; z-index:2; background-color:

    #c9ad7f; opacity: 0.7;}

    }


    /* ---------------------------------------- FORMAT MOBIL -------------------------------------------- */

    @media screen and (max-width: 60.99em)

    {

    /* ---------------------------------------DIESER BEREICH GEHT ---------------------------------------*/

    header {background-color: #970a2c; width: 60%; position:absolute; top:17%; left:2%;

    float: left; z-index:7;}

    #steuerung li {list-style: none; float: left; width: 90%; border-bottom: 2px solid silver;

    padding-bottom: 0.4em; padding-top: 0.4em;}

    #steuerung a {display: block; height: 100%; width: 100%; padding: 0.2em; text-decoration: none; color: white; }

    #steuerung { float: left; width: 100%; display: none;}

    #steuerung a:hover {color: #ffffff; background-color: #c9ad7f;}

    .menue-button { background-color: #970a2c; display: block; position: absolute; left: 0; top: 0; padding: 0.2em;

    color: white; cursor: pointer; text-decoration: none; font-size: 20px; }

    .menue-button:hover { color: black; background-color: #c9ad7f;}



    /* ---------------- IST-AUf ausblenden und nur einblenden wenn menu offen ist geht ohne probleme ---------------- */

    /* wenn menu ZU wird - IST AUF - ausgeblendet*/

    .menue-button-beschr-close {display: none;}


    /*-------------------------Das hier geht auch ----------------------------------------------*/

    /*zweiter link zum schließen des menu soll nur eingeblendet werden wenn menu offen ist*/

    #test { display: none;}

    #nav-menue:target #steuerung {display: block; }

    #nav-menue:target .menue-button-beschr-open {display: none; }

    #nav-menue:target .menue-button-beschr-close {display: block; }


    /*--------HIER LIEGT DAS EIGENTLICHE PROBLEM-------------------------------------------------------------------*/

    /* wenn menu geöffnet wird soll auch zweiter link zum schließen eingeblendet werden - GEHT ABER NICHT-------------*/

    #nav-menue:target #test {display:block; }

    /* ------------------------------------------------------------------------------------*/

    /* #nav-menue:target wird nicht ausgeführt, ich habe auch statt display auch visibility probiert, gleiches ergebnis*/

    /* WARUM?????????? das einblenden von - IST AUF - geht doch auch*/



    /*Textblock mobil*/

    #Block {position:fixed; top:28.5%; right: 0px; left: 2.7%; bottom: 2.7%; width: 100%; z-index:2;

    background-color: #c9ad7f; opacity: 0.75;}


    }

  • Ich blicke da ehrlich gesagt nicht durch was du meinst. Du schreibst wenn das Menü auf ist soll 2 Extra Links da sein womit du das Menü auch schliessen kannst ? erstens sehe ich nur ein im Code der aber nicht angezeigt wird und der 2te gibt es erst gar nicht.Also genau andersrum. Also ein Link ist da und wo ist der andere?


    Deine beschreibung im Quelltet bringt mich auch nicht viel weiter. Wozu brauchst du den Extra Links zum schliesen ? Mach doch einfach klick in Body ( Irgendwo ausserhalb des Menüs ) und zu ist das ding

  • Danke für den Beitrag. Der Klick irgendwo im Body ist natürlich das Ziel. Da ich aber das nicht hinkriege habe ich mich in tausend Versuchen vergallopiert und selbst den Überblick verloren. Deswegen die vielen Kommentare.


    <a href="#nav-menue-zu">--------Zweiter Link zum Schliessen---------------------</a>


    Diese Zeile im html Code sollte eben diesen Klick außerhalb des Menus ermöglichen. Funzt aber nicht. Ich blende diesen Link zunächst aus und später soll er beim Öffnen des Menüs eingeblendet werden. Soweit der Plan.

    Möglicherweise gibt es ja auch eine viel einfachere Lösung, Wie gesagt der Wald und die Bäume .....

  • Nachtrag:

    Das ist der Button zum Schließen des Menus:


    href="#nav-menue-zu">&#8801 ist-auf</a>


    Der zweite Link hat natürlich das gleiche Ziel wie der hier. Habe mich da etwas undeutlich ausgedrückt:

    Richtig wäre: Es gibt zwei mal den gleichen Link zum Schließen. Einmal als Button und einmal außerhalb des Menus.

  • Naja dann habe ich es ja fast richtig gemacht.

    Mit Js kann man eigentlich alles zum Schliessen benutzen.

    Bei CSS mußt du drauf achten wo dein Menü ist was du schließen willst.

    Du kannst mit Css nur auf Geschwister,Nachbarn und Kinder Elemente zugreifen.

    In dein Fall kannst du Nachbar raus machen.

    Du packst den Link mit in den <header> rein und legst ihn neben das <nav>

    Code
    1. <header>
    2. <a>Link</a>
    3. <nav></nav>
    4. </header>

    In diesen Fall ist es sogar Geschwister oder Nachbar.

    Wenn du jetzt auf <a> klickst

    Code
    1. a:target ~ nav{ /*Ein + sollte auch gehen */
    2. display:none;
    3. }

    So sollte dein Link der ausserhalb des Menüs ist ,dein Menü auf display:none setzten .

    Das wahr nur ein Beispiel aber so kannst du dein Vorhaben ungefähr umsetzten.

  • Danke für die Hilfe. Ich mache das mit css weil die Seite dann auch bei js deaktiviert korrekt angezeigt wird (außerdem habe ich von js wenig ahnung)

    Bisher ist mein link außerhalb des header und damit wohl Eltern. Ich wusste nicht dass der Zugriff nur auf Nachbarn und darunter geht. Ich werde es probieren. Danke für den Tipp mit Tilde und Stern, das hatte ich vergessen, dass das manchmal ganz nützlich ist.


    Ich werde weiter basteln und gebe nochmal laut wenn es geht.

  • Notfalls zeig mal dein Code wenn du nicht weiter kommst.

    Bisher ist mein link außerhalb des header und damit wohl Eltern.

    Ohne den ganzen Code zu kennen schwer zu sagen .Aber da dein Menü im header ist und wie du sagst dein Link auserhalb des headers, hört es sich an wie ein Geschwister vom Elternelement,wenn man vom <nav> aus geht. Somit hast du mit CSS keine Chance da drauf zu greifen.


    Am besten probier mal noch etwas und wenn du nicht weiter kommst poste mal deinen aktuellen Code,oder mach mal ein Codepen fertig



    Zitat

    Der Klick irgendwo im Body ist natürlich das Ziel

    Irgendwie bekomme ich das gerade auch nicht hin mit Css.Wundert mich warum das gerade nicht klappt. Mit Js wäre es kein Problem ,das ist eine Zeile Code.

    Aber die Css Lösung wäre ja besser.Vieleicht kann mal gerade einer den passenden Code dafür posten,weil ich kriege mit klick auf body das Menü gerade nicht zu mit CSS. KOMISCHX(

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von basti1012 ()

  • Es muss mit der html Datei zu tun haben. Ich habe diverse Versionen im Arbeitsfortschritt gespeichert und eine davon funktioniert so, dass der zweite Link außerhalb des header funktioniert und auch beim schließen des Menu ausgeblendet wird. Nur bei erstmaligem Aufruf der Seite ist er bereits eingeblendet. Wenn ich diese css für die hier gepostete html verwende, dann wird der Link nicht mehr ausgeblendet.


    Ok, das ist jetzt etwas verworren beschrieben. Kann ich hier irgendwie die dateien zum ausprobieren (html und css) anhängen? Ich muss Sie nur noch abspecken auf das Grundproblem, damit sie mit den anderen beiden vergleichbar sind.

  • du kannst den html Code und Css Code posten in den code Tags </> hier klicken und dann den Code darein Kopieren und vieleicht nochmal nee kurze gute erklärung was du erreichen willst. Einfach en Link der ausserhalb des Menüs ist mit den man dann das Menü ein und ausblenden kann ?

  • Ich versuche mal alles etwas mehr zu sortieren:

    Ziel: Menu zum aus und einklappen mittels css, damit das Menu auf PC und Mobil Devices unterschiedlich dargestellt werden kann. Alles weiter bezieht sich nur auf die Mobile Version:

    Schönheitsfehler: Menu kann nur mit Button (Hamburger Icon) und nicht durch klick neben das Menu wieder eingeklappt werden.

    Problem: Ein beliebig auf der Seite positionierter Link zum Schliessen des Menu (am besten als Fläche neben dem ausgeklappten Menu) soll nur eingeblendet werden, wenn das Menu offen ist. Das kriege ich nicht hin,


    Lösungsansätze: Ich habe bisher zwei Versionen.

    In Version1 ist der Link ganz oben auf der Seite und ist beim ersten Aufruf der Seite bereits eingeblendet, auch wenn das Menu noch zu ist. Nach erstmaligem Öffnen und Schliessen wird er aber wie gewollt ausgeblendet. Danach wird er wie gewollt ein und ausgeblendet.


    Version 2: Um auch bereits beim erstmaligen Aufruf der Seite den Link bereits auszublenden, habe ich Version 1 so verändert, dass der Button zum Schliessen des Menu und auch der Link ausserhalb des Menu erst eingeblendet werden, wenn man das Menu durch Klick ausklappt. Der Button zum schliessen wird ordentlich eingeblendet, der Link ausserhalb überhaupt nicht. Das ist die Stelle, an der ich verzweifle.


    Die Codes sind folgende:

    Version 1

    Zugehöriges css zu Version1:

    Version2:

    Zugehöriges css:

    Ich hoffe, es ist jetzt etwas klarer.

  • Ich glaube da helfe ich mal etwas mehr.

    https://basti1012.bplaced.net/…rdner=html-seminar&id=336


    Ich hatte das gestern schon gemacht, weil da hatte ich das mit deinen Links noch nicht kapiert. Da sind jetzt 2 Link die erscheinen, wenn das Menü auf ist. Beim Klicken darauf verschwindet die Links und das Menü wieder.


    Jetzt musst du dir das halt noch anpassen, dass es so ist wie du es brauchst. Das wusste ich gestern halt noch nicht genau. Guck erstmal ob das überhaupt so in der Richtung stimmt.

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von basti1012 ()

  • Vielen Dank. Das ist das was ich möchte.

    Wo war mein Fehler?

    Was bedeutet > bei target?

    Kann ich #bb auch außerhalb des header positionieren?

  • super, danke. Ich habe habe bisher fast nur auf selfhtml.org gelesen, da Inselsprache (Englisch) nicht so sehr meine Stärke ist. Dort habe ich so eine Übersicht noch nicht gesehen. Deswegen habe ich oft nur durch lesen und nachvollziehen von codes meine Seiten mit dem text-Editor gebastelt. Nur in diesem Fall konnte ich die Logik hinter dem Problem nicht erkennen.


    Nochmals vielen herzlichen Dank für die Hilfe.

  • Meistens ist es auch einfacher wenn man was funktionierendes sieht und dann mit rum spielen kann wie was funktioniert. Auch lesen kann in vielen Sachen hilfreich sein.Die meisten Sachen findet man auch auf Deutsch ,man muß nur etwas Googeln und Notfals gibt es noch Übersetzter. Fals du es noch nicht hinbekommen hast die Links ausserhalb vom header zu setzten dann kuck dir nochmal den Link aus post11 an ich habe das geändert. Wie in den fall sind beide Links geschwister. Man kann aber auch nur den ersen Link als Nachbar deklarieren.Den zweiten Link aber nicht mehr weil er in diesen fall nicht mehr der Nachbar von header ist ,aber ein Geschwister.

    Also erklären ist etwas schwer für mich ,das mußt du alles mal selber testen und probieren wann und wie man was setzten muss.

    Hier ist mal eine Deutsche erklärung der ganzen selectoren und mit den Beispielen sollte man es ganz gut verstehen

    https://wiki.selfhtml.org/wiki/CSS/Selektoren

  • Danke. Es läuft im Moment schon mal innerhalb vom header. Deinen Vorschlag aus post 11 werde ich morgen auch noch einbauen.


    Ich habe einen Link, der aus einem unsichtbaren zeichen besteht, direkt neben das menu gesetzt, das zeichen ist so hoch wie das menu. damit klappt es sehr gut. wenn ich mehrere links nehme, die sich überlappen können, kann ich auch das problem unterschiedlicher bildschirmformate lösen.


    Das mit dem Lesen ist natürlich richtig, aber ich wusste bisher nicht einmal dass die Selektoren gibt.

    Dank Deiner Hilfe werde ich in den kommenden Tagen wohl fertig werden.

    Besten Dank nochmal für die Unterstützung.