Problem bei der Erstellung eines responsive Menüs mit html/css ohne Javascript
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“.
Der hier verwendete Code
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*
#hamburg{
position:absolute;
left:-9999px;
display:block;
}
*/
#menu{
display:none;
}
#hamburg:checked ~ #menu{
display:block;
}
label{
display:block;
}
#menu #current a{
color: white;
background-color: #add29f;
}
#menu li {
list-style-type: none;
white-space: nowrap;
width: 100%;
}
#menu li a{
display:block;
color: #add29f;
text-decoration: none;
font-weight: 200;
text-transform: uppercase;
font-size:1.1rem;
padding: 0 0.5rem;
border-bottom: 1px solid #add29f;
}
#menu li a:hover {
background: #add29f;
color:white;
}
#menu li ul,
#menu li ul li ul{
display:none;
}
#main4,#main4a{
position:absolute;
left:-9999px;
}
#main4 + label,
#main4a + label{
color: #add29f;
text-decoration: none;
font-weight: 200;
text-transform: uppercase;
font-size:1.1rem;
padding: 0 0.5rem;
border: 1px solid red;
}
.ebe4,.ebe4a{
display:none;
}
#main4:checked ~ .ebe4,
#main4a:checked ~ .ebe4a{
display:block;
}
.line {
position: absolute;
left:100px;
height: 2px;
width: 55px;
background: #fff;
border-radius: 2px;
display: block;
transition: 0.5s;
}
label.hamburg {
display: block;
background: #add29f;
width: 255px;
height: 50px;
position: relative;
margin-left: auto;
margin-right: auto;
cursor:pointer;
}
#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:rotate(45deg);
transform-origin:0% 100%;
border:1px solid red;
width:40px;
}
#hamburg:checked + .hamburg .line:nth-child(3){
transform:rotate(-45deg);
transform-origin:0% 100%;
border:1px solid red;
top:40px;
width:40px;
}
#hamburg + .hamburg .line:nth-child(2){
display:block;
}
#hamburg:checked + .hamburg .line:nth-child(2){
display:none;
}
</style>
<header>
<nav>
<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 id="current" class="item"><a href="#">Home</a></li>
<li class="item"><a href="#">Main Item 1</a>
<ul class="zu">
<li><a href="#">item1.1</a></li>
<li><a href="#">item1.2</a></li>
<li><a href="#">item1.3</a></li>
<li><a href="#">item1.4</a></li>
</ul>
</li>
<li class="item"><a href="#">Main Item 2</a>
<ul class="zu">
<li><a href="#">item2.1</a></li>
<li><a href="#">item2.2</a></li>
<li><a href="#">item2.3</a></li>
<li><a href="#">item2.4</a></li>
</ul>
</li>
<li class="item"><a href="#">Main Item 3</a>
<ul class="zu">
<li><a href="#">item3.1</a></li>
<li><a href="#">item3.2</a></li>
<li><a href="#">item3.3</a></li>
</ul>
</li>
<input type="checkbox" id="main4">
<label for="main4" class="check4 heck"> Main Item 4 (long text) </label>
<ul class="ebe4">
<input type="checkbox" id="main4a">
<label for="main4a" class="check4a"> item4.1 </label>
<ul class="ebe4a">
<li><a href="#">item4.1.1</a></li> <li><a href="#">item4.1.2</a></li>
<li><a href="#">item4.1.3</a></li>
<li><a href="#">item4.1.4</a></li>
</ul>
<li><a href="#">item4.2</a>
<ul class="zu">
<li><a href="#">item4.2.1</a></li>
<li><a href="#">item4.2.2</a></li>
<li><a href="#">item4.2.3</a></li>
<li><a href="#">item4.2.4</a></li>
</ul>
</li>
<li><a href="#">item4.3</a>
<ul class="zu">
<li><a href="#">item4.3.1</a></li>
<li><a href="#">item4.3.2</a></li>
<li><a href="#">item4.3.3</a></li>
<li><a href="#">item4.3.4</a></li>
</ul>
</li>
<li><a href="#">item4.4</a>
<ul class="zu">
<li><a href="#">item4.4.1</a></li>
<li><a href="#">item4.4.2</a></li>
<li><a href="#">item4.4.3</a></li>
<li><a href="#">item4.4.4</a></li>
</ul>
</li>
</ul>
</li>
<li class="item"><a href="#">Main Item 5 (long text)</a>
<ul class="zu">
<li><a href="#">item5.1</a>
<ul class="submenu">
<li><a href="#">item5.1.1</a></li>
<li><a href="#">item5.1.2</a></li>
<li><a href="#">item5.1.3</a></li>
<li><a href="#">item5.1.4</a></li>
</ul>
</li>
<li><a href="#">item5.2</a>
<ul class="zu">
<li><a href="#">item5.2.1</a></li>
<li><a href="#">item5.2.2</a></li>
<li><a href="#">item5.2.3</a></li>
<li><a href="#">item5.2.4</a></li>
</ul>
</li>
<li><a href="#">item5.3</a>
<ul class="zu">
<li><a href="#">item5.3.1</a></li>
<li><a href="#">item5.3.2</a></li>
<li><a href="#">item5.3.3</a></li>
<li><a href="#">item5.3.4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</header>