Konu Araçları | Konu Seçenekleri | Gösterim Stili
Tarih
20/05/2011 09:26
Konu Sahibi
~~KaG~~
Yorumlar
6
Okunma
11080
Konuyu Oyla:
  • Derecelendirme: 5/5 - 1 oy
  • 1
  • 2
  • 3
  • 4
  • 5
~~KaG~~

~~KaG~~

Aktif Üye
29911
Ku.... Ağ....
 25
 56
 478
 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: 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







alpeki99

alpeki99

Uzman
6
Ol....
 39
 162
 6.134
 29/10/2008
 Bursa
 Yazılım Geliştirici
 Ofis 2010 32 Bit
 22/06/2019,10:56
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.

...........
~~KaG~~

~~KaG~~

Aktif Üye
29911
Ku.... Ağ....
 25
 56
 478
 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.



ozanakkaya

ozanakkaya

Kurucu
1
Oz.... Ak....
 39
 482
 12.116
 29/01/2008
 Denizli
 Memur
 Ofis 2010 32 Bit
 Bugün,00:31
Eline sağlık..



"Boş Örnek Eklerim, Yapıp Verirler" demeyin, örneğinizi hazırlayın.
Komplike kod talebiniz var ise İletişim bağlantısından bize ulaşın. 
Cebelleşmezsen Öğrenemezsin. 

...........
durkheim

durkheim

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



~~KaG~~

~~KaG~~

Aktif Üye
29911
Ku.... Ağ....
 25
 56
 478
 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



...........

Konuyu Okuyanlar: 1 Ziyaretçi

Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
Video Css İle Menü Yapım Videosu kral4 0 1.215 10/06/2017, 15:29
Son Yorum: kral4
  CSS Yatay Menü Örneği ~~KaG~~ 5 6.062 20/06/2011, 09:49
Son Yorum: ~~KaG~~

Türkçe Çeviri: MCTR, Yazılım: MyBB, © 2002-2019 MyBB Group.