10
- Katılım
- 9 Haziran 2018
- Konular
- 1,336
- Mesajlar
- 5,589
- Çözümler
- 8
- Reaksiyon puanı
- 1,734
- Puanları
- 113
- Konum
- İstanbul
- Web sitesi
- www.masmavi.net
- Cinsiyet
- Erkek
Html ve css dikey renkli menü her türlü sitenizde kullanabilirsiniz.
[ ÖNİZLEME LİNKİ - DEMO LINK ]
Ekran Görüntüsü:
Yazı font kodu;
HTML kodu;
CSS kodu;
[ ÖNİZLEME LİNKİ - DEMO LINK ]
Ekran Görüntüsü:
Yazı font kodu;
HTML:
<link href='http://fonts.googleapis.com/css?family=Titillium+Web' rel='stylesheet' type='text/css'>HTML kodu;
HTML:
<div class="menu">
<ul>
<li><a href="#" id="as">Anasayfa</a><li>
<li><a href="#" id="dj">Dj Girişi</a><li>
<li><a href="#" id="na">Nick Al</a><li>
<li><a href="#" id="akt">Aktivex</a><li>
<li><a href="#" id="frm">Forum</a><li>
<li><a href="#" id="yyn">Yayıncılar</a><li>
<li><a href="#" id="krl">Kurallar</a><li>
<li><a href="#" id="ilt">İletişim</a><li>
</ul>
</div>CSS kodu;
CSS:
/* Design By Adanalı www.masmavi.net
------------------------------------------------------- */
*{margin: 0 auto;padding: 0 auto;}
body {background: #555;font-family: 'Titillium Web', sans-serif;}
.menu{width:220px;}
.menu ul{list-style:none;}
.menu ul a{background:#191919;color:#fff;display:block;padding:10px 0px;text-decoration:none;text-align:center;}
#as{border-left:solid 1px #00ff00;}
#as:hover{background:#00ff00;color:#000;}
#dj{border-left:solid 1px #ffff00;}
#dj:hover{background:#ffff00;color:#000;}
#na{border-left:solid 1px #007fff;}
#na:hover{background:#007fff;color:#000;}
#akt{border-left:solid 1px #ff00ff;}
#akt:hover{background:#ff00ff;color:#000;}
#frm{border-left:solid 1px #ff0000;}
#frm:hover{background:#ff0000;color:#000;}
#yyn{border-left:solid 1px #aaff56;}
#yyn:hover{background:#aaff56;color:#000;}
#krl{border-left:solid 1px #ff7f00;}
#krl:hover{background:#ff7f00;color:#000;}
#ilt{border-left:solid 1px #00ffff;}
#ilt:hover{background:#00ffff;color:#000;}
Son düzenleme: