nicht angemeldet
oxo888oxoKann ich aber ehrlich gesagt nicht ganz verstehen, du hattest zum Schluss doch einen Mobile First Code, den du Schritt für Schritt erstellt hast, da ging alles?
Ja richtig, ich hatte das ja extra Schritt für Schritt gemacht.
Aber zum Schluss ging es dann eben doch nicht richtig.
Ich habe heute mal einen ganz neuen Ansatz gemacht.
Dieses mal mit jQuerie-Toggle:
spaceart.de/test2.php
Das funktioniert soweit auch erstmal gut.
Aber auch da gibt es schon wieder ein Problem.
Um das Problem nachzuvollziehen mach mal folgendes:
* Offne spaceart.de/test2.php
* Da sieht man die aufgeplatte Navi auf dem groen Viewport
* Zieh das Browserfenster schmaler
* Da sieht man dann die eingeklappte Navi und den Klappen-Link auf dem kleinen Viewport
Soweit so guu!
* Dann Klapp das Menü auf ... klappt auch gut.
* Dann klapp das Menü wieder zu ... klappt auch.
* Dann zieh das Browserfenster wieder groß
* Nun bleibt die Navi leider zugekkappt
Das ist das Problem!
Jetzt könnte man fragen, wer macht denn solche Browser-Fenster-Zieh-Spielchen.
Aber wenn man die Seite auf einem Tablet öffnet, wo zwischen Hoch- und Qerformat der Media Querie Breakpoint wechselt, hat man den Salat.
Verstehst Du, was ich meine?
Hast Du da eine Idee, wie man das lösen kann?
Hier nochmal der komplette Code dazu:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
#panel {
display: none;
}
.btn-slide {
display: block;
}
@media only screen and (min-width: 46.5em) {
#panel {
display: block;
}
.btn-slide {
display: none;
}
}
</style>
</head>
<body>
<script>
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<a href="#" class="btn-slide">Sliden</a>
<p id="panel">
Kategorie 1<br>
Kategorie 2<br>
Kategorie 3<br>
Kategorie 4<br>
Kategorie 5<br>
Kategorie 6<br>
</p>
</body>
</html>
Gunnar Bittersmann
Auge
Matthias Apsel