Kayıt ol

Html, Css renkli dikey menü html ve css dikey menü

Masmavi

Administrator
10
Katılım
9 Haziran 2018
Konular
1,336
Mesajlar
5,589
Çözümler
8
Reaksiyon puanı
1,733
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ü:
renkli-dikey-menu.jpg


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:

Sabotaj

Katılımcı
1
Katılım
27 Temmuz 2020
Konular
0
Mesajlar
95
Reaksiyon puanı
10
Puanları
8
Cinsiyet
Erkek
emeginize saglik paylasima tesekkurler
 

Yorum yapmak için bir hesap oluşturun veya giriş yapın

Yeni bir konu oluşturabilmek veya konulara cevap verebilmek için sitemize üye olmanız gerekmektedir

Hesap oluştur

Forum sitemizde bir hesap oluşturun. Bu işlem çok kolay!

Giriş yap

Zaten bir hesabınız var mı? Giriş yapın.

Adobe Photoshop programının ayarlarını sıfırlamak için, Adobe Photoshop simgesini çift tıkladıktan hemen sonra klavyeden "SHIFT+CTRL+ALT" tuşuna basabilirsiniz. Çıkan "Delete the Adobe Photoshop Settings File?" uyarısı çıktığında "Yes" butonuna tıkladığınızda ayarlarınız sıfırlanarak Adobe Photoshop'unuz fabrika ayarlarına dönecektir.
Üst