0 Cara membuat Menu Show hide atau tersembunyi

Cara membuat Menu Show Hide Atau tersembuny animasi Dengan jQuery dan CSS3 dan jugak

 javascript

 Dan Cara Masangnya
1.  Seperti biasanya Log In Blog dulu
2.  Klik Rancangan
3.  Klik Edit HMTL
4.  Letakkan kode CSS dibawah ini diatas kode   ]]></b:skin>

#sidemnu{background:transparent url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/CircleBlueH77V82.png) right top no-repeat;padding:0;position:absolute;left:0;width:480px;margin-left:-400px;top:130px;-o-transition:all 3s ease;-moz-transition:all 3s ease;-webkit-transition:all 3s ease;opacity:0.4;}#sidemnu:hover{opacity:1.0;-o-transform:translate(400px);-moz-transform:translate(400px);-webkit-transform:translate(400px);}.GRmouseover{font:19px Arial Narrrow;font-weight:bold;float:right;margin:30px 10px 0 0;color:#FF0000;text-shadow:0.01em 0.01em 0.2em #fff;-o-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-webkit-transition:all 0.5s ease;}.GRmouseover:hover{-o-transform:scale(1.5) rotate(720deg) translate(0px);-moz-transform:scale(1.5) rotate(720deg) translate(0px);-webkit-transform:scale(1.5) rotate(720deg) translate(0px);color:#0000FF;text-shadow:1px 1px 2px #000;background:#d3020c; padding: 0 8px;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;border: 1px solid #777;}#sidemnu .boxdalam{padding:10px 5px;border:1px solid #333;background:#bbdce9;width:380px; border-radius:12px;-moz-border-radius:12px;-webkit-border-radius:12px;box-shadow:1px 1px 15px #000;-moz-box-shadow:1px 1px 15px #000;-webkit-box-shadow:1px 1px 15px #000;}#sidemnu .boxdalam2{width:355px;color:#000066;font:12px Arial;padding:20px 10px;}#sidemnu .boxdalam ul, #sidemnu .boxdalam li{list-style:none;margin:0; padding:0;}#sidemnu .boxdalam h3{font:18px Droid Serif;font-weight:bold;color: #914c03;text-shadow:0 1px 1px #fff;border-bottom:1px dotted #555;border-top:1px dotted #555;background:#a0cbdc;text-align:center;margin:15px 0;}#sidemnu .boxdalam li{background:url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Mart10/template-GR/red-_arrowGradV8H12.png) top left no-repeat;background-position:0px 4px;border-bottom:1px dotted #666;}#sidemnu .boxdalam li:hover{background:none;}#sidemnu .boxdalam li a{padding-left:20px;font:12px Arial Narrow;color:#000;text-shadow:0px 1px 1px #fff;text-decoration:none;}#sidemnu .boxdalam li a:hover{color:#eee;background:#222;padding:5px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;text-shadow:0px 0px 1px red;line-height:20px;margin:0 10px;}#sidemnu .boxdalam img{padding:2px;border:6px solid #000;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px; }#bgsGR_slidebox {width:400px;position:absolute;top:50px;left:0;margin-left:-330px;background: transparent url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Mart10/template-GR/bg_blacksoldier.jpg) top right no-repeat;height:30px;opacity:0.7;font: 11px Arial;color:#eee;border-top-right-radius:8px;border-bottom-right-radius:8px;box-shadow: 0px 2px 12px #000; -moz-border-radius-topright:8px;-moz-border-radius-bottomright:8px;-moz-box-shadow: 0px 2px 12px #000;-webkit-border-top-right-radius:8px;-webkit-border-bottom-right-radius:8px;-webkit-box-shadow: 0px 2px 12px #000;}#bgsGR_slidebox{-o-transition: all 1s ease-in;-moz-transition: all 1s ease-in;-webkit-transition: all 1s ease-in;} #bgsGR_slidebox:hover{width:400px;opacity:1.0;margin-left:0;}.GRinbox {width:290px; margin:0px 90px 10px 10px;background:#fff;color:#000; border-radius :20px; padding:5px 0;-moz-border-radius:20px; -webkit-border-radius:20px;-o-transition:all 2s ease-in;-moz-transition:all 2s ease-in;-webkit-transition:all 2s ease-in;opacity:0.2;}.GRinbox:hover{opacity:1.0;box-shadow:1px 1px 15px #000; -moz-box-shadow: 1px 1px 15px #000; -webkit-box-shadow: 1px 1px 15px #000;background: #f4f3ff;}.GRinbox2 {margin:5px 10px;padding:0px 8px 10px;color:#000;overflow-y:auto;height:360px;}.box-shadow15 {border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;}.GRinbox2 ul.bom {margin: 0; padding: 0;}.GRinbox2 li {margin-left:20px;list-style-image: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Mart10/template-GR/red-_arrowGradV8H12.png);}.GRinbox2 li a {color: #000; line-height: 4px; font-size: 11px;font-weight: bold; text-decoration:none;}.GRinbox2 li a:hover {color: red;text-shadow: 0 1px 1px #000;}.GRinbox2 h2 { font: 18px Droid Serif;font-weight:bold;padding:0 8px;color: #663366;text-shadow: 0px 1px 1px #000;border-bottom: 1px dotted #888;}.GRtouch {font-size:22px;font-weight:bold;font-family:Arial Narrow;float:right;margin: 3px 10px 0 0;-o-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;text-decoration:blink;}.GRtouch:hover{-o-transform: scale(2) rotate(720deg) translate(0px);-moz-transform: scale(2) rotate(720deg) translate(0px);-webkit-transform: scale(2) rotate(720deg) translate(0px);color: red;}.bgonmouseover {padding:5px;border:2px solid #999;border-radius:10x;-moz-border-radius:10px;-webkit-border-radius:10px;-o-transition:all 1.5s ease-in-out;-moz-transition:all 1.5s ease-in-out;-webkit-transition:all 1.5s ease-in-out;background:#888;opacity:0.6; color:#eee;filter:alpha(opacity=60);}.bgonmouseover:hover{box-shadow:1px 1px 18px #000;-moz-box-shadow:1px 1px 18px #000;-webkit-box-shadow:1px 1px 18px #000;background:red url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Mart10/template-GR/gradblueblackV358H3.gif) bottom left repeat;border:2px solid #43b1fd;opacity:1.0;filter:alpha(opacity=100);text-shadow:1px 1px 1px #000;}.bg_dalam_onmouseover{background:#111;border:1px solid #666;border-radius:25px;-moz-border-radius:25px;-webkit-border-radius:25px;-o-transition:all 2.5s ease-in-out;-moz-transition:all 2.5s ease-in-out;-webkit-transition:all 2.5s ease-in-out;color:#eee;}.bg_dalam_onmouseover:hover {background:#000099 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Mart10/template-GR/redblackgradV299H2.gif) top left repeat;border:1px solid #777;border-radius:30px;-moz-border-radius:30px;-webkit-border-radius:30px;box-shadow:1px 1px 8px #fff;-moz-box-shadow:1px 1px 8px #fff;-webkit-box-shadow:1px 1px 8px #fff;text-shadow:0 1px 1px #000;}.boxong{ background:#1c86fe url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgCollapseV38H73.gif) top left repeat;padding:8px 3px 3px;float:left;border:2px solid #666;border-radius:12px;-moz-border-radius:12px;-webkit-border-radius:12px;box-shadow:1px 4px 15px #000;-moz-box-shadow:1px 4px 15px #000;-webkit-box-shadow:1px 4px 15px #000;}.boxong span{font:16px Droid Serif;font-weight:bold;color:#FFFF99;padding:5px;text-shadow:1px 4px 2px #000;}.drives{font-family:Arial;font-size:11px;} ul#GRcollaps{ background:#996600;}ul#GRcollaps, ul#GRcollaps ul{list-style-type:none;margin:0; padding:0;width:15em;}ul#GRcollaps a{font:12px Helvetica;display:block;text-decoration:none;}ul#GRcollaps li{margin-top:1px;}ul#GRcollaps li a{background: #333;border:2px solid #6e3502;color:#fff;padding:0.5em;-o-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-webkit-transition:all 1s ease-in-out;}ul#GRcollaps li a:hover{border-color:#fff;border-radius:8px;-moz-border-radius:8px; -webkitborder-radius:8px;background:#000;}ul#GRcollaps li ul li a{background:#ccc;padding:0.2em 0.5em;color:#000;padding-left:20px;-o-transition:all 1s ease-out;-moz-transition:all 1s ease-out;-webkit-transition:all 1s ease-out;border-left:5px #777 solid;border-right:3px #ccc solid;border-top:3px #ccc solid; border-bottom:3px #ccc solid;opacity:0.8;}ul#GRcollaps li ul li a:hover{background:#666;border-left:15px #000 solid; border-right:3px #000 solid;border-top:3px #000 solid; border-bottom:3px #000 solid;padding-left:15px;opacity:1.0;color:#fff;text-shadow: 1px 1px 1px #000;}.GRsuperAnima { position: relative;margin: 15px 0 0 10px;overflow: hidden; margin: 0; padding: 0; background: #1d1d1d url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgTitik2AnimaV21H21.gif);}ul#superAnima { width: 590px;margin: 10px 0 20px; padding: 0; margin: 3px 4px 3px 4px;clear: both;float: left;}ul#superAnima li { margin: 0; padding: 0; overflow: hidden; float: left; height:40px;}ul#superAnima li a.anima {padding: 10px 10px;font: 10px Arial; float: left; color: white;text-decoration: none;text-transform: uppercase;text-shadow: 1px 1px 1px #000;clear: both; height: 18px;line-height: 20px; background: white url(http://i964.photobucket.com/albums/ae124/gubhugreyot/gradBlueH2V53.gif) top left repeat-x; text-align: center; -o-transition: all 1.2s ease-in-out;-moz-transition: all 1.2s ease-in-out;-webkit-transition: all 1.2s ease-in-out; font-weight: bold; border: 1px solid #999;} ul#superAnima li a.anima:hover {-o-transform: scale(1.0) rotate(0deg) translate(0, -40px);-moz-transform: scale(1.0) rotate(0deg) translate(0, -40px); -webkit-transform:scale(1.0) rotate(0deg) translate(0, -40px);}ul#superAnima li a.anima span {padding: 10px 9px; color: transparent; opacity: 0.2;-o-transition: all 1.6s ease-out; -moz-transition: all 1.6s ease-out;-webkit-transition: all 1.6s ease-out; -o-transform: scale(8.0) rotate(0deg) translate(0,-10px) ; -moz-transform: scale(8.0) rotate(0deg) translate(0,-10px) ;-webkit-transform: scale(8.0) rotate(0deg) translate(0,-10px) ;} ul#superAnima li a.anima span:hover { opacity: 1.0;padding: 4px 8px; height: 18px;-o-transform: scale(1.0) rotate(0deg) translate(0,0);-moz-transform: scale(1.0) rotate(0deg) translate(0,0);-webkit-transform: scale(1.0) rotate(0deg) translate(0,0);color: red; border: 1px solid #555; background: #888; text-shadow: 1px 1px 1px #000;box-shadow: 1px 2px 15px #fff, 0px -2px 8px red, -3px -3px 10px orange, -4px 4px 10px yellow;-moz-box-shadow: 1px 2px 15px #fff, 0px -2px 8px red, -3px -3px 10px orange, -4px 4px 10px yellow; -webkit-box-shadow:1px 2px 15px #fff,0px -2px 8px red, -3px -3px 10px orange,-4px 4px 10px yellow;border-radius: 12px; -moz-border-radius: 12px;-webkit-border-radius: 12px; } ul#superAnima li {border: 1px solid transparent;background: #CC9933 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/gradOrangeBlackV45H2.gif); }ul#superAnima li:hover { background: #000 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgTitik2AnimaV21H21.gif); border: 1px solid #777;}

5.  Coba anda letakkan kode script dibawah ini diatas kode   </head>

<script type='text/javascript'> //<![CDATA[ jQuery.extend( jQuery.easing,{ def: 'easeOutQuad', easeInQuint: function (x, t, b, c, d) { return c*(t/=d)*t*t*t*t + b;}, easeOutQuint: function (x, t, b, c, d) { return c*((t=t/d-1)*t*t*t*t + 1) + b;}, easeInOutQuint: function (x, t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; return c/2*((t-=2)*t*t*t*t + 2) + b;} }); function FloatMenu(){ var animationSpeed=1; var animationEasing='easeOutQuint'; var scrollAmount=$(document).scrollTop(); var newPosition=menuPosition+scrollAmount; if($(window).height()<$('#bgsGR_slidebox').height()+$('#bgsGR_slidebox .menu').height()){ $('#bgsGR_slidebox').css('top',menuPosition);} else { $('#bgsGR_slidebox').stop().animate({top: newPosition}, animationSpeed, animationEasing);}} $(window).load(function() {menuPosition=$('#bgsGR_slidebox').position().top; FloatMenu();});$(window).scroll(function () { FloatMenu(); }); //]]> </script>

6. Tambah Gadget dan copy code di bawah ini dan letakkan code tersebut dan simpan
Tapi ingat Tulisan url anda ubah dengan url kesuka'an agan dan jugak tulisan Well of course, there might be ganti dengan judul ke'inginan agan

<div id="bgsGR_slidebox"> <span class="GRtouch">MENU</span> <div class="GRinbox"> <div class="GRinbox2 box-shadow15"> <h2> Menu 1</h2> <ul class="bom"> <li><a href="url anda">Well of course, there might be something else I haven’t noticed</a></li> <li><a href="url anda">Well of course, there might be something else I haven’t noticed</a></li> <li><a href="url anda">Well of course, there might be.</a></li> <li><a href="url anda">Well of course, there might be.</a></li> <li><a href="url anda">Well of course, there might be.</a></li> </ul> <h2> Menu 2</h2> <ul> <li><a href="url anda">Well of course, there might be something else I haven’t noticed</a></li> <li><a href="url anda">Well of course, there might be something else I haven’t noticed</a></li> <li><a href="url">Well of course, there might be.</a></li> <li><a href="url anda">Well of course, there might be.</a></li> <li><a href="url anda">Well of course, there might be.</a></li> </ul> <h2> Menu 3</h2> <ul> <li><a href="url anda">Well of course, there might be something else I haven’t noticed</a></li> <li><a href="url anda">Well of course, there might be something else I haven’t noticed</a></li> <li><a href="url anda">Well of course, there might be.</a></li> <li><a href="url anda">Well of course, there might be.</a></li> <li><a href="url anda">Well of course, there might be.</a></li> </ul> <h2> Menu 4</h2> <ul> <li><a href="url anda">Well of course, there might be something else I haven’t noticed</a></li> <li><a href="url anda">Well of course, there might be something else I haven’t noticed</a></li> <li><a href="url anda">Well of course, there might be.</a></li> <li><a href="url anda">Well of course, there might be.</a></li> <li><a href="url anda">Well of course, there might be.</a></li> </ul> </div> </div> </div>

Kalau pengen lihat disini Demo

Selamat mencoba Semuga Berhasil