Sviđa vam se naš Zcode top menu. U ovom tutorialu možete vidjeti kako ga jednostavno napraviti u par koraka.
Prvo šta morate napraviti jest kreirati unordered html listu <ul> klase menu.

<ul class="menu">
  <li><a href="#">Web</a></li>
  <li><a href="#">Ui & Ux</a></li>
  <li><a href="#">Tutorials</a></li>
  <li><a href="#">School</a></li>
</ul>

.menu {
  width: auto;
  min-width: 1px;
  height: 40px;
  position: relative;
  list-style:none;
}

Css za menu je postavljen automatke širine i visine 40px. Visinu ako želite možete promijeniti poželji, ali kasnije je morate promijeniti i kod <a> taga.

.menu li{
  float:left;
}
.menu a {
  display: block;
  height: 40px;
  width: auto;
  padding: 0 20px 0 20px;
  line-height: 40px;
  text-decoration: none;
  margin 0;
  text-align: center;
  color: #373435;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 14px;
  font-weight: 400;
  position:relative;
  transition: all 0.3s ease-in-out;
}

Tag <li> je float-an lijevo, tako da se vi elemeni menu-a poredaju na lijevu stranu. Zatim tag <a> je stavljen da bude block visine 40px te da ima transition 0.3s sa ease-in-out efektom i da mu pozicija bude relative. Font možete staviti po želji. Da bi dobili border različit za svaku tipku menu-a morate odvojiti css za svaki tag <a> kao što možete viditi primjer za jedan tag <a> ispod.

.menu li:nth-child(1) a {
  border-bottom: 2px solid #1e88e5;
}

Sljedeće što morate definirati je pseudo klasu before koja će služiti za hover efekt. Postavljen je da ima absolutnu poziciju, te da mu he visina 0px i da se nalazi na dnu elementa, te da mu je z-index -1, tako da bude iza trenutnog elementa.

.menu a::before {
  content: "";
  height: 0;
  bottom: 0;
  width: 100%;
  left: 0;
  position: absolute;
  display: block;
  transition: all 0.3s ease-in-out;
  z-index: -1;
}

Nakon toga isto kao što smo radili hover za tag <a>, moramo kreirati hover za svaki pseudo element taga <a> kako bi svaki mogao biti drugačije boje. Primjer jednog elementa je ispod.

.menu li:nth-child(1) a:hover::before {
  height: 40px;
  background-color: #1e88e5;
}

Čitav funkcionalan kod možete pogledati: