Terug

CSS 7 – Menu’s

Een menu maak je in HTML als een lijstje hyperlinks:

<div>
  <a href="index.html">HOME</a>
  <a href="portfolio.html">PORTFOLIO</a>
  <a href="about.html">ABOUT</a>
</div>

Op deze pagina zie je een aantal voorbeelden om je inspiratie te geven voor het maken van je eigen menu. Maar wees vooral creatief: ook het menu kun je oneindig opmaken met handig gebruik van CSS.

Simpel verticaal

<div class="menu1">
  <a href="index.html" class="menu-item">HOME</a>
  <a href="portfolio.html" class="menu-item">PORTFOLIO</a>
  <a href="about.html" class="menu-item">ABOUT</a>
</div>
.menu1 {
    display: flex;
    flex-direction: column;
}

.menu-item {
    border: 2px solid #fff;
    padding: 5px;
    color: #fff;
    background-color: rgb(68,114,196);
}

/* opmaak van link tekst in normale staat */
.menu-item:link { 
  color: rgb(255,255,255);
  text-decoration: none; 
}

/* opmaak van link tekst in hover staat */
.menu-item:hover {
  background-color: rgb(185,220,74);
  color: rgb(68,114,196);
}

Simpel horizontaal

<div class="menu2">
  <a href="index.html" class="menu-item">HOME</a>
  <a href="portfolio.html" class="menu-item">PORTFOLIO</a>
  <a href="about.html" class="menu-item">ABOUT</a>
</div>
.menu2 {
    display: flex;
    flex-direction: row;
    background-color: rgb(68,114,196);
}

.menu-item {
    padding: 5px 25px;
    color: #fff;
}

/* opmaak van link tekst in normale staat */
.menu-item:link { 
  color: rgb(255,255,255);
  text-decoration: none; /* geen lijntje onder de link */
}

/* opmaak van link tekst in hover staat */
.menu-item:hover {
  background-color: rgb(185,220,74);
  color: rgb(68,114,196);
}

Afbeelding menu

<div class="menu3">
  <a href="index.html" class="menu-item menu-image" id="menuimage1">HOME</a>
  <a href="portfolio.html" class="menu-item menu-image" id="menuimage2">PORTFOLIO</a>
  <a href="about.html" class="menu-item menu-image" id="menuimage3">ABOUT</a>
</div>
.menu3 {
    display: flex;
    flex-direction: row;
}

.menu-item {
    padding: 5px 25px;
    color: #fff;
}

.menu-image {
  width: 200px;
  height: 100px;
  display: flex;
  align-items: flex-end;
  margin-right: 5px;
  background-size: cover;
  filter: grayscale(80%);
}

.menu-image:hover {
  filter: grayscale(0%);
  transition: 1s;
}

#menuimage1 {
  background-image: url(plaatje1.jpg);
  background-position: bottom center;
}

#menuimage2 {
  background-image: url(plaatje2.jpg);
  background-position: bottom center;
}

#menuimage3 {
  background-image: url(plaatje3.jpg);
  background-position: top center;
}