Toggle Menü mit :target - Menü öffnet sich nicht

  • Hallo,


    bin gerade dabei das Thema Toggle Menü mit Hilfe von CSS3 und :target aus der DVD in meiner Seite nachzubauen. Ziel ist meine Internetseite RWD möglich zu machen. Die Erläuterungen waren eindeutig und für mich eigentlich verständlich. Aber; - quasi kurz vor Torschluss hackt es und ich bin wieder an der Stelle, wo ich ziemlich ratlos bin. Wahrscheinlich ist es wieder so ein blöder Tippfehler. Ich finde Ihn einfach nicht.


    Das Problem ist: Der button Menü auf ist soweit klar und wenn ich drauf klicke springt er auch (laut Brackets) dahin; - aber er mach das Menü nicht auf!


    HTML (Nur der Teil der betroffen ist; - Volle Datei geht nicht wegen Fehler "zu viele Zeichen" siehe anderen Post)


    Hier die CSS3 (auch hier nur der Teil der betroffen ist)


    Ich hoffe, dass ich alles beigelegt habe, was zur Beantwortung meiner Frage notwendig ist. Wenn nicht; - gerne kurze Info.


    Kurz noch zur Info: Ich bin noch nicht ganz mit der DVD RWD durch. Wenn ich also eine Frage stelle, die noch auf der DVD speziell bei dem 2 Spalten Layout kommt und dieses Problem beschreibt, so möge er mir das verzeihen.

    Vielen Dank nochmals (Beim hochladen der Daten kam eine Fehlermeldung ("zu viele Zeichen"), deswegen diese Art der Datenübertragung)

  • Zitat

    Wahrscheinlich ist es wieder so ein blöder Tippfehler

    Offenbar ja: Sieh dir mal genau den Wert des href-Attributes an:

    Code
    <a class="menue-button menue-button-beschreibung-close" href="#nav-menue-zu>">MENÜ zu</a>

    Da ist das ">" am Ende zu viel. So lautet das Sprungziel "#nav-menue>" und das existiert nicht.


    Außerdem funktionierte es bei mir (Opera) nicht, wenn das Sprungziel im body-Tag steht. Ich musste ein a-Tag dafür anlegen und dann funktionierte es.

  • Hallo Sempervivum,


    Tja; - so ist das, wenn man zu lange vor dem Rechner sitzt. Was habe ich nicht alles ausprobiert und geprüft. Schon jetzt ein großes DANKE.


    Hier in der Firma habe ich leider nur eine "Krückenversion" vom IE. Ich habe die beiden Tippfehler ">" eliminiert und jetzt kann ich das Menü wunderschön in dieser IE Version öffnen.


    Trotzdem zwei kleine Nachfragen:

    - Dein Hinweis mit dem a-Tag ist mir unklar. Könntest Du mir da einen Vorschlag machen, wie man den Einbauen sollte?

    - In meiner verkrüppelten IE Version geht zwar das Menü jetzt nach dem anklicken auf; - aber es bleibt der Text mit Menü auf (statt mit Menü zu) und beim erneuten Anklicken geht es nicht mehr zu.


    Kannst Du mir da eventuell auch helfen? Ich nehme mal an, dass das mit den Sprungzielen hier wieder der Knackpunkt ist (korrekt?)


    Schon jetzt Danke

  • Zitat

    geht zwar das Menü jetzt nach dem anklicken auf; - aber es bleibt der Text mit Menü auf (statt mit Menü zu)

    Es müssen beide Sprungziele auf der Seite vorhanden sein, #nav-menue und #nav-menue-zu. Letzteres finde ich in deinem HTML nicht.

    Zitat

    Dein Hinweis mit dem a-Tag ist mir unklar. Könntest Du mir da einen Vorschlag machen, wie man den Einbauen sollte?

    Bei mir hat es mit dem Sprungziel im body-Tag nicht funktioniert. Ich habe folgendes gemacht:

    Code
        <body>
        <a id="nav-menue">

    Außerdem muss man dann das CSS etwas ändern:

    Code
            #nav-menue:target ~ nav {
                display: block;
            }

    Möglicher Weise verhalten sich hier die Browser unterschiedlich. Ich habe Opera und habe mir nicht die Mühe gemacht, es mit anderen zu testen.

  • Danke nochmal mit dem Hinweis auf Opera. Muss ich mir mal bei Gelegenheit runterladen und prüfen. Bei mir klappt es im IE mit dem Sprungziel im Body tag.


    Was ich aber überhaupt nicht verstehe, ist, dass im HTML Seminar (ebook und auch auf der DVD) dieser Code ohne Sprungziel #nav-menue-zu funktionniert?


    Diesen wollte ich eigentlich nachstellen. Ich habe auch schon darüber nachgedacht wo ich das Sprungziel #nav-menue-zu hintue.

    Ich bin gerade nur noch verwirrt, auch wenn ich durch Deinen Hinweis mindestens 2/3 schon geklärt habe.


    Was mich auch verwirrt ist, dass der Text "Menü auf" bestehen bleibt, wenn ich drauf geklickt habe. Für mich ein Hinweis, dass hier was noch im Argen ist.


    Ich schicke mal einfach meinen HTML und CSS Code komplett in 2 separaten Posts. Vielleicht ist es dann klarer.

  • Der HTML code:

  • Der CSS Code:

  • Ich wäre hier am besten gar nicht eingestiegen, denn diese Lösungen mit :target sind eigentlich nicht so mein Ding. Entsprechend habe ich ein paar falsche Informationen geliefert. Ich habe jetzt eine Testseite mit deinem vollständigen Code angelegt und siehe da: Das Öffnen des Menüs funktioniert auch wenn das Ziel im body-Tag steht.

    Wenn ich dieses im CSS ergänze, funktioniert auch das Auf- und Zumachen:

    Code
    #nav-menue:target .menue-button-beschreibung-close {
        display: block;
    }
    inspector-stylesheet:1
    #nav-menue:target .menue-button-beschreibung-open {
        display: none;
    }

    auch ohne dass #nav-menue-zu definiert ist. Offenbar ist es ausreichend, dass ein Klick auf den Link mit diesem Ziel das :target von #nav-menue weg nimmt.

  • Es ist gelöst!


    Nochmals Danke an Sempervivum; - auch wenn die Lösung oben bei mir nicht geklappt hat.


    Mal wieder war es ein von mir verursachter Denkfehler beim letzten #nav-menue: Fehler von mir war hier die ......close Variante anzuziehen statt der .....open Variante (Code unten). Letzendlich hat mich Sempervivum dezent darauf hingeführt.


    Sorry für meine Unzulänglichkeit. - Und Danke dafür, dass man trotzdem die Profis dafür fragen kann.

    Code
    #nav-menue:target nav {
                display: block;
    }
    
    #nav-menue:target .menue-button-beschreibung-open {
        display: none;
    }


    Nun kann ich mich in die RWD für die Seite hineinwerfen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!