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)

(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

Merhabalar. Photoshop’ta metinlere 3 boyut etkisi vermek için birçok yöntem kullanılıyor. Photoshop’un kendi nimetlerinden yararlanabileceğimiz gibi Photoshop dışı programlar kullanarakta bu etkiyi oluşturmak mümkün. Ben bu yönde bir çalışma yapacaksam her zaman bana en basit gelen yolu izliyorum. Bu nedenle 3 boyut etkisini Photoshop ile oluşturuyorum. Bu yazımızda hem yazımızı 3 boyutlu bir görünüme kavuşturak hem de Pen, Brush gibi araçlar kullanarak tatlı ışık efektleri ile çalışmamızı süsleyeceğiz.

Öncelikle Photoshop’ta 500*500 piksel olan arkaplan rengi siyah bir doküman açalım. Ben ışık efektlerinin daha iyi seçilebilmesi için siyah tercih ettim. Siz kendi çalışmalarınızda farklı renkler kullanabilirsiniz. Hemen önce 3 boyutlu yazımızı oluşturalım.

Arial (kalın) yazıtipinde ve 96 piksel boyutunda yazımızı yazalım. Renk olarak beyaz tercih edelim. Ben örneğimizde kısa ve öz olduğu için 3d yazdım.

Yazımızı oluşturduktan sonra Alt tuşuna basılı tutarak önce aşağı sonra sol yön tuşlarına basalım. Her basışınızda yazı katmanının kopyalandığını göreceksiniz. Bu kopya sayısı 10 oluncaya kadar ilerleyim. (5 aşağı, 5 yukarı basış) Kopyalama yaptığımız ilk yazı yeni oluşturulanların altında kaldı. Layers penceresinde fare ile tutarak bu katmanı en üstteki kopya katmanın üzerine sürükleyin. Böylelikle kopyalama yaptığımız katman en üste geçecek ve bizde istediğimiz efektleri daha iyi verebileceğiz.

Şimdi ilk yazı katmanımıza Layers penceresinde iki kere tıklayarak aşağıdaki özellikleri verelim. Resimleri takip ederek uygulamayı yapabilirsiniz.

10 adet kopyaladığımız diğer katmanların hepsini Layers penceresinde Ctrl tuşuna basılı tutarak seçelim. Sonrasında Ctrl+E tuş kombinasyonunu kullanarak tüm katmanları tek bir hale getirelim. Böylelikle çalışmamızda 2 tane katman kalmış olacak. Birisi yukarıdaki özellikleri verdiğimiz ana yazı katmanı diğeri ise gölge için kullanacağımız diğer katmanların birleştirilmiş hali.

Birleştirdiğimiz katmanlara ise yine resimlerden yararlanarak aşağıdaki özellikleri verelim.

3 boyutlu yazımız hazır. Şimdi yeni bir katman oluşturalım ve yazımızı süsleyecek olan Kalem geçişlerini verelim. Yeni oluşturduğumuz katman seçili iken Pen toolu seçelim ve aşağıdaki gibi bir çizim elde edelim. Çiziminizin şeklini Kalem aracı seçiliyken Ctrl tuşuna basılı tutarak değiştirebilirsiniz.

Çizimi yaptıktan sonra B tuşuna basalım ve Brush (Fırça) aracına gelelim. Shape Dynamics = Size Jittler %0 olacak şekilde değer verelim. Fırça rengimiz de beyaz olsun. Daha sonra özelliklerini zaten değiştireceğiz.

Fırça özelliğimizi verdikten sonra Pen tool’da iken sağ tuş yaparak Stroke Path tuşuna basalım. Böylelikle Pen tool ile çizdiğimiz çizgiyi takip eden şeklimizi oluşturduk. Şimdi Pen toolun çizgileri kaybolmadan yeni bir katman oluşturalım. Bu sefer aşağıdaki Fırça özelliklerini ayarlayalım. Scattering = 300%, Other Dynamics = Değerler 100%, Smoothing değeri de seçili olsun. Yine biraz önce yaptığımız gibi Pen tool’da sağ tuş yapıp Stroke Path diyelim.

Bu işlemlerden sonra birbirinin üzerine binmiş iki tane ayrı katmanımız oldu. Bu katmanlardan ilk oluşturduğumuza aşağıdaki değerleri verelim.

Sonraki oluşturduğumuz katmana ise aşağıda yer alan değerleri verelim.

Bu aşamadan sonra yazımızın giriş kısmında verdiğimiz çalışma gibi bir çalışma elde etmiş olmalıyız. Farklı Pen tool geçişleri kullanarak daha farklı bir görünüm elde etmemiz mümkün. Bu geçişlerden sonra önemli olan uygun katman özelliklerini çizdiğimiz şekillere yansıtarak görünümü güzelleştirebilmek. Gönderinin sonunda çalışmamızın olduğu PSD dosyasını da indirebilirsiniz.

Umarım bu çalışma hoşunuza gitmiştir. Bir başka makalemizde görüşmek üzere.

ÖRNEK ÇALIŞMA İNDİR

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/css-sprite-teknigi-kullanimi-ornek-ve-faydali-kaynaklar/ http://www.t-infection.com/css-sprite-teknigi-kullanimi-ornek-ve-faydali-kaynaklar/#comments Tue, 16 Jun 2009 18:25:47 +0000 webthese http://www.t-infection.com/?p=783 Yeniden merhabalar. Bu gönderimizde sizlerle Css Sprite tekniğini konuşacak, hazırlamış olduğumuz örnekler ile konumuzu destekleyecek, Türkçe ve yabancı kaynakları paylaşaçağız. Dilerseniz hemen başlayalım.

Css Sprite kullanılışı itibariyle bir “image replacement” (resim yer değiştirme) tekniğidir. Css sprite çok yeni bir teknik olmamakla birlikte uzun zamandır büyük siteler tarafından kullanılmaktadır. Css sprite tekniği özünde birden fazla resmi bünyesinde barındıran “tek” bir resmin arkaplan pozisyonlarının değiştirilmesiyle gösterilmesi mantığını taşımaktadır. Bu söylediğimi uygulamalı olarak gördüğünüzde ne demek istediğimi daha iyi anlayacaksınız.

Css sprite birçok yönden hem site sahiplerini hem de ziyaretçileri mutlu etmektedir. Çünkü birçok resim bağlantı ve resim ögenin kullanıldığı bir sitede bu resimlerin her biri için sunucumuza bir istek gitmektedir. Sizlerin de bildiği üzere Http request’lerin fazla olması sunucuya olan yükü fazlalaştırmakta ve site açılış hızını etkilemektedir. Css sprite bu yönden kullandığı tek bir resim dosyası nedeniyle birçok bağlantı isteğine gerek kalmadan işlevini yerine getirmektedir. Bununla birlikte sitemizi ziyaret eden ziyaretçiler de kullandığımız resim bağlantılarda (kısa bir süre de olsa) yeni resmin yüklenmesini beklemeyecektir.

Makalemizin başında söylediğimiz gibi Css sprite tekniğini birçok büyük site kullanmaktadır. Google, Youtube, Yahoo, Amazon, Digg gibi siteler bunların başında gelmektedir. Bu kısa girişten sonra dilerseniz tekniği daha iyi anlayabilmek için örneğimize geçelim.
CSS SPRITE TEKNİĞİ İLE YAPILAN BİR ÖRNEK
Bu örneğimizde ben iki farklı resmi tek bir resim dosyasında birleştirdim. Resmin en ve boy genişliğini de ayarlayarak iki resmi tek bir resim dosyasında toplamış oldum. Aşağıda örnek olarak kullanacağım resmi görebilirsiniz.

Oluşturduğumuz örnek resimde basit olarak bir information ikonu ve hakkımda yazısı mevcut. Resmin alt bölümünde ise bu resmin hover efekti ile etkilendiğinde görünecek şekli mevcut. Aslında iki aynı boyutta resim ve tek bir resim dosyasında birleştirilmiş durumda. Tekil halde 200px*50px olan resim iki resmin alt alta gelişiyle 200px*100px bir boyut kazanıyor. Biz bu tekniği uyguladığımızda resmin ilk bölümünü göreceğiz. Fare ile resim bağlantımızın üzerine geldiğimizde ise resmin hover ile görünmesini istediğimiz diğer kısım görünecek. İşte tam bu noktada Css’nin nimetlerinden yararlanarak “background-position” (arkaplan resim pozisyonu) parametresi ile hover anında oluşacak görüntüyü elde edeceğiz. Dilerseniz hemen örneğimizin Css kodunu yazalım.

ÖRNEĞİMİZDE KULLANACAĞIMIZ CSS ve XHTML KODU

<div id="alan">
<ul><li><a href="deneme.html" title="Hakkımda">Hakkında</a></li></ul>
</div>

#alan {width:200px;}

#alan ul {margin:0;padding:0;}

#alan li {float:left;text-indent:-9999px; }

#alan ul li a{
width:200px;
height:50px;
display:block;
background:url("hakkinda.gif") no-repeat 0px 0px;
}

#alan ul li a:hover{
width:200px;
height:50px;
display:block;
background:url("hakkinda.gif") no-repeat 0px -50px;
}

Yukarıda kullanmış olduğumuz Css ve Xhtml kodunu biraz anlatarak uygulamamız hakkında bilgi vermeye devam edelim. Css kodunun başında gördüğünüz üzere alan isimli bir id oluşturduk. Bu alana 200px genişlik atadık. Sonrasında yine #alan içerisinde ul ve li etiketlerini ayrı ayrı tanımladık. Burda dikkat ettiyseniz alan isimli div’in li etiketini tanımlarken text-indent:9999px; gibi bir değer kullandık. Bu değer Xhtml kodunda bağlantımıza vermiş olduğumuz metin linkin tarayıcıda görünmemesi için gerekliydi. Yine li içinde float:left özelliğini kullanarak resmin sola yaslı olmasını sağladık.

Şimdi belki de işin en önemli kısmına geldik. Artık #alan içinde bir a etiketi tanımlayacağız. Burada da hazırlamış olduğumuz resmi göstereceğiz. Örnek kodları incelerseniz hakkinda.gif isimli resmi arkaplan resmi olarak gösterdik. Resmin tekrarlanmamasını istedik ve pozisyon olarakta 0px 0px değerleri kullandık. Resmin eni ve boyunu piksel cinsinden yazdık. Dikkatinizi çekti mi bilmiyorum ancak hakkinda.gif resmi 200px*100px boyutunda olmasına rağmen resmi en boy olarak 200px*50px tanımladık. Böylelikle resmin görünebilir alanlarını biraz daha daraltmış olduk.

