Menue einklappen durch Klick ausserhalb des Menues
Hallo. Ich habe als Anfänger das Toggle Menue aus dem Seminar hier nachgebildet und es funktioniert soweit. Man muss aber zum Einklappen des Menues immer den Button verwenden. Nun habe folgendes Ziel: Das Menue soll nicht nur durch den Menue button wieder eingeklappt werden sondern auch durch einen weiteren link, der sich ausserhalb des Menues befindet. Dadurch möchte ich den Effekt erzeugen, dass man durch einen Klick neben das offene Menue dasselbe wieder einklappt.
Der Link hinter dem Button zum Ausblenden funktioniert einwandfrei, aber der zweite Link wird nicht eingeblendet, wenn das Menue ausgeklappt wird.
Natürlich verschwimmen nach all den Versuchen auch Klammern, Strich- und Doppelpunkte ...
Ich hoffe, es findet jemand den Haken.
Der hier verwendete Code
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<style>
@media screen and (min-width: 61em){
#Titel-m { display: none;}
header{ display: none;}
#Block {position:fixed; top:28.5%; right:0px; bottom:2.7%; width:60%; z-index:2; background-color:
#c9ad7f; opacity: 0.7;}
}
@media screen and (max-width: 60.99em){
header {
background-color:none;
width: 100%;
height:200px;
display:inline-block;
}
#bb,#bb1{
width:100%;
display:none;
text-align:center;
}
header:target ~ #bb,header:target ~ #bb1{
display:block;
}
#steuerung li {
list-style: none;
float: left;
width: 100%;
border-bottom: 2px solid silver;
padding-bottom: 0.4em;
padding-top: 0.4em;
}
li{
background:green;
}
#steuerung a {
padding: 0.2em;
text-decoration: none;
color: white;
}
#steuerung {
float: left;
width: 40%;
display: none;
}
#steuerung a:hover {
color: #ffffff;
background-color: #c9ad7f;
}
.menue-button {
background-color: #970a2c;
display: block;
position: absolute;
left: 0;
top: 0;
padding: 0.2em;
color: white;
cursor: pointer;
text-decoration: none;
font-size: 20px;
}
.menue-button:hover {
color: black;
background-color: #c9ad7f;
}
.auf{
display:none;
}
#nav-menue:target #steuerung {
display: block;
}
#nav-menue:target + .auf{
display:block;
}
#nav-menue:target ~ .zu{
display:none;
}
.auf:target ~ .zu{
display:block;
}
</style>
<script src="/js_webseite/query-result.js"></script>
<script src="/js_webseite/jquery.js"></script>
</head>
<body>
<header id="nav-menue">
<nav id="steuerung" role="navigation">
<ul>
<li><a class="Menu" href="example.com" >Home</a></li>
<li><a class="Menu" href="example.com" >seite1</a></li>
<li><a class="Menu" href="example.com" >seite2</a></li>
<li><a class="Menu" href="example.com" >seite3</a></li>
</ul>
</nav>
</header>
<a class="menue-button auf" href="#nav-menue-zu">≡ ist-auf</a>
<a class="menue-button zu" href="#nav-menue">≡zu</a>
<a id="bb" href="#nav-menue-zu">--------Erster Link zum Schliessen---------------------</a>
<a id="bb1" href="#nav-menue-zu">--------Zweiter Link zum Schliessen---------------------</a>
<div id="Block"></div>
<div id="scroller"></div>
<div id="Text"></div>
</body>
</html>