Açıklama
Sayfanın sol tarafında duran ve mouse üzerine geldiği zaman açılan gizli menü örneği..
JS SOURCE CODE
// *****************************************************************
// ADIM 1 <HEAD> Bölümleri arasına eklenecek olan bölüm
// *****************************************************************
<STYLE>
#menuOut, #menuIn
{
position:absolute;
left:-155px;
width:160px;
top:170px;
border:1.5px solid green;
background-color:yellow;
layer-background-color:yellow;
font:bold 12px Verdana;
line-height:20px;
}
</STYLE>
// *****************************************************************
// ADIM 2 <BODY> Bölümleri arasına eklenecek olan bölüm
// *****************************************************************
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
if (document.all)
document.write('<div id="menuIn" style="left:-150" onMouseover="pull()" onMouseout="draw()">') // End -->
</script>
<layer id="menuOut" onMouseover="pull()" onMouseout="draw()">
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var siteName = new Array();
var siteLink = new Array();
siteName[0] = "Yeni ipucu siteniz.";
siteName[1] = "ASP ipucu";
siteName[2] = "PHP ipucu";
siteName[3] = "Javascript";
siteName[4] = "Forumlar";
siteLink[0] = "http://www.ipucu.web.tr";
siteLink[1] = "http://www.ipucu.web.tr/aspipucu.php";
siteLink[2] = "http://www.ipucu.web.tr/phpipucu.php";
siteLink[3] = "http://www.ipucu.web.tr/jsipucu.php";
siteLink[4] = "http://www.ipucu.web.tr/forum/";
for (i = 0; i <= siteName.length - 1; i++)
document.write('<a href=' + siteLink[i] + '>' + siteName[i] + '</a><br>'); // End --> </script> </layer> <SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function regenerate() {
window.location.reload();
}
function regenerate2() {
if (document.layers)
setTimeout("window.onresize=regenerate", 400);
}
window.onload = regenerate2;
if (document.all) {
document.write('</div>');
slideMenu = document.all.menuIn.style;
boundryR = 0;
boundryL = -150;
}
else {
slideMenu = document.layers.menuOut;
boundryR = 150;
boundryL = 10;
}
function pull() {
if (window.drawMenu)
clearInterval(drawMenu);
pullMenu = setInterval("pullEngine()", 50);
}
function draw() {
clearInterval(pullMenu);
drawMenu = setInterval("drawEngine()", 50);
}
function pullEngine() {
if (document.all && slideMenu.pixelLeft < boundryR) slideMenu.pixelLeft += 5; else if(document.layers && slideMenu.left < boundryR) slideMenu.left += 5; else if (window.pullMenu) clearInterval(pullMenu); } function drawEngine() { if (document.all && slideMenu.pixelLeft > boundryL) slideMenu.pixelLeft -= 5; else if(document.layers && slideMenu.left > boundryL) slideMenu.left -= 5; else if (window.drawMenu) clearInterval(drawMenu); } // End -->
</script>
Detaylı İnceleme
Menüyü kullanmak için iki adımın takip edilmesi gerekmektedir.
ADIM 1 'de bulunan kodları head tagları arasına yerleştirmeniz gerekmektedir.
ADIM 2 'de 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 ve başlıkları ayarlayabilirsiniz.
İyi Çalışmalar
Görüntülenme: 3481
Ekleyen: Administrator