Tanımladığımız a etiketinin a:hover bölümünde ise arkaplan değerlerinde değişiklik yaptık. Başlangıçta 0px 0px olarak vermiş olduğumuz arkaplan pozisyon değerini bu sefer 0px -50px olarak değiştirdik. Böylelikle hakkinda.gif isimli resmin belirlenen pozisyonlardaki görünümünü alabilecektik.

Yukarıdaki basit örnekte gördüğünüz üzere aslında Css sprite tekniğinde önemli olan unsur kullanacağımız resmi iyi ayarlamak ve arkaplan pozisyonlama özelliklerini çok iyi bilmek. Örnek resimde biz tekniği dikey yani vertical olarak kullandık. Bu nedenle arkaplan pozisyonlamamızı yaparken buna göre bir css değeri atadık. Şayet resmimiz yanyana olsaydı vereceğimiz pozisyon değeri daha farklı olacaktı. Şimdi dilerseniz yan yana bir örnek yapalım.

2. ÖRNEĞİMİZDE RESMİMİZ YATAY KONUMDA

<div id="ornek2">
<ul>
<li><a href="deneme.html" title="Anasayfa" id="anasayfa">Anasayfa</a></li>
<li><a href="deneme.html" title="Hakkımda" id="hakkinda">Hakkında</a></li>
</ul>
</div>

#ornek2 {width:400px;height:30px;}

#ornek2 ul {margin:0;padding:0;list-style:none;}

#ornek2 li {float:left;text-indent:-9999px; }

