CSS ile menü yapimi

13.04.2017

Web sitelerinin vazgeçilmez ögelerinde biridir menüler. Menüler kullanicinin olusturdugumuz sayfalara hizli erisimini saglar. Bir çok site de Ürünler, Iletisim, Hakkimizda vb. bölümlerini menü ögesi olarak görürüz. Bu makalede sirasiz listeler(<ul>)ve CSS yardimi ile menü yapimini anlatacagiz. CSS ile yapilan menüler esnek, kolay düzenlenebilir, güzel görünen ve rollover efekti uygulana bilen menülerdir.

Sirasiz listeler(<ul>) ilk olarak listeleme islemleri için kullanilsa da CSS’in yükselisi ile birlikte menü olusturmak için kullanilmaya baslandi. Aslinda menülerde bir bakima link listeleri oldugu düsünülürse islevinin disinda kullanilmadigi da dogru bir tespittir. Kodumuzu yazmaya baslayalim:

:::html
<ul class="menu">
    <li><a href="index.html">Ana Sayfa </a></li>
    <li><a href="hakkimizda.html">Hakkimizda</a></li>
    <li><a href="urunler.html">Ürünler</a></li>
</ul>

Kodlama sonucu görüntü asagidaki gibi olacaktir.

Her linkin basindaki imgeleri kaldirmak için:

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

Bir çok web tarayicisi sirasiz listeleri(<ul>) yorumlarken yukarida görüldügü gibi otomatik olarak soldan bir padding/margin(bazi tarayicilarda padding uygularken bazilarinda margin uygular) mesafesi uygular bu mesafeyi sifirlamak için:

:::css
ul.menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

Bu bölüme kadar yazilan kodlamalar hem dikey menüler hem de yatay menüler içinde aynidir. Ancak bundan sonra dikey menü ve yatay menü için kodlar degisecektir.

Dikey Menüler

Dikey menülerde linkler yukaridan asagi dogru siralanmistir. Link elementi(a) inline-elementtir, her linke rollover özelligi kazandirmak için:

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

Biraz görselligi arttirirsak:

:::css
ul.menu a {
    display: block;
    color: #1B1B1B;
    background-color: #E2E2E2;
}

Linkler web tarayicisinin genisligi kadar uzayacaktir, kendi istedigimiz genislige sahip olmak için:

:::css
ul.menu a {
    display: block;
    color: #1B1B1B;
    background-color: #E2E2E2;
    width:8em;
}

Linkler arasina biraz bosluk verelim:

:::css
ul.menu a {
    display: block;
    color: #1B1B1B;
    background-color: #E2E2E2;
    width:8em;
    padding: .2em .8em;
}

Linklerin altindaki çizgileri kaldiralim:

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

simdi linklerimize rollover efekti vermek için a:hover kullanacagiz:

:::css
ul.menu a:hover
{
	background-color: #999;
}

son olarak linklerin arasini ayiralim:

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

Iste menümüzün son hali

kaynak:http://fatihhayrioglu.com



Adınız Soyadınız
İçerik
Son Eklenenler Konular
  • E-Ticaret çalismasi Satis sitesi
  • 2017-2018 Normal Ögretim Konu Anlatim Listesi
  • Asp Net- Veritabani Olusturma ve GridView Ekleme Kayit
  • Asp Net-Master page ile admin paneli
  • Vize 2 Mesleki Yabanci Dil 1
  • Vize 2 için Ag temelleri
  • Vize2 Internet Programciligi I
  • Vize 2 için ödev listesi- Programlamanin Temelleri
  • Programlamanin Temelleri Akis Diyagramlari Örnekleri
  • Bilgisayar Aglari-Ag Temelleri
  • Bilgisayar Mesleki Yabanci Dil Dersi Için Kelimeler 1
  • 2015-2016 Staj Kabul Listesi
  • 2016-2017 Yaz Staji Yapacaklarin Listesi
  • ASP NET ile veritabanindaki alani gösterirken kisaltarak görüntüleme
  • ASP NET - Plesk ile veritabani olusturma ve MS SQL veritabani olusturma islemleri
  • Dreamveaver
  • ASP Net
  • CSS
  • Html
  • Visual Studio C# ve C Console
  • Programlamanin Temelleri-Algoritma
  • Mesleki Yabancı Dil
  • Windows Server 2012
  • Ag Temelleri-Bilgisayar Aglari
  • Staj
  • Copyright (c) Ferdi DOĞAN