Menüpunkte bei Aktivierung (Klick) mit Text versehen
Hallo zusammen,
ich bin noch recht unerfahren was html angeht und suche nach einer Möglichkeit das bei einem Klick auf ein Menüpunkt ich einen entsprechenden Text angezeigt bekomme.
Beispiel: Ich klicke auf den Button Darsteller im Menue und es erscheint eine Liste mit den Darstellern. Das ursprüngliche Menü bleibt dabei weiter Sichbar / Nutzbar.
Der hier verwendete Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {
background: yellow;
display:flex;
flex-direction:column;
text-align:center;
}
select{
display:none;
}
* {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
}
#header {
width: 100%;
height: 40px;
margin: 0;
}
#logo-top {
width: 292px;
height: 100px;
overflow:hidden;
display:block;
background-image: url(/image/hv.png);
background-repeat:no-repeat;
margin: 0 auto;
}
a.logolink {
width: 292px;
height: 100px;
display: block;
}
a.home {
background: #ff00ff;
padding: 2px;
}
#myInput ,select{
height:auto;
margin:0 auto;
width: 80%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
img.hintergrundbild {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
z-index:-1;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px){
img.hintergrundbild {
left: 50%;
margin-left: -512px; }
}
div#inhalt {
width: 700px;
margin: 0 auto;
padding: 20px;
color: #000000;
border-radius: 15px;
}
/*
div#info {
position: absolute;
width:750px;
margin-top: 50px;
padding: 80px;
font: 14px/1.6 Verdana, Helvetica, Arial, sans-serif;
color: #000000;
}
div#main {
list-style-position: inside;
position: relative;
width: 1000px;
margin: 0 auto;
margin-top: 125px;
background: url(grey.jpg);
padding: 25px;
font: 14px/1.2 Verdana, Helvetica, Arial, sans-serif;
color: #000000;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
h1 {
font-size: 20px;
margin-bottom: 15px;
}
*/
nav {
float: left;
width: 100%;
background: #001bff;
font-size: 16px;
}
nav ul {
margin: 0;
padding: 0;
}
nav a {
display: block;
color: #181818;
text-decoration: none;
}
nav ul li {
position: relative;
float: left;
list-style: none;
color: #fff;
transition: 0.5s;
}
nav ul li a {
padding: 20px;
}
nav ul > li.submenu > a:after {
position: relative;
float: right;
content: '';
margin-left: 10px;
margin-top: 5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
border-bottom: 5px solid transparent;
}
nav ul ul li.submenu > a:after {
margin-left: auto;
margin-right: -10px;
border-left: 5px solid #fff;
border-right: 5px solid transparent;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
nav ul li:hover {
background: #4096ee;
}
nav ul ul {
position: absolute;
top: -9999px;
left: -9999px;
background: #333;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
z-index: 1;
}
nav ul ul li {
float: none;
width: 200px;
border-bottom: 1px solid #555;
}
nav ul ul li a {
padding: 10px 20px;
}
nav ul ul li:last-child {
border-bottom: none;
}
nav ul li:hover > ul {
top: 100%;
left: 0;
}
nav ul ul li:hover > ul {
top: 0;
left: 200px;
}
</style>
<title></title>
</head>
<body>
<img id="background-img" class="hintergrundbild" src="./image/milky-way-2695569__480.jpg" alt="" />
<div id="header">
<div id="logo-top"><a class="logolink" href="https://start.de/index.html" title="Infoseite"></a></div>
</div>
<div id="inhalt">
<div style="margin-bottom: -30px; border: 1px solid black;"></div>
<div>Infoseite</div>
</div>
<div id="extra">
<input type="text" id="myInput" placeholder="Search for names.." title="Type in a name">
<select id="erg"><option>leer</option></select>
</div>
<nav>
<ul id="myUL">
<li><a href="#" title="Nach Hause">Home</a></li>
<li class="submenu"><a href="#" title="Unser Produktsortiment">Produkte</a>
<ul id="myUL">
<li class="submenu"><a href="#" title="Unser Obstsortiment">Obst</a>
<ul id="myUL">
<li><a href="#" title="Unsere Ananasauswahl">Ananas</a></li>
<li><a href="#" title="Unsere Apfelauswahl">Äpfel</a></li>
<li><a href="#" title="Unsere Birnenauswahl">Birnen</a></li>
<li><a href="#" title="Unsere Bananenauswahl">Bananen</a></li>
</ul>
</li>
<li class="submenu"><a href="#" title="Unser Gemüse">Gemüse</a>
<ul id="myUL">
<li><a href="#" title="Unsere Kartoffelauswahl">Kartoffeln</a></li>
<li><a href="#" title="Unsere Salatauswahl">Salat</a></li>
<li class="submenu"><a href="#" title="Unser Rübensortiment">Rüben</a>
<ul id="myUL">
<li class="submenu"><a href="#" title="Unsere Mohrrüben">Mohrrüben</a>
<ul id="myUL">
<li><a href="#" title="frisch vom Feld">frisch</a></li>
<li><a href="#" title="aus dem Lager">nicht so frisch</a></li>
</ul>
</li>
<li><a href="#" title="Unsere Steckrüben">Steckrüben</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<script>
document.getElementById('myInput').addEventListener('keyup',function myFunction() {
var input, filter, ul, li, a, i, txtValue,sel,sam;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
sel=document.getElementById('erg');
sel.style.display='block';
sam='';
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
// li[i].style.display = "";
sam+='<option value="'+a.href+'">'+a.innerHTML+'</option>';
} else {
sam+='';
// li[i].style.display = "none";
}
sel.innerHTML=sam;
}
if(sel.innerHTML==''){
sel.innerHTML='<option>Kein Treffer</option>';
}
});
</script>
</body>
</html>