:active Menüpunkte in der mobilen Ansicht

stupsi01 · 22. Juli 2018

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

#nav > ul > li.active a {
color: red;
}

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

#navPanel .link:active {
color: red;
}

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

basti1012 · 22. Juli 2018

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 ?

stupsi01 · 22. Juli 2018

basti1012 schrieb:

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

basti1012 · 22. Juli 2018

du sollst nix anhängen du sollst den Code als text Kopieren und hier in den code Tags einfügen </> . Der bleibt beim klicken rot weil du ja auch :active nutzt

stupsi01 · 22. Juli 2018

Achso, sorry^^

HTML:

HTML

<!DOCTYPE HTML>
<html>
<head>
<title>Solarize by TEMPLATED</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
</noscript>
</head>
<body class="homepage">
<div class="wrapper style1">
<div id="header">
<div class="container">
<h1><a href="#" id="logo">Solarize</a></h1>
<nav id="nav">
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li>
<a href="">Dropdown</a>
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Magna phasellus</a></li>
<li><a href="#">Etiam dolore nisl</a></li>
<li>
<a href="">Phasellus consequat</a>
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Phasellus consequat</a></li>
<li><a href="#">Magna phasellus</a></li>
<li><a href="#">Etiam dolore nisl</a></li>
<li><a href="#">Veroeros feugiat</a></li>
</ul>
</li>
<li><a href="#">Veroeros feugiat</a></li>
</ul>
</li>
<li><a href="left-sidebar.html">Left Sidebar</a></li>
<li><a href="right-sidebar.html">Right Sidebar</a></li>
<li><a href="no-sidebar.html">No Sidebar</a></li>
</ul>
</nav>
</div>
</div>
</body>
</html>

Alles anzeigen

style.css

Code

@import url("font-awesome.min.css");
@import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800");
/* Basic */
body {
background: #222222;
}
body.loading * {
-moz-transition: none !important;
-webkit-transition: none !important;
-o-transition: none !important;
-ms-transition: none !important;
transition: none !important;
-moz-animation: none !important;
-webkit-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
}
body, input, select, textarea {
color: #555555;
font-family: 'Open Sans', sans-serif;
font-size: 12pt;
font-weight: 300;
line-height: 1.65em;
}
a {
color: #82b440;
text-decoration: underline;
}
strong, b {
font-weight: 700;
}
em, i {
font-style: italic;
}
p, ul, ol, dl, table, blockquote {
margin: 0 0 2em 0;
}
p {
line-height: 1.8em;
}
p.medium {
font-size: 1.4em;
}
h1, h2, h3, h4, h5, h6 {
color: inherit;
font-weight: 700;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: inherit;
text-decoration: none;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.25em;
}
sub {
font-size: 0.8em;
position: relative;
top: 0.5em;
}
sup {
font-size: 0.8em;
position: relative;
top: -0.5em;
}
hr {
border-top: solid 1px #82b440;
border: 0;
margin-bottom: 1.5em;
}
blockquote {
border-left: solid 0.5em #82b440;
font-style: italic;
padding: 1em 0 1em 2em;
}
section.special, article.special {
text-align: center;
}
/* Header */
#header {
color: white;
height: 4em;
background: rgba(0, 0, 0, 0.5);
}
#header .container {
position: relative;
}
.homepage #logo {
display: none;
}
.homepage #nav {
position: static;
right: none;
text-align: center;
}
#logo {
line-height: 2em;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 2em;
font-weight: 400;
}
#logo h1 {
display: inline-block;
margin: 0;
padding: 0;
}
#logo a {
color: inherit;
}
#nav {
position: absolute;
top: 0;
right: 0;
}
#nav > ul {
margin: 0;
}
#nav > ul > li {
border-radius: 4px;
display: inline-block;
margin-left: 0.5em;
padding: 0 0.5em;
}
#nav > ul > li a {
color: inherit;
line-height: 4em;
letter-spacing: 2px;
text-decoration: none;
text-transform: uppercase;
font-weight: 400;
font-size: 1em;
}
#nav > ul > li:first-child {
margin-left: 0;
}
#nav > ul > li.active a {
color: white;
}
#nav > ul > li > ul {
display: none;
}
/* Dropotron */
.dropotron {
top: 2em;
background: rgba(32, 32, 32, 0.75);
border-radius: 4px;
color: inherit;
min-width: 12em;
padding: 1em 0;
color: white;
}
.dropotron > li {
line-height: 2em;
padding: 0 1em;
}
.dropotron > li > a {
color: inherit;
letter-spacing: 2px;
text-decoration: none;
text-transform: uppercase;
}
.dropotron > li.active > a, .dropotron > li:hover > a {
color: inherit;
}
.dropotron.level-0 {
border-radius: 0 0 4px 4px;
font-size: 1em;
margin-left: -0.5em;
}

