Sådan oprettes: En fast sidepanel

Opret en fast sidefelt

Første skridt - Tilføj HTML:

<!-- Side navigation -->
<div class="sidenav">
  <a href="#">Om</a>
  <a href="#">Tjenester</a>
  <a href="#">Kunder</a>
  <a href="#">Kontakt</a>
</div>
<!-- Sideindhold -->
<div class="main">
  ...
</div>

Andet skridt - Tilføj CSS:

/* Sidefelt menu */
.sidenav {
  height: 100%; /* Fuld skærmhøjde: Hvis du vil have en 'automatisk' højde, fjern denne indstilling */
  width: 160px; /* Indstil bredde for sidefeltet */
  position: fixed; /* Fastgør sidefeltet (bliver ved med at være på plassen når der rulles) */
  z-index: 1; /* Hold altid øverst */
  top: 0; /* Hold altid øverst */
  left: 0;
  background-color: #111; /* Sort */
  overflow-x: hidden; /* Deaktiverer horisontal rulning */
  padding-top: 20px;
}
/* Navigationsmenu links */
.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}
/* Skift farve, når musen holdes over navigationslinks */
.sidenav a:hover {
  color: #f1f1f1;
}
/* Indstil stil for sideside indhold */
.main {
  margin-left: 160px; /* Samme bredde som sidefeltet */
  padding: 0px 10px;
}
/* På skærme med højde mindre end 450 pixels, ændr stilen for sidefeltet (mindre indrykning og mindre skriftstørrelse)*/
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

Related pages

Tutorial:CSS navigation bar

Tutorial:How to create a side navigation bar