Ana Sayfa

Blackinci » CSS » Css İle Yatay Menü Yapımı 2
Üye Paneli

Kayıt Ol Şifremi Unuttum?


Give Me Everything

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

«    May 2008    »
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
31
 


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
18 May 2008
CSS
Yazdır
13405 Kez Okunmuş
34 Yorum Yapılmış
 (Oy Sayısı: 58)


Benzer Konular

Css İle Yatay Menü Yapımı 2
Css İle Yatay Menü Yapımı 2

Evet ilk yatay menüm forumtema.com da kullandığım menü idi ondan sonra bir menü daha yapmak geldi içimden
bu ilkinden biraz farklı ve yapmışken 5 tane de renk olsun istedim ve içine 5 tanede renk koydum belki kullanan olur yada örnek alıp bişeyler yapan menü yapımına geçelim isterseniz.
İlk olarak herzamanki gibi html kodlarımız ile başlayalım
<div id="gri">
<ul>
<li><a href="#" class="aktif">Ana Sayfa</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Bilgi</a></li>
<li><a href="#">İletişim</a></li>
<li><a href="#">Hakkında</a></li>
</ul>
</div>

Yukarıda bir layer içerisine sıralı liste oluşturduk ve linklerimizi ekledik linklerimize birtane "class" var ismi aktif layerimizin adı da gri olsun ben renk renk yaptığım için renk ismi verdim css kodlarımızı yazmaya başlayalım

#gri ul {
margin:0;
padding:0;
list-style-type:none;
width:100%;
background:transparent url(img/menu_gri.png) top left repeat-x;
font-family:Verdana,Arial,sans-serif;
font-weight:bold;
font-size: 12px;
border: 1px solid gray;
height:30px!important;
height:32px; /*İE6 için*/
overflow:hidden;
}

UL elementimizden başladık boşlukları sıfırladık listemizinde simge göstermedik 100% genişlik verdik bir arka palan resmi verdik font özellikleri verdik 1 piksellik border uyguladık yükseklik verdik İE6 için ayrı bir yükseklik verdik ve taşmaları gizledik devam edelim

#gri ul li{
display:block;
float:left;
border-right: 1px solid gray;
}

LI elementimize blok görünümü verdik sola yasladık ve sadece sağ kısıma 1 piksellik border uyguladık devam edelim

#gri ul li a{
color:#333;
display:block;
float:left;
text-decoration:none;
padding:8px 20px 0 20px;
height:30px;
}

A elementine renk verip blok görünümü verdik sola yasladık linklerimiz deki yazılara çizgi koymasını istemedik ve üstten 8, sağdan ve soldan 20 piksel yazılarımzı ittik son olarak yükseklik verdik devam edelim

#gri ul li a:hover {
color:#000;
background: url(img/menu_gri.png) center -60px no-repeat;
}

Yukarıda A elementimizin üstüne gelince alıcağı rengi ve arka plan resmini verdik resime göre pozisyon uyguladık devam edelim

#gri ul li a:active, .menu #gri ul li a.aktif {
color:#fff;
background: url(img/menu_gri.png) center -30px no-repeat;
}

Yularıda linke tıklanınca ve en başta bizim atadığımız aktif etiketine renk verdik ve arka plan resmi verdik.
Bu son işlemimizdi. bu sefer... adım adım resim ekleyemedim kusura bakmayın onun yerine 5 renk ekledim bi şekilde telafisi olmuştur sanırım hoşcakalın...

Örnek - Ön İzleme

Menüleri alttaki bağlantıdan indirebilirsiniz
menuler.rar [13.33 Kb] (İndirme: 1487)
10 Şubat 2012 17:03 34MUST@F@ ÖNER demiş ki:
ADMİN KARDEŞİM PAYLAŞIM İÇİN ÇOK TEŞEKKÜRLER

AMA BEN HTML KONUSUNDA DAHA ACEMİYİM BANA
MAVİ YATAY MENÜ KODLARINI GÖNDERİRMİSİNİZ YADA

