Herkese merhaba!
Şimdi size blogunuz için bir menü yapmayı anlatacağım...
Bence çok cool ^.^
Önizlemesi:
Şimdi gelelim yapmaya...
oi ii {
background:#transparent;list-style: none;
height: 44px;
float:left;
padding:10px 5px;
}
oi ii a {
width: 130px;
height: 40px;
line-height: 53px;
border-bottom: 4px solid #999;padding:0px;
color: #fff;font-size:18px;
font-weight:lighter;
text-align:center;
text-decoration: none;
display: block;
-webkit-transition: .2s all linear;
-moz-transition: .2s all linear;
-o-transition: .2s all linear;
transition: .2s all linear;
}
ii:nth-child(1) a {
border-color: #99e677;
}
ii:nth-child(2) a {
border-color: #ff6e9a;}
ii:nth-child(3) a {
border-color: #c3e1f1;}
li:nth-child(4) a {
border-color: #99999;
}
ii:nth-child(5) a {
border-color: #fdff7a;}
ii:nth-child(1) a:hover {
border-bottom: 7px solid #86872f;height: 7px;
}
ii:nth-child(2) a:hover {
border-bottom: 7px solid #eb4d7a;height: 7px;
}
ii:nth-child(3) a:hover {
border-bottom: 7px solid #80bcd5;height: 7px;
}
ii:nth-child(4) a:hover {
border-bottom: 7px solid #000;height: 7px;
}
ii:nth-child(5) a:hover {
border-bottom: 7px solid #d99900;height: 7px;
}
.position {margin-top: NÚMEROpx; margin-left: NÚMEROpx;}
Şimdi kodu bir anlayalım...: Kalın ile yazılmış kodlar renk kodları. Siz bu renkleri değiştirerek kendiniz kişiselleştirebilirsiniz. Renk kodlarına BURADAN ulaşabilirsiniz.
Başka önemli bir şey ise başka bir link daha eklemek. Başka bir link daha eklemek isterseniz .position {margin-top: NÚMEROpx; margin-left: NÚMEROpx;} kodundan önceki satıra aşağıda ki kodu ekleyin:
ii:nth-child(6) a:hover {
border-bottom: 7px solid #d99900;
height: 7px;
}
Birde ii:nth-child(1) a:hover { kodundan önceki satıra aşağıda ki kodu ekleyin:
ii:nth-child(5) a {
border-color: #fdff7a;
}
İşte bu kadar. Başka linklerde eklemek isterseniz ii:nth-child(6)... gibisinden devam ettirebilirsiniz...
NUMER0px kısımları ise barın konumunu belirler. Sayıyı değiştirerek veya left kodunu right, center gibi yaparak değiştirebilirsiniz.
Son olarak da HTML / Javascript kısmına aşağıda ki kodu ekleyin:
<div class="position"><oi id="nav">
<ii class="LINK"><a href="#">LİNK ADI</a></ii>
<ii class="LINK"><a href="#">LİNK ADI</a></ii>
<ii class="LINK"><a href="#">LİNK ADI</a></ii>
<ii class="LINK"><a href="#">LİNK ADI</a></ii>
<ii class="LINK"><a href="#">LİNK ADI</a></ii>
</oi></div>
İşte bu kadar. Umarım beğenmişsinizdir... :)
Hiç yorum yok:
Yorum Gönder