show/hide menu

show/hide Menu cocok Digunakan untuk menghemat tempat dalam blog anda
karena widget ini hanya keluar ketika di clik...contoh seperti yang ada di blog ini

cara membuat nya

Copy pastekan kode dibawah ini dan tambahkan ke blog anda dengan melalui penambahan widget

<style type="text/css">
#floatMenu {
    position:absolute;
    overflow:auto;
width:200px;
    height:300px;
    top:-100px;
    right:-200px;
    margin-left:240px;
    border:4px solid #00ffff;border-right:none;
    background:url(http://i1214.photobucket.com/albums/cc489/Gray_December/album%20gmbr%20blog/729475pwo0tj9hiw.gif) repeat;
    border-top-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
    padding:10px 4px;
    opacity:0.1;
    -moz-opacity:0.1;
    filter:alpha(opacity=15);
    }
#floatMenu:hover {
    opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100);
    }
#floatMenu ul {
    margin-bottom:20px;
    }
#floatMenu ul li {
    line-height:14px;
    list-style:none;
    display:block;
    text-decoration:none;
    color:#ccc;
    }
#floatMenu ul li a{
    font-family:Arial Narrow;
    margin-left:-10px;
    padding-left:20px;
    font-size:12px;
    color:#00ffff;
    background:url(http://i44.tinypic.com/95q8fq/gubhugreyot/images/arrow.jpg) left no-repeat;
    background-position:0 3px;
    text-decoration:none;
    }
#floatMenu ul li a:hover{
    color:#ff0000;
    background:url(http://i44.tinypic.com/chrv9/gubhugreyot/images/arrow/anima.gif) left no-repeat;
    background-position:0 3px;
    }
#floatMenu ul li a:visited{
    color:#F80000;
    }
</style>
<script language="javascript">
var name = "#floatMenu";
var menuYloc = null;
$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:800,queue:false});
});});
</script>
<div id="floatMenu">
<ul class="menu1">
     <li><a href="Link-1" title="Javascript Menu">Javascript Floating Menu Javascript Floating</a></li>
     <li><a href="Link-2" title="CSS Menu">CSS Floating Menu</a></li>
     <li><a href="Link-3" title="Image Menu">Floating Image Menu</a></li>
     <li><a href="Link-4" title="Image Gallery">Javascript Image Gallery</a></li>
     <li><a href="Link-5" title="JQuery">JQuery Image Gallery</a></li>
     <li><a href="Link-6" title="Javascript Menu">Javascript Floating Menu</a></li>
     <li><a href="Link-7" title="CSS Menu">CSS Floating Menu</a></li>
     <li><a href="Link-8" title="Image Menu">Floating Image Menu</a></li>
     <li><a href="Link-9" title="Image Gallery">Javascript Image Gallery</a></li>
     <li><a href="Link-10" title="JQuery">JQuery Image Gallery</a></li>
     <li><a href="Link-11" title="Javascript Menu">Javascript Floating Menu</a></li>
     <li><a href="Link-12" title="CSS Menu">CSS Floating Menu</a></li>
     <li><a href="Link-13" title="Image Menu">Floating Image Menu</a></li>
     <li><a href="Link-14" title="Image Gallery">Javascript Image Gallery</a></li>
     <li><a href="Link-15" title="JQuery">JQuery Image Gallery</a></li>
     <li><a href="Link-16" title="Javascript Menu">Javascript Floating Menu</a></li>
     <li><a href="Link-17" title="CSS Menu">CSS Floating Menu</a></li>
     <li><a href="Link-18" title="Image Menu">Floating Image Menu</a></li>
     <li><a href="Link-19" title="Image Gallery">Javascript Image Gallery</a></li>
     <li><a href="Link-20" title="JQuery">JQuery Image Gallery</a></li>
</ul>
</div>

Di Baca Juga Ya...Artikel Terkait Lainnya :

Widget By : lefransnote's Site