Ana Sayfa

Blackinci » CSS » Css İle Dikey Menü yapımı
Üye Paneli

Kayıt Ol Şifremi Unuttum?


Give Me Everything

CSS Hayat İşte Genel Photoshop MyBB Temalar Özgür Yazım

«    Şubat 2012    »
PtSaÇrPrCuCtPz
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 


blackinci.com da bir forum sayfası olsun mu?
Evet Olsun
Hayır Olmasın
Kararsızım
Fikrim yok

admin paneli, ajax, background, css, CSS3, dle, F1, form, forum, giris paneli, gölge, gölgeli yazı, highslide, iphone, md, mybb, mybbdestek, novaboard, oval, Seri 5, seri2, tasarim, tema, transform, vbulletin, Yarış, özellik

Eylül 2010 (4)
Ağustos 2010 (1)
Haziran 2010 (1)
Mart 2010 (4)
Şubat 2010 (2)
Ocak 2010 (1)
Makale Detayları
blackinci
27 Temmuz 2008
CSS
Yazdır
11979 Kez Okunmuş
26 Yorum Yapılmış
 (Oy Sayısı: 34)


Benzer Konular

Css İle Dikey Menü yapımı
Css İle Dikey Menü yapımı

Uzun Süren Bir aradan sonra kendime ayırabildiğim vakti birşeyler ile değerlendirmek istedim bir dikey menü yaptım
HTML kodlarmızla başlayalım bakalım

<dl class="menu">
<dd>MENÜ</dd>
<dt><a href="#">Ana Sayfa</a></dt>
<dt><a href="#">Forum</a></dt>
<dt><a href="#">Uygulamalar</a></dt>
<dt><a href="#">Hakkında</a></dt>
<dt><a href="#">İletişim</a></dt>
</dl>
Yukarıda gördüğünüz gibi DL sıralı liste kodlarını kullandım UL de kullanılabilirdik ama bu sefer farklı olsun istedim.
Geçelim css kısmına

dl.menu {
width:200px;
border: 1px solid gray;
font-family: Verdana,Arial,sans-serif;
font-weight:bold;
}
Menümüze font özellikleri ve genişlik değeri verdik

dl.menu dd {
height:24px !important; /* Modern Tarayıcılar için */
height:30px; /* İE6 için */
background: url(menu.png) 0 -50px no-repeat;
padding: 6px 0 0 3px;
margin:0;
font-size: 14px;
color: lightyellow;
}
Menü başlığımız için arka plan resmi verdik yükseklik değeri verdik ve margin değerini sıfırladık font boyutu ve renk değeri verdik

dl.menu dt {
border-top: 1px solid silver;
height: 25px;
font-size: 12px;
overflow: hidden;
}
td kodunun üst kısmına border uyguladık gükseklik verdik font boyutun verdik ve yüksekliğin taşmaması için overflow hidden kodunu kullandık

dl.menu dt a {
display block;
height: 25px;
width: 100%;
padding: 5px 0 0 22px;
float: left;
text-decoration: none;
background: #fff url(menu.png) top left no-repeat;
color: gray;
}
a koduna blok görünümü ve yükseklik verdik genişlik verdik linklerimize alt çizgi koymadık ve renklendirip sola yasladık son olarak arkapan resmi atadık


dl.menu a:hover {
background: #fff url(menu.png) 0 -25px no-repeat;
color:#FF6464;
text-decoration: none;
}
atadığımız arkaplan resmini maus üstüne geldiğinde 25 yukarı kaydırdık renk verip alt çizgi oluşmasını istemedik.

İşte hepsi bukadar grafiklerin PSD dosyasıda rar arşivinin içerisindedir alttaki bağlantıdan dosyayı indirebilirsiniz hoşcakalın...

Örnek - Ön İzleme

dikey-menu.rar [11.74 Kb] (İndirme: 1319)
17 Kasım 2011 18:36 26blackinci demiş ki:
Oktay Karakaya,
Teşekkür ederim neden öyle başlıyor bilemem ben hiç dreamweaver kullanmadım