GRİ YATAY MENÜ YAPIMINI PAYLAŞTIĞINIZ GİBİ MAVİ MENÜYÜ DE PAYLAŞABİLİRMİSİNİZ.
BEN ACEMİ BİR KULLANICIYIM HTML KODLARINI KULLANMAYA YENİ BAŞLADIM. ŞİMDİDEN TEŞEKKÜRLER....
5 Mart 2011 23:22 33escaperx demiş ki:
Ellerine sağlık, anlatımın süper..
25 Temmuz 2010 07:57 32bugrahan demiş ki:
Kardeş bu süper de birde drop down açılır yatay menülerin yapımınıda paylaşırmısın.Anlatımın için teşekkür ederim. wink
24 Haziran 2010 18:34 31blackinci demiş ki:
<li><a href="#" class="aktif">Ana Sayfa</a></li>
fark etmez Kalın ile belirttiğim yerdeki tanımlı aktif kısmını sayfa ismi ile aynı kısmındaki kod ile değiştirmeniz yeterli olur
23 Haziran 2010 16:03 30Murat demiş ki:
merhaba Forum Kismindaki Derken Bi de Ben Forum Da Değil Normal Kendi Yaptiğim Wep Sitesinde Yapmak İstiyorum Ama Halen Beceremedim...
21 Haziran 2010 20:43 29rio-tr demiş ki:
eline saglik davut abi
21 Haziran 2010 16:52 28blackinci demiş ki:
Murat,
<li><a href="#" class="aktif">Ana Sayfa</a></li>
Kalın ile belirttiğim yerdeki tanımlı aktif kısmını forum kısmındaki kod ile değiştirmeniz gerekiyor
21 Haziran 2010 10:03 27Murat demiş ki:
Merhaba Çok Güzel Ama Benim Burda Bir Sorum Olcak Baya Kariştirdim Ama Bulamadim Sorum : Kirmizi veya gir de anasayfasini aktif durumda ben Forumma Tikladiğim zaman Aktif Durum forumma Geçmiyor bunu nasıl yapabiliriz. Yardimlariniz İçin Şimdiden Teşekkur Ederim...
22 May 2010 20:59 26Mustafa Bozkurt demiş ki:
Çok Güzel Teşekkür ederiz
20 Aralık 2009 09:37 25Turk Sword demiş ki:
Tebrik ederim cok güzel bir siten var, css de suan sana yazdıgım gibi, veya da ha basit bi yorum menüsü hazırlamak istiyorum, sitende yokmuş ama sağlık olsun.
◄ Geri 1 2 3 4 İleri ►

Sessiz Kalma Sende Yorum Yap

Son Yapılan 10 Yorum
  • Konu
  • Yazar
  • Yorum
  • CSS3 Kutu Elementlerine Gölge Verme Box ...
  • demiş ki 
  • çok sağol üstad çok güzel anlatım olmuş. :)
  • Blackinci Seri 5 MyBB teması
  • blackinci demiş ki 
  • tamer,
    Resim görebilirsem daha yardımcı olurum
  • Blackinci Seri 5 MyBB teması
  • tamer demiş ki 
  • hocam temanın çok başarılı fakat saol taraf boşlukda sosyal medya yazısı çıkıyor bunu nasıl kaldırabilirim
  • Css ile Aktif Menü Buton Yapımı
  • blackinci demiş ki 
  • Webmaster,
    Ben daha önce bir defa mybb için ücretli tema hazırladım ama hiç satmadan tekrar ücretsiz olarak dağıttım şuan için soruyorsanız mybb yi bıraktım... başka bir forum sistmei ile ilgileniyorum.
    Kendiniz bir fiyat biçmek adına bilgi edinmek için soruyorsanız bu yaptığınız grafiklere, yazdığınız kodlara ve harcadığınız emeğe göre değişir ama şuan için ücretli tema yapmanızı tavsye etmem zira mybb nin vbulletin gibi ücretli olacağı dedikoduları dolaşıyor eğer bu gerçekleşirse işte ozaman güzel olur ve ücretli temaların önü açılmış olur ozaman daha rahat ve güvenilir tema hazırlayıp satabilirsiniz iyi günler.
  • Css ile Aktif Menü Buton Yapımı
  • Webmaster demiş ki 
  • Merhabalar
    Blackinci MyBB temalarını ücretli olursa ne kadar ücrete hazırlıyorsunuz? Buradan belirtirseniz sevinirim
    İyi günler
  • Css ile Aktif Menü Buton Yapımı
  • blackinci demiş ki 
  • Kadir Kaya,
    Bedava forum sistemi sunun sitelerin sistemi nasıl işliyor bilemiyorum ama gözükmemesi normaldir bu tür siteler çok kısıtlı çalışırlar.
  • Css Balon Büyüyen Menü
  • demiş ki 
  • Facebook un tasarımı senin sitenin tasarımının yanında halt yemiş hatta dünyanın bütün siteleri halt yemiş smile
  • Css ile Aktif Menü Buton Yapımı
  • demiş ki 
  • Usta emeğine sağlık ama tr.gg sitelerinde ve jindo.com sitelerinde çalışmıyor hatta hiç gözükmüyor niye anlayamadım.
  • Blackinci vBulletin Teması Seri 1
  • demiş ki 
  • Saol Güzel :)

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

Copyright © 2007 - 2011 DLE Blackinci Edition Seri 2