Hallo,
bin gerade dabei das Thema Toggle Menü mit Hilfe von CSS3 und :target aus der DVD in meiner Seite nachzubauen. Ziel ist meine Internetseite RWD möglich zu machen. Die Erläuterungen waren eindeutig und für mich eigentlich verständlich. Aber; - quasi kurz vor Torschluss hackt es und ich bin wieder an der Stelle, wo ich ziemlich ratlos bin. Wahrscheinlich ist es wieder so ein blöder Tippfehler. Ich finde Ihn einfach nicht.
Das Problem ist: Der button Menü auf ist soweit klar und wenn ich drauf klicke springt er auch (laut Brackets) dahin; - aber er mach das Menü nicht auf!
HTML (Nur der Teil der betroffen ist; - Volle Datei geht nicht wegen Fehler "zu viele Zeichen" siehe anderen Post)
<body id="nav-menue">
<!--Definition des Anzeigebereiches -->
<div id="seite" >
<div id="hintergrund"></div>
<!--Kopfbereich inkl. Steuerung-->
<div id="kopfsteuerungbild">
<!-- Hier startet nur der Kopfbereich-->
<header id="sprunganfang"> <!-- Hier inklusive die Srungmarke an den Anfang-->
<div id="sternbergbox"><p>Konrad<br>Sternberg</p></div> <!--Definition der Box die unterhalb der erscheinenden Box beim überfahren mit der Maus liegt -->
<div id="einsterneinbergbox"><p>einstern<br>einberg<br>.de</p></div> <!--Box die erscheint (ohne Maus) -->
<div id="ueberschrift"><p id="headlineanpassung"></p></div> <!-- Inhalt im Kopf-->
</header>
<!-- Hier startet nun der Steuerungsbereich -->
<nav>
<ul>
<li><a href="index.php" id="start">Startseite</a></li><div class="neunav"><p>Bearbeitet!</p></div><!-- mit "Bearbeitet" Post-it -->
<li><a href="kontakt.php" id="kontakt">Kontakt mit mir</a></li> <!-- Aufruf für Kontaktformular-->
<li><a href="bildergalerie.php" id="bilder">Bildergalerie</a></li><div class="neunav"><p>Neu!</p></div> <!-- Erster Testbereich, mit "Neu" Post-it -->
<li><a href="beta.php" id="beta">Bereich Beta</a></li> <!-- Zweiter Testbereich-->
<li>.....</li>
<li><a href="impressum.php" id="impressum">Impressum</a></li>
<li><a href="datenschutzerklaerung.php" id="daten">Datenschutz</a></li>
</ul>
</nav>
<a class="menue-button menue-button-beschreibung-close" href="#nav-menue-zu>">MENÜ zu</a>
<a class="menue-button menue-button-beschreibung-open" href="#nav-menue>">MENÜ auf</a>
Alles anzeigen
Hier die CSS3 (auch hier nur der Teil der betroffen ist)
nav {
width: 190px;
float: left;
padding-top: 2em;
display: none;
}
nav a {
color: white;
text-shadow: 1px 1px 4px black;
text-decoration-line: none;
display: inline-block;
width: 100%;
padding-left: 1em;
box-sizing: border-box;
line-height: 1.7em;
}
nav a:hover {
font-weight: bold;
background-image: url(bilder/dreieck.gif);
background-repeat: no-repeat;
background-position: right center;
text-transform: uppercase;
animation-name: steuerung-animation;
animation-duration: 2s;
}
@keyframes steuerung-animation {
0% {color: lightgreen}
50% {color: limegreen}
100% {color: darkgreen}
}
nav a:active {
color: yellow;
}
/* CSS erweitern um Menu Button */
.menue-button {
width: 172px;
display: block;
background-color: #656565;
color: white;
position: absolute;
left: 0;
/* top: 0;*/
padding-left: 1em;
cursor: pointer;
text-decoration: none;
}
.menue-button:hover {
font-weight: bold;
background-image: url(bilder/dreieck.gif);
background-repeat: no-repeat;
background-position: right center;
text-transform: uppercase;
animation-name: steuerung-animation;
animation-duration: 2s;
}
#nav-menue:target nav {
display: block;
}
#nav-menue:target .menue-button-beschreibung-close {
display: none;
}
Alles anzeigen
Ich hoffe, dass ich alles beigelegt habe, was zur Beantwortung meiner Frage notwendig ist. Wenn nicht; - gerne kurze Info.
Kurz noch zur Info: Ich bin noch nicht ganz mit der DVD RWD durch. Wenn ich also eine Frage stelle, die noch auf der DVD speziell bei dem 2 Spalten Layout kommt und dieses Problem beschreibt, so möge er mir das verzeihen.
Vielen Dank nochmals (Beim hochladen der Daten kam eine Fehlermeldung ("zu viele Zeichen"), deswegen diese Art der Datenübertragung)