Jak utworzyć: stałe menu

Jak utworzyć stałą górną nawigację

Krok pierwszy - Dodaj HTML:

<div class="navbar">
  <a href="#home">Strona główna</a>
  <a href="#news">Wiadomości</a>
  <a href="#contact">Kontakt</a>
</div>
<div class="main">
  <p>Niektwy tekst niektwy tekst niektwy tekst niektwy tekst..</p>
</div>

Krok drugi - Dodaj CSS:

Aby utworzyć stałą nawigację na górze, użyj position:fixed i top:0Uwaga, stała nawigacja może zakryć inną treść. Aby to rozwiązać, dodaj górny margines równy lub większy niż wysokość menu.

/* Pasek nawigacyjny */
.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed; /* Ustaw pasek nawigacyjny na stałym miejscu */
  top: 0; /* Umieść pasek nawigacyjny na górze strony */
  width: 100%; /* Pełna szerokość */
}
/* Linki w nawigacji */
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Zmień tło przy nawigacji na podświetlenie */
.navbar a:hover {
  background: #ddd;
  color: black;
}
/* Główna treść */
.main {
  margin-top: 30px; /* Dodaj górny zewnętrzny margines, aby uniknąć nadpisywania treści */
}

Spróbuj sam

Jak utworzyć stałą dolną nawigację

Aby utworzyć stałą dolną nawigację, użyj position:fixed i bottom:0:

/* Pasek nawigacyjny */
.navbar {
  position: fixed; /* Ustaw pasek nawigacyjny na stałym miejscu */
  bottom: 0; /* Umieść paskę nawigacyjną na dole strony */
  width: 100%; /* Pełna szerokość */
}
/* Główna treść */
.main {
  margin-bottom: 30px; /* Dodaj dolną zewnętrzną margines, aby uniknąć nadpisywania treści */
}

Spróbuj sam

Strony związane

Tutorial:Panel nawigacyjny CSS