Miten luoda: Kiinnitetty valikko

Miten luoda kiinnitetty ylivasemenu

Ensimmäinen vaihe - Lisää HTML:

<div class="navbar">
  <a href="#home">Koti</a>
  <a href="#news">Uutiset</a>
  <a href="#contact">Yhteystiedot</a>
</div>
<div class="main">
  <p>Joitakin tekstejä joitakin tekstejä joitakin tekstejä joitakin tekstejä..</p>
</div>

Toinen vaihe - Lisää CSS:

Lisää kiinnitetty ylivasemenu, käytä position:fixed ja top:0Huomaa, että kiinnitetty valikko peittää muiden sisältösi. Ratkaise tämä lisäämällä yläpuolinen ulkoreuna, joka on yhtä korkea tai korkeampi kuin valikon korkeus (margin-top).

/* Navigointirivi */
.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed; /* Aseta navigointirivi kiinnityspaikkaan */
  top: 0; /* Aseta navigointirivi sivun ylös */
  width: 100%; /* Täysin leveys */
}
/* Navigointirivin sisällä olevat linkit */
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Muuta taustaväri hiiren osoittimen yllä */
.navbar a:hover {
  background: #ddd;
  color: black;
}
/* Pääsisältö */
.main {
  margin-top: 30px; /* Lisää yläpuolinen ulkoreuna välttääksesi sisällön päällekkäisyyden */
}

Kokeile itse

Miten luoda kiinnitetty alavasemenu

Lisää kiinnitetty alavasemenu, käytä position:fixed ja bottom:0:

/* Navigointirivi */
.navbar {
  position: fixed; /* Aseta navigointirivi kiinnityspaikkaan */
  bottom: 0; /* Aseta navigointirivi sivun alaan */
  width: 100%; /* Täysin leveys */
}
/* Pääsisältö */
.main {
  margin-bottom: 30px; /* Lisää alapuolinen ulkoreuna välttääksesi sisällön päällekkäisyyden */
}

Kokeile itse

Liittyvät sivut

Oppitunnit:CSS navigointipalkki