Beiträge von singel

    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.