Problem bei der Erstellung eines responsive Menüs mit html/css ohne Javascript lösung 3
Hallo allerseits!
Ich bin AnSophie und weil ich Hilfe brauche, bin ich neu hier. =)
Ich arbeite mit html5/CSS3.
Seit bald 3 Tagen plage ich mich mit meinem „Menü“, weil ich meine gesamte Website mobilefriendly machen muss/möchte.
Bis jetzt hatte ich eine „sidebar“, mit der geht responsive schlecht und es gefällt mir auch nicht mehr.
Ich habe einige Unterseiten mit mehreren Textabschnitten pro Seite.
Damit man nicht den ganzen Text „durchlesen“ muss, um eine Info zu finden/entdecken, die man sucht, möchte ich die einzelnen Textabschnitte übersichtlich zur Auswahl zur Verfügung stellen - siehe Bild „menue1“.
Das „mega menü“ wäre zwar eine Option, allerdings ist es zu unübersichtlich - siehe Bild „menue2“. Außerdem hätte ich die einzelnen Kategorien lieber erst zum „Anklicken“.
Kommentar abgeben zu diesen Beitrag/Code ? Dann hier klicken
Der hier verwendete Code
<style>
*{
margin:0;
padding:0;
}
.zu{
display:none;
}
a{
word-break:break-all;
}
body {
background-color: #84587c;
height:200vh;
}
#hamburg{
position:absolute;
left:-861px;
display:none;
}
#menu {
width:100%;
min-height: 60px;
position:sticky;
top:0px;
left:0;
margin-top:10%;
display:flex;
z-index: 500;
background-color: #83A91D;
text-align: center;
}
#menu li {
width:calc(100% / 7);
list-style-type: none;
}
#menu li ul {
min-height: 60px;
width:auto;
background-color:#456456;
}
#menu li a{
display:flex;
align-items:center;
text-decoration: none;
padding:0px 20px 0px 20px;
min-height: 60px;
height:auto;
color: #fff;
font-size:24px;
}
#menu li ul,
#menu li ul li ul {
position: absolute;
top: 60px;
left: 0;
min-height: 60px;
height:auto;
}
#menu li a:hover {
background: #97C41F;
}
#menu li:hover ul,
#menu li a:hover ul {
display:flex;
width: 100%;
background: #97C41F;
color: #fff;
float:left;
}
#menu li:hover ul li{
float:left;
}
#menu li:hover ul li a,
#menu li a:hover ul li a {
color: #fff;
}
#menu li:hover ul li ul,
#menu li a:hover ul li a ul {
display:none;
position: absolute;
left: 0;
top: 60px;
}
#menu li:hover ul li a,
#menu li a:hover ul li a {
display:flex;
align-items:center;
background: #97C41F;
color: #fff;
min-height:60px;
height: auto;
font-size:1.2em;
}
#menu li:hover ul li a:hover{
background-color: #A5D820;
color: white;
min-height: 60px;
height:auto;
}
#menu li:hover ul li:hover ul{
display:block;
color: red;
min-height:60px;
height:auto;
background-color: #A5D820;
}
/*
ul#menu li ul li:hover a.sub {
background-color:#A5D820 !important;
}
ul#menu li ul li:hover ul li:hover li a:hover,
ul#menu li ul lia:hover ul li a:hover ul li a:hover {
height: 30px;
line-height: 30px;
}
*/
label{
display:none;
}
@media screen and (max-width:500px) {
label{
display:block;
}
#hamburg:checked ~ #menu{
display:none;
}
#menu{
height:auto;
display:flex;
flex-direction:column;
}
#menu li{
text-align:left;
width:100vw;
}
#menu li ul li{
padding-left:35px;
}
#menu li ul li ul li{
}
#menu li ul,#menu li ul li ul{
position:relative;
top:0;
display:none;
}
#menu li:hover ul{
display:flex;
height:auto;
flex-direction:column;
}
#menu li:hover ul li:hover > ul{
display:flex;
flex-direction:row;
flex-wrap:wrap;
position:relative;
top:0px;
height:auto;
}
#menu li ul li ul li,
#menu li ul li ul li a{
width:calc(80vw - 35px);
display:flex;
flex-direction:column;
}
#menu li ul li ul li a:before{
content:'=>';
line-height:10px;
width:20vw;
top:8px;
position:relative;
left:-10px;
height:60px;
font-size:40px;
}
#menu li ul li ul li{
display:block;
height:auto;
}
.line {
position: absolute;
left:10px;
height: 4px;
width: 55px;
background: #fff;
border-radius: 2px;
display: block;
transition: 0.5s;
transform-origin: center;
}
label.hamburg {
display: block;
background: #555; width: 75px; height: 50px;
position: relative;
margin-left: auto; margin-right: auto;
border-radius: 4px;
cursor:pointer;
}
input#hamburg {display:none}
.line:nth-child(1) { top: 12px; }
.line:nth-child(2) { top: 24px; }
.line:nth-child(3) { top: 36px; }
#hamburg:checked + .hamburg .line:nth-child(1){
transform: translateY(12px) rotate(-45deg);
}
#hamburg:checked + .hamburg .line:nth-child(2){
opacity:0;
}
#hamburg:checked + .hamburg .line:nth-child(3){
transform: translateY(-12px) rotate(45deg);
}
}
</style>
<input type="checkbox" id="hamburg">
<label for="hamburg" class="hamburg">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</label>
<ul id="menu">
<li><a href="#">Home</a>
<ul class="zu">
<li><a href="#">home 1a langer Satz</a></li>
<li><a href="#" class="sub">home 1b</a>
<ul class="line2">
<li><a href="#">home 2</a></li>
<li><a href="#">home 2</a></li>
<li><a href="#">home 2</a></li>
</ul>
</li>
<li><a href="#">home 1c</a></li>
<li><a href="#">home 1d</a></li>
</ul>
</li>
<li><a href="#">item </a>
<ul class="zu">
<li><a href="#">item 1</a></li>
<li><a href="#">item 1</a></li>
</ul>
</li>
<li><a href="#">item</a>
<ul class="zu">
<li><a href="#">item 1</a></li>
<li><a href="#">item 1</a></li>
</ul>
</li>
<li><a href="#">item</a>
<ul class="zu">
<li><a href="#">item 1</a></li>
<li><a href="#">item 1 miteinenewiglangenworddasnurmitwordbreakgetrennetwerdenkann</a></li>
<li><a href="#">item 1</a></li>
<li><a href="#">item 1</a></li>
</ul>
</li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>