Skip to main content

AccessTr.neT


CSS Menü Yapma Örneği (Resimli Anlatım)

~~KaG~~
~~KaG~~
Css
6
13654

CSS Menü Yapma Örneği (Resimli Anlatım)

Big Grin #1
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: 2rw6mut.png]

Daha Sonra Bunlara Link Veriyoruz... Eğer Verecek Link Yoksa Elinizde # İşaretide Koyabilirsiniz.
[Resim: 105vc0n.png]

Şimdi Sıra Geldi Menümüzü Listeye Çevirme...
[Resim: 9igvg4.png]

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: 2d2zko.png]

Okeyledikten Sonra Karşımıza Bir Pencere Daha Açılmakta...
[Resim: 20zdzib.png]

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: 2ufa5hl.png]
[Resim: o9h2jn.png]

Ş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: wk4oav.png]

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: 2ajywdl.png]

Ş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: 16k9m5c.png]

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: xmu2dl.png]

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: 2din5m8.png]

Bu İşlemin Sonucunda Menümüzün Son Hali Bu Şekilde Olmalı,
[Resim: in4l5k.png]

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




.html CSS Menü Yapma.html (Dosya Boyutu: 816 Bayt | İndirme Sayısı: 57)
[Resim: do.php?imgf=153931671719921.gif]

-->.Net İle Kullanıcı Girişi, Üye Ol, Şifre Değiştirme
-->CSS İle Menü Hazırlama
Son Düzenleme: 20/05/2011, 10:20, Düzenleyen: ~~KaG~~.
Cevapla
#2
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
#3
Sn. alpeki99,
Her kelimenin ilk harfinin büyük olmasının sebebi el alışkanlığı... Dosyanın bitmiş halini ekledim.
[Resim: do.php?imgf=153931671719921.gif]

-->.Net İle Kullanıcı Girişi, Üye Ol, Şifre Değiştirme
-->CSS İle Menü Hazırlama
Son Düzenleme: 20/05/2011, 10:20, Düzenleyen: ~~KaG~~.
Cevapla
#4
Eline sağlık..
Cevapla
#5
Hocam, çok teşekkür ediyorum, ellerinize sağlık...
Cevapla
#6
Img-grin Herzaman Img-grin
Vakit Buldukca Devamını Getirecem İnş Img-grin
[Resim: do.php?imgf=153931671719921.gif]

-->.Net İle Kullanıcı Girişi, Üye Ol, Şifre Değiştirme
-->CSS İle Menü Hazırlama
Son Düzenleme: 21/05/2011, 12:22, Düzenleyen: ~~KaG~~.
Cevapla

Bir hesap oluşturun veya yorum yapmak için giriş yapın

Yorum yapmak için üye olmanız gerekiyor

ya da
Task