Menüleiste mit Unterpunkten erstellen
Moin! :)
ich habe das Problem das ich gerne eine vertikale Menüleiste hätte, welche mir auf 'klick' die Unterpunkte der jeweiligen 'Hauptleiter' einblendet.
Da dies nicht in CSS möglich ist wurde ich auf Javascript verwiesen.
Ich bin ein Laie wenn es um Javascript geht. Weswegen ich wahrscheinlich auch nichts gefunden habe was mir weiterhilft. Also Pardon wenn die Frage schon 100x gestellt wurde :)
Ich würde das Javascript gerne direkt in die html einbinden, mehr wünsche habe ich nicht. Ich hoffe du kannst mir helfen.
Vielen lieben Dank im Voraus!
Der hier verwendete Code
<html>
<head>
<title>sapadi</title>
<style>
*{
margin:0;
padding:0;
}
body{
display:flex;
flex-direction:column;
min-height:100vh;
}
header{
height:80px;
padding:10px 0;
background:#C1ECF1;
margin:10px 0;
color: #030003;
}
header h1{
color:#040307;
text-align:center;
height:100%;
line-height:60px
}
main{
display:flex;
width:100%;
flex:8;
}
nav{
display:flex;
flex:1;
padding:10px;
background: #2EEEEF;
}
nav ul ul{
display:none;
}
#sub1,#sub2{
position:absolute;
display:none;
top:0;
left:-9999px;
}
#sub1:checked ~ ul,
#sub2:checked ~ ul{
display:block;
}
#inhalt {
display:flex;
flex:5;
background: #F3D0EE;
}
footer{
margin:10px 0;
flex:0.2;
background:#123444;
color:white;
line-height:100px;
text-align:center;
font-size:30px;
}
</style>
</head>
<body>
<header>
<hr>
<h1>sapadi</h1>
<hr>
</header>
<main>
<nav>
<ul>
<li>
<input type="checkbox" id="sub1">
<label for="sub1">work</label>
<ul>
<li><a href="#">negative painting</a></li>
<li><a href="#">100 collages</a></li>
<li><a href="#">early works</a></li>
</ul>
</li>
<li>
<input type="checkbox" id="sub2">
<label for="sub2">+++</label>
<ul>
<li><a href="#">info</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">imprint</a></li>
</ul>
</li>
</ul>
</nav>
<div id="inhalt"></div>
</main>
<footer>FOOTER</footer>
</body>
</html>