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.
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
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>