Fisheye dock เมนูสุดเจ๋งสำหรับ Blogger

จากที่ได้นำเสนอวิธีสร้างเมนูไปหลายชนิดแล้ว บทความนี้จะนำเสนอวิธีสร้างเมนูแบบแปลก ๆ ตามสไตล์ ของ Mac osx เมนูนี้มีชื่อว่า Fisheye Dock Menu ตัวอย่าง ACTION ของเมนูชนิดนี้สามารถดูได้

Fisheye Dock DEMO1  หรือ Fisheye Dock DEMO2

สอนแต่งบล็อก

สอนทำบล็อก

ขั้นตอนการติดตั้ง Fisheye Dock Menu


Log in เข้าไปที่ blogger.com >> จากแผงควบคุม >> รูปแบบ >> แก้ไข HTML >> ไม่ต้องขยายแม่แบบเครื่องมือ


สอนทำบล็อก blogger



ขั้นที่ 1 ติดตั้ง CSS โดยค้นหาโค้ด  ]]></b:skin> และวางโค้ดต่อไปนี้ก่อนหน้าโค้ดดังกล่าว


/* Fisheye Menu Styles */
#fisheye_menu {
list-style: none;
padding: 0;
margin: 10px;
height: 81px;
}
#fisheye_menu li {
position: relative;
display: block;
float: left;
}
#fisheye_menu span {
position: absolute;
top: 100%;
left: 0;
text-align: center;
width: 79px;
padding: 1px;
margin: 0;
border: solid 1px #bbb; 
color: #333;
background: #eee;
}
#fisheye_menu a {
text-decoration: none;
}
#fisheye_menu img {
border: 0;
vertical-align: top;
}

2. ต่อเนื่องจากขั้นที่ 1 ติดตั้ง java script โดยค้นหาโค้ด </head> แล้ววาง โค้ดด้านล่างนี้ไว้ด้านบน หรือ ก่อนหน้า โค้ด </head>

<script src='http://hackublog.googlecode.com/files/fisheye_PNG.js' type='text/javascript'></script>

3. ไปที่องค์ประกอบของหน้า >> เพิ่ม Gadget ชนิด HTML/Javascript วางโค้ดนี้ลงไปแล้วบันทึก

<ul id="fisheye_menu">   
<li><a href="URL ที่ต้องการลิงค์ไป"><img src="URL ของรูป.png" alt="image description" /><span>Icon 1</span></a></li>    
<li><a href="URL ที่ต้องการลิงค์ไป"><img src="URL ของรูป.png" alt="image description" /><span>Icon 2</span></a></li>    
<li><a href="URL ที่ต้องการลิงค์ไป"><img src="URL ของรูป.png" alt="image description" /><span>Icon 3</span></a></li>    
<li><a href="URL ที่ต้องการลิงค์ไป"><img src="URL ของรูป.png" alt="image description" /><span>Icon 4</span></a></li>    
<li><a href="URL ที่ต้องการลิงค์ไป"><img src="URL ของรูป.png" alt="image description" /><span>Icon 5</span></a></li>    
<li><a href="URL ที่ต้องการลิงค์ไป"><img src="URL ของรูป.png" alt="image description" /><span>Icon 6</span></a></li>
</ul>


ถ้าต้องการเพิ่ม/ลดจำนวนเมนู ก็ให้เพิ่มหรือ ลบ โค้ดนี้


<li><a href="URL ที่ต้องการลิงค์ไป"><img src="URL ของรูป.png" alt="image description" /><span>Icon 6</span></a></li> 


และเราสามารถเปลี่ยนตำแหน่งของ Gadget Fish Menu นี้โดยการ Drag เมาส์ลากไปยังตำแหน่งที่ต้องการ


หมายเหตุ ไฟล์ภาพที่จะใช้ในเมนูนี้จะต้องเป็นไฟล์ .PNG เท่านั้น หากต้องการให้ใช้ไฟล์นามสกุลอื่นๆ ให้แก้ไข fisheye_PNG.js ในบรรทัดสีแดง(ดูโค้ดข้างล่าง)ก่อนที่จะ Upload ฝากไว้ที่ free host หรือ Google code ครับ

/* Fisheye Menu v1.0    
   Written by Marc Grabanski (m@marcgrabanski.com) 

   Copyright (c) 2007 Marc Grabanski (http://marcgrabanski.com/code/fisheye-menu)   
   Dual licensed under the GPL (http://www.gnu.org/licenses/gpl-3.0.txt) and     
   CC (http://creativecommons.org/licenses/by/3.0/) licenses. "Share or Remix it but please Attribute the authors."    
   Date: 10-05-2007  */ 

var fisheyemenu = {   
    startSize : 55,    
    endSize : 88,    
    imgType : ".png",    
    init : function () {    
        var animElements = document.getElementById("fisheye_menu").getElementsByTagName("img");    
        var titleElements = document.getElementById("fisheye_menu").getElementsByTagName("span");    
        for(var j=0; j<titleElements.length; j++) {    
            titleElements[j].style.display = 'none';    
        }    
        for(var i=0; i<animElements.length; i++) {    
            var y = animElements[i];    
            y.style.width = fisheyemenu.startSize+'px';    
            y.style.height = fisheyemenu.startSize+'px';    
            fisheyemenu.imgSmall(y);    
            animElements[i].onmouseover = changeSize;    
            animElements[i].onmouseout = restoreSize;    
        }    
        function changeSize() {    
            fisheyemenu.imgLarge(this);    
            var x = this.parentNode.getElementsByTagName("span");    
            x[0].style.display = 'block';    
            if (!this.currentWidth) this.currentWidth = fisheyemenu.startSize;    
            fisheyemenu.resizeAnimation(this,this.currentWidth,fisheyemenu.endSize,15,10,0.333);    
        }    
        function restoreSize() {    
            var x = this.parentNode.getElementsByTagName("span");    
            x[0].style.display = 'none';    
            if (!this.currentWidth) return;    
            fisheyemenu.resizeAnimation(this,this.currentWidth,fisheyemenu.startSize,15,10,0.5);    
            fisheyemenu.imgSmall(this);    
        }    
    },    
    resizeAnimation : function (elem,startWidth,endWidth,steps,intervals,powr) {    
        if (elem.widthChangeMemInt) window.clearInterval(elem.widthChangeMemInt);    
        var actStep = 0;    
        elem.widthChangeMemInt = window.setInterval(    
            function() {    
                elem.currentWidth = fisheyemenu.easeInOut(startWidth,endWidth,steps,actStep,powr);    
                elem.style.width = elem.currentWidth+"px";    
                elem.style.height = elem.currentWidth+"px";    
                actStep++;    
                if (actStep > steps) window.clearInterval(elem.widthChangeMemInt);    
            }    
            ,intervals)    
    },    
    easeInOut : function (minValue,maxValue,totalSteps,actualStep,powr) {    
    //Generic Animation Step Value Generator By www.hesido.com    
        var delta = maxValue - minValue;    
        var stepp = minValue+(Math.pow(((1 / totalSteps)*actualStep),powr)*delta);    
        return Math.ceil(stepp)    
    },    
    imgSmall : function (obj) {    
        imgSrc = obj.getAttribute("src");    
        var typePos = imgSrc.indexOf(fisheyemenu.imgType, 0);    
        var imgName = imgSrc.substr(0, typePos);    
        obj.setAttribute("src", imgName+"_small"+fisheyemenu.imgType);    
    },    
    imgLarge : function (obj) {    
        imgSrc = obj.getAttribute("src");    
        var typePos = imgSrc.indexOf("_small", 0);    
        var imgName = imgSrc.substr(0, typePos);    
        obj.setAttribute("src", imgName+fisheyemenu.imgType);    
    }    
} 

// Add event with wide browser support   
if ( typeof window.addEventListener != "undefined" )    
    window.addEventListener( "load", fisheyemenu.init, false );    
else if ( typeof window.attachEvent != "undefined" )    
    window.attachEvent( "onload", fisheyemenu.init );    
else {    
    if ( window.onload != null ) {    
        var oldOnload = window.onload;    
        window.onload = function ( e ) {    
            oldOnload( e );    
            fisheyemenu.init();    
        };    
    }    
    else    
        window.onload = fisheyemenu.init;    
}

ตอนนี้มีความคิดเห็น : 5 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. พี่ Hack คับ
    ผมทำตามบทความนี้แล้ว
    แต่มันแสดงผลเป็นตัวหนังสือ image description อะคับ
    ต้องเอาเม้าส์ไปชี้ ถึงจะมีภาพ
    ทำไมเป็นเช่นนี้หรอคับ ช่วยบอกหน่อยนะคับ

  1. @ Admin : ต้องใช้ภาพที่มีนามสกุลเดียวกับในสคริปต์ด้วยครับ เช่นในที่นี้ใช้ นามสกุลภาพเป็น .PNG แต่ก็สามารถแก้สคริปต์ให้เป็นนามสกุลอื่น ๆ ก็ได้เช่น .jpg หรือ .gif

    จาวาสคริปต์อยู่ตอนท้ายของบทความครับ

  1. งง ข้อสุดท้าย ครับเอาไปใส่ที่ไหน เพราะตอนนี้ เมนู ที่ได้ มันต้องชี้ ถึงจะมีรูปขึ้นครับ

    เหมือนกับความคิดเห็นแรกครับ


    www.shitsanupong.blogspot.com

  1. ข้อสุดท้ายบอกว่า ไปที่องค์ประกอบของหน้า >> เพิ่ม Gadget ชนิด HTML/Javascript วางโค้ดนี้ลงไปแล้วบันทึกครับ

    ส่วน มันต้องชี้ ถึงจะมีรูปขึ้น เพราะชนิดไฟล์กับสคริปต์ไม่ตรงกันครับ

  1. fisheye_PNG.js
    ไฟหายครับ

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel