CSS-Menü ohne javascrip

  • Guten Tag


    Bin neu hier und habe schon eine Frage. Habe mir aus verschiedenen Menüs, die ich im Netz gefunden habe, ein Menü gebastelt. Das Menü-Symbol befindet sich links au der Website. Bei Click auf das Symbol öffnet sich das Menü. Wird im Menü ein Menüpunkt angeklickt und er href =" #.html hat öffnet sich die neue Seite und das Menü wird wieder geschlossen angezeigt. Benutze ich jedoch anstelle von #.html nur einen Anker. (href = "#wohin) wird dieser Anker angesprochen, doch das Menü bleibt geöffnet.


    Wie kann ich das ändern?


    HTML
    <div class="nav-wrapper" onclick="">		<nav>			<div class="ym-column">				<div class="ym-col1">					<div id="sn_menu_ip">						<input id="sn_menuXX" class="ipXX" name="sn_menu" type="radio"> <!-- Schliessen-Symbol -->						<input id="sn_menu00" class="ip00" name="sn_menu" type="radio">						<input id="sn_menu01" class="ip00 ip01" name="sn_menu" type="radio">						<input id="sn_menu02" class="ip00 ip02" name="sn_menu" type="radio">						<p id="sn_menu_toggle">						<label for="sn_menu00"><span></span></label>						<label for="sn_menuXX"><span></span></label></p>						<div id="sn_menu_background">						</div>						<div id="sn_menu_outer">							<div id="sn_menu_vertical">							</div>							<div id="sn_menu">								<p id="sn_menu_toggle"><a href="#top">Home</a>						<label for="sn_menu"><span></span></label></p>
    								<p class="sn_menu01"><label for="sn_menu01">								<span></span>Infos und Preise</label><label for="sn_menu00"></label></p>								<div>									<p><a href="#angebot">Angebot und Preise</a></p>									<p><a href="#weiteres">Zusätzliche Infos</a></p>									<p><a href="default.html#wo wir sind">Wo wir sind</a></p>									<p id="sn_menu_toggle"><label for="sn_menu01"><span></span></label>											</div>
    								<p><a href="#wellness">Wellness</a></p>								<p class="sn_menu02"><label for="sn_menu02">								<span></span>Gallerie</label><label for="sn_menu00"></label></p>								<div>									<p><a href="de_gallery.html">Deine Räume</a></p>									<p><a href="de_gallery_aussicht.html">Aussicht</a></p>								</div>								<p><a href="sitemap.html">Sitemap</a></p>								<p><a href="de_impressum.html">Impresum</a></p>							</div>						</div>					</div>				</div>			</div>		</nav>	</div>




    CSS
    #sn_menu_background {	background: rgba(252,252,252,0.9);	width: 38vw; /*48vw;*/	border-left: 1vw solid transparent;	border-right: 1vw solid transparent;	height: 100vh;	min-width: 295px;	position: fixed; /*	left: 0; */;	top: -100%;	opacity: 0;	transition: top 0s 2s, opacity 0.5s 1s;	z-index: 100005;	box-shadow: 0 0 20px rgba(0,0,0,0.4);	float: left;	margin-left: -.75em;}#sn_menu_outer {	display: block;	font: 700 20px/40px 'Open Sans Condensed', sans-serif;	color: #888;	width: 40vw; /*50vw;*/	border-left: 1vw solid transparent;	border-right: 1vw solid transparent;	height: 100vh;	min-width: 295px;	opacity: 0;	position: fixed; /*	left: 0; */;	top: -100vh;	transition: 0.5s 0.75s;	z-index: 100010;	overflow: hidden;	overflow-y: auto;	-webkit-overflow-scrolling: touch;}#sn_menu_vertical {	width: 1px;	height: 100vh;	display: inline-block;	vertical-align: middle;}#sn_menu_outer #sn_menu p {	position: relative;	padding: 0;	margin: 0;}#sn_menu_outer #sn_menu p label {	display: block;	line-height: 39px;	text-transform: uppercase;	margin-left: -15px;}#sn_menu_outer #sn_menu p label:hover {	color: #000;}#sn_menu_outer #sn_menu p label:last-child {	display: none;	position: absolute; /*	left: 0;*/;	top: 0;	width: 100%;	height: 40px;	background: rgba(0,0,0,0);}#sn_menu_outer #sn_menu p label span {	display: inline-block;	width: 0;	height: 0;	border: 5px solid transparent;	border-top-color: #888;	margin: 0 4px 0 0;}#sn_menu_outer #sn_menu p a {	line-height: 39px;	color: #444;	text-decoration: none;}#sn_menu_outer #sn_menu p a:hover {	color: #000;}#sn_menu_outer #sn_menu div p {	height: 0;	overflow: hidden;	opacity: 0;	transition: 0.75s;}#sn_menu_ip input[id*="sn_menu"] {	display: none;}#sn_menu_outer div {	padding: 0;	margin: 0;	list-style: none;}/*#sn_menu_outer #sn_menu {	width: 90%;	display: inline-block;	vertical-align: middle;	overflow: hidden;}*/#sn_menu_outer #sn_menu {	width: 90%;	max-width: 400px;	margin: 0 auto;	display: inline-block;	vertical-align: middle;	overflow: hidden;	overflow-y: auto;}#sn_menu_outer #sn_menu > p {	text-indent: 15px;	border-bottom: 1px solid rgba(0,0,0,0.1);}#sn_menu_outer #sn_menu div p {	text-indent: 30px;}#sn_menu_outer #sn_menu div div p {	text-indent: 45px;}#sn_menu_outer #sn_menu div div div p {	text-indent: 60px;}#sn_menu_toggle {	padding: 0;	margin: 0;	position: fixed; /*	left: 0; */;	top: 0;	height: 38px;	width: 80px;	text-align: center;	color: #000;	z-index: 100020;	background: transparent;	transition: 0.5s;	background 0.5s 0.5s;}#sn_menu_toggle label {	display: block;	width: 80px;	height: 38px;	position: absolute;	left: 0;	top: 0;}/* Steuert Menü-Symbol */#sn_menu_toggle label:nth-of-type(1) span {display:block; width:30px; height:12px; position:absolute; top:10px; left:.25em; border-top:4px solid #000; border-bottom:4px solid #000;}#sn_menu_toggle label:nth-of-type(1) span::after {content:""; display:block; width:30px; height:4px; position:absolute; top:4px; left:0; background:#000;}/* Darstellung und Positon Schliessenkreuz */#sn_menu_toggle label:nth-of-type(2) {display:none;}#sn_menu_toggle label:nth-of-type(2) span {display:block; width:50px; height:50px; position:absolute;}#sn_menu_toggle label:nth-of-type(2) span::before {content:""; display:block; width:30px; height:4px; position:absolute; top:22px; left:24px; background:#c00; transform:rotate(45deg); transform-origin:center center;}#sn_menu_toggle label:nth-of-type(2) span::after {content:""; display:block; width:30px; height:4px; position:absolute; top:22px; left:24px; background:#c00; transform:rotate(-45deg); transform-origin:center center;}/* Steuert Menüansicht */#sn_menu_ip input[class*="00"]:checked ~ #sn_menu_background {top:0; opacity:1; transition: opacity 0.5s, top 0s;}#sn_menu_ip input[class*="00"]:checked ~ #sn_menu_outer {top:0; opacity:1; transition: 0.5s 0.5s;}#sn_menu_ip input[class*="00"]:checked ~ #sn_menu_toggle {background:transparent; transition: 0.5s; left:50%; margin-left:-70px;}#sn_menu_ip input[class*="00"]:checked ~ #sn_menu_toggle label {display:none;}#sn_menu_ip input[class*="00"]:checked ~ #sn_menu_toggle label:last-child {display:block;}@media only screen and (max-width: 590px) {#sn_menu_ip input[class*="00"]:checked ~ #sn_menu_toggle {left:230px; margin-left:0;}}/* Steuerung Menü Ebene 1 und 2 */#sn_menu_ip input[class*="01"]:checked ~ #sn_menu_outer #sn_menu .sn_menu01 + div > p,#sn_menu_ip input[class*="02"]:checked ~ #sn_menu_outer #sn_menu .sn_menu02 + div > p {height:40px; opacity:1; border-bottom:1px solid rgba(0,0,0,0.05);}#sn_menu_ip #sn_menu01:checked ~ #sn_menu_outer #sn_menu .sn_menu01 > label:last-child,#sn_menu_ip #sn_menu02:checked ~ #sn_menu_outer #sn_menu .sn_menu02 > label:last-child{display:block;}#sn_menu_ip input[class*="01"]:checked ~ #sn_menu_outer #sn_menu .sn_menu01 > label,#sn_menu_ip input[class*="02"]:checked ~ #sn_menu_outer #sn_menu .sn_menu02 > label{color:#c00;}#sn_menu_ip input[class*="01"]:checked ~ #sn_menu_outer #sn_menu .sn_menu01 > label span,#sn_menu_ip input[class*="02"]:checked ~ #sn_menu_outer #sn_menu .sn_menu02 > label span{border-top-color:#c00;}



    Danke für eure Hilfe.

  • Wie möchtest Du es denn haben:
    Wenn eine neue Seite geöffnet wird, soll das Menü wie auf der alten Seite offen sein
    oder
    Wenn ein Anker angesprochen wird, soll das Menü zugehen, wie beim Wechsel auf eine andere Seite?

  • Ich habe mal mein Glück versucht und bin leider nicht zum Ziel gekommen:
    https://jsfiddle.net/zayuh36a
    (Nur Angebot und Preise mit #angebot)
    Der Knackpunkt ist dieses:


    Code
    <p><a href="#angebot"><label for="sn_menu01_close" class="close">Angebot und Preise</label></a></p>


    Ich habe einen weiteren Radiobutton eingeführt, der das Schließen veranlasst. Diese Zeile müsste jetzt sowohl diesen Radiobutton auf checked setzen als auch das Linkziel anspringen. Leider bekomme ich es nicht hin, dass beides gleichzeitig funktioniert. Offenbar ist es problematisch, interaktive Inhalte so zu kombinieren.

  • Na, hier werden nur die Fokus und Active Pseudoelemente verwendet. Voraussetzung sind aber keine ausgeblendeten Elemente. Denn 2 Elemente können nicht gleichzeitig den Fokus erhalten. Hier der wichtigste Teil.


    Togglefunktion zum öffnen und schließen der gesamten Navigation.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!