Menümüzü oluştururken Css3′ün bir takım özelliklerinden de yararlanacak ve görünümü daha iyi hale getirmek adına menü kodlarımızda kullanacağız. Şimdi dilerseniz hemen uygulamamıza geçelim.

UYGULAMA ÖNİZLEME UYGULAMA İNDİR (3kb)

XHTML
Her zaman olduğu gibi öncelikle Xhtml kodlarımızı yazarak uygulamamıza başlıyoruz.

<div id="menu">
<ul>

<li><a href="#" class="secim">Reşat Nuri Güntekin</a>
<ul>
<li><a href="#">Çalıkuşu</a></li>
<li><a href="#">Yaprak Dökümü</a></li>
<li><a href="#">Son Sığınak</a></li>
</ul>
</li>

<li><a href="#" class="secim">Halide Edip Adıvar</a>
<ul>
<li><a href="#">Sinekli Bakkal</a></li>
<li><a href="#">Ateşten Gömlek</a></li>
<li><a href="#">Vurun Kahpeye</a></li>
</ul>
</li>

<li><a href="#" class="secim">Namık Kemal</a>
<ul>
<li><a href="#">İntibah</a></li>
<li><a href="#">Vatan Yahut Silistre</a></li>
</ul>
</li>

<li><a href="#" class="secim">Peyami Safa</a>
<ul>
<li><a href="#">Dokuzuncu Hariciye Koğuşu</a></li>
<li><a href="#">Fatih - Harbiye</a></li>
</ul>
</li>

<li><a href="#" class="secim">Ömer Seyfettin</a>
<ul>
<li><a href="#">Kaşağı</a></li>
<li><a href="#">Başını vermeyen şehit</a></li>
</ul>
</li>

<br style="clear:both" />
</ul>
</div>

CSS
Menü görünümünü belirleyecek olan stil tanımlamalarını yapıyoruz.

#menu {
font:14px arial, verdana, sans-serif;
width:720px
}

#menu ul {
list-style:none;
margin:0;
background:#3ca0df url(menubg.gif) repeat-x bottom; /* menü arkaplan resmimiz tanımlanıyor. */
padding:5px;

/* Firefox, Chrome, Safari tarayıcılar için Border radius ve Shadow tanımları yapılıyor */

-moz-border-radius:4px; /* menümüzün yuvarlak köşeleri tanımlanıyor. */
-moz-box-shadow:0px 1px 2px #333; /* burada menümüze çok küçük bir gölge efekti veriyoruz */

-khtml-border-radius:4px; /* menümüzün yuvarlak köşeleri tanımlanıyor. */
-khtml-box-shadow:0px 1px 2px #333; /* burada menümüze çok küçük bir gölge efekti veriyoruz */

-webkit-border-radius:4px; /* menümüzün yuvarlak köşeleri tanımlanıyor. */
-webkit-box-shadow:0px 1px 2px #333; /* burada menümüze çok küçük bir gölge efekti veriyoruz */
}

#menu li { /* menümüzün liste tanımı yapılıyor. */
list-style:none;
padding:0;
margin:0;
float:left;
position:relative;
}

#menu a {
color:#fff;
text-decoration:none;
padding:4px;
display:block;
text-shadow:0px 1px 2px #000;
margin:0px 10px 0px 10px;
}

#menu a:hover {
color:#fff;
text-decoration:none;
padding:4px;
background:#333;
-moz-border-radius:3px; /* menü bağlantılarımıza küçük bir gölge efekti veriyoruz. */
-khtml-border-radius:3px;
-webkit-border-radius:3px;
display:block;
}

/* Alt menülerimizi gizliyor ve sonrasında alt menünün stil tanımlamalarına geçiyoruz. */

#menu li ul {
display:none; /* Alt menülerimizi gizliyoruz! */
position:absolute;
padding:0px;
margin:0px;
}

#menu li:hover > ul {
display:block; /* Alt menülerimiz #menu li üzerine fare ile gelinince görünecek şekilde hover ile gösterimini sağlıyoruz. */
position:absolute;
padding:0px 0px 0px 0px; /* margin ve padding değerlerini uygun şekilde ayarlıyoruz. */
margin:0px 10px 0px 10px;
width:150px;
left:0
}

/* Alt menü görünümünü değiştirecek olan stilleri yazıyoruz. */

#menu ul ul {
-moz-border-radius:4px; /* alt menümüzün köşelerini yuvarlıyoruz. */
-webkit-box-shadow:0px 1px 2px #2e83ff; /* ve burada da biraz gölge katıyoruz. */
-khtml-box-shadow:0px 1px 2px #2e83ff; /* ve burada da biraz gölge katıyoruz. */
width:150px;
margin:0px 10px 0px 10px;
border:1px solid #777;
}

#menu ul ul li {
display:block;
float:none;
}

