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.
Ich stelle html und stylesheet vollständig hier rein, an den fraglichen Stellen sind zur besseren Übersicht aber Kommentare
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8">
<link rel="stylesheet" href="formate kurz.css">
</head>
<body>
<!-- -------------- ZWEITER LINK ZUM SCHLIESSEN DES MENU soll nur
eingeblendet werden, wenn menu geöffnet ist-------------- -->
<div id="test">
<a href="#nav-menue-zu">--------Zweiter Link zum Schliessen---------------------</a>
</div>
<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>
<a class="menue-button menue-button-beschr-close"
href="#nav-menue-zu">≡ ist-auf</a>
<a class="menue-button menue-button-beschr-open"
href="#nav-menue">≡zu</a>
</header>
<!-- -------------- Seiteninhalt ----------------- -->
<div id="Block">
<div id="scroller">
<div id="Text">
<p>---------------------- BEISPIELTEXT ------------------------</P>
</body>
</html>
Zugehöriges CSS
/* ---------------------------------------------- FORMAT PC ------------------------------------------*/
@media screen and (min-width: 61em)
{
nav { display: none;}
#Titel-m { display: none;}
#nav-menue { display: none;}
#nav-menue-zu { display: none;}
#test { display: none;}
#Block {position:fixed; top:28.5%; right:0px; bottom:2.7%; width:60%; z-index:2; background-color:
#c9ad7f; opacity: 0.7;}
}
/* ---------------------------------------- FORMAT MOBIL -------------------------------------------- */
@media screen and (max-width: 60.99em)
{
/* ---------------------------------------DIESER BEREICH GEHT ---------------------------------------*/
header {background-color: #970a2c; width: 60%; position:absolute; top:17%; left:2%;
float: left; z-index:7;}
#steuerung li {list-style: none; float: left; width: 90%; border-bottom: 2px solid silver;
padding-bottom: 0.4em; padding-top: 0.4em;}
#steuerung a {display: block; height: 100%; width: 100%; padding: 0.2em; text-decoration: none; color: white; }
#steuerung { float: left; width: 100%; 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;}
/* ---------------- IST-AUf ausblenden und nur einblenden wenn menu offen ist geht ohne probleme ---------------- */
/* wenn menu ZU wird - IST AUF - ausgeblendet*/
.menue-button-beschr-close {display: none;}
/*-------------------------Das hier geht auch ----------------------------------------------*/
/*zweiter link zum schließen des menu soll nur eingeblendet werden wenn menu offen ist*/
#test { display: none;}
#nav-menue:target #steuerung {display: block; }
#nav-menue:target .menue-button-beschr-open {display: none; }
#nav-menue:target .menue-button-beschr-close {display: block; }
/*--------HIER LIEGT DAS EIGENTLICHE PROBLEM-------------------------------------------------------------------*/
/* wenn menu geöffnet wird soll auch zweiter link zum schließen eingeblendet werden - GEHT ABER NICHT-------------*/
#nav-menue:target #test {display:block; }
/* ------------------------------------------------------------------------------------*/
/* #nav-menue:target wird nicht ausgeführt, ich habe auch statt display auch visibility probiert, gleiches ergebnis*/
/* WARUM?????????? das einblenden von - IST AUF - geht doch auch*/
/*Textblock mobil*/
#Block {position:fixed; top:28.5%; right: 0px; left: 2.7%; bottom: 2.7%; width: 100%; z-index:2;
background-color: #c9ad7f; opacity: 0.75;}
}
