Hur man skapar: Fast meny

Hur man skapar en fast toppmeny

Steg 1 - Lägg till HTML:

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>
<div class="main">
  <p>Några texter några texter några texter några texter..</p>
</div>

Steg 2 - Lägg till CSS:

För att skapa en fast menyn på toppen, använd position:fixed och top:0Observera att den fasta menyn kommer att täcka ditt andra innehåll. För att lösa detta problem, lägg till en ytterkantmarginal (margin-top) som är lika med eller större än menyns höjd ovanför innehållet.

/* Navigationsfält */
.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed; /* Sätt navigationsfältet till en fast position */
  top: 0; /* Placera navigationsfältet på sidans topp */
  width: 100%; /* Full bredd */
}
/* Länkar inom navigationsfältet */
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Ändra bakgrund när musen är över länken */
.navbar a:hover {
  background: #ddd;
  color: black;
}
/* Huvudinnehåll */
.main {
  margin-top: 30px; /* Lägg till övre ytterkantmarginal för att undvika innehållsöverlappning */
}

Prova själv

Hur man skapar en fast bottenmeny

För att skapa en fast lägg till menyn, använd position:fixed och bottom:0：

/* Navigationsfält */
.navbar {
  position: fixed; /* Sätt navigationsfältet till en fast position */
  bottom: 0; /* Placera navigationsfältet på sidans botten */
  width: 100%; /* Full bredd */
}
/* Huvudinnehåll */
.main {
  margin-bottom: 30px; /* Lägg till nedre ytterkantmarginal för att undvika innehållsöverlappning */
}

Prova själv

Relaterade sidor

Lär dig här:CSS navigationsfält