Sådan opretter du: En sidebjælke med ikoner

Forrige side Hover side navigasjonsknapp
Neste side Horisontal rullemeny

Lær at bruge CSS til at oprette en sidebjælke med ikoner.

Sådan opretter du en sidebjælke med ikoner

Første trin - Tilføj HTML:

<!-- Indlæs ikonbibliotek -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Sidebar -->
<div class="sidebar">
  <a href="#home"><i class="fa fa-fw fa-home"></i> Home</a>
  <a href="#services"><i class="fa fa-fw fa-wrench"></i> Services</a>
  <a href="#clients"><i class="fa fa-fw fa-user"></i> Clients</a>
  <a href="#contact"><i class="fa fa-fw fa-envelope"></i> Contact</a>
</div>

Andet trin - Tilføj CSS:

/* Stilarter for sidekolonne - fast højde */
.sidebar {
  height: 100%;
  width: 160px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 16px;
}
/* Indstil stil for sidekolonnen links */
.sidebar a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block;
}
/* Indstil linkstil når musen hæves */
.sidebar a:hover {
  color: #f1f1f1;
}
/* Stilarter for hovedindhold */
.main {
  margin-left: 160px; /* Samme bredde som side navigationsfeltet */
  padding: 0px 10px;
}
/* Tilføj medieundersøgelse for små skærme (når skærmhøjden er mindre end 450 pixels, tilføj mindre indrykning og skriftstørrelse) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}

Prøv det selv