Konular
Videolar
Sunular
Testler

CSS ile Dikey Menü Yapımı

Web sitelerinin vazgeçilmez öğelerinde biridir menüler. Menüler kullanıcının oluşturduğumuz sayfalara hızlı erişimini sağlar. Bir çok site de Ürünler, İletişim, Hakkımızda vb. bölümlerini menü öğesi olarak görürüz. Bu makalede sırasız listeler()ve CSS yardımı ile menü yapımını anlatacağız. CSS ile yapılan menüler esnek, kolay düzenlenebilir, güzel görünen ve rollover efekti uygulana bilen menülerdir
www.dijitalders.com

Sırasız listeler(<ul>) ilk olarak listeleme işlemleri için kullanılsa da CSS’in yükselişi ile birlikte menü oluşturmak için kullanılmaya başlandı. Aslında menülerde bir bakıma link listeleri olduğu düşünülürse işlevinin dışında kullanılmadığı da doğru bir tespittir. Kodumuzu yazmaya başlayalım:

  1. <ul class="menu">
  2. <li><a href="index.html">Ana Sayfa </a></li>
  3. <li><a href="hakkimizda.html">Hakkımızda</a></li>
  4. <li><a href="urunler.html">Ürünler</a></li>
  5. </ul>

Kodlama sonucu görüntü aşağıdaki gibi olacaktır.

Her linkin başındaki imgeleri kaldırmak için:

  1. ul.menu { list-style-type: none; }

Bir çok web tarayıcısı sırasız listeleri(<ul>) yorumlarken yukarıda görüldüğü gibi otomatik olarak soldan bir padding/margin(bazı tarayıcılarda padding uygularken bazılarında margin uygular) mesafesi uygular bu mesafeyi sıfırlamak için:

  1. ul.menu {
  2. list-style-type: none;
  3. padding: 0;
  4. margin: 0;
  5. }

Bu bölüme kadar yazılan kodlamalar hem dikey menüler hem de yatay menüler içinde aynıdır. Ancak bundan sonra dikey menü ve yatay menü için kodlar değişecektir.

Dikey Menüler

Dikey menülerde linkler yukarıdan aşağı doğru sıralanmıştır. Link elementi(a) inline-elementtir, her linke rollover özelliği kazandırmak için:

  1. ul.menu a { display: block; }

Biraz görselliği arttırırsak:

  1. ul.menu a {
  2. display: block;
  3. color: #1B1B1B;
  4. background-color: #E2E2E2;
  5. }

Linkler web tarayıcısının genişliği kadar uzayacaktır, kendi istediğimiz genişliğe sahip olmak için:

  1. ul.menu a {
  2. display: block;
  3. color: #1B1B1B;
  4. background-color: #E2E2E2;
  5. width:8em;
  6. }

Linkler arasına biraz boşluk verelim:

  1. ul.menu a {
  2. display: block;
  3. color: #1B1B1B;
  4. background-color: #E2E2E2;
  5. width:8em;
  6. padding: .2em .8em;
  7. }

Linklerin altındaki çizgileri kaldıralım:

  1. ul.menu a {
  2. display: block;
  3. color: #1B1B1B;
  4. background-color: #E2E2E2;
  5. width:8em;
  6. padding: .2em .8em;
  7. text-decoration: none;
  8. }

şžimdi linklerimize rollover efekti vermek için a:hover kullanacağız:

  1. ul.menu a:hover
  2. {
  3. background-color: #999;
  4. }

son olarak linklerin arasını ayıralım:

  1. ul.menu li { margin: 0 0 .2em 0; }

İşte menümüzün son hali


Kaynak www.fatihhayrioglu.com/

29,079 Okunma 0 Yorum 01/08/2007 13:27:12

Yorumunuzu Ekleyin
Div ile Bölümler Oluşturmak

Div tagı yardımı ile sayfalı %40 ve %60 şeklinde ikiye bölüp içerisine iki farklı içerik yerleştirme ile ilgili bir çalışma

72,634 Okunma 2 Yorum 04/11/2008 16:41:55 31/05/2014 16:44:34

CSS ile Menü Yapımı

CSS'in menü yapımına etkileri

52,570 Okunma 1 Yorum 13/07/2007 17:53:23 28/12/2018 21:20:47

Renkli Form Yapımı

CSS yardımı ile renkli form kutucuklarının nasıl yapıldığına bir örnek

23,247 Okunma 0 Yorum 10/07/2007 03:35:08

CSS ve Clip

19,805 Okunma 0 Yorum 13/07/2007 20:15:21 28/05/2014 20:18:55

CSS Animasyon Örnekleri

Bir kaç faydalı cssle yapılan animasyon örneği...

922 Okunma 0 Yorum 27/06/2019 10:59:51 27/06/2019 11:21:00

Yükleniyor...