Menüleiste fixieren?

2 Antworten

medmonk
24.05.2018, 20:19
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
LeLuke 
Fragesteller
 25.05.2018, 07:00

vielen Dank

0
webdesignnoobie
24.05.2018, 08:15

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.
Woher ich das weiß:Berufserfahrung – selbstständiger Webdesigner & Programmierer
LeLuke 
Fragesteller
 24.05.2018, 09:55

vielen dank werde ich zuhause ausprobieren

1
medmonk  24.05.2018, 19:47
 Dann scrollt die Leiste mit.

Nein, ein fix positioniertes Element scrollt nicht mit!

0
webdesignnoobie  25.05.2018, 07:49
@medmonk

Natürlich. Es ist am Bildschirmverhältnis "fixiert". Absolut und relativ positionierte Objekte scrollen nicht.

0
medmonk  01.06.2018, 02:50
@webdesignnoobie
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

0