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.