Youtube’da üye girişi yaptıktan sonra üst sağ alanda yer alan navigasyon sadeliği ve etkili görünümü ile çok hoşuma gitti. Bu yazımızda bu tarz bir menü sistemini basit kodlar yazarak nasıl yapabileceğimizi anlatacağız.

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

XHTML
Öncelikle her zaman olduğu gibi Xhtml kodlarımızı yazarak başlayalım.

<div id="youmenu">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#" class="menu">Seçenekler<span>ok</span></a>
<ul class="menualani">
<li><a href="#">Hesabınız</a></li>
<li><a href="#">Mesajlarınız</a></li>
<li><a href="#">Favorileriniz</a></li>
<li><a href="#">İzledikleriniz</a></li>
</ul>
</li>
<li><a href="#" class="cikis">Oturumu Kapatın</a></li>
<br style="clear:both" />
</ul>
</div>

CSS
Şimdi menümüzün görünümünü düzenleyecek olan Css kodlarımızı yazıyoruz.

/* MENÜ STİLLERİMİZİ TANIMLAMAYA BAŞLIYORUZ */

#youmenu {
font:13px arial, verdana, sans-serif;
display:block;
}

/* Menü bağlantılarımızı tanımlıyoruz... */
#youmenu ul a {
text-decoration:none;
color:#333;
display:block;
margin:0px 5px 0px 5px;
padding:4px 10px 4px 10px;
background:#fff;
border-top:1px solid #fff;
border-left:1px solid #fff;
border-right:1px solid #ccc; /* Sağ tarafta 1px solid bir kenarlık bırakıyoruz. */
border-bottom:1px solid #fff;
outline:none;
zoom:1;
}

#youmenu ul a:hover {
text-decoration:none;
color:#333;
display:block;
margin:0px 5px 0px 5px;
padding:4px 10px 4px 10px;
background:#fff url(menuarkaplan.png) repeat-x; /* Arkaplan resmimizi tanımladık */
border:1px solid #666;
outline:none;

-moz-box-shadow:0px 0px 4px #333; /* Fare üzerine gelince bağlantı alanımızın biraz gölge kazanmasını sağlıyoruz */
-webkit-box-shadow:0px 0px 4px #333; /* Gölge işlemini Chrome ve Safari için yapıyoruz. */
box-shadow:0px 0px 4px #333; /* Opera'yı da unutmayalım :) */

/* IE için gölge işlemini yapıyoruz, bundan sonraki alanlarda yer alan gölge tanımlamalarını IE için yine aynı şekilde yapacağız. */
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#333333, offX=1, offY=1, positive=true);
zoom:1;
}

#youmenu li, #youmenu ul {
float:left;
position:relative;
margin:0px;
padding:0px;
list-style:none;
display:block
}

#youmenu li ul { /* Menümüzün alt birimlerini display:none tanımıyla gizliyoruz */
display:none;
position:relative;
}

/* Menümüzde açılacak olan bağlantı birimini işaret etmesi için span etiketine bazı değerler atıyoruz */
#youmenu span {
background-image: url("ok.png") ;
background-repeat:no-repeat;
background-position: center right;
display:block;
float:right;
padding:0;
margin:0;
width:16px;
height:16px;
text-indent:-9999px;
}

/* Bu alandan sonra yapılan tanımlamalar açılır menümüz için... */

#youmenu ul.menualani {
border:1px solid #333;
display:none;
position:absolute;
padding:0px;
margin:2px 0px 0px 5px;
list-style:none;
-moz-box-shadow:0px 1px 2px #666;
-webkit-box-shadow:0px 1px 2px #666;
box-shadow:0px 1px 2px #666;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#333333, offX=1, offY=1, positive=true);
zoom:1;
}

#youmenu ul.menualani a {
display:block;
color:#666;
float:left;
text-decoration:none;
background:#fff;
width:120px;
padding:4px;
margin:0;
border:none;
}

#youmenu ul.menualani a:hover {
display:block;
color:#333;
float:left;
text-decoration:none;
background:#eaeaea;
width:120px;
padding:4px;
margin:0;
border:none;
-moz-box-shadow:0px 0px 0px #333;
-webkit-box-shadow:0px 0px 0px #333;
box-shadow:0px 0px 0px #333;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#333333, offX=0, offY=0, positive=true);
zoom:1;
}

