Zcode Top Menu
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: