Minggu, 30 Oktober 2011

jQuery 3d list menu

1. Login blogger
2. Tata Letak/Layout - Edit HTML
3. Klik pada Expand Template Widget.
4. Selanjutnya cari kode  ]]></b:skin> dan simpan kode ini di atas nya


#list{ 
        margin:0 auto; 
        height:600px; 
        width:600px; 
        overflow:hidden; 
        position:relative; 
        background-color: #111; 
        -moz-box-shadow:0px 10px 20px #000; 
    } 
    #list ul, 
    #list li{ 
        list-style:none; 
        margin:0; 
        padding:0; 
    } 
    #list a{ 
        position:absolute; 
        text-decoration: none; 
        color:#666; 
        text-shadow:0px 1px 2px #000; 
    } 
    #list a:hover{ 
        color:cyan; 
    } 

Lalu masukan html kode di bawah ini untuk pemanggilannya
sobat bisa memasukan nya di edit html atau di bawah <body atau di Javascript

   <div id="list">
    <ul>
    <li><a href="#">ajax</a></li>
    <li><a href="#">css</a></li>
    <li><a href="#">design</a></li>
    <li><a href="#">firefox</a></li>
    <li><a href="#">flash</a></li>
    <li><a href="#">html</a></li>
    <li><a href="#">Devirtuoso</a></li>
    <li><a href="#">jquery</a></li>
    <li><a href="#">PHP</a></li>
    <li><a href="#">SEO</a></li>
    <li><a href="#">usability</a></li>
    <li><a href="#">www</a></li>
    <li><a href="#">web</a></li>
    <li><a href="#">xhtml</a></li>
    </ul>
    </div> 

Dan ini javascript nya,silakan sobat tambahkan script jQuery di bawah ini tepat di atas tag </body>

         <script src="http://dimash.waphall.com/jquery1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        var element = $('#list a');;
        var offset = 0; 
        var stepping = 0.03;
        var list = $('#list');
        var $list = $(list)
        $list.mousemove(function(e){
            var topOfList = $list.eq(0).offset().top
            var listHeight = $list.height()
            stepping = (e.clientY - topOfList) /  listHeight * 0.2 - 0.1;
        });
        for (var i = element.length - 1; i >= 0; i--)
        {
            element[i].elemAngle = i * Math.PI * 2 / element.length;
        }
        setInterval(render, 20);
        function render(){
            for (var i = element.length - 1; i >= 0; i--){
                var angle = element[i].elemAngle + offset;
                x = 120 + Math.sin(angle) * 30;
                y = 45 + Math.cos(angle) * 40;
                size = Math.round(40 - Math.sin(angle) * 40);
                var elementCenter = $(element[i]).width() / 2;
                var leftValue = (($list.width()/2) * x / 100 - elementCenter) + "px"
                $(element[i]).css("fontSize", size + "pt");
                $(element[i]).css("opacity",size/100);
                $(element[i]).css("zIndex" ,size);
                $(element[i]).css("left" ,leftValue);
                $(element[i]).css("top", y + "%");
            }
            offset += stepping;
        }
    });
    </script> 

selamat mencoba sob..............
jQuery 3d list menu 9out of 10 based on 10 ratings. 9 user reviews.
 

Dafatr Isi

Label Blog

japarus
Template | copyright@2011 | Design by : DiM4sHDiM4sH