Javascript Menü -Hareketli Menü

Açıklama

Javascript ile yapılmış hareket eden bir menü örneği. Sayfada linklerinizin değişik bir biçimde gözükmesini istiyorsanız deneyebilirsiniz.

JS SOURCE CODE

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

<style type="text/css">
.menulinks {position:relative;}
#menucont a{color:#006699; font-weight:bold; text-decoration:none;}
#menucont a:hover{color:#ff0000; font-weight:bold; text-decoration:underline overline; text-transform: uppercase;}
</style>

<SCRIPT LANGUAGE="JavaScript">

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>

Detaylı İnceleme

Menüyü kullanmak için iki adımın takip edilmesi gerekmektedir. Birinci adımda bulunan kodları head tagları arsına yerleştirmeniz gerekmektedir. İkinci adımda bulunan kodların ise body tagları arasına kopyalanması gerekmektedir. Bu bölümde ise menüler ve linkleri ayarlanmaktadır. Sizde bu bölümü inceleyerek kendi sitenize göre linkleri ayarlayabilirsiniz. İyi Çalışmalar

Görüntülenme: 10356

Ekleyen: Administrator