Sådan oprettes: Fast menu

Sådan oprettes en fast topmenu

Første skridt - Tilføj HTML:

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>
<div class="main">
  <p>Nogle tekster nogle tekster nogle tekster nogle tekster..</p>
</div>

Andet skridt - Tilføj CSS:

For at oprette en fast menu øverst, brug position:fixed og top:0Bemærk, at den faste menu vil overlejre dit andre indhold. For at løse dette problem, tilføj en ekstern margin (margin-top) på indholdet ovenfor, der er lig med eller større end menuhøjden.

/* Navigationsfelt */
.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed; /* Sæt navigationsfeltet til en fast position */
  top: 0; /* Placer navigationsfeltet øverst på siden */
  width: 100%; /* Hele bredde */
}
/* Lænker i navigationsfeltet */
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Ændr baggrund ved museoverførsel */
.navbar a:hover {
  background: #ddd;
  color: black;
}
/* Hovedindhold */
.main {
  margin-top: 30px; /* Tilføj øvre ekstern margin for at undgå indholdsoverlægning */
}

Try it yourself

Sådan oprettes en fast bundmenu

For at oprette en fast bundmenu, brug position:fixed og bottom:0:

/* Navigationsfelt */
.navbar {
  position: fixed; /* Sæt navigationsfeltet til en fast position */
  bottom: 0; /* Placer navigationsfeltet nederst på siden */
  width: 100%; /* Hele bredde */
}
/* Hovedindhold */
.main {
  margin-bottom: 30px; /* Tilføj nedre ekstern margin for at undgå indholdsoverlægning */
}

Try it yourself

Related pages

Tutorial:CSS navigation bar