#youmenu a.cikis {color:#2e83ff;border:1px solid #fff}
#youmenu a.menu {color:#333}

jQUERY
Son olarak menümüze dinamik etkisini katacak olan jQuery kodlarını yazıyoruz.

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

	$("a.menu").click(function () {
    $(".menualani").slideToggle(100);

    });
});
</script>

Neler Yaptık?
Bu aşamaya kadar neler yaptığımızdan kısaca bahsetmek istiyorum. Menümüze Youmenu ismini verdiğimiz bir id tanımlayarak başladık. Sonrasında klasik bir Ul Li menü kodu yazdık. Bu menü içinde alt menü şeklinde görünmesini istediğimiz ana menü bağlantımıza class=”menu” şeklinde bir sınıf tanımı verdik. Bu tanımdan daha sonra yararlanacağız. Alt menülerimizin stil tanımlamasını ise “menualani” isimli sınıfımızla yaptık. Menümüz bu aşamaya kadar klasik bir menü görünümü ve özelliği taşımakta.

İşte klasik bir görünüm ve özellikte olan bu menümüzü Css ile şekillendireceğiz. Css kodlarının uzunluğundan bu uygulamanın aslında tamamen Css’de bittiğini söyleyebilirim. Zira hem Xhtml hem de jQuery kodlarımız oldukça kısa.

Css tanımlamalarında dikkat edeceğiniz nokta #Youmenu isimli id içinde tanımladığımız A etiketi. A etiketinin görünümünü tıpkı Youtube sitesinde olduğu gibi düzenledik. Bu görünümü oluşturabilmek için Css3′de tanımlanan box-shadow parametresinden yararlandık. Bu parametreyi uzun uzadıya anlatmayacağım. Çünkü Yatay Gölge Menü Yapımı isimli yazımızda uzunca bu parametreden bahsettik. Dilerseniz o yazıdan yararlanabilirsiniz.

Menümüzde açılacak olan bağlantıya vurgu yapabilmek adına Span etikene bir takım tanımlamalar yaptık. Burada ben Youtube tasarımına benzetebilmek için bir aşağı ok kullandım ve bunu arkaplan resmi olarak tanımladım. Uygun değerleri verdikten sonra açılmasını istediğim menü birimine Xhtml koduyla ekledim. Biraz karışık gelebilir ama kodları incelerseniz ne kadar kolay olduğunu görürsünüz.

Menümüzün alt birimlerini ise Ul etiketi için oluşturduğumuz menualani isimli sınıfta tanımladık. Bu alanda alt menülerimizin nasıl bir görünüme sahip olacağını belirledik.

İşin jQuery boyutunda ise menümüzün açılır hale gelmesi için çok kısa bir kod kullandık. Sanıyorum daha önceki yazılarımızdan birinde de jQuery’nin slideToggle fonksiyonundan yararlanmıştık. jQuery kodunda görebileceğiniz gibi daha önce tanımladığımız menu sınıf ismine sahip a etiketine tıklanınca menualani isimli sınıfın slayt şeklinde açılmasını istedik. Uygulamanın en kolay noktası bu galiba :)

Tarayıcı Uyumu
Şayet Css kodlarını incelediyseniz box-shadow etkisini Internet Explorer’da yakalayabilmek için filter kullandığımı görürsünüz. Aslına bakarsanız bu durumdan nefret ediyorum. Çünkü IE gibi ilkel bir tarayıcıya hala tasarımlarımızı anlatmak, kanıtlamak zorunda olmamız hiç hoşuma gitmiyor. Ne yazık ki ziyaretçilerimizden gelen talep bu yönde. Bundan sonraki yazılarda elimden geldiğince bu konuya dikkat edeceğim.

IE engelini de aştıktan sonra rahatlıkla söyleyebilirim ki bu uygulamamız tüm tarayıcılarda hemen hemen benzer şekilde görünecektir. Ben kontrollerimi yaptım ama sizler de kendi tarayıcılarınızda test ederseniz sevinirim.

Umarım sizler için faydalı olmuştur. Bir diğer makalemizde görüşmek üzere.

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

Bu uygulamamızda Css3, Xhtml ve jQuery ile ikon destekli dikey (vertical) tab menü (veya tab navigasyon da diyebiliriz) uygulaması yapacağız. Tab menümüzü oluşturduğumuz aşamaları da makalemiz sonunda sizlerle konuşacağız. Dilerseniz hemen kodlarımızı yazmaya başlayalım.

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

<div id="menualani">
<div class="ikonalani">

<a href="#" class="ikon1 aktifikon">ikon 1</a>
<a href="#" class="ikon2">ikon 2</a>
<a href="#" class="ikon3">ikon 3</a>

</div>

<div class="icerikalani">
<div class="icerik1 goster"><h2>KATEGORİLER</h2>
<ul>
<li><a href="#">XHTML / CSS</a></li>
<li><a href="#">JAVASCRIPT</a></li>
<li><a href="#">DREAMWEAVER</a></li>
<li><a href="#">PHOTOSHOP</a></li>
<li><a href="#">PHP / MYSQL</a></li>
<li><a href="#">WORDPRESS</a></li>
<li><a href="#">KISA KISA</a></li>
<li><a href="#">GENEL KONULAR</a></li>
</ul>

</div>
<div class="icerik2">
<h2>HAKKIMIZDA</h2>
<p>Sitemiz hakkında verebileceğimiz kısa bir tanıtım cümlesi ve girişi bu alana yazabiliriz. Bu alandaki yazıyı içerik2 isimli div sınıfı içine yazıyorum. </p>

<p><a href="#">Hakkımızda</a> <a href="#">RSS Takip</a></p>

</div>
<div class="icerik3">
<h2>BİZİ TAKİP EDİN!</h2>
<p>Aşağıdaki bağlantılardan yararlanarak bizi farklı sosyal medya sitelerinde takip edebilirsiniz. </p>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Friendfeed</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Flickr</a></li>
<li><a href="#">Youtube</a></li>
</ul>
</div>

</div>
</div>

Şimdi Xhtml kodlarımızın görünümünü düzenleyecek olan Css kodlarımızı yazalım.

#menualani {width:300px;display:block;float:left}

/* Menümüzün ikon alanını aşağıda tanımalamaya başlıyoruz. Sonrasında her bir menü ikonumuzu tanımlayacağız. */
.ikonalani {width:42px;display:block;float:left;position:relative;z-index:999;}

/* ikon1, ikon2 ve ikon3 için ortak stil tanımlaması yapıyoruz. Özelleştirmeleri aşağıdaki kodlarda işleyeceğiz */
/* text-indent:-9999px değeri ile ikonlarımızdaki metin bağlantıları ortadan kaldırıyoruz */

a.ikon1, a.ikon2, a.ikon3 {
text-decoration:none;
display:block;
outline:none;
text-indent:-9999px;
width:40px;
height:40px;
}

/* Şimdi ikonlarımız için özel olarak arkaplan resmi tanımlıyoruz. */

a.ikon1 {
background:#fff url(resim1.png) no-repeat center center;
margin-top:10px;
}

a.ikon2 {
background:#fff url(resim2.png) no-repeat center center;
}

a.ikon3 {
background:#fff url(resim3.png) no-repeat center center;
}

/* Menümüzde aktif olarak görünecek olan ikonu .aktifikon sınıfı içinde tanımlıyoruz. Parametrelere dikkat! */

a.aktifikon {

background-color:#ddd;
width:40px;
height:40px;
border-top:2px solid #bbb;
border-left:2px solid #bbb;
border-bottom:2px solid #bbb;
border-right:2px solid #ddd;
display:block;
-moz-border-radius:6px 0px 0px 6px; /* Firefox için köşe yuvarlatalım */
-webkit-border-radius:6px 0px 0px 6px; /* Google Chrome ve Safari için köşe yuvarlatalım */
border-radius: 6px 0px 0px 6px; /* Opera için köşe yuvarlatalım */
}

/* BU ALANDAN SONRA İÇERİK ALANIMIZI TANIMLAMAYA BAŞLAYACAĞIZ... */

/* İçerikalaninin z-index'ini ikon alanından daha düşük bir sayıyla tanımlayarak daha altta kalmasını sağlıyoruz... */
/* z:index:1 */

.icerikalani {width:250px;background:#f5f5f5;float:left;position:relative;z-index:1;display:block}

/* Dikkat! Tüm içerik isimli alanları display:none ile gizliyoruz */
.icerik1, .icerik2, .icerik3 {display:none}

.icerik1, .icerik2, .icerik3 {
background:#ddd;
color:#fff;
height:300px;
top:48px;
border:2px solid #bbb;
margin-left:0px;

/* Bu kez her bir içerik alanımız için köşe yuvarlatıyoruz. Tabiki farklı tarayıcılar için farklı kodlarla :( */
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius: 6px;
}

/* Daha önce gizlediğimiz tüm icerik alanlarına bu sınıf eklenerek görünür hale gelecek. */
/* display:block bu gösterim için yeterli */
.goster {display:block;}

/* Bu alandan sonraki kodlar icerik isimli sınıfı güzel bir görünüme kavuşturmak için oluşturduğum css kodları */
/* Genel olarak başlık, sırasız liste [menümüz], paragraf ve bağlantı etiketlerini .icerikalani sınıfı içinde tanımladım */

.icerikalani h2 {font:bold 16px arial, verdana, sans-serif;padding:0px 10px 0px 10px;color:#333;text-shadow:0px 1px 2px #fff}
.icerikalani ul {list-style:none;margin:0;padding:0px 10px 0px 10px;}
.icerikalani li {padding:0;margin:0}
.icerikalani ul li a {text-decoration:none;color:#333;background:#ddd;font:12px arial, verdana, sans-serif;border-top:1px solid #eee;border-bottom:1px solid #ccc;padding:6px;margin:0;display:block}
.icerikalani ul li a:hover {text-decoration:none;color:#fff;background:#333;font:12px arial, verdana, sans-serif;border-top:1px solid #ccc;border-bottom:1px solid #aaa;padding:6px;margin:0;display:block;text-shadow:0px 1px 2px #fff;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius: 4px;
}
.icerikalani p {font:13px/24px arial, verdana, sans-serif;padding:0px 10px 0px 10px;color:#666;}
.icerikalani p a {padding:4px;background:#2e83ff;color:#fff;text-decoration:none}
.icerikalani p a:hover {padding:4px;background:#666;color:#fff;text-decoration:none}

Menümüzün fare ile tıklanışında yapacağı değişiklikleri jQuery yardımı ile tanımlayalım.

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

	$("a.ikon1").click(function() { // ikon1'e tıklandığında neler olacak?

		$(".icerik1").addClass("goster");
		$(".icerik2, .icerik3").removeClass("goster");

		$("a.ikon1").addClass("aktifikon");
		$("a.ikon2, a.ikon3").removeClass("aktifikon");

        return false;

		});

	$("a.ikon2").click(function() { // ikon2'ye tıklandığında neler olacak?

		$(".icerik2").addClass("goster");
		$(".icerik1, .icerik3").removeClass("goster");

		$("a.ikon2").addClass("aktifikon");
		$("a.ikon3, a.ikon1").removeClass("aktifikon");

		return false;

		});

	$("a.ikon3").click(function() { // ikon3'e tıklandığında neler olacak?

		$(".icerik3").addClass("goster");
		$(".icerik1, .icerik2").removeClass("goster");

		$("a.ikon3").addClass("aktifikon");
		$("a.ikon2, a.ikon1").removeClass("aktifikon");

        return false;

		});

	});
</script>

Uygulamamızın Detayları
Bu kadar kod yazdıktan ve uygulamayı oluşturduktan sonra ne yaptığımız anlatmamak olmaz değil mi :)

Öncelikle bu uygulamanın ne gibi bir zemin üzerine kurulduğunu anlatalım. Xhtml kodlarında dikkat ettiğiniz gibi iki tane ana sınıf bulunmakta. Bunlardan birisi sadece ikonlarımızın yer aldığı “ikonalanı” ve diğeri ise içeriğimizi yerleştirdiğimiz “icerikalanı” isimli sınıflar.

İkonalanı isimli sınıfımızda belli bir genişlik içinde ikonlarımızın alt alta yer almasını istedik. Ayrıca bu alanda yer alan her bir ikonumuza ikon1, ikon2 ve ikon3 diye ayrı ayrı sınıflar oluşturduk. Kodları optimum düzeyde kısaltma adına ikonların görünümündeki ortak özellikleri tek bir Css kodunda topladık. Css kodlarında yazmış olduğum açıklamalara ve kodlara dikkat ederseniz bunu görebilirsiniz.

Bu noktada önemli olan şu ki; hangi ikona tıklanırsa tıklansın o ikon jQuery yardımı ile “aktifikon” isimli Css sınıfını kazanmakta. Aktifikon isimli Css sınıfını içerikalanı isimli sınıfımıza göre görünüm olarak düzenleyip menü de bir bütünlük olmasını sağladık. Yine kodlar üzerinde bunu görebilirsiniz.

Bu aşamadan sonra içeriğimizin görüneceği ana alan olan “içerikalanını” tanımlaya geldi. Yine içerik alanı da belli bir genişlik içerisinde girmiş olduğumuz içerikleri gösteren alan olarak görevini yapacak. Dikkat çektiğimiz nokta şu; nasıl ki ikonalanında her bir ikon için ikon1, ikon2 ve ikon3 diye sınıflar oluşturduysak aynısını içerik alanı içerisinde de yapıyoruz.

Burada oluşturduğumuz icerik1, icerik2 ve icerik3 isimli div sınıfları fare ile hangi ikon sırasına tıklanırsa aynı ikon sırasıyla görünecek. Oldukça basit değil mi.

Yazdıklarımızı toparlayacak olursak iki ana sınıf içinde sıralı şekilde ikon1-icerik1, ikon2-icerik2 ve ikon3-icerik3 alanlarını tanımladık. Bu alanların görünümlerini Css’de uygun parametre ve değerler ile zenginleştirdik. Şimdi iş her bir ikona tıklayışta içeriğimizin nasıl değiştiğini anlatmaya geldi.

jQuery Aşamasında Ne Yaptık?
Uygulamamızın en kolay ve belki de en can alıcı noktası da burası. Yazmış olduğumuz jQuery kodlarını incelerseniz sonuca nasıl gittiğimizi anlayabilirsiniz.

İlk ikon sıramızda ne gibi bir işlem yaptığımızı anlatalım. İkon1 isimli ikonumuza tıklandığında gerçekleşecek olan olayları sırayla tanımladık. İkon1′e tıklandığında jQuery’nin addClass ve removeClass fonksiyonlarından yararlanarak diğer alanlarımızın Css sınıfı almasını ve/veya bunu kaldırmasını sağladık. Adından da anlaşılacağı gibi addClass bir ögeye sınıf eklemeye, removeClass ise tam tersi sınıf kaldırmaya yarıyor.

Şöyle ki; İkon2′ye tıklandığında önceden görünür halde olan icerik1 ve ikon1 isimli sınıflarımız yaptığımız tanımlamaya göre “goster” ve “aktifikon” isimli Css sınıfını kaybettiler. Bununla birlikte hem ikon2 hem de icerik2 isimli alanlarımız goster ve aktifikon sınıfını kazandılar. Mantığı gayet basit olan bu yöntemi her 3 durum için de uyguladık. Uzun lafın kısası 1 görünürken 2 ve 3 gizlensin ve sınıf kaybetsin, 2 görünürken 1 ve 3 gizlensin ve sınıf kaybetsin :)

(Aslına bakarsanız bu tarz bir olay gelişimi için farklı yöntemler kullanılabilir. Fakat ben jQuery’nin az kod çok iş mantığına bağlı kalarak kodları elimden geldiğince kısa tuttum)

Tarayıcı Uyumu
Yine geldik o malum şarkıya :) Uygulamamız Firefox, Google Chrome, Safari ve Opera ile sorunsuz çalışacaktır. IE türevleri içinse durum biraz farklı. IE üzerinde sadece yuvarlak köşeler görünmeyecek ama uygulama sorunsuz çalışacaktır. IE üzerinde köşeleri yuvarlatmak için farklı yöntemler mevcut ancak ben örneğimiz üzerinde böyle bir ekleme yapmadım. Dilerseniz kaynak kodlarda değişiklik yaparak IE için farklı görünümler ortaya çıkarabilirsiniz.

Son Olarak…
Uygulama üzerinde veya kod aşamasında atladığım, eksik bulduğunuz noktalar olursa lütfen yorumlarınızla beni bilgilendirin. Umarım sizler için faydalı bir anlatım ve doküman olmuştur. Bir başka makalemizde görüşmek üzere.

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

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