javascript ile hareketli menü yapımı

bu yazımda sizlere javascript ile nasıl basit ama etkili bir harektli menü yapabiliriz bunu anlatacağız.

biz bunu 2 adımda yapacağız.

ilk kısım head etiketleri arasında bulunacak kod parçalarıdır.

2. kısım ise body etiketleri arasında yer alacak kısımdır.

sözü fazla uzatmadan kodlarımızı yazmaya başlayalım.

///// ADIM 1 <HEAD> Bölümleri arasına eklenecek olan bölüm

nSpace=7 // how many space maximum between each letter
nSpeed=200 // Animasyonun Hızı
timerLSM=null;
function LetterSpacingMenu() {
if(document.getElementById){
lnks = Math.floor(Math.random()*lnk.length);
letterSpacing = Math.floor(Math.random()*nSpace);
lnk[lnks].style.letterSpacing = letterSpacing + "px";
timerLSM = setTimeout("LetterSpacingMenu()", nSpeed);
}
}
function StopMenu() {
if(document.getElementById) {
clearTimeout(timerLSM);
for(i=0;i<lnk.length;i++)
lnk[i].style.letterSpacing = 0 + "px";
}
}
function LSMenuInit() {
if(document.getElementById) {
lnk = document.getElementById("menucont").getElementsByTagName("a");
cnt = document.getElementById("menucont");
cnt.style.textAlign= "center";
cnt.onmouseover=StopMenu;
cnt.onmouseout=LetterSpacingMenu;
LetterSpacingMenu();
}
}
onload=LSMenuInit;

</script>

// ***********************************************************
//// ADIM 2.. BODY tagları arasına eklenecek olan bölüm
// ***********************************************************

<div id="menucont">
<a href="http://www.ipucu.web.tr" id="a1" class="menulinks" title="Yeni ipucu siteniz">Anasayfa</a><br>
<a href="http://www.ipucu.web.tr/forums" id="a2" class="menulinks" title="Forumlar bölümü">Forumlar</a><br>
<a href="http://www.ipucu.web.tr" id="a1" class="menulinks" title="Yeni ipucu siteniz">ASP İpuçları</a><br>
<a href="http://www.ipucu.web.tr" id="a1" class="menulinks" title="Yeni ipucu siteniz">PHP İpuçları</a><br>
<a href="http://www.ipucu.web.tr" id="a1" class="menulinks" title="Yeni ipucu siteniz">Javascript İpuçları</a><br>
<a href="http://www.ipucu.web.tr" id="a1" class="menulinks" title="Yeni ipucu siteniz">Haberler</a><br>
<a href="http://www.ipucu.web.tr" id="a1" class="menulinks" title="Yeni ipucu siteniz">Yeni Başlayanlar İçin</a><br>

</div>

bu hazır kodu sayfalarınızda kullanabilirsiniz.

iyi bloglamalar herkese.

Bir önceki yazımız olan arkaplan renklerinin sürekli değişmesi başlıklı makalemizde arkaplan renklerinin değişmesi, javascript ve javascript arkaplan değiştirme kodu hakkında bilgiler verilmektedir.