Alles anzeigen

style-narrower.css

Code

/* Basic */
#skel-layers-wrapper {
padding-top: 44px;
}
p {
line-height: 1.8em;
}
header.major h2 {
font-size: 1.8em;
}
header.major .byline {
font-size: 1.1em;
}
/* Layers */
#navPanel {
background: #000;
}
#navPanel .link {
border-top: solid 1px rgba(0, 0, 0, 0.15);
color: #888;
display: block;
height: 44px;
line-height: 44px;
padding: 0 1em 0 1em;
text-decoration: none;
}
#navPanel .link:first-child {
border-top: 0;
}
#navPanel .link.depth-0 {
color: #fff;
}
#navPanel .link .indent-1 {
display: inline-block;
width: 1em;
}
/*Diese Zeile wurde von mir eingefügt!*/
/*Der Link bleibt aber nur während dem Klicken rot und bleibt leider nicht so..*/
#navPanel .link:active { color:red !important; }

Alles anzeigen

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

basti1012 · 22. Juli 2018

Und warum schreibst du hier nicht red rein

Code

#nav > ul > li.active a {
color: white;
}

basti1012 · 23. Juli 2018

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.

stupsi01 · 23. Juli 2018

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

basti1012 · 23. Juli 2018

Du willst in Mobilen Menü den Oberen HOME Link rot haben ?

Dann gib mal das zu deiner Css dazu

Code

#navPanel .link.depth-0:nth-child(1) {
color: red;
}

Zumindest ist es bei mir dann rot

stupsi01 · 23. Juli 2018

Das klappt schon, allerdings möchte ich die Menüpunkte mit der Klasse "active" rot haben, nicht der Erste.

Bin ich auf Home ist Home rot, bin ich auf dem ersten Untermenü ist dieses rot, usw.

basti1012 · 23. Juli 2018

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

basti1012 · 23. Juli 2018

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 ?

stupsi01 · 23. Juli 2018

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!

Arne Drews · 23. Juli 2018

Ich habe jetzt nicht alles gelesen, aber wenn Du es in der Desktop-Variante hinbekommst, was für Probleme hats Du dann in der mobilen Version?

Das Prinzip ist nicht ViewPort gebunden!

stupsi01 · 23. Juli 2018

Leider verstehe ich auch nicht weshalb. Vielleicht verstehst es du, wenn du den Code ansiehst (ich verstehe es nicht )

Arne Drews · 23. Juli 2018

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?

stupsi01 · 23. Juli 2018

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

#navPanel .link:active {
color: red;
}

Arne Drews · 23. Juli 2018

Nein, das ist ein Pseudo-Selektor. Schau Dir die Desktop-Navi an, dort erhält das entsprechende Item die CSS-Klasse active:

HTML

<li class="active" ...

stupsi01 · 23. Juli 2018

Das verstehe ich. Aber weshalb bleiben die Links denn nicht rot? Die Klasse wurde ihnen ja unabhängig vom CSS zugewiesen mit <li class="active" ..und sollten doch auch so bleiben?

Sorry, bin Anfänger

Arne Drews · 24. Juli 2018

Nein, den Items der mobilen Navigation wird diese Klasse eben nicht zugewiesen! Das ist Dein Problem.