Menüleiste fixieren?
Ist es möglich mein menü zu fixieren ohne den header tag? Muss ich das menü in einen container(div) geben ? Und wenn ja wie? Danke im vorraus
2 Antworten
Ist es möglich mein menü zu fixieren ohne den header tag?
Kurz und knapp: Ja!
Muss ich das menü in einen container(div) geben ?
Nein, dein(e) Menü respektive Navigation muss nicht extra in ein Div gepackt werden. Du solltest wenn möglich eh die neuen semantischen Elemente verwenden. Hier auf die schnelle ein kleines Beispiel:
HTML:
<nav class="navbar" role="navigation">
<ul class="menu">
<li><a href="#">menu-item 1</a><li>
<li><a href="#">menu-item 2</a><li>
<li><a href="#">menu-item 3</a><li>
</ul>
</nav>
CSS:
/* quick & dirty CSS reset */
* {padding: 0; margin: 0; outline: none;}
/* primary styles */
.navbar {
width: 100%;
position: fixed;
top: 0px; left: 0px;
}
LG medmonk
Du kannst es in eine div geben, und den CSS-Wert position: fixed; zuweisen. Dann scrollt die Leiste mit. Gegebenfalls wirst du mit
top: 0px;
left: 0px;
right: 0px;
arbeiten müssen.
Natürlich. Es ist am Bildschirmverhältnis "fixiert". Absolut und relativ positionierte Objekte scrollen nicht.
Natürlich.
Nochmal Nein! Fixed und absolute positionierte Elemente werden aus dem normalen Dokumentenfluss genommen. Ein absolute positionierter Block liegt relativ zu seinem Container. Ergo mit gescrollt wird. Ein fix positionierter Block sitzt hingegen fest im Viewport und bewegt sich nicht. De facto nicht mit scrollt!
https://www.mediaevent.de/css/position-fixed.html
LG medmonk
Nein, ein fix positioniertes Element scrollt nicht mit!