nicht angemeldet
Navigationspunkt ausblenden
Matthias Apsel
Gunnar BittersmannGuten Morgen,
Warum verschwindet mein Schließen Button nicht? http://jsfiddle.net/oo74au6w/
a.nav-hide {
display:none;
}
.nav-slider {
display:none;
}
#nav-open:target .nav-slider,
#nav-open:target a.nav-hide {
display:block;
}
#nav-open:target a.nav-show {
display:none;
}
.metanav ul {
margin:0;
padding:0;
list-style:none;
}
.metanav a {
padding:1em;
display:block;
background:#efefef;
margin-bottom:1px;
color:#000;
text-decoration:none;
}
.metanav a:active,
.metanav a:hover {
background:#999;
}
<div id="nav-open">
<nav class="metanav">
<a href="#nav-open" class="nav-show">Menü öffnen</a>
<a href="#nav-closed" class="nav-hide">Menü schließen</a>
<ul>
<li class="nav-slider"><a href="#">Startseite</a></li>
<li class="nav-slider"><a href="#">Moderator</a></li>
<li class="nav-slider"><a href="#">Archiv</a></li>
<li class="nav-slider"><a href="#">Impressum</a></li>
</ul>
</nav>
</div>
-
Guten Morgen,
so geht es: http://jsfiddle.net/oo74au6w/1/
-
Hallo,
du bist wahrscheinlich zum ersten mal "Opfer" der Spezifität geworden. Google mal nach
css spezifität
Erläuterung: Das "display: block" der Klasse ".metanav a" hat eine höhere Spezifität als das "display: none" des Elements "a.nav-hide" und überstimmt es deshalb. Dabei spielt auch die Reihenfolge der Angaben in der CSS-Datei keine Rolle.
Gruss
MrMurphy
-
Om nah hoo pez nyeetz, MrMurphy!
Erläuterung: Das "display: block" der Klasse ".metanav a" hat eine höhere Spezifität als das "display: none" des Elements "a.nav-hide" und überstimmt es deshalb. Dabei spielt auch die Reihenfolge der Angaben in der CSS-Datei keine Rolle.
.metanav a- eine Klasse, ein Typa.nav-hide- ein Typ, eine KlasseIch sehe nicht, wo da eine unterschiedliche Spezifität herkommen sollte. Siehe auch: Spezifität der Regelsätze
Matthias
-
Hallo,
Ich sehe nicht, wo da eine unterschiedliche Spezifität herkommen sollte.
Stimmt. Da lag ich falsch.
Gruss
MrMurphy
-
-
-
Liebe Carmen,
was hältst Du von einer Vereinfachung?
Liebe Grüße,
Felix Riesterer.
--
"Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)-
Hallo Felix,
was hältst Du von einer Vereinfachung?
danke für deine Mühe, allerdings kann ich die Navigation nun leider nicht mehr aufklappen.
-
Liebe Carmen,
danke für deine Mühe, allerdings kann ich die Navigation nun leider nicht mehr aufklappen.
mit welchem Browser hast Du das getestet? Mein FF macht das ganz wie gewünscht!
Liebe Grüße,
Felix Riesterer.
--
"Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)-
Hallo Riesterer,
mit welchem Browser hast Du das getestet? Mein FF macht das ganz wie gewünscht!
ich schau es mir mit der aktuellen Chrome Version an. Stimmt, der aktuelle Firefox macht es wie gewünscht. Auf den Chrome kann und möchte ich allerdings nicht verzichten.
Und das zweite Problem ist, dass der Button schließen leider nicht mehr da ist.
-
Liebe Carmen,
Und das zweite Problem ist, dass der Button schließen leider nicht mehr da ist.
geht auch mit dem schließen-Button...
Liebe Grüße,
Felix Riesterer.
--
"Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)-
Hallo Felix,
geht auch mit dem schließen-Button...
Wahnsinn was mit CSS alles geht und vielen Dank für deine Hilfe. Wenn es jetzt noch im Chrome gehen würde, dann wäre es absolut genial, dann könnte ich die Navigation für mein Problem nehmen.
Wenn der Bildschirm kleiner gezogen wird, wird diese ausgeblendet und unter einem Button der über die ganze Seite geht hinterlegt. Mit klick klappt die Navigation nach unten auf.
-
Liebe Carmen,
Wenn es jetzt noch im Chrome gehen würde,
geht jetzt. Musste aber tricksen. Der Link "Menü öffnen" darf nicht auf display:none gestellt werden, sondern muss mit position:absolute und left:-9999px aus dem Sichtfeld bewegt werden, sonst schaltet Webkit die Geschwister nicht auf sichtbar.
Liebe Grüße,
Felix Riesterer.
--
"Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)-
@@Felix Riesterer:
sondern muss mit position:absolute und left:-9999px aus dem Sichtfeld bewegt werden
Muss nicht. Sollte nicht!
LLAP
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Lieber Gunnar Bittersmann,
sondern muss mit position:absolute und left:-9999px aus dem Sichtfeld bewegt werden
Muss nicht. Sollte nicht!
solange Du im Fiddle keine bessere Lösung präsentieren kannst, ist Dein Einwand bloße Besserwisserei ohne Grundlage. Die im verlinkten Artikel angebotene Lösung ("image replacement"?!) funktioniert insofern nicht, als dass das Element (ein <a>) als solches nicht mehr sichtbar sein und auch keinen Platz mehr für sich beanspruchen darf. Mach' das 'mal mit text-indent... das will ich sehen!
Wie kommst Du überhaupt auf die Idee, mir einen Link zu einer "image replacement"-Technik zu posten, wenn ich ein völlig anders gelagertes Problem lösen möchte? Hast Du diesen Thread überhaupt genügend studiert? Hast Du Dir das Fiddle wenigstens genauer angesehen? Ich vermute, eher nicht.
Liebe Grüße,
Felix Riesterer.
--
"Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
-
-
-
-
-
-
-
-
-
Hallo,
habe ich ohne Javascript die Möglichkeit, wenn die Navigation aufgeklappt wird dass der Hintergrund der Seite leicht abgedunkelt wird? Und meine zweite Frage, ist es möglich, dass die Navigation etwas sanfter auffährt? Oder ist beides überhaupt nicht Sinnvoll?
-
Liebe Carmen,
habe ich ohne Javascript die Möglichkeit, wenn die Navigation aufgeklappt wird dass der Hintergrund der Seite leicht abgedunkelt wird?
"der Hintergrund der Seite" ist in aller Regel ein Element, von dem Deine Navi ein Kindelement ist. Mit CSS kannst Du keine Elternelemente (oder andere Vorfahren) selektieren. Also: Nein, nicht ohne CSS.
Und meine zweite Frage, ist es möglich, dass die Navigation etwas sanfter auffährt?
Oder ist beides überhaupt nicht Sinnvoll?
Das erstere halte ich für nur bedingt sinnvoll, aber mit JavaScript durchaus lösbar.
Liebe Grüße,
Felix Riesterer.
--
"Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
-