#menu ul ul a { /* alt menü listemizin linklerini tanımlıyoruz. */
display:block;
font:14px/20px arial, verdana, sans-serif;
margin:0;
background:#888;
border-bottom:1px solid #777
}

#menu ul ul a:hover {
background:#f5cd14;
color:#fff;
}

jQUERY
Son olarak alt menünün slayt şeklinde görünmesi için küçük bir jQuery kodu ekliyoruz.

$(document).ready(function () {	

	$('#menu li').hover(
		function () {
			// #menu li üzerine gelince alt menümüzün SlideDown ile görünmesini sağlıyoruz.
			$('ul', this).slideDown(200);

		},
		function () {
			// imlecimiz ul üzerinden kalkınca alt menümüz SlideUp ile kapanıyor.
			$('ul', this).slideUp(200);
		}
	);

});

Neler Yaptık?
Kodlarımızı yazdıktan sonra kısaca neler yaptığımızı anlatmak istiyorum. Öncelikle Xhtml kodlarıyla basit olarak bir sırasız açılır menü (Unordered List) oluşturduk.

Css kodlarımızla tanımladığımız menü isimli id içinde menü görünümlerini ayarladık. Önce menü bağlantılarının görünümünü tanımladık. Alt menülerin görünümünü gizlemek için #menu li ul parametresine display:none değeri verdik. Böylelikle alt menüleri gizledik.

Sonrasında alt menülerin görünür hale gelmesi için #menu li:hover > ul bölümüne display:block değerini verdik. Böylelikle menü bağlantılarımızın üzerine gelince şayet bir alt menü içeriyorsa bu alan görünmeye başlayacak.

Bu aşamadan sonra menümüzün görünümüyle ilgili stilleri biraz daha genişlettik. Css3′ün Box Shadow, Text Shadow, Border Radius gibi özelliklerinden faydalandık. Bu parametrelerin herbirini daha önceki yazılarımızda anlatmıştık. Şayet kullanımı bilmiyorsanız önceki yazılarımızdan faydalanabilirsiniz.

Son olarak jQuery’den yararlanarak Css ile gizlediğimiz alt menülerin görünümünün slayt şeklinde olmasını sağladık. Css3 ve Xhtml ile kolayca menümüzü oluşturduk ve görünümünü düzenledik. Menünün padding ve margin değerlerinin orantılı kullanımına dikkat ettik.

(İndireceğiniz örnek dosyada style.css ve index.html kodları içerisinde yazmış olduğum kodlarla ilgili birtakım açıklamalar yazdım. Bunları okumanız menünün nasıl yapıldığını anlamanız adına yararlı olacaktır. Bu menüyü, Firefox, Chrome ve Safari tarayıcılarda sorunsuz olarak görüntüleyebilirsiniz. Atladığım veya unuttuğum bir nokta varsa şimdiden özür dilerim)

UYGULAMA ÖNİZLEME UYGULAMA İNDİR (3kb)

Bu makalemizde de Css ile basit bir yatay menu yapacak, bu menüye gölge efekti verecek ve biraz da jQuery ile animasyon katacağız. Özellikle box-shadow ve border-radius bu makalemizde üzerinde duracağımız konulardan.

UYGULAMA ÖNİZLEME UYGULAMAYI İNDİR (3kb)

1. ADIM Xhtml
Her uygulama yazımızda olduğu gibi önce menümüzün Xhtml kodlarını yazarak başlıyoruz.

<div id="menu">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Xhtml / Css</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Fireworks</a></li>
<li><a href="#">Dreamweaver</a></li>
<li><a href="#">Php / Mysql</a></li>
<li><a href="#">Flash / AS</a></li>
<li><a href="#">Worms Armageddon :)</a></li>
<br style="clear:both" />
</ul>
</div>

2. ADIM CSS
Menümüzün genel görünümünü düzenleyecek olan stilleri Css kodlarımız ile tanımlıyoruz. Css kodlarında kullandığımız parametrelere ilişkin açıklamaları makalenin ilerleyen bölümlerinde okuyabilirsiniz.

#menu {font:14px arial, verdana, sans-serif;-moz-box-shadow:0px 2px 5px  2px #999; -webkit-box-shadow:  0px 2px 5px  2px #999;} /* Burada menümüze bir miktar gölge veriyoruz */

#menu ul{background:#fff url(../img/menubg.gif) repeat-x;margin:0;padding:0;list-style:none;border:1px solid #c0c0c0;padding:10px 0px 10px 0px;}

#menu li{margin:0;display:inline;float:left;padding:0px;}

#menu ul li a {padding:10px;color:#444;text-decoration:none;} /* Menü bağlantılarımızı burada tanımlıyoruz */

#menu ul li a:hover { /* Bağlantılarımızın hover durumundaki tanımlamalarını yapıyoruz */
padding:10px;
background:#6bbef0 url(../img/menu2.gif) repeat-x;
color:#fff;
text-decoration:none;

-moz-box-shadow:0px 2px 5px  2px #2e83ff;		/* Bu iki satırda gölge tanımlamaları yapılıyor. */
-webkit-box-shadow:  0px 2px 5px  2px #2e83ff;

-moz-border-radius: 0px 0px 4px 4px;			/* Bu iki satırda ise yuvarlak köşeler için tanımlamalar yapılıyor */
-webkit-border-radius: 0px 0px 4px 4px;
}

3. ADIM jQuery
Bu adımda menümüz bağlantıların etkileyecek küçük bir animasyon oluşturuyoruz.

<script>
	// menü bağlantılarımız için küçük bir animasyon oluşturuyoruz

	$(document).ready(function() {
			$('#menu a').hover(function() { // fare üzerine gelince yapılacaklar
				$(this).animate({ paddingBottom: '15px', paddingTop: '10px'  },300);

			}, function() { // fare gidince yapılacaklar
				$(this).animate({ paddingBottom: '10px', paddingTop: '10px' }, 300);
			});
		});

	</script>

Menümüz Hakkında Küçük Ayrıntılar
Xhtml ve Css kodlarında görmüş olduğunuz gibi gayet basit ve sade bir menü oluşturduk. Menüye artı olarak kattığımız şey sadece gölge efekti ve bağlantıların hover efektinde vermiş olduğumuz yuvarlak köşe görünümü. Geri kalan kısmı ise jQuery ile basit bir animasyon yaparak hallettik. Xhtml kodlarında klasik olarak bir ul li menü dizilimi yaptık ve etiketlerimizi kapattık. Css kodlarında ise ul ve li etiketlerine uygun padding ve görünüm değerleri atadık.

Box Shadow ve Border Radius değerlerimizi neye göre verdik?
Aslında bu makaleyi yazmamın bir amacı da box-shadow ve border-radius parametrelerini anlatabilmekti. Örneğimizde de hem Menu isimli div etikemizte hem de menümüzün bağlantılarında bu parametreleri kullandık. Şimdi kısaca bu parametrelerin kullanımından bahsedelim.

Öncelikle box-shadow’dan başlamak istiyorum. Box shadow isminden de anlaşılacağı üzere oluşturduğumuz alanlara gölge etkisi vermemizi sağlıyor. Kullanımı ise şöyle;

-moz-box-shadow:5px 8px 10px 6px #f91365;

Parametrede verdiğimiz ilk değer (5px) gölgemizin yatay konumda (X ekseninde) ne kadar yayılacağını gösteriyor. Eğer bu değeri pozitif olarak verirsek bu yayılma alanın sağına doğru oluyor. Değeri – (eksi) olarakta vermek mümkün. 0 değeri ise X ekseninde (Horizontal konumda) yayılma olmayacağını gösteriyor.

Sonra verdiğimiz 8px’lik değer ise dikey konumda (Y ekseninde) yayılma miktarını gösteriyor. Aynı X ekseninde olduğu gibi yine buraya da eksi değerler atayabiliyorsunuz. Değeriniz pozitif bir değer olursa alanın altına doğru gölgeniz yerleşiyor. 0 değeri Y ekseninde gölgeyi ortadan kaldırıyor.

Vermiş olduğumuz 3. değer ise (10px) gölgemizin ne kadar bulanık görüneceğini belirleyen blur değeri. Bu değeri eksi olarak vermemiz mümkün değil. Bulanıklık değerini verdiğimiz gölge oranına göre ayarlamak en iyisi. Bu sayede gölgenizin daha iyi şekilde görünmesini sağlıyorsunuz.

Son vermiş olduğumuz değer ise (6px) gölgemizin hem bulanıklık hem de x-y ekseninde genel yayılımını (Spread) gösteriyor. Bu değeri eksi olarak atayabiliyoruz. Bu durumda gölgemizin keskinliği biraz azalıyor. Pozitif değerlerde ise yükseliyor.

Gelgelelim border-radius değerine. Border radius parametresi ile belirlediğimiz alanların köşelerini yuvarlatabiliyoruz. Şimdi bir örnek kod yazalım ve üzerinden değerleri açıklayalım;

-moz-border-radius: 8px 6px 4px 2px;

Border radius’un verilen değerleri nispeten daha kolay anlaşılır. 8px’lik ilk değer üst soldaki yuvarlamanın değerini, sonraki 6px’lik değer üst sağdaki değeri, 4px’lik değer alt sağdaki değeri, son değer ise alt soldaki değeri ifade etmekte. Daha kolay bir anlatımla sırasıyla bu dört değer “saat yönünü” takip ediyor.

Tarayıcı Uyumluluğu
Ne yazık ki her uygulamada olduğu gibi burada da tarayıcı uyumuna takılıyoruz. Örneğimizde verdiğimiz kodlar Firefox 3.6, Google Chrome ve Safari tarayıcılarda sorunsuzca görüntülenecektir. (Bu nedenle sadece -moz-box-shadow değil -webkit-box-shadow değerini de yazdık, bu sayede Webkit tabanlı tarayıcılarda da uyum sağladık) Ne yazık ki Opera 10.10 ve IE8 desteği bulunmuyor. Yani menü örneğimizi belli taraycılar ile görüntüleyebilirsiniz. Ben her zaman olduğu gibi Firefox tavsiye ediyorum. (Zaten uygulamayı geliştirirken de hep Firefox ile izledim)