#ornek2 a#anasayfa{
width:100px;
height:30px;
display:block;
background:url("buyuk.gif") no-repeat 0px top;
}

#ornek2 a#anasayfa:hover{
width:100px;
height:30px;
display:block;
background:url("buyuk.gif") no-repeat -100px top;
}

#ornek2 a#hakkinda{
width:100px;
height:30px;
display:block;
background:url("buyuk.gif") no-repeat -200px top;
}

#ornek2 a#hakkinda:hover{
width:100px;
height:30px;
display:block;
background:url("buyuk.gif") no-repeat -300px top;
}

Kodları incelediğimizde aslında ilk örneğimizden farklı değil. Burada değişiklik olarak şunu yaptık. Öncelikle örnek2 isimli bir div alanı tanımladık. Yine aynı şekilde bu alana ait birer ul ve li tanımı yaptık. Sonrasında ise ilk örneğimizden biraz farklı olarak her bir a etiketine id atamasında bulunduk. #ornek2 a#anasayfa olarak belirlediğimiz bölümde arkaplan resmimizi atadık. Pozisyon olarakta sol üst taraftan 0px uzaklıkta olmasını ve en üste dayalı durmasını sağladık. Bu aşamadan sonra #ornek2 a#anasayfa:hover bölümünde ise arkaplan pozisyonumuzu soldan 100px içeri girecek şekilde eksi değer vererek tanımladık. Aynı css kodu üzerinde a#hakkinda id’sinde de benzer tanımlamayı yaptık.

Makalemizde de tekrarladığımız gibi aslına bakılırsa Css sprite css image background positioning kullanılarak oluşturuluyor. Bu nedenle Css’de arkaplan pozisyonlamayı iyi bilmemiz gerekiyor. Bununla birlikte Css sprite tekniğinde kullanmak üzere seçtiğimiz veya oluşturduğumuz resmi de iyi analiz etmemiz gerekmekte. Resmin hangi pikselden sonraki boşlukları değerlendirilecek, resmin hangi bölümü görünecek, hover etkisinde ne gibi değişim olacak gibi kriterleri bilmek uygulamamızı doğru hazırlamak açısından oldukça önemli.

(Css sprite konusunda aslına bakarsanız tek bir makale ile anlatımımı tamamlamayı düşünüyordum. Ancak paylaşılacak çok bilgi var ve Css sprite ile ilgili değişik uygulamaları ve kaynakları da anlatmak istiyorum. Kısa süre içinde Css sprite konusunda bu makalenin devamı niteliğinde bir devam makalesi yazacağım. Css sprite ile ilgili bu makale umarım sizlere faydalı olmuştur.)

ÖRNEK 1 ÖNİZLEME | ÖRNEK 2 ÖNİZLEME

Efendim, sitemizde kullanmış olduğumuz tabmenü Koller Jürgen‘in geliştirmiş olduğu EasyTabs‘ın 1.2 sürümüdür. Bu menü kullanımının kolay oluşu, onmouseover özelliği sayesinde tab’lar arası kolay geçiş sayesinde tercihim oldu. Ayrıca biraz Css bilginiz varsa menünün birçok alanına müdahale edebiliyorsunuz. Tüm bunlarla birlikte menünün “Autochange” özelliği ile tablar kendi arasında otomatik olarak sırayla açılabiliyor. (dilerseniz bu özelliği kaldırabiliyorsunuz)

Şimdi gelgelelim menümüzü indirip kullanmaya. Öncelikle Kollermedia.at sitesinden menümüzü indiriyoruz. İndirmiş olduğumuz paketi klasör olarak dışarıya çıkarıyoruz. Sonrasında yapmamız gereken adımlar şunlar;

Sitemizin HEAD bölümüne menünün kullandığı easytabs.js dosyasının kodunu giriyoruz.

<script type="text/javascript" language="javascript" src="easytabs.js"></script>

Bu aşamadan sonra ise menümüzün görünmesini istediğimiz yere menünün ana kodlarını koymanın vakti geldi. Sitemizde BODY bölümü içerisine şu kodları yerleştiriyoruz.

