Daha önceki makalemdede belirttiğim gibi bu menü ardalan kaydırma yöntemi ile yapılmış bir menüdür. CSS’in bize kazandırdığı en büyük avantajlardan biridir ardalan konumunu istediğimiz gibi ayarlamak.

Bu metot ile tek resim kullandığımız için optimizasyon içinde bize büyük avantaj sağlar. 5 elemanlı bir resimli menüde her bir eleman için tek tek resim oluşturduğumuzda sayfa nette açılırken her bir resim için istek yapılacaktır, buda sayfanın yavaş açılmasına neden olacaktır. Bu metotta ise tek resim yüklenecek ve bu bize performans kazandıracaktır.

Çok basit bir xhtml kodu var. Birçok menü örneğinde olduğu gibi ul kodu;

<ul class="menu">
    <li id="mAnasayfa"><a href="#">Ana Sayfa</a></li>
    <li id="mUrunler"><a href="#">Ürünler</a></li>
    <li id="mHizmetler"><a href="#">Hizmetler</a></li>
    <li id="mBizeUlasin"><a href="#">Bize Ulaşın</a></li>
</ul>

Menümüzün resimlerini tek bir resim dosyası olarak hazırlayacağız. Biz burada normal ve fare imleci üzerine geldiğindeki halini(:hover) koyduk ama bunlara seçili ve tıklama durumlarınıda eklenebilir.

Şimdi CSS kodlarımızı yazalım.

ul için genel sıfırlama kodlarımızı yazalım

ul.menu{
    margin:0;
    padding:0;
    list-style:none;
    width:480px;
    height:40px;
}

Sırasız listelerin her nesnesini(li) yan yana dizmek için float:left tanımını yapmalıyız.

ul.menu li{
	float:left;
}

Linkler için genel tanımlarımızı yapalım

ul li a{
    display:block;
    width:120px;
    height:40px;
    text-indent:-9999px;
    outline:none;
    text-decoration:none;
    background:url(images/basit_resimli_menu.jpg) 0 0 no-repeat;
}

Her bir menü nesnesinin yukarıdaki resimdeki konumunu belirlemeye geldi sıra.

li#mAnasayfa a{background-position:0 0;}
li#mUrunler a{background-position:-120px 0;}
li#mHizmetler a{background-position:-240px 0;}
li#mBizeUlasin a{background-position:-360px 0;}

Basit bir şekilde resimli bir menü oluşturduk. Tabi buna birde fare üzerine geldiğindeki durumu ekleyerek daha belirgin bir hale getirebiliriz.

li#mAnasayfa a:hover{background-position:0 -40px;}
li#mUrunler a:hover{background-position:-120px -40px;}
li#mHizmetler a:hover{background-position:-240px -40px;}
li#mBizeUlasin a:hover{background-position:-360px -40px;}

Örneği görmek için tıklayınız

Not: Ardalan konumu belirleme

Sistem yukarıdaki mantık ile yürür. Genişliği ve yüksekliği belli olan alanın genel resimdeki konumunu belirterek menümüzü oluşturduk. Yukarıdaki örnek resimde “Ürünler”in fare üzerine geldiğindeki(:hover) görüntüsünü elde etmek için resimdeki konumu yukarıdan -40px, soldan -120px olarak atamalıyız. Ardalan konumu belirlerken resmin sıfır noktası sol üst köşesidir, bu nedenle değerler eksi(-) değer alır.

Kaynaklar

• http://www.webdesignerwall.com/tutorials/advanced-css-menu/
• http://superfluousbanter.org/archives/2004/05/navigation-matrix-reloaded/
• http://www.3point7designs.com/blog/2006/07/24/accessible-css-roll-over-images/
• http://simplebits.com/notebook/2003/09/30/accessible_imagetab_rollovers.html
• http://inobscuro.com/tutorials/read/19/
• http://dragan.yourtree.org/blog/en/2007/04/10/pure-css-rollover-menu/
• http://www.webvamp.co.uk/blog/coding/css-image-rollovers/
• http://www.codeitred.com/2008/08/12/apple-style-menu-tutorial-css-sprites

Başlıkları sadece bir konunun başlığı olarak göremeyiz, onlar aynı zamandaerişebilirlilik ve tasarım açısından da önemlidir.

Başlıklar normal metine göre daha büyük font değerlerinde ve farklı renklerletanımlanır genelde. W3C başlıkları bir konunun kısa açıklaması olarak algılarve ona göre davranır.

Bu önemle bahsedilen başlıkları nasıl kodlamalıyım? Web kodlamanın önemli parçalarından biri olan başlıkların tanımlanması bu makalede göreceğiz.

Başlık tanımlamanın bir çok yolu vardır. Biz web standartları ve iyi kodlamaaçısından konuyu irdeleyeceğiz.

<h1>CSS Dersleri</h1>

W3C başlıklarda kullanmamız için<h1>,<h2>,<h3>,<h4>,<h5> ve <h6> olmaküzere 6 adet başlık çeşidini bizim kullanımımıza sunmuş. Önem sırasına göresıralanmıştır, en önemlisi <h1>’dir.

W3C’nin başlık etiketlerinin kullanımının bize sağladığı avantajları sırası ile inceleyelim:

Hiyerarşi

Başlıklar doküman hiyerarşisini sağlamamıza yardımcı olur. Bir çok websitesinde başlıklar belli bir hiyerarşiye göre sıralanır ve bu hiyerarşi metninanlaşılabilirliğini arttır ve sayfaları bir düzene sokar. <h1> ve<h6> sıralaması hiyerarşi için biçilmiş kaftandır. Örnek için tıklayınız.

Arama Motoruna Uygunluk

Arama motorları için <hx>’ler çokkullanışlıdır. <hx> kullanımında arama motorlarıküçük çaba ile sayfadaki başlıkları öğrenebilmektedirler.

Arama motorları <title> içindeki ve<meta> etiketi içindeki kelimeleri sayfa içinde ararlar bulamadıklarındao sayfayı sıralamadan düşürürler. Ancak başlıkla ilgi üzerine çekilmişkelimeler arama motorları için bir velinimettir. Tabi arama motorlarının bizimsitemizi indekslemeside bizim için bir velinimettir.

Kolay Şekillendirme

Kolay şekillendirilir. Çünkü <h1> etiketi<b> ve <p> gibi CSS de tekil olarak atama yapılan bir etikettir. Bunedenle CSS tanımlaması kolay olacaktır.

<h1> vd. başlıklar CSS tanımlaması olmasa dabaşlıklarınızı kalın ve büyük font değerlerinde gösterecektir. Tüm araçlarda ve eskisürüm tarayıcılarda başlıklar ayırt edilecektir.

Sayfalarımızda <h1> kullanarak kolaylıksağlarız. Çünkü <h1> tekil etiketlerdendir. Eğer bir atama yaptıktansonra buna bir ekleme yapmak istersek CSS ile bunu çok kolay yaparız Örneğin

<h1>CSS Dersleri </h1>

Bu başlığın boyutunu, rengini ve font-şeklinideğiştirebiliriz CSS ile

h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
}

Biz burada çok basit bir şekilde tüm başlıklarıarial font, 24 piksel boyut ve mavi renk ataması yaptık.

Daha sonra bu başlığın altına 1 piksel boyutundabir gri alt çizgi çizmek istedik.

h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
padding-bottom: 4px;
border-bottom: 1px solid #999;
}

padding-bottom ile çizgi ile başlıkarasındaki boşluğu ayarladık ve border-bottom değeri ile debaşlık altına çizgiyi çizdik.

Değişebilir İkonlar

CSS’i kullanarak başlıklarımızın soluna zemin resmi olarak bir ikon koyabiliriz. Bu metot ile başlıklardaki bir değişiklikile tüm sitedeki başlıklar değişecektir. Ayrıca tüm başlıklar için kullanılacak ikonları bir resim halinde hazırlanıp kullanım kolaylığı sağlanabilir. Bir örnek yaparsak

Tüm başlıkların ikonları tek bir
resim olarak hazılranmış hali

Resim hazırlanırken ikon aralarındaki farkı orantılı ayarlar isek kodlama yaparken bize kolaylık sağlayacaktır. Aşağıda bunu daha iyi göreceğiz.

Html kodları:

<h1 class="hata">Hakkımızda </h1>
<p>At lupatum delenit aigue duos dolor tempor sunt in culpa qui officia d dereud facils est er expedit distinc peccand quaerer en imigent cupidat. Incita visset, accom ex robore ad quam vis vadisen vlavis confecs nis revinc tae.</p>
<h1 class="yemek">Ürünler</h1>
<p>Oppidi his mowni bus suifs fortunis desp erate coe magno recipei ban ibi se rursus isdem opport unitel rursus isdem opport loci defen porti busi. Situs era eod oppi dorum, ut posta. </p>
<h1 class="yaz">Bize Yazın</h1>
<p>Incita visset, accom ex robore ad quam vis vadisen vlavis confecs nis revinc tae. </p>
<h1 class="yardim">Yardım</h1>
<p> At lupatum delenit aigue duos dolor tempor sunt in culpa qui officia ddereud facils est er expedit distinc peccand quaerer en imigentcupidat. Incita visset, accom ex robore ad quam vis vadisen vlavisconfecs nis revinc tae.</p>

CSS kodları:

h1.hata{
    font:bold 34px/35px "Lucida Grande",Arial, Helvetica, sans-serif;
    color: #3A45A1;
    background: url(images/basliklar.gif) 1px 3px no-repeat;
    padding-left: 40px;
}
h1.yemek{
    font:bold 34px/35px "Lucida Grande",Arial, Helvetica, sans-serif;
    color: #A6685A;
    background: url(images/basliklar.gif) 1px -40px no-repeat;
    padding-left: 40px;
}
h1.yaz{
    font:bold 34px/35px "Lucida Grande",Arial, Helvetica, sans-serif;
    color: #36393B;
    background: url(images/basliklar.gif) 1px -80px no-repeat;
    padding-left: 40px;
}
h1.yardim{
    font:bold 34px/35px "Lucida Grande",Arial, Helvetica, sans-serif;
    color: #C90A0A;
    background: url(images/basliklar.gif) 1px -120px no-repeat;
    padding-left: 40px;
}

Sol tarafa ikon konduğu için yazı ile ikon arasındaki mesafeyi ayarlamak için padding-left değeri40 piksel atanmıştır ve zemin resmi olarakta bir resim tekrarsız olarak konmuş ve font değeri 34px ve satır yüksekliği 35px tanımlanarak ikon yazı oranı sağlanmıştır.

Dikkat ederseniz genelde her başlık için değişen sadece renk ve zemin resmi konumudur. Aslında bu başlıklar için genel bir sınıflandırma yapıp farklı özellikleri için her birine özel tanımlarda yapabilirdik. Yukarıda yazdığımız kod daha genel bir kod yazımı için uygundur.

Örneği görmek için tıklayınız.

MetinYerine Resim koyma Metodu ile Başlık Oluşturmak

Bazen başlıkları resim yapmamız gerektiğidurumlar olabilir bunun için Metin Yerine Resim Koyma Metotlarından biriniuygulayabiliriz. Ayrıntılı bilgi için "Metin Yerine Resim/FlashEkleme Teknikleri (Image Replacement)" makalemize göz atın.

• http://www.communitymx.com/content/article.cfm?cid=A1A37
• http://www.paulmichaelsmith.com/blog/examples/headingicons/sample.php
• http://eu.wiley.com/WileyCDA/WileyTitle/productCd-047009754X.html
• http://www.sitepoint.com/books/cssdesign1/
• http://www.friendsofed.com/book.html?isbn=1590593812