Tarayıcıların ilerleyen dönemlerde CSS3 desteğini arttırması ile birlikte bu tür örneklere daha çok rastlayacağız. Bu nedenle sanırım bu tür uygulamaları kullanmak için biraz erken. Hele ki IE faktörü göz önüne alınırsa ne demek istediğim daha kolay anlaşılır sanırım. Makalemizde elimden geldiğince kodları sade tutmaya ve amacımıza yönelik olarak sade bir anlatım kullanmaya çalıştım. Eksiklerim veya atladığım noktalar olursa bunları yorumlarınızla tartışmak isterim. Umarım sizler için faydalı olmuştur.

Kaynaklar
http://www.w3.org/TR/2008/WD-css3-background-20080910/#border-radius
http://www.w3.org/TR/2008/WD-css3-background-20080910/#the-box-shadow
https://developer.mozilla.org/en/CSS/-moz-box-shadow
http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/
http://css.flepstudio.org/en/css3/box-shadow.html
http://www.css3.info/preview/box-shadow/

Günümüz web trendlerinin başında kullanıcılarınızla etkileşim ve iletişime geçmek geliyor. Bu gönderimizde sayfamıza jQuery yardımıyla bir iletişim form alanı koyacak ve ziyaretçinin tetiklemesiyle bu alanı gösterip geri kapatabilecek bir uygulama yapacağız. Dilerseniz hemen uygulamamıza geçelim.

UYGULAMA ÖNİZLEME UYGULAMAYI İNDİR (6kb)

1. ADIM: XHTML
Her zaman olduğu gibi öncelikle uygulamamızın Xhtml kodlarını yazarak başlıyoruz. Aşağıda yer alan kodları sayfamıza kaydedelim.

<div class="iletisimbuton">
<a href="#" class="ac">İLETİŞİM</a>
<a href="#" class="kapat" style="display: none">KAPAT</a>
</div>

<div id="iletisimformu">
<h2>İLETİŞİM FORMU </h2>
<form name="iletisim" method="post" action="">
<label>Adınız Soyadınız </label> <input type="text" name="isim" />
<label>E-Posta Adresiniz</label> <input type="text" name="e-posta" />
<label>Web Adresiniz</label> <input type="text" name="web" />
<label>Mesajınız</label> <textarea name="mesaj"></textarea>
<label></label><input type="submit" name="gonder" value="GÖNDER" />

</form>
</div>

Xhtml kodlarında ne gibi bir işlem yaptığımızı yazımızın sonunda bulabilirsiniz. Şimdi hemen örneğimize ait CSS kodlarını yazalım.

2. ADIM: CSS

.iletisimbuton {background:#81c8f4;
padding:6px;width:auto;
margin:50px 0px 0px 0px;
position:fixed;
left:0;
border:2px solid #6abee8;
}

a.ac {background:url(img/email_go.png) no-repeat;padding:0px 0px 0px 20px;color:#fff;text-decoration:none;font:bold 14px arial, verdana, helvetica, sans-serif;}
a.kapat {background:url(img/cross.png) no-repeat;padding:0px 0px 0px 20px;color:#1a79a8;text-decoration:none;font:bold 14px arial, verdana, helvetica, sans-serif;}

#iletisimformu {
width:350px;
background:#3ea2e1 url(img/formbg.gif) repeat-x;
padding:5px;
color:#fff;
border:2px solid #6abee8;
margin:90px 0px 0px -400px;
display:block;
position:fixed;top:0;left:0;
}

#iletisimformu h2 {

color:#fff;
font:18px/36px arial, verdana, helvetica, sans-serif;
padding:0px 0px 6px 6px;
margin:0;
}

#iletisimformu label {
float: left;
width: 100px;
font:12px arial, verdana, helvetica, sans-serif;
padding:4px;
clear:both;
margin:8px 2px 8px 2px;
}

#iletisimformu input{background:#fff;border:2px solid #999;margin:8px 2px 8px 2px;padding:4px}
#iletisimformu textarea{background:#fff;border:2px solid #999;margin:8px 2px 8px 2px;padding:4px;width:200px;height:100px}

#iletisimformu input:focus, #iletisimformu textarea:focus {border:2px solid #bee2f4;background:#f5f5f5}

3. ADIM: jQUERY
Bu adımda yazdığımız kodlara göre oluşan elemanları tetikleyecek jQuery kodlarını yazıyoruz.

  <script>
$(document).ready(function() {
	$(".iletisimbuton a").click(function() { //mouse in
		$("#iletisimformu").animate({ marginLeft: '0px' },100);

	});

	$("a.kapat").click(function() { //mouse in
		$("#iletisimformu").animate({ marginLeft: '-400px' },100);

	});
	$(".iletisimbuton a").click(function () {
		$(".iletisimbuton a").toggle();
	});
});

  </script>

İŞİN ÖZETİ
Gerekli tüm kodlarımızı yazdıktan sonra biraz işin teknik kısmından bahsetmek istiyorum. Şayet uygulamamızın örnek görünümünü incelediyseniz sayfamız üzerinde var olan bir iletişim butonu olduğunu görürsünüz. Bu iletişim butonu sayfamız üzerinde sabit durmakta ve üzerine tıklandığında ise iletişim formumuz görünmekte. İleşitim formunun sayfamızda görünmemesi için margin değerlerinde sol tarafa eksi margin değeri verdiğimizi görebilirsiniz. Yine aynı şekilde iletişim butonu üzerine tıklandığında ise iletişim formumuz kaybolmakta.

İşin Javascript/jQuery bölümüne gelirsek oluşturduğumuz iletişim butonu isimli ögeye fare ile tıklandığında iletişimformu isimli id’mizin görünmesini sağlıyoruz. Görünme olayını ise jQuery’nin Animate özelliğinden yararlanarak iletisimformu isimli id’nin soldaki margin değeri 0px olacak şekilde sağlıyoruz. Bu da demek oluyor ki iletisimbuton isimli ögeye tıklandığı zaman iletisimformu isimli id marginLeft değeri 0px olana kadar bir yol katedecek :)

İletişim butonun açık ve kapalı olarak değişebilmesi içinse jQuery’de Toggle olayından yararlanıyoruz. İlk tıklamadan sonra toggle olayına giren iletisimbuton sınıfı a.kapat sınıfına dönüşüyor. Kapat sınıfına yapılan tıklama tetiği ile 0px marginLeft değere gelen iletisimformu isimli id tekrar eski yerine dönüyor.

Bu anlatımla size biraz karışık gelebilir ama yazılanları okuyup sonra örneği gördüğünüzde herşey daha iyi anlaşılacaktır. Görüldüğü üzere uygulamamızda aşırı jQuery ve Css/Xhtml kodu kullanmadık. Sadece doğru oluşturduğumuz ögelere doğru değerler ve olay başlatımları vererek uygulamamızı tamamladık.

Aslına bakarsanız bir id seçiciye verilen eksi margin değerlerinin sonradan jQuery ile görünür olmasını sağlayarak tasarımda birçok alanda bunu kullanabiliriz. Bu sayede menüler, navigasyonlar ve sayfa içi bilgilendirmeler yapılabilir. Ben bu örneğimizde bir iletişim paneli yapmayı uygun gördüm. Siz de örnek kodlardan yola çıkarak kendi uygulamanızı yapabilirsiniz.

Umarım sizler için faydalı bir anlatım olmuştur. Bir başka makalemizde görüşmek üzere.

Resimlerin üzerine fare ile gelindiğinde açıklama gösterilmesi, resmin tanımladığı konunun veya makalenin bağlantısının verilmesi son dönemlerde oldukça sık kullanılan bir özellik…

UYGULAMA ÖRNEĞİ ÖRNEĞİ İNDİR (37kb)

UYGULAMANIN MANTIĞI

Örneğimize ait anlatıma geçmeden önce biraz işin mantığını anlatmak istiyorum. Böylelikle uygulamayı ve yapımını daha kolay kavrayabiliriz.

Aslına bakarsanız yaptığımız iş çok basit. Css ile oluşturduğumuz bir sınıf içine resmimizi gösterecek olan Xhtml kodunu yazıyoruz. Bu kodun bitiminde bir Span etiketi açarak resmimize ait tanımlamayı yazıyor ve Span etiketimizi kapatıyoruz. (Span etiketimizi Css kodları içinde display:none; değeriyle görünmez hale getireceğiz)

Xhtml kodumuzu bu şekilde yazdıktan sonra Css ile resim gösterimi ve tanımlaması için ayrı ayrı kullanacağımız Xhtml etiketlerinin stillerini tanımlıyoruz. Span ve diğer sınıfların Margin ve Padding değerlerini uygulamamıza uygun şekilde veriyoruz. (Bu da tasarımın matematiği sanırım :)

İşin jQuery boyutunda ise geriye Css kodlarımızda görünmez yaptığımız Span etiketini .Resim isimli sınıf üzerine gelince görünür hale getirmek kalıyor. jQuery’nin slideDown ve slideUp efektlerini açıklama gösterimi için kullanıyoruz. Çok uzun bir açıklama oldu sanırım, isterseniz hemen kodlarımızı yazalım ve uygulamamızı hayata geçirelim.

1. ADIM: XHTML KODLARININ YAZIMI
Aşağıdaki kodları boş bir metin editöründe açarak yazalım ve index.html olarak kaydedelim.

<div id="gosterimalani">
<div class="resim">
<a href="#"><img src="resim1.gif" alt="" /></a>
<span>Resim 1'e ait açıklama</span>
</div>

<div class="resim">
<a href="#"><img src="resim2.gif" alt="" /></a>
<span>Resim 2'ye ait açıklama</span>
</div>

<div class="resim">
<a href="#"><img src="resim3.gif" alt="" /></a>
<span>Resim 3'e ait açıklama</span>
</div>

<br style="clear:both" />
</div>

Xhtml kodlarında önce Gösterim alanı isimli bir id tanımladık. Bu id içerisinde resimlerimizin gösterileceği sınıf olan .resim sınıf yer alacak. Div class=”resim” alanından sonra resmimizin Xhtml kodunu yazıyoruz. Sonrasında ise bir Span etiketi açarak açıklamamızı yazıyoruz.

2. ADIM: CSS KODLARININ YAZIMI

#gosterimalani {
width:650px;
margin:0 auto;
background:#222;
border:1px solid #333;
padding:20px;}

.resim {
float:left;
padding-right:10px;
display:inline;}

span {
display:none;
font:12px/20px arial, verdana, sans-serif;
background:#000;
color:#fff;
height:36px;
margin:-50px 2px 4px 2px;
position:relative;
padding:4px;
width:192px
}

.resim a img {border:2px solid #444}
.resim a:hover img {border:2px solid #999}

Css kodlarında dikkat edeceğimiz en büyük öge Span etiketine vermiş olduğumuz stiller. Span etiketinin uygulamamıza bağlı olarak aldığı Margin değerlerine dikkatinizi çekmek istiyorum. Span etiketine vermiş olduğumuz eksi margin değeri görünürlüğün resimler üzerine tam ve uygun olarak yansımasını sağlayacak biçimde ayarlandı. Margin değerleri dışında, arkaplan, metin rengi, yükseklik gibi değerleri de tanımladık.

3. ADIM: jQUERY KODLARININ YAZIMI

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
	$(".resim").hover(
		function () {
		$("span", this).slideDown();
		},
		function () {
		$("span", this).slideUp();
		}
	);
});
</script>

jQuery kodlarında yaptığımız şey ise oldukça basit. Resim isimli Css sınıfının üzerine fare ile gelindiğinde Span etiketinin slideDown efekti ile gösterilmesini sağlıyoruz. Aksi durumda ise Span etiketimiz slideUp efekti ile gözden kayboluyor. Gördüğünüz gibi jQuery kodumuz oldukça kısa ve kolay yazılabilir. Zaten jQuery’nin asıl amacı da bu değil mi? Az kod çok iş! (Dilerseniz slideDown ve slideUp efektlerine milisaniye cinsinden zaman ataması yapabilir veya fast, slow gibi açılma hızı tanımlamaları ekleyebiliriz. Ben örneğimizde kodları şişirmemek adına bunları kullanmadım, dilerseniz siz .slideDown(“fast”); gibi bir değer vermeyi tercih edebilirsiniz)

Örnek uygulamamızda göreceğiniz gibi vermiş olduğumuz Css değerleri ışığında resimler üzerine geldiğinizde resim açıklamalarımız aşağıdan yukarı görünür hale geldi. Oldukça kolay kodlanabilen bu uygulama ile resim bağlantılarınızı daha da renklendirebilirsiniz. Sorularınız veya konuya ilişkin eklemeleriniz olursa bunları yorumlarımla cevaplamaktan büyük zevk alacağım.

Umarım sizler için faydalı ve güzel bir anlatım olmuştur. Bir başka makalemizde görüşmek üzere…

UYGULAMA ÖRNEĞİ ÖRNEĞİ İNDİR (37kb)

(Makalemize başlamadan önce jQuery’nin temel dosyasını indirmiş olmanız gerekiyor. jQuery’nin kararlı son sürümünü kendi sayfasından indirebilir ve üzerinde uygulamalar geliştirebilirsiniz)

Öncelikle panelimizin görünümünü düzenleyen Css kodlarını yazarak başlayalım…Uygulamamızı yazmak için panel.html isimli bir web sayfası oluşturalım. Aşağıdaki kodları panel.html dosyamızın  Head bölümü içine yazarak kaydedelim.

.panelac {
width:100px;
padding:4px;
margin:0;
background:#2e83ff;
color:#fff;
}

.panel {
width:500px;
height:200px;
background:#000;
display:none;
color:#fff;
padding:10px;
}

Kodlarda gördüğünüz gibi iki adet Css sınıfı oluşturduk. Bunlardan .panelac isimli sınıf üzerine fare ile tıkladığımızda panelimizi görünür hale getirecek olan sınıftır. Diğer bir sınıf olan .panel isimli sınıfta ise panelimizin açıldığında nasıl bir görünümde olacağını belirledik. Klasik Css yazımının dışına çıkmadık. Yalnız .panel isimli sınıfın görünüm durumunu “display:none” parametre ve değeriyle görünmez olarak belirledik.

Css kodlarımız oldukça yalın ve anlaşılır sanıyorum. Şimdi bu iki sınıfı kullanarak jQuery kodlarımızı yazalım. Panelimizin açılır kapanır olması için biz jQuery’nin “slide” fonksiyonundan yararlanacağız. Aşağıdaki kodları panel.html sayfamızın  Head bölümüne kaydedelim.

$(document).ready(function(){

$(".panelac").click(function(){
$(".panel").slideToggle("slow");
$(this).toggleclass("active"); return false;
});
});

Dilerseniz şimdi yazdığımız Css ve Js kodlarını ve yaptığımız işlemi gösterecek olan Xhtml kodlarını tek bir sayfa üzerine yazalım. (Css kodlarında gördüğünüz #sayfa isimli id örneğimizin sayfa ortasında yer alması içindir, dilerseniz bu kodu da yazabilirsiniz)

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery ile Açılır Paneller Oluşturmak</title>
  <script src="jquery.js"></script>

  <script>
$(document).ready(function(){

	$(".panelac").click(function(){
		$(".panel").slideToggle("slow");
		$(this).toggleclass("active"); return false;
	});
	});

  </script>
  <style>
  #sayfa {margin:0 auto; width:500px; padding:0;font:12px arial, verdana, sans-serif;}
  .panelac {width:100px;padding:4px;margin:0;background:#2e83ff;color:#fff;}
  .panel {width:500px;height:200px;background:#000;display:none;color:#fff;padding:10px;}
  </style>
</head>
<body>
<div id="sayfa">
<div class="panel">Burada Panelimizin İçeriği Bulunmakta</div>
<div class="panelac">Panel Aç</div>
</div>
</body>
</html>

Javascript kodunda gördüğünüz gibi öncelikle .panelac isimli sınıfa tıkladığımızda (click) neler olacağını yazıyoruz. Burada .panel isimli sınıfımız jQuery’nin slideToggle fonksiyonunu kullanarak görünür hale gelecek. Fonksiyon satırında parantez içinde hangi hızda açılacağını fast, slow gibi değerlerle yazabiliyoruz. Dilersek bu alanda milisaniye cinsinden değerlerde yazabiliriz. (1000, 500 gibi) Javascript kodumuzun son satırında işlemin return false ile terse döndürülmesini istiyoruz. Yani .panelac isimli sınıfa yapılacak sonraki bir fare tıklaması ile panelimiz kapanacak.

Örnek sayfayı açarak panelimizin çalışır halini görebilirsiniz. Bu makale ve uygulamayı hazırlarken jQuery’nin kendi belgelerinden ve Türkçe en faydalı jQuery kaynağı olarak gördüğüm Erhan kardeşimin ilgili yazısından faydalandım. Umarım sizler için faydalı olmuştur.

ÖRNEK SAYFA

Bu yazımızda sizlere Ext Core Menu bileşeni kullanarak Wordpress sitelerimizde kategorilerimizi bu menü ile nasıl göstereceğimizi anlatacağım. Bir nevi Ext Core Menu’yü Wordpress tabanlı sitemize entegre edeceğiz ve böylelikle kategorilerimizin açılır bir menü ile görünmesini sağlayacağız. Öncelikle ExtJs sayfasına gidiyor ve Ext Core uygulama dosyasını indiriyoruz. Bu dosyayı indirdikten sonra sadece kullanacağımız menü değil diğer Ext Core uygulamalarının örnekleri de size geliyor. Ancak biz bu uygulamalar içinden sadece Menu klasörü içindekini kullanacağız.

Paket içinde bulunan Ext-Core.js dosyasını kullandığımız Wordpress temasının içine atalım. Examples >> Menu dizini içine girerek burada bulunan menu.js, menu.css dosyalarını da kullandığımız Wordpress temasının içine atalım. Images klasörü içindeki resimleri de kendi temamızın Images dosyasına atalım. (Şayet böyle bir dosyanız yoksa Images klasörünü olduğu gibi tema klasörünüzün içine atın)  Böylelikle menümüzü çalıştıracak olan tüm dosyaları Wordpress temamıza atmış oluyoruz. Bundan sonra tema dosyalarımızda değişiklik yaparak menüyü çalıştıracağız.

Bu aşamadan sonra yapacağımız şey çok basit. Şimdi kullandığınız temanın header.php dosyasını bir editör ile açın. Aşağıda yer alan kodları HEAD etiketi içine bir yere atıp kaydedin.

[PHP]

[/PHP]

Şimdi ise açılır menümüzün görünmesini istediğiniz yere aşağıdaki kodları yazın ve kaydedin.

[PHP]

< ?php wp_list_categories('sort_column=name&sort_order=asc&style=list&children=true&hierarchical=true&title_li=0'); ?>

[/PHP]

Bu şekilde dosyaları kaydettikten sonra kategorilerinizin menü yardımıyla Kategori >> Alt Kategori >> Alt Alt Kategori şeklinde görünecek.

Dilerseniz menünün stillerinde değişiklik yaparak menünüze bambaşka bir görüntü katabilirsiniz. Umarım sizler için faydalı olmuştur. ]]> http://www.t-infection.com/ext-core-ile-kategorileri-acilir-menu-seklinde-gosterme/feed/ 16 http://www.t-infection.com/20-muhtesem-javascript-navigasyon-teknigi-ve-ornekleri/ http://www.t-infection.com/20-muhtesem-javascript-navigasyon-teknigi-ve-ornekleri/#comments Sat, 02 May 2009 13:50:30 +0000 webthese http://www.t-infection.com/?p=739 Sixrevisions.com yine güzel bir derlemeye imza atmış. Çeşitli Js kütüphaneleri ve salt Js ile yapılmış olan navigasyon çeşitlerinden 20 tanesini derlemişler. Bazılarını ben de görmemiştim, iyi bir kaynak oldu.

Herşeyden önce başlıktada belirttiğimiz gibi biz bu menüyü Mootools kütüphanesini kullanarak oluşturacağız. O yüzden Xhtml dokümanımızda öncelikle Mootools’u çağıracak olan kodu yazıyoruz. Bu sayede sayfamız Mootools betiğini okuyacak ve işlemi buna göre yapacaktır. Bu kodları Head bölümüne yazıyoruz.

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/akordion.js"></script>

Sonrasında menümüzü görsel anlamda şekillendirecek olan stil dosyasını tanımlıyoruz. Stil dosyasında menümüzün ana birimleri ve alt birimlerinin stilleri yer alıyor.

<link rel="stylesheet" href="style/style.css" type="text/css" />

Bu aşamadan sonra Body etiketi içinde sayfamızda menümüzü göstermek istediğimiz yerde menümüzün ana Xhtml kodlarını giriyoruz. Bu aşamadan sonra menümüz görünecek ve kullanıma hazır hale gelecektir.

<div id="accordion">
	<h3 class="toggler"><a href="#" class="anasayfa">Anasayfa</a></h3>
	<div class="element">

	<ul>
	<li><a href="#">Hakkımızda</a></li>
	<li><a href="#">Atölye</a></li>
	<li><a href="#">Tavsiyeler</a></li>
	<li><a href="#">İletişim</a></li>
	</ul>
	</div>

	<h3 class="toggler"><a href="#" class="kategori">Kategoriler</a></h3>
	<div class="element">
	<ul class="kategori">
	<li><a href="#">Ajax</a></li>
	<li><a href="#">Photoshop</a></li>
	<li><a href="#">Dreamweaver</a></li>
	<li><a href="#">Xhtml/Css</a></li>
	<li><a href="#">Php/Mysql</a></li>
	</ul>
	</div>

	<h3 class="toggler"><a href="#" class="baglanti">Bağlantılar</a></h3>
	<div class="element">
	<ul class="link">
	<li><a href="#">Mootools</a></li>
	<li><a href="#">Google</a></li>
	<li><a href="#">Adobe</a></li>
	<li><a href="#">Facebook</a></li>
	<li><a href="#">Twitter</a></li>
	<li><a href="#">FrienFeed</a></li>
	</ul>
	</div>

	<h3 class="toggler"><a href="#" class="besleme">Rss Takip</a></h3>
	<div class="element">
	<ul class="rss">
	<li><a href="#">Son Gönderiler</a></li>
	<li><a href="#">Son Yorumlar</a></li>
	</ul>
	</div>

</div>

Menünün işleyişi hakkında kısa bir bilgi vermek istiyorum. Menümüzü çağıran ve akordion fonksiyonunu tanımlayan akordion.js dosyasında Mootools’dan yararlanılarak h3 etiketiyle ilişkili bir Css sınıfı oluşturuluyor. Bu sınıf toggler özelliğini kullanarak menü biriminin aşağı doğru açılmasını sağlıyor. H3 etiketi başlık olarak kullanılıp tıklandıktan sonra aşağıda yer alan menü birimi gösteriliyor. Menü biriminin görüneceği alanda yine bir Css sınıfı olan .element işin içine giriyor ve tıklandıktan sonra açılan alanda .element sınıfına ait veriler gösteriliyor. Menünün ana görünümü başlatmak içinse #Akordion isimli div id’si yazılıyor. Menünün genişliğini bu alanda sınırlayabilirsiniz.

Menünün kodları içinde (ister Xhtml ister stil) istediğiniz kadar değişiklik yapabilirsiniz. Menü stil dosyasında ben birçok ekleme yaptım ve yan taraflarına da bir takım kısa açıklamalar yazdım. Bu da sizin için faydalı olacaktır.

AKORDİON MENÜ ÖNİZLEME AKORDİON MENÜ İNDİR (36kb)