Yazar: 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.
