Problem bei der Erstellung eines responsive Menüs mit html und css ohne Javascript 2
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;
}
nav{
position:fixed;
top:0;
width:100%;
height:50px;
padding:0 10px;
background:#333;
color:#eee;
}
nav ul{
display:flex;
}
nav>ul li{
width:200px;
}
nav ul li{
float:left;
list-style-type:none;
position:relative;
}
label{
display:block;
padding:0 18px 0 12px;
height:100%;
line-height:50px;
cursor:pointer;
}
label:after{
content:"";
position:absolute;
display:block;
right:5px;
top:50%;
width:0;
height:0;
border-top:4px solid rgba(255,255,255,.5);
border-bottom:0 solid rgba(255,255,255,.5);
border-left:4px solid transparent;
border-right:4px solid transparent;
transition:border-bottom .1s, border-top .1s .1s;
}
label:hover,
input:checked ~ label{background:rgba(0,0,0,.3);}
input:checked ~ label:after{
border-top:0 solid rgba(255,255,255,.5);
border-bottom:4px solid rgba(255,255,255,.5);
transition:border-top .1s, border-bottom .1s .1s;
}
input{display:none}
input:checked ~ ul.submenu{
display:block;
}
input:checked ~ ul.submenu1{
display:block;
}
input:checked ~ ul.submenu2{
display:block;
/* animation:go1 2s linear 3;*/
}
/*
@keyframes go{
0%{
min-height:0;
}
100%{
min-height:100%;
}
}
*/
.ebene1{
background:red;
}
.ebene1a{
background:#a00;
}
.ebene1c{
background:orange;
}
#check01b:checked ~ label{
background:green;
}
#check01c:checked ~ label{
background:#123456;
}
.submenu1 li{
background:blue;
}
.ebene1a ~ ul.submenu1 li{
background:yellow;
}
.ebene1c ~ ul.submenu1 li{
background:red;
}
ul.submenu1{
display:none;
list-style-type:none;
background:#444;
position:absolute;
z-index:2;
left:100%;
width:100%;
}
ul.submenu2{
display:none;
list-style-type:none;
background:#444;
position:absolute;
z-index:2;
left:100%;
width:100%;
}
ul.submenu{
display:none;
list-style-type:none;
background:#444;
box-shadow:0 0 1px rgba(0,0,0,.3);
transition:max-height 0.5s ease-out;
position:absolute;
min-width:100%;
}
ul.submenu li a,ul.submenu1 li a{
display:block;
padding:12px;
color:#ddd;
text-decoration:none;
box-shadow:0 -1px rgba(0,0,0,.5) inset;
transition:background .3s;
white-space:nowrap;
}
ul.submenu li a:hover{
background:rgba(0,0,0,.3);
}
</style>
<nav>
<ul>
<li>
<input id="check01" type="checkbox" name="menu"/>
<label for="check01">Tasto menu 01</label>
<ul class="submenu">
<li>
<input id="check01b" type="checkbox" name="menu"/>
<label class="ebene1" for="check01b">ebene 01</label>
<ul class="submenu1">
<li><a href="#">ebene 2 1</a></li>
<li><a href="#">ebene 2 2</a></li>
</ul>
</li>
<li>
<input id="check01a" type="checkbox" name="menu"/>
<label class="ebene1a" for="check01a">ebene 01 a</label>
<ul class="submenu1">
<li><a href="#">ebene 2 1 a</a></li>
<input id="check01c" type="checkbox" name="menu"/>
<label class="ebene1c" for="check01c">ebene 2 2</label>
<ul class="submenu2">
<li><a href="#">ebene 3 1 a</a></li>
<li><a href="#">ebene 3 2 a</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<input id="check02" type="checkbox" name="menu"/>
<label for="check02">Tasto menu 02</label>
<ul class="submenu">
<li><a href="#">Sotto menu 3 (long text)</a></li>
<li><a href="#">Sotto menu 4</a></li>
<li><a href="#">Sotto menu 5</a></li>
</ul>
</li>
</ul>
</nav>