Hallo alle zusammen,
ich bräuchte Hilfe beim Design meiner Menü Liste. Ich möchte wenn man auf den Knopf drückt, dass das sich ausklappende Menü den Inhalt der Seite überlappt. Das bedeutet zum Beispeil, dass der Container mit dem Menüinhalt über dem Container mit dem Content der Seite überlappt und der Container mit dem Content der Seite sich nicht bewegt. Weiterhin soll der Content Container relativ zu dem in y-Richtung darüber angeordenten Container positioniert werden, d.h. wenn der darüber angeordnete Container größer wird wandert der Container mit dem Content schon nach unten aber der Abstand zum darüber angeordneten Container bleib immer gleich.
Das ausklappende Menü soll genauso wie der Container mit dem Content positioniert werden, aber in dem Fall relativ zum Knopf.
Mein aktueller Code:
HTML-Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Only Navigation Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="nav2.css">
</head>
<style>
li.hm1
{
float: left;
}
</style>
<body>
<div style="float: left; border:1px solid; height:150px; width:150px; text-align: center;"><a style="" href=test.html">Leonard Schmidt</a></div>
<div style="float: right;" ><label for="show-menu" class="show-menu" style="position: absolute; right:0; top:0;">☰</label>
<input type="checkbox" id="show-menu" role="button">
<ul class="menuc">
<li class="hm1"><a href="#">Home</a></li>
<li class="hm1"><a href="#">Über mich</a></li>
<li class="hm1"><a href="#">Taiji</a>
<ul class="hidden">
<li><a style="background: green;" href="#">Was ist Taiji</a></li>
<li><a style="background: green;" href="#">Chen Taiji System</a></li>
<li><a style="background: green;" href="#">Termine</a></li>
</ul>
</li>
<li class="hm1"><a href="#">Hakomie</a>
<ul class="hidden">
<li><a style="background: green;" href="#">Was ist Hakomie</a></li>
<li><a style="background: green;" href="#">Themen</a></li>
<li><a style="background: green;" href="#">Termine</a></li>
</ul>
</li>
<li class="hm1"><a href="#">Medien</a>
<ul class="hidden">
<li><a style="background: green;" href="#">Bilder</a></li>
<li><a style="background: green;" href="#">Videos</a></li>
</ul>
</li>
<li class="hm1"><a href="#">Links</a></li>
<li class="hm1"><a href="#">Kontakt</a></li>
</ul>
</div>
<div style="clear:both">
<div style="position:relative; top:0"><h1>Content</h1></div>
</div>
</body>
</html>
Das dazugehörige CSS:
Code:
/*Strip the ul of padding and list styling im*/
html, body{
margin:0;
padding:0;
}
ul {
list-style-type:none;
margin:0px 0px;
padding:0px 0px;
text-align: justify;
}
/*Create a horizontal list with spacing im*/
li {
}
/*Style for menu links im*/
li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #000000;
background: red;
text-decoration: none;
}
/*Hover state for top level links im*/
li:hover a {
color: #19c589;
}
/*Hover state for dropdown links maybe*/
li:hover ul a:hover {
color: #fff;
}
/*Hide dropdown links until they are needed im*/
li ul {
display: none;
}
/*Make dropdown links vertical im*/
li ul li {
display: block;
float: none;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
position:relative;
top:0;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
width: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
-webkit-appearance: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ .menuc{
display: block;
}
/*Responsive Styles*/
@media screen and (max-width : 1168px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 0px;
clear:both;
position: relative;
}
/*Make all menu links full width*/
ul li, li a {
float: none;
}
.hidden
{
position:relative;
top:0;}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}
Vielleicht versteht der ein oder andere meine Frage und kann mir weiterhelfen.
Schon mal vielen lieben Dank
15.07.2019, 16:41
Elemente überlappen bei Ausklappmenü
Ähnliche Themen
Linear-Darstellung