<!--Start of the Tabmenu1 -->
<div class="menu">
<ul><li><a href="#" onmouseover="easytabs('1', '1');" onfocus="easytabs('1', '1');" onclick="return false;"  title="" id="tablink1">TAB 1</a></li>
<li><a href="#" onmouseover="easytabs('1', '2');" onfocus="easytabs('1', '2');" onclick="return false;"  title="" id="tablink2">TAB 2 </a></li>
<li><a href="#" onmouseover="easytabs('1', '3');" onfocus="easytabs('1', '3');" onclick="return false;"  title="" id="tablink3">TAB 3</a></li>
<li><a href="#" onmouseover="easytabs('1', '4');" onfocus="easytabs('1', '4');" onclick="return false;"  title="" id="tablink4">TAB 4</a>
</li>
</ul>
</div>
<!--End of the Tabmenu1 -->

<!--Start Tabcontent 1 -->
<div id="tabcontent1">Tabcontent 1</div>
<!--End Tabcontent 1-->

<!--Start Tabcontent 2-->
<div id="tabcontent2">Tabcontent 2</div>
<!--End Tabcontent 2 -->

<!--Start Tabcontent 3-->
<div id="tabcontent3">Tabcontent 3</div>
<!--End Tabcontent 3-->

<!--Start Tabcontent 4-->
<div id="tabcontent4">Tabcontent 4</div>
<!--End Tabcontent 4-->

Kodlarda görebileceğiniz gibi menünün kodları çok kolay ve düzenlemesi de gayet basit. Kodların içindeki yorum alanlarını bilerek kaldırmadım çünkü bunlar bizlere oldukça faydalı ipuçları veriyor. Tabcontent 1 alanı bizim TAB 1 bölümümüzün içeriği oluyor. Buraya koyacağınız tüm bileşenler Tab 1 içerisinde görünecek. Doğal olarak tablar içini sırasıyla istediğiniz içerikle doldurabilirsiniz. Xhtml ve Css kullanımı da size kalmış bir olay.

Menü konusunda biraz Css bilginiz varsa iyi bir düzenleme yapabileceğinizi söylemiştim. Ben menünün orjinaline sadık kaldım sadece menünün aktif olan tab’ında (yani fare ile üzerine gelinen tab’da) bir arkaplan resmi ekledim ve menümü böyle kullanıma açtım. Görünüm açısından orjinalinden biraz daha iyi oldu. Siz de menünün kendi içinde gelen Css dosyasında dilediğiniz değişimi yapabilirsiniz.

Menünün orjinal kodları içinde Autochange özelliği aktif olarak geliyor. Şayet bunu iptal etmek isterseniz easytabs.js dosyasını bir metin editörü ile açın. Dosyada var autochangemenu = 1; satırını bulun ve 1 değerini 0 yapın sonra kaydedin. Böylelikle menünün tabları otomatik olarak değişmeyecektir.

WORDPRESS SİTEMİZDE BU MENÜYÜ NASIL KULLANACAĞIZ?
Şayet benim gibi bir Wordpress tabanlı site üzerinde bu menüyü kullanmak isterseniz yapacağınız işlemler hemen hemen aynı. Sadece Head bölümüne eklenmesi gereken kodu temanızın header.php dosyasına ekleyin. Ekleme sırasında .js dosyası ile kullanmış olduğunuz yolun aynı olmasına dikkat edin.

Son olarak menünüzü nerede göstermek istiyorsanız (bizim sitemizde sidebar.php içinde görünmektedir) o alana Body içinde koyulacak kodları ekleyin. Genellikle bu tarz menüler Sidebar alanında olur ve kullanımı da oldukça kolay olduğu için bu alanlarda tercih edilir.

Umarım sizler için faydalı olmuştur. Bir başka gönderide görüşmek dileğiyle.

Öncelikle Illustrator üzerinde boş bir doküman açalım. Ben 640*480px bir doküman tercih ettim. Sonrasında araç paletinden Rectangle Tool’u (M) seçerek bir kare oluşturalım. Shift tuşuna basılı tutarak düzgün bir kare elde edelim.

