0
das ist meine allererste Frage! Ist jetzt ein paar Tage, dass ich ein Problem habe enter code here mit Checkbox Erstellen einer Folie oben/unten mobilen ersten Menü. Das Kontrollkästchen funktioniert perfekt, aber was ich nicht tun kann, ist das Menü hoch und fertig, wenn das Kontrollkästchen aktiviert ist. Jeder Tipp oder Hilfe für die richtige Richtung würde sehr geschätzt werden!Chechbox ist cheched aber Inhalt kann nicht gleiten
<!-- === MENUTOGGLE === -->
<input type="checkbox" name="checkbox" id="menuToggle" value="value">
<label for="menuToggle" class="menu-icon">☰</label>
<!-- ==== HEADER ==== -->
<header>
<div id="logo" class="brand">
<h1><img src="images/logo.png" alt="Hello"></h1>
</div>`enter code here`
<nav class="menu">
<ul>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog </a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
}
body {
background: #eee;
color: #444;
-webkit-font-smoothing: antialiased;
font-family: Arial, sans-serif;
font-weight: 400;
height: auto !important;
height: 100%;
min-height: 100%;
text-rendering: optimizeLegibility;
}
.menu {
width: 100%;
position: absolute;
top: 66px;
}
.menu-icon {
float: right;
color: blueviolet;
cursor: pointer;
padding-top: 25px;
padding-right: 30px;
}
#menuToggle {
display: none;
}
#menuToggle:checked + .menu {
position: absolute;
top: -66px;
}
#logo {
float: none;
text-align: left;
padding-top: 7px;
padding-left: 2em;
}
header {
display: block;
background-color: #FFF;
}
nav {
text-align: center;
}
nav ul {
background-color: rgba(255, 255, 255, 0.15);
float: none;
line-height: 3.5em;
margin: 0;
}
nav ul li {
display: block;
list-style-type: none;
}
nav ul li:hover {
background-color: rgba(171, 193, 242, 0.1);
}
nav ul li a {
text-decoration: none;
color: red;
}
nav ul li a:hover {
color: aqua;
}
/*------------ MEDIUM BIG SCREEN -----------------------*/
@media screen and (min-width:600px) {
#logo {
float: left;
}
.menu {
width: 100%;
height: 70px;
position: inherit;
}
.menu-icon {
display: none;
}
header {
height: 70px;
background-color: #FFF;
margin: auto;
width: 100%;
}
nav ul {
background-color: #FFF;
float: right;
padding: 0.55em 3em 0.55em 1.5em;
height: 70px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
background-color: #FFF;
padding-left: 3em;
}
Ja! Und die Magie passiert! Vielen Dank! Wenn ich richtig liege, war das Problem, mit dem ich konfrontiert war, im Klassenmenü? Könnten Sie mir bitte erklären, was Sie getan haben? Ich habe das Gefühl, dass mein Kopf nach zwei Tagen, in denen er das Problem verfolgt, voller Zahlen und Konzepte ist, die ich nicht verstehen kann, wo ich war und wohin ich gehe. Zeit, es bis morgen zu stoppen. Nochmals vielen Dank)) –
Und jetzt gibt es das Hauptproblem. Wegen der mobilen ersten Reaktionsfähigkeit möchte ich die Eigenschaft der Checkbox nur und ausschließlich auf die mobile Ansicht anwenden. Derzeit, wenn das Kontrollkästchen deaktiviert ist, verschwindet das Menü auf der Desktop-Ansicht und ich will es nicht. Ich will nicht die Antwort, sondern eher einen Hinweis darauf, wonach gesucht werden soll. Ich habe bereits das gleiche Projekt mit jQuery gemacht, aber ich möchte, dass dieses reine html5 und css3 ist. Vielen Dank! –
Froh, dass es funktioniert hat. Ich habe .menu {display: none;} hinzugefügt und vergessen, eine Medienabfrage für mittelgroße und große Geräte hinzuzufügen. Jetzt den angezeigten Code aktualisiert: Block in der Medienabfrage. Bitte überprüfen Sie und lassen Sie mich wissen, wenn Sie eine Erklärung benötigen. – San