15 Kasım 2011 22:19 25Oktay Karakaya demiş ki:
Gerçekten çok işime yaradı sayenizde menü yapabiliyorum.Ben dreamweaver ile kendi çapımda menü yapıyordum ancak çok basit menüler ve kodları <li> ile değilde <p> ile başlıyor. İçinde yine css kodları vardı ama neden <p> ile başlıyorki.. : winked
5 Mart 2011 23:22 24escaperx demiş ki:
Çok teşekkürler..
20 Temmuz 2010 12:24 23bugrahan demiş ki:
Tmm tmm ben yaptım süper bir menü oldu çok sağolun gerçekten wink
19 Temmuz 2010 17:33 22blackinci demiş ki:
bugrahan,
indirdiğiniz örnekte kodları da var
18 Temmuz 2010 20:26 21bugrahan demiş ki:
Yaw siz şunun tam olarak kodunu gönderseniz bence daha iyi olur feel
29 Temmuz 2009 19:51 20blackinci demiş ki:
alper,
Evet uyguladığınız her şablona olur. Menüdeki en altta bulunan köprüden örnek alarak yapabilirsiniz
29 Temmuz 2009 15:57 19alper demiş ki:
Öncelile elinize sağlık.Bu menü blog sitesine olurmu? Birde butonlara nasıl köprü yapacam?
6 Temmuz 2009 22:25 18TurKishPoweR demiş ki:
teşekkürler Davut abi
26 Kasım 2008 19:25 17K_E_M_O demiş ki:
Davut abi ellerine sağlık.. Fakat bir sorum olacak.. Bunu sitenin sol tarafına koyuyorum fakat yazı yazdığımda alt tarafında çıkıyor yazılar.. Fakat ben sağ tarafında yani yanında çıksın istiyorum.. Bunu nasıl yapabilirim? Bu konuda aydınlatırsan sevinirim request
◄ Geri 1 2 3 İleri ►

Sessiz Kalma Sende Yorum Yap

Son Yapılan 10 Yorum
  • Konu
  • Yazar
  • Yorum
  • Üye Giriş Paneli Tasarımları
  • demiş ki 
  • İşime çok yaradı Saol arkadaşım
  • Üye Giriş Paneli Tasarımları
  • demiş ki 
  • çok teşekkürler kardeşim renk paylaşımları ve üye paneli paylaşımları işime yaradı sağol
  • MyBB için css ile alt forumları 2 blok h ...
  • demiş ki 
  • Selamlar
    Ben internete girmek icin firefox kullanmaktayim. Ancak internet explorerda birden cok sayfa actigimda firefox cokmekte. Bu tarz bir problemle karsilasan arkadaslar varsa ve bana yardimci olurlarsa cok sevinirim.
    Tesekkurler...
  • Üye Giriş Paneli Tasarımları
  • demiş ki 
  • yaa ben siteme uygulayamıyorum yardım edn lütfen sad
  • blackinci DLE Seri 1
  • demiş ki 
  • v2 yi bekliyoruz saygılar. winked
  • Css ile Aktif Menü Buton Yapımı
  • AsparagasHaber.net demiş ki 
  • İşime yaradı kullanacagım tesekkur ederım..
  • Css ile Aktif Menü Buton Yapımı
  • Agah demiş ki 
  • ÇOOOOOOOOOOOOOKKK SAĞOLUN EMEĞİNİZE SAĞLIK!!!!!!!!!!! smile
  • MyBB için css ile alt forumları 2 blok h ...
  • blackinci demiş ki 
  • Ceydaa_Gunactii,
    Ceyda hanım bilgisayarınızın windows update kısmından güncelleyebilirsiniz
  • MyBB için css ile alt forumları 2 blok h ...
  • demiş ki 
  • Yardim Lütfen
    internet explorerimi guncellemek istiyorum ancak bunu nasil yapacagimi bilemiyorum. Bu konuda bana yardimci olabilecek arkadaslar var mi acaba?
    simdiden tesekkurler.

Yukarı İletişim RSS Takip İstatistikler Site İçeriği

Copyright © 2007 - 2011 DLE Blackinci Edition Seri 2