Karemizi elde ettikten sonra çalışmamız seçiliyken üst menüden Effect >> 3D >> Extrude & Bevel‘i seçelim. Bu seçimi yaptıktan sonra karşımıza gelen pencerede nesnemize 3 boyut katacağız.

Yukarıda görmüş olduğunuz resimdeki özellikleri aynen çalışmanıza uygulayın. Uygulamadan sonra nesnenin 3 boyutlu hale geldiğini göreceksiniz. Tabi dilerseniz bu değerleri kendinize göre değiştirebilirsiniz. Bu aşamadan sonra yapacağımız şey 3 boyutlu nesnemizin derinlik veren bölgelerine efekt uygulayabilmek için seçimi parçalamak.

Yine nesnemiz seçiliyken üst menüden Object >> Expand Appearance seçeneğini tıklıyoruz. Böylelikle nesnemizin dilediğimiz bölümüne stil uygulayabileceğiz.

Sonrasında nesnemize derinlik veren bölgeleri tek tek seçerek Gradient Tool‘dan istediğimiz renk kombinasyonlarında Gradient’ler veriyoruz. Bu şekilde çalışmamızı tamamlıyoruz.

SEMBOLLER İLE AYNI ŞEYİ YAPMAK MÜMKÜN MÜ?

Evet, yukarıda anlatmış olduğumuz kısayolu izleyerek siz de bu etkiyi sembollerde elde edebilirsiniz. Yalnız dikkat etmeniz gereken nokta bir sembolü çalışmanıza dahil ettikten sonra sembol seçiliyken Edit Symbol bağlantısını tıklamanız. Böylece sembol üzerinde dilediğiniz gibi çalışabilirsiniz.

(Yine biraz uzun bir ipucu oldu, kusura bakmayın)

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)

Css ile oluşturduğumuz bir sınıfı arkaplanda sabit olarak göstermek için Css stil dosyamıza şu kodu girmemiz yeterli;

.element { position:fixed; top:2%; right:2%;}

Bu kodu ekledikten sonra Xhtml/Html sayfamızda çağırmak içinse;

<div class=”element”>Sabit div içinde yer alacak metnimiz</div>

kodunu kullanmamız gerekiyor. Böylelikle “element” ismiyle oluşturduğumuz sınıf position:fixed parametresi sayesinde arkaplanda sabit olarak kalacak. Sayfanız aşağı doğru inse bile sabit şekilde görünmeye devam edecek. Daha önce de sitemizde sabit arkaplanlar oluşturmayla ilgili bir makale yayınlamıştık. Bu da sizin için faydalı olabilir.

Bu yazımızda sizlerle Html5.0 ile hayatımıza girecek olan bazı yeni etiketleri tanıtacağız. Html5.0′ın biraz daha esnek yapıya bürünerek geliştiğini görmek gerçekten heyecan verici. Dilerseniz hemen yeni etiketlerimize bir bakalım.

Header, Section, Nav, Article, Aside, Footer Etiketleri

Html5.0′ın biraz daha esnek bir yapıya büründüğünü söylemiştik. Bu esnek yapıyı yeni kullanmaya başlayacağımız Yapısal etiketlerde de görebiliyoruz.

Blog sahipleri çok iyi bileceklerdir ki bir blog sayfası header (üst bölümü, logo ve sloganımızın bulunduğu bölüm), navigasyon (menü alanı diye açıklayabiliriz), sidebar (yan menü bölümü), content (ana içerik bölümü), footer (alt bilgi bölümü) alanlarından oluşmaktadır. Klasik manada bir blogun kod olarak yapısı şu şekildedir. (Html4 ile yazılan örnek kodumuz)

<div id="pager">
<div id="header">Üst Bölüm</div>
<div id="navigation">Navigasyon Alanı</div>
<div id="maincontent">Ana içerik bölümü</div>
<div id="sidebar">Yan menü ve bileşenlerimiz</div>
<div id="footer">Sitemiz alt bilgi bölümü</div>
</div>

Pek az farkla genellikle blog sitelerimizin ortaya koyduğu kod mantığı budur. Html4′ün bize sunmuş olduğu div etiketine yaptığımız id tanımlamaları ile klasik olarak blog stilindeki sayfamızı şekillendirebiliyor ve Css ile de bu bölümlere stiller atayabiliyorduk. (Tabi bölümlerin ve blokların farklı yerlerde olmaları, farklı boyut ve işlevlere sahip olmaları da tamamiyle Css ve Js işlevidir) Html5.0′ta ise başlığımızda belirttiğimiz etiketlerle aynı blog sayfasının kodunu yazalım. Kodları inceleyince gerçekten çok kolay olduğunu göreceksiniz.

<section>
<header>Üst Bölüm</header>
<nav>Navigasyon Alanı</nav>
<article>Ana içerik bölümü</article>
<aside>Yan menü ve bileşenlerimiz</aside>
</section>
<footer>Sitemiz alt bilgi bölümü</footer>

Son yazmış olduğumuz kod bölümünde Html5.0′daki yeni etiketlerimizin kullanımını görüyorsunuz. Etiketlerin kullanımı ve yerleşimi sanıldığı kadar zor değil. Sitemizin Footer bölümünü oluşturmak için <footer> etiketi açıp usulüne uygun biçimde sonlandırmak yeterli oluyor. Bunun gibi diğer etiketlerin kullanımı da aynı. Yalnızca section etiketine biraz değinmek istiyorum. Section web sayfazımın görünen bölümünü bir kitap sayfası olarak kabul ettiğimizde bir yaprağı gösteren ana belirleyici etiket oluyor. Yani web sayfalarımızda kesit almamıza yarıyor. Section etiketinin kullanımı tamamen size kalmış. Kullanıcınıza göstereceğiniz web sayfasının belirli bölümlerini section etiketi içine alıp gösterebiliyorsunuz.

Etiketlerimizin kısaca işlevlerine biraz değinelim. Header etiketi yazımızın önceki bölümlerinde bahsettiğimiz gibi sitemizin header bölümünü yani üst bilgi bölümünü tanımlıyor. Html5′te açılan her header etiketi bir section etiketinin üst bölümünü niteliyor. Dilediğiniz kadar header etiketi açarak üst bilgi tanımlaması yapabiliyor bazı ögelere atıfta bulunabiliyorsunuz.

Nav etiketi ise bir nevi menü alanı gibi görülebilir. Site içi sayfalarımıza veya dış kaynaklara vereceğimiz bağlantı alanlarının bulunduğu ana navigasyon sahasını tanımlamak için bu etiketi kullanacağız. Yine klasik web kodlamada yaptığımız gibi nav etiketi içinde ul, li gibi liste etiketlerinden faydalanarak menü birimleri oluşturabilir ve farklı bağlantı seçenekleri sunabiliriz.

Article ise sitemizin ana içerik bölümünü ifade ediyor. W3C’nin tanımına göre Article etiketi ile sayfamızdan bağımsız bir parça elde ediyoruz. Örneğin, son yazılan haberler, blog gönderileri, son forum postları gibi. Bu ögeleri article içinde sayfamızda gösterebiliyoruz. Bağımsız parçadan kastedilen şey de bu sanırım.

Aside etiketi ise blog sahiplerinin çok iyi bildiği Sidebar alanını niteliyor. Bu alanda yan menüler, sitemize ait reklamlar, bileşenler yer alabilir ve bunları bu etiket dahilinde kullanıcılarımıza gösterebiliriz.

Header, Nav, Section, Article, Aside gibi yapısal etiketler Html5 ile hayatımıza girecek olan yeni etiketlerden sadece birkaçı. İlerleyen zamanlarda diğer yeni etiketlerden de bahsetmeye çalışacağım. Umarım sizler için faydalı olmuştur.

Kaynaklar

http://wiki.whatwg.org/wiki/Main_Page
http://blog.whatwg.org/
http://www.w3.org/html/wg/
http://dev.w3.org/html5/spec/Overview.html
http://www.w3.org/TR/html5/
http://www.w3.org/TR/html5-diff/
http://www.ibm.com/developerworks/library/x-html5/
http://html5.org/tools/web-apps-tracker
http://www.readwriteweb.com/archives/5_exciting_things_in_html_5.php