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

<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>

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.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir