Textformatierung in HTML Menü?
Hey also ich habe in meinem HTML Code ein Hamburger Menü. Wenn ich das Menü jetzt aber ausklappe überlappt es den Text. Wie mache ich es, dass der Text sich neu formatiert und Platz für das Menü macht?
Musste einen Teil der Quellen ausblenden aber der wird wohl nicht Teil des Problems sein
3 Antworten
Wenn die Checkbox angehakt ist, kannst du die folgenden Elemente entweder mit einer neuen Breite des Labels/eines Pseudoelements oder einem Außenabstand nach rechts drücken.
Beispiel:
<!doctype html>
<title>Example</title>
<style>
.wrapper {
position: relative;
display: flex;
}
.menu-toggle {
display: none;
}
.menu-toggle:checked + .menu-toggle-label::after {
content: "";
display: block;
width: 245px;
}
.menu-toggle:checked ~ .overlay {
display: block;
}
.overlay {
display: none;
left: 0;
position: absolute;
top: 0;
width: 245px;
}
</style>
<div class="wrapper">
<nav class="menu">
<input class="menu-toggle" id="menu-toggle" type="checkbox">
<label class="menu-toggle-label" for="menu-toggle">Open</label>
<div class="overlay">Overlay</div>
</nav>
<p>Some text</p>
</div>
Dazu ist es immer besser, wenn man den bisherigen Code sieht, sonst muss geraten werden - und das funktioniert meistens nicht so gut...
Weiß jetzt nicht ob das der fehler ist aber ganz unten beim css ist ein ` was da bicht hingehört
Stimmt aber ich habe die neue Formatierung des Textes generell noch gar nicht eingebaut weil ich nicht weiß wie es geht