:active Menüpunkte in der mobilen Ansicht

  • Hallo zusammen

    Ich bin neu hier und habe ein Problem, nachdem ich mich entschlossen habe (nach stundenlangem recherchieren) mich hier zu registrieren..

    Ich verwende folgendes Template.

    Ich habe den Menüelementen class="active" zugeordnet. Im CSS dann folgendes hinterlegt:

    Code
    1. #nav > ul > li.active a {
    2. color: red;
    3. }

    Dadurch wird das aktive Menü jeweils rot hervorgehoben.

    Mein Problem: Sobald die Seite in die mobile-Sicht umschaltet (Fenster kleiner ziehen), sind diese Punkte nicht mehr aktiv. Es war mir zunächst klar, dass in diesem Fall wohl ein anderes CSS ("style-narrower.css") verlinkt ist. Also sah ich dort mal rein und fügte folgenden Code ein:

    Code
    1. #navPanel .link:active {
    2. color: red;
    3. }

    Leider funktionierte dies nicht. Wenn ich das :active durch :selected ersetze funktioniert es komischerweise. Alle Links, die schon mal angeklickt wurden sind dann rot.


    Der Code lässt auf der Seite herunterladen.

    Ich bin ein ziemlicher Anfänger und wäre über jedliche Hilfe oder Tipps dankbar :)


    LG stupsi01

  • Das problem ist das es sich keiner runterladen wird um dir zu helfen.


    Du sagst das es in der Mobilen Ansicht ist. Kuck mal in der Css Datei nach ob da irgendwo was von @media queries steht. Da wirst du die Daten wahrscheinlich ändern müssen.


    Kannst du dein Html und Css mal posten wenn es nicht zu groß ist ?

  • Das problem ist das es sich keiner runterladen wird um dir zu helfen.


    Du sagst das es in der Mobilen Ansicht ist. Kuck mal in der Css Datei nach ob da irgendwo was von @media queries steht. Da wirst du die Daten wahrscheinlich ändern müssen.


    Kannst du dein Html und Css mal posten wenn es nicht zu groß ist ?

    Klar. Ich habe mittlerweile etwas Fortschritt gemacht :). Wenn ich im "style-narrower.css" die Zeile "#navPanel .link:active { color: red; }" einfüge sind die Linke beim anklicken rot. Allerdings bleibt dies leider nicht so sondern das rot bleibt nur während dem Klick :(


    Sorry, aber wie geht das mit den Anhängen? Bei mir erscheint immer ein "unbekannter Fehler".

    Kannst die Files von meinem Server herunterladen: Download dann auf "Ordner herunterladen" (Einzige Änderung von mir ist Zeile 192-196 im style-narrower.css)

    Vielen Dank für deine Hilfe. Ich glaube langsam aber sicher verzweifle ich :)

  • Achso, sorry^^


    HTML:

    style.css

    style-narrower.css

    Musste wegen Zeichenlimit unnötige Zeilen löschen. Mein Wunsch: Auf der Seite Home soll Home rot sein:

    pasted-from-clipboard.png


    Danke für die Hilfe - Falls irgendwer das schaffen sollte gibt's ne Belohnung von mir :)

  • Sehe gerade das du mobiles Menü meintest ? Bin auch schon blöd, habe ich irgendwie überlesen.

    Beim Mobilen Menü könnte es so nicht gehen. Aber um dir das genau sagen zu können fehlt mir da irgendwas.

    Wo ist den das #navPanel ?

    denke das es von den skel Script kommt oder s . Aber will jetzt nicht spekulieren.

    Hast du das schon Online irgendwo ?

    Dann gib mal denLink.

    Oder mach mal bei Codepen ein pen fertig. Mit den wichtigsten daten und cs und wenn vorhanden mit der Js.

    Füge aber nur die Datein ein die man brauch um den Fehler zu bekommen. <footer> und so ein kram werden wir hier für nicht brauchen.


    Aber an besten wäre ein Link weil da kann man sofort sehen welche Klasse was ist und so weiter . Dann hast du die Antwort in 5 Minuten.

    Kannst notfalls auch ein freehoster nehmen.

  • Genau. Ich meine das Mobile-Menü (welches sich über Hamburgermenü öffnen lässt). Das Desktopmenü funktioniert ohne Probleme.

    Die Seite ist jetzt auf meinem Server online geschalten: Link

    Das meiste unnötige ist rausgelöscht, sodass nur noch das Menü übrig bleibt..


    Vielen Dank :)

  • Achso .Weil du die ganze Zeit davon redest das du home rot haben woltest.

    Ja dann muß ich nochmal kucken.

    Also soll immer der rot sein den du gerade angeklickt hast ?

    Denk dran wenn du normale Links hast ,wechselt die Seite und das angeklickte ist nicht mehr rot,dazu müste man es irgendwie speichern. Lädst du den Inhalt über Ajax ist das kein problem.

    Aber das wahr jetzt nur nee Info die du später vieleicht brauchst

  • Auf der schnelle muß ich passen. Weil der ganze kram bei mir nicht läuft,nur auf dein Link.Kopiere ich es bei mir rein Funktioniert die Mobile Ansicht nicht.Also müsste ich erst das beheben damit ich weiter machen kann.

    Du sagtest das es in der Laptop ansicht funktioniert mit den angeklickten,das es rot bleibt ? Das geht bei mir nicht und bei dir auf den Link auch nicht bei mir.


    Das jetzt alles so anzupassen wie du es wolltest bekomme ich auf der schnelle nicht hinVieleicht hat zwischen zeitig einer mehr Zeit dazu.

    Eine Javascript Lösung hätte ich sofort nur das willst du ja bestimmt vermeiden und dazu brauche ich mehr zeit mir das alles genauer anzukucken.


    Vieleicht blickt da einer von den Profis schneller durch als ich.

    Sobald es heute Nacht kälter ist werde ich mal kucken wenn bis dahin nix passiert ist OK ?

  • Entschuldige, ich habe den Code jetzt nochmals angepasst: Link. Das Menü "Home" soll rot sein, wenn man auf der Seite "index.html" ist.

    Das Menü "Untermenü" soll rot sein, wenn man auf der Seite "untermenü.html" ist.

    Dies funktioniert im Desktoplayout (siehe Anhang).

    Im Mobilelayout will ich jetzt das selbe erreichen.

    Vielen Dank!

  • Du hast zwei Navigationen, was im Prinzip unnötig wäre, aber zumindest musst Du dann auch bei der mobilen Navi dem entsprechenden Eintrag eine CS-Klasse active spendieren, wie Du es bei der Desktop-Navi auch machst.

    Vorausgesetzt, Du hast das selber gemacht und nicht irgendwo stumpf kopiert in der Hoffnung, alles läuft?

  • Es ist ein Template, welches ich jetzt auf meine Bedürfnisse anpasse. Das mit dem activehabe ich schon eingefügt im "narrower.css".

    Allerdings ist der Text nur während dem Klicken rot und bleibt nicht so:

    Code
    1. #navPanel .link:active {
    2. color: red;
    3. }