Membuat Menu Box Transisi Dengan JQuery

Demo : http://longfield-transitionpage.blogspot.com/
source : http://tympanus.net/Tutorials/LittleBoxesMenu/

step 1 :masukkan kode berikut di atas ]]></:b:skin>

*/------------transisi---------------*/<br /> .littleBoxes{width:350px;height:350px;position:relative;margin:0 auto}.littleBoxes > div{position:absolute;width:90px;height:90px;text-align:center;border:2px solid #FFF;overflow:hidden;background-color:#f7f7f7;-moz-box-shadow:0 0 3px #555;-webkit-box-shadow:0 0 3px #555;box-shadow:0 0 3px #555;background-position:center center;z-index:999}.littleBoxes div a{text-transform:uppercase;font-size:18px;font-weight:700;letter-spacing:-1px;display:block;line-height:90px;text-decoration:none;color:#fff;background:#91EF4A url(../bgItem.png) repeat-x top left;outline:none;text-shadow:1px 1px 1px #888;-moz-box-shadow:1px 1px 3px #777;-webkit-box-shadow:1px 1px 3px #777;box-shadow:1px 1px 3px #777}.littleBoxes div.boxcontent{width:334px;height:246px;text-align:left;font-size:16px;background-color:#f0f0f0;border:2px solid #fff;text-shadow:1px 1px 1px #fff;-moz-box-shadow:1px 1px 3px #777;-webkit-box-shadow:1px 1px 3px #777;box-shadow:1px 1px 3px #777;opacity:0.8;display:none;margin:10px 0 0 10px;padding:10px}.bg1,.bg2,.bg3,.bg4{background-repeat:no-repeat}.bg1{background-image:url(../images/1.jpg)}.bg2{background-image:url(../images/2.jpg)}.bg3{background-image:url(../images/3.jpg)}.bg4{background-image:url(../images/4.jpg)}.bg5{background-image:url(../images/5.jpg)}

kode image.jpg di atas anda ganti dengan url gambar yang anda inginkan
step 2 : masukkan script berikut di atas </head>

<script type='text/javascript'> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-7243260-2']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script>

step 3 : masukkan kode berikut sebelum </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/> <script src='http://tympanus.net/Tutorials/LittleBoxesMenu/jquery.easing.1.3.js' type='text/javascript'/> <script type='text/javascript'> $(function() { /* object to save the initial positions of each box */ var divinfo = {"initial": []}; /* index of the selected / clicked box */ var current = -1; /* we save the index,top and left of each one of the boxes */ $('#littleBoxes > div').each(function(){ var $this = $(this); var initial = { 'index' : $this.index(), 'top' : $this.css('top'), 'left' : $this.css('left') }; divinfo.initial.push(initial); }); /* clcik event for the anchors inside of the boxes */ $('#littleBoxes a').bind('click',function(e){ var $this = $(this); var $currentBox = $this.parent(); /* set a z-index lower than all the other boxes, to see the other boxes animation on the top*/ $currentBox.css('z-index','1'); /* if we are clicking on a expanded box : */ if(current == $currentBox.index()){ /* put it back (decrease width,height, and set the top and left like it was before). the previous positions are saved in the divinfo obj*/ $currentBox.stop().animate({ 'top' : divinfo.initial[$currentBox.index()].top, 'left' : divinfo.initial[$currentBox.index()].left, 'width' : '90px', 'height' : '90px' },800,'easeOutBack').find('.boxcontent').fadeOut(); $('#littleBoxes > div').not($currentBox).each(function(){ var $ele = $(this); var elemTop = divinfo.initial[$ele.index()].top; var elemLeft = divinfo.initial[$ele.index()].left; $ele.stop().show().animate({ 'top' : elemTop, 'left' : elemLeft, 'opacity' : 1 },800); }); current = -1; } /* if we are clicking on a small box : */ else{ /* randomly animate all the other boxes. Math.floor(Math.random()*601) - 150 gives a random number between -150 and 450. This range is considering the initial lefts/tops of the elements. It's not the exact right range, since we would have to calculate the range based on each one of the boxes. Anyway, it fits our needs... */ $('#littleBoxes > div').not($currentBox).each(function(){ var $ele = $(this); $ele.stop().animate({ 'top' : (Math.floor(Math.random()*601) - 150) +'px', 'left': (Math.floor(Math.random()*601) - 150) +'px', 'opacity':0 },800,function(){ $(this).hide(); }); }); /* expand the clicked one. Also, fadeIn the content (boxcontent) if you want it to fill the space of the littleBoxes container, then these are the right values */ var newwidth = 379; var newheight = 379; $currentBox.stop().animate({ 'top' : '0px', 'left' : '0px', 'width' : newwidth +'px', 'height': newheight+'px' },800,'easeOutBack',function(){ current = $currentBox.index(); $(this).find('.boxcontent').fadeIn(); }); } e.preventDefault(); }); }); </script><br /> <br />

step 4 : masukan pada bagian body code berikut dan bisa juga di letakkan pada widget terserah anda

<div class="title"> <h1>Little Boxes Menu with jQuery</h1> </div> <div id="content"> <div class="reference"><br /> <p><a href="http://www.flickr.com/photos/adforce1/">Photos from williamcho's photostream on Flickr</a></p> </div><br /> <a class="back" href="http://tympanus.net/codrops/2010/05/18/little-boxes-menu-with-jquery">Back to Codrops</a><br /> <div id="littleBoxes" class="littleBoxes"> <div class="boxlink bg1" style="top:0px;left:0px;"><a href="">About</a><br /> <div class="boxcontent"><br /> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, <br /> sed do eiusmod tempor incididunt ut labore et dolore magna<br /> aliqua. Ut enim ad minim veniam, quis nostrud exercitation<br /> ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> </p></div></div><div class="bg5" style="background-position:-90px 0;top:0px;left:95px;"></div><div class="bg5" style="background-position:-180px 0;top:0px;left:190px;"></div><div class="bg5" style="background-position:-270px 0;top:0px;left:285px;"></div><br /> <div class="bg5" style="background-position:0 -90px;top:95px;left:0px;"></div><div class="boxlink bg2" style="top:95px;left:95px;"><br /> <a href="">Menu</a><br /> <div class="boxcontent"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,<br /> sed do eiusmod tempor incididunt ut labore et dolore magna<br /> aliqua. Ut enim ad minim veniam, quis nostrud exercitation<br /> ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> </p></div></div><div class="bg5" style="background-position:-180px -90px;top:95px;left:190px;"></div><div class="bg5" style="background-position:-270px -90px;top:95px;left:285px;"></div><br /> <div class="bg5" style="background-position:0 -180px;top:190px;left:0px;"></div><div class="bg5" style="background-position:-90px -180px;top:190px;left:95px;"></div><div class="boxlink bg3" style="top:190px;left:190px;"><a href="">Chef</a><br /> <div class="boxcontent"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,<br /> sed do eiusmod tempor incididunt ut labore et dolore magna<br /> aliqua. Ut enim ad minim veniam, quis nostrud exercitation<br /> ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> </p></div> </div><br /> <div class="bg5" style="background-position:-270px -180px;top:190px;left:285px;"></div><br /> <div class="bg5" style="background-position:0 -270px;top:285px;left:0px;"></div><div class="bg5" style="background-position:-90px -270px;top:285px;left:95px;"></div><div class="bg5" style="background-position:-180px -270px;top:285px;left:190px;"></div><div class="boxlink bg4" style="top:285px;left:285px;"><a href="">Contact</a><br /> <div class="boxcontent"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,<br /> sed do eiusmod tempor incididunt ut labore et dolore magna<br /> aliqua. Ut enim ad minim veniam, quis nostrud exercitation<br /> ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> </p><br /> </div></div></div></div><br />

save dan liat hasilnya selamat mencoba dan jangan lupa kasi sedikit komen atau tambahan !!!