JS Javascript Menü -Hareketli Menü
Javascript ile yapılmış hareket eden bir menü örneği. Sayfada linklerinizin değişik bir biçimde gözükmesini istiyorsanız deneyebilirsiniz.
///// 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>
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
Etiketler: Genel Katagori, javascript, javascript kodları
2 Yorum:
DEMO VARMI
demo yok malesef sitene veya kendi demo sitene ekleyip deniyebilirsin.
Yorum Gönder
Kaydol: Kayıt Yorumları [Atom]
<< Ana Sayfa