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

Kayıt Ol Şifremi Unuttum?

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

«    Eylül 2010    »
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
30
 

MyBB için css ile al... Blackinci Seri 4 MyB... Blackinci Seri 5 MyB... MyBB Admin Paneli Te...

2. Versiyon Temasını Nasıl Buldunuz?
Mükemmel
Çok İyi
İyi
Eh İşte
Beğenmedim

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 (3)
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
7383 Kez Okunmuş
24 Yorum Yapılmış
 (Oy Sayısı: 32)


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: 842)
20 Temmuz 2010 12:24 24bugrahan demiş ki:
Tmm tmm ben yaptım süper bir menü oldu çok sağolun gerçekten wink
19 Temmuz 2010 17:33 23blackinci demiş ki:
bugrahan,
indirdiğiniz örnekte kodları da var
18 Temmuz 2010 20:26 22bugrahan demiş ki:
Yaw siz şunun tam olarak kodunu gönderseniz bence daha iyi olur feel
29 Temmuz 2009 19:51 21blackinci 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 20alper demiş ki:
Öncelile elinize sağlık.Bu menü blog sitesine olurmu? Birde butonlara nasıl köprü yapacam?
6 Temmuz 2009 22:25 19TurKishPoweR demiş ki:
teşekkürler Davut abi
26 Kasım 2008 19:25 18K_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
22 Ekim 2008 05:15 17Evan demiş ki:
<br/> Yerine </br> Kullan
21 Ekim 2008 16:50 16Most_Speed demiş ki:
css kodlarıyla oynamadım sadece yazı rengini değiştim şablonlarda ise eşitleyemiyorum ya :S
21 Ekim 2008 08:51 15Evan demiş ki:
EditLerken KodLarda Hata Yapmış oLmayasın?
◄ Geri 1 2 3 İleri ►

Sessiz Kalma Sende Yorum Yap

Son Yapılan 10 Yorum
  • Konu
  • Yazar
  • Yorum
  • MyBB Admin Paneli Teması Seri 2
  • sledgeab demiş ki 
  • Eline sağlık Davut Hocam,
  • MyBB Admin Paneli Teması Seri 2
  • bomfile demiş ki 
  • Teşekkürler Davut Hocam.
    Kullanacam bu temayı...
  • blackinci 1 (MD V3) MyBB 1.4 ve 1.2
  • blackinci demiş ki 
  • Kısa zamanda 1.6 güncellemesini yaparım
  • blackinci 1 (MD V3) MyBB 1.4 ve 1.2
  • demiş ki 
  • Arkadaşım. Tema hoş. Biz resim felan değiştirince güzel oluyor ama bir sorun var.
    1.6 versiyonu için de hazırlarmısınız ?
  • Blackinci Seri 5 MyBB teması
  • demiş ki 
  • Tekrar Çok Teşekkür Ediyorum... Başarılarının Devamı Dilerim Hayır Bayramlar...
  • Blackinci Seri 5 MyBB teması
  • blackinci demiş ki 
  • SystemTR,
    Enine Demişsiniz ama resimde okla boyu işaretlemişsiniz ben resimdeki işaretli için anlatım yapayım
    ilk önce css kısmında stil-genel.css dosyasını açın
    .logo-sol ve .logo-sol .logo-orta a kısmında bulunan
    background: url(blackinci-5/logo-bg.png) top left repeat-x;
    üstteki kodu alttaki kalın ile belirlediğim şekilde düzenle
    background: #7abcff url(blackinci-5/logo-bg.png) bottom left repeat-x;

    .logo-orta a{ kısmında bulunan width: 55px; height: 121px; kısmına logo büyüklüğene göre ayarla fakat uzunluk diğer logo sol ve logo sağ ile orantılı olsun şimdiki gibi
    css kısmı bukadar gelelim şablondaki yere
    Header şablonundan logo-sol ve logo-sağ logo-orta a kısmındaki height="84" 84 olan kısmı yapmak istediğiniz uzunluğa gere düzeltirsin bu kısım logo ile aynı orantıda olmasına dikkat et
    bundan sonra grafik olarak yeni logonuzun uzunluğunuda ayarlayınca istediğin görünümü elde etmiş olursun
    kolay gelsin
  • Blackinci Seri 5 MyBB teması
  • demiş ki 
  • Enine büyütmek istiyorum hocam bu resimdeki gibi "http://www.system-tr.com/123.jpg"
  • Blackinci Seri 5 MyBB teması
  • blackinci demiş ki 
  • ÖMER,
    Bilemiyorum bu soruyu MTR ye sormanız gerekir
    Ama kendi acımdan MTR ye bir kinim yok kızgınlığım yok küs veya dargın değilim sadece biraz kırgınım oda çok önceleri temamı kopyalayıp dağıtmışlardı ve birleşme veya barışma gibi birşeyler olmuştu siteler arası ozamanlar ozan arkadaşımız bunun MTR tarafından yapıldığını söylemişti sadece bukadar ama bunuda unuttum gitti.
    Belki hani çok eskiden MD de yönetici idim belki bundandır bilemiyorum ama benim MTR kurucularından yada yöneticilerinden böyle bir talebim olmadı kesinlikle
    sonuç olarak temalarımı yayınlayıp yayınlamamaları sorun değil onlarda MyBB için birşeyler yapıyor ve katıyorlar canları sağolsun benim açımdan sorun yok.

    SystemTR,
    Teşekkür ederim genişleyebilir ama enine mi yoksa boyuna mı ?
    genişletmek istiyorsunuz önce onu bilmem gerekir
  • Blackinci Seri 5 MyBB teması
  • demiş ki 
  • Merhaba,

    Öncelikle Tema İçin Teşekkür Ediyorum Gerçekten Çok Güzel.
    Bende Kullanmaktayım Ama Bir Sıkıntım Var. İznin Olursa Dile Getiricem Logonun Olduğu Kısmı Genişletebiliyor muyuz ?

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

Copyright © 2007 - 2010 DLE Blackinci Edition Seri 2