Öncelikle menümüzün HTML kısmını hazırlayalım.

Menümüzde önemli nokta, iç içe geçmiş

etikleri. Önce yatay bir menü hazırlıyoruz.

<ul id="menu">
	<li><a href="#">Anasayfa</a></li>
	<li> <a href="#">Madde 1</a></li>
	<li> <a href="#">Madde 2</a></li>
</ul>

Anasayfa’nın altında herhangi bir link olmayacağı için Madde 1 ile açılır menümüzü hazırlamaya başlıyoruz.
<li> etiketi altına bir tane
<ul> etiketi açıyoruz. Bu etiket içerisine açılacak menüyü yerleştireceğiz. Şimdi Madde 1′in altında açılacak olan menümüzün kodlarını yazalım.

<li> <a href="#">Madde 1</a>
	<ul>
		<li><a href="#">Madde 1-1</a></li>
		<li><a href="#">Madde 1-2</a></li>
	</ul>
</li>

Peki bu menü nasıl açılacak? Bu açılma ve tekrar kapanma işlemlerini CSS ile yapacağız. ID’si “menu” olan ul etikenine ait li etiketlerinin içerisinde yer alan ul etiketlerinin varsayılan(default) display değerini “none” olarak belirliyoruz. Tek cümlede anlatınca biraz karışık olduğunu biliyorum o yüzden bir çizim ile bunu anlatarak pekiştirelim.

Bu grafiğe ait olan CSS kodlarını yazalım. Yukarıdada belirttiğim gibi <li> içindeki etiketinin değerini atayacağız.

ul#menu li ul{
display:none;
border:solid 1px #ccd6e5;
padding:0px;
margin-left:-10px;
padding-bottom:5px;
}

Yukarıda stil olarak vermiş olduğumuz kodları geçersek ilk sırada yer alan “display:none;” koldarı bizim işimizi gören kısım. Şimdi en işlevsel kısıma geldik. Bu alt menümüz ne zaman açılacak. Genel olarak “<a” etiketlerinde kullanılan “hover” özelliğini kullanacağız. Yani “li:hover” da altındaki “ul” etiketinin display özelliğini “block” yapacaz.

Şimdi CSS kodlarını yazalım :

ul#menu li:hover ul{
display:block;
position:absolute;
width:150px;
background:#fff;
}

Şimdi kendi ihtiyaçlarımız doğrultusunda basit bir js kütüphanesi yazmaya başlayalım.

Kütüphanemizdeki en temel öğe doğal olarak bir DOM referansı olan document.getElementById‘dır. Bir çok js işleminde ihtiyaç duyduğumuz bu referansa en kolay ve akılda kalıcı şekilde nasıl ulaşabiliriz? PHP ve Js Kütüphanesi kullananlarımızın alışkın olduğu $ ile ulaşalım. O zaman kütüphanemizin ilk fonksiyonunu yazalım ;

function $(id)//buradada parametre olarak idyi kullanıyoruz
{
      return document.getElementById(id);
}

Bu fonksiyonumuz ile ilgili bir kaç örneğe buradan ulaşabilirsiniz.

Birinci fonksiyonumuzu oluşturduk. Bu fonksiyonu kullandıkça çok seveceğinize eminim. Çünkü işlerimizi çok kolaylaştırıyor.

İkinci fonksiyonumuz olan $v, id’sini verdiğimiz bir tag’ın (input,select,textarea tagları) value’sunu döndürecek bize.

function $v(id)//buradada parametre olarak idyi kullanıyoruz
{
return document.getElementById(id).value;
}

Bu fonksiyonumuz ile ilgili bir kaç örneğe buradan ulaşabilirsiniz.

Burada dikkat çekmek istediğim bir nokta var. Bu fonksiyon ile tagların sadece değerlerini alabiliyoruz. Yani bir inputun değerini değiştirmek için şu kodu yazarsak çalışmayacaktır :

$v('id') = 'yenideğer';

Bu işlemi gören bir fonksiyonu, az önce yazdığımız $ fonksiyonundan türetebiliriz :

function $v(id)//buradada parametre olarak idyi kullanıyoruz
{
return document.getElementById(id).value;
}

Üçüncü fonksiyonumuz olan $cssC, önceki fonksiyonlara göre daha komplike bir yapıya sahip olacak. Bu fonksiyonumuza 3 parametre yollayarak istediğimiz HTML etiketi üzerinde CSS değişikliklerini gerçekleştireceğiz. Bu fonksiyonumuzda paramaetre sayımız fazla olduğu için öncelikle parametrelerimizi açıklayalım ;

id : Üzerinde değişiklik yapmak istediğimiz etiketimizin tanımlayıcı değeri.
tag : Etiketimizin üzerinde değişiklik yapmak istediğimiz CSS etiketini temsil ediyor.
yenideger : CSS etiketinin alacağı yeni değeri temsil ediyor.

Fonksiyonumuz aşağıdaki gibi ;

function $cssC(id,tag,yenideger)
{
satir = '$(id).style.'+tag+' = yenideger'; //fonksiyonumuzu satir adlı bir degisken atıyoruz
eval(satir); //eval ile satir değişkenini çalıştırıyoruz ve fonksiyonumuz görevini yerine getiriyoruz
}

Bu fonksiyonumuz ile ilgili bir kaç örneğe buradan ulaşabilirsiniz.

Başlangıç olarak 3 fonksiyon tanımlamış bulunmaktayız. Bir sonraki yazımızda fonksiyonlarımızı biraz daha komplike hala getirerek devam etmek dileğiyle.