Come creare: menu fisso

Come creare un menu superiore fisso

Primo passo - Aggiungi HTML:

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">Notizie</a>
  <a href="#contact">Contatti</a>
</div>
<div class="main">
  <p>Qualche testo qualche testo qualche testo qualche testo..</p>
</div>

Secondo passaggio - Aggiungi CSS:

Per creare un menu fisso in alto, utilizzare position:fixed e top:0Attenzione, il menu fisso coprirà altri contenuti. Per risolvere questo problema, aggiungi un margine superiore (margin-top) uguale o maggiore dell'altezza del menu.

/* Barra di navigazione */
.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed; /* Posiziona la barra di navigazione in una posizione fissa */
  top: 0; /* Posiziona la barra di navigazione in alto nella pagina */
  width: 100%; /* Larghezza completa */
}
/* Link all'interno della barra di navigazione */
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Modifica lo sfondo quando il mouse è sopra il link */
.navbar a:hover {
  background: #ddd;
  color: black;
}
/* Contenuto principale */
.main {
  margin-top: 30px; /* Aggiungi un margine superiore esterno per evitare che i contenuti si sovrappongano */
}

Prova personalmente

Come creare un menu inferiore fisso

Per creare un menu inferiore fisso, utilizzare position:fixed e bottom:0：

/* Barra di navigazione */
.navbar {
  position: fixed; /* Posiziona la barra di navigazione in una posizione fissa */
  bottom: 0; /* Posiziona la barra di navigazione in fondo alla pagina */
  width: 100%; /* Larghezza completa */
}
/* Contenuto principale */
.main {
  margin-bottom: 30px; /* Aggiungi un margine inferiore esterno per evitare che i contenuti si sovrappongano */
}

Prova personalmente

Pagine correlate

Tutorial:Barra di navigazione CSS