CSS Menü Yapma Örneği (Resimli Anlatım)
Tarih
20/05/2011 09:26
Konu Sahibi
~~KaG~~
Yorumlar
6
Okunma
8935
Konuyu Oyla:
  • Derecelendirme: 0/5 - 0 oy
  • 5
  • 4
  • 3
  • 2
  • 1

Derecelendirme: 0/5 - 0 oy



~~KaG~~
Kıdemli Üye
Kullanici Avatari
Aktif Üye
K.... A....
477
06/01/2011
47
Karabük
Ofis 2003
28/11/2014,11:50
Big Grin 
Merhaba Arkadaşlar,

CSS İle İlgili Bilgi Almak İçin Sn. schworse Açmış Olduğu Bu Konuya Bakabilirsiniz. .

CSS De Menü Yapımı Anlatacam. Umarım İhtiyaç Sahipleri Faydalanır.

Öncelikle Menümüzde Yer Alacak İsimleri Belirtiyoruz
resim

Daha Sonra Bunlara Link Veriyoruz... Eğer Verecek Link Yoksa Elinizde # İşaretide Koyabilirsiniz.
resim

Şimdi Sıra Geldi Menümüzü Listeye Çevirme...
resim

Arkadaşlar Şimdi Yapacaklarımız. Menümüzün Özellikleri İle İlgili...
Code bölümü Açıyoruz.Önce "UL" Tagına class="menü" Yani <ul class="menü"> Yazıyoruz. Daha Sonra "UL" Tagını Seçip "New CSS Rule" Diyoruz. Ve Karşımıza Aşağıdaki Gibi Bir Pencere Çıkmakta. Görüntüdeki Gibi Sizde Yapın.
resim

Okeyledikten Sonra Karşımıza Bir Pencere Daha Açılmakta...
resim

Bu Pencere Yapmamız Gereken Sadece, List Bölümünden Type Değerini None Yapmak. Bu İşlem Sonucunda Menümüzün Başındaki Noktolar Kalkacaktır.
resim
resim

Şimdi İse Linkler İçin Ayarlamalar Yapıcaz.
"UL" de Olduğu Gibi "A" yı Seçiyoruz Ve "New CSS Rule" Diyoruz.
Aşağıdaki İşlemin Aynısını Yapıyoruz Ve Ok Diyoruz.
resim

Açılan Pencerede Aşağıdaki Özellikleri Veriyoruz.(Bunlar İçin Resim Eklemiyecem Sadece Bulması Kolay Olsun Diye Yerlerini Söyleyecem
Linklere Vereceğimiz Özellikler
Block> Display = Block (Her Linkin Etrafında Blocklar Oluşturur.)
Box> Withd = 6em (Oluşturduğumuzun Blockların Boyutunu Ayarlar.)
Type> Decoration = None (Linklerin Alt Çizgileri Kaldırır.)
Background> Background Color = (Size Kalmış Bir Renk Seçin (Blockların Arka Plan Rengini Ayarlar.))
Burada Yapılacak Ayarlar Bu Kadar. Bu İşlemleri Yaptıkdan Sonra Aşağıdaki Gibi Görüntü Elde Etmeniz Lazım. Eğer İşlem Tamamsa Bir Sonraki Aşamaya Geçelim Img-grin
resim

Şimdi Yapacaklarımız İse Mousemizim Linkler Üzerine Gelince Çalışacak İşlemler...
Bir Önceki Gibi "A" Tagını Seçiyoruz Ve "New CSS Rule" Diyoruz. Bu Sefer
"ul.menü a:hover" Yazıyoruz Ve Okeyliyoruz.
resim

Ok Dedikten Sonra Karşımıza Çıkan Pencerede. Arka Plan Rengini Ve Yazı Rengini Ayarlarmak Lazım. İsteğe Göre Altı Çizili Vs. Yapılabilir.
Type> Color = (Size Kalmış Bir Renk Seçin)
Background> Background Color = (Size Kalmış Bir Renk Seçin)
Yaptığınız İşlemin Sonuçunda Bir Değişiklik Göremiyeceksiniz...

Şimdi Sıra Geldi Menümüzün Arasını Biraz Açmaya...
Yine Diğerlerinde Olduğu Gibi "Li" Seçiyoruz Ve "New CSS Rule" Diyoruz.Açılan Pencerede "ul.menü li" Yazıyoruz Ve Ok a Tıklıyoruz.
resim

Karşımıza Çıkan Pencerede Sadece "Padding" Ayarı Vermemiz Yetiyor.
Box> Padding> Bottom = 0.2em (Bu İşlem Menümüzün Arasını Biraz Açmak İçin)
resim

Bu İşlemin Sonucunda Menümüzün Son Hali Bu Şekilde Olmalı,
resim

Sayfamızı Kaydetip Çalıştıralım.

Evet Arkadaşlar Hepsi Bu Kadar... Yapamadığınız Biryer Olursa, Elimden Geldiği Kadar Yardımcı Olmaya Çalışırım. AccessTr.neT Ailesi İçin Hazırladım. Hiç Bir Şekilde Alıntı Yoktur.
Lütfen Emeğe Saygı. +rep Esirgemeyin Img-grin






Ek Dosyalar
.html   CSS Menü Yapma.html (Dosya Boyutu: 816 Bayt / İndirme Sayısı: 47)
Cevapla


alpeki99
Yeniden başlayabilmek...
Kullanici Avatari
Uzman
O....
5.976
29/10/2008
Ordu
Ofis 2013 32 Bit
Bugün,03:24
Keşke her kelimenin ilk harfi büyük olmasa daha iyi okunurdu. Diğer yandan bu tip pratik anlatımlarda dosyanın bitmiş halininde eklenilmesi iyi olur. Tebrikler güzel bir uygulama olmuş.
AccessTr.Net teknik konular içeren bir sitedir. Bu tip sitelerde en iyi şekilde yardım alabilmeniz için Site Kurallarını mutlaka okumanız ve buna göre hareket etmeniz lazım.
Cevapla


~~KaG~~
Kıdemli Üye
Kullanici Avatari
Aktif Üye
K.... A....
477
06/01/2011
47
Karabük
Ofis 2003
28/11/2014,11:50
Sn. alpeki99,
Her kelimenin ilk harfinin büyük olmasının sebebi el alışkanlığı... Dosyanın bitmiş halini ekledim.
Cevapla


ozanakkaya
sledgeab
Kullanici Avatari
Kurucu
O.... A....
9.022
29/01/2008
Denizli
Memur
Ofis 2010 32 Bit
Bugün,08:03
Eline sağlık..
Cevapla


durkheim
Aktif Üye
Kullanici Avatari
Aktif Üye
320
13/09/2010
20
Belirtilmemiş
Ofis 2003
15/09/2013,13:39
Hocam, çok teşekkür ediyorum, ellerinize sağlık...
Cevapla


~~KaG~~
Kıdemli Üye
Kullanici Avatari
Aktif Üye
K.... A....
477
06/01/2011
47
Karabük
Ofis 2003
28/11/2014,11:50
Img-grin Herzaman Img-grin
Vakit Buldukca Devamını Getirecem İnş Img-grin
Cevapla







Konuyu Okuyanlar: 1 Ziyaretçi


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Tarih Son Yorum
  CSS Yatay Menü Örneği ~~KaG~~ 5 4.897 20/06/2011, 09:49 ~~KaG~~


Türkçe Çeviri: MCTR, Forum Yazılımı: MyBB, © 2002-2016 MyBB Group.
DMCA.com Protection Status
© Desing by XSTYLED| Develops by ozanakkaya