VkuMenuBar Minimize Expande

Masih segar artikel mengenai Fixed Fade Out Menu jQuery, dimana menampilkan sebuah menu navigasi yang letaknya bisa berada diatas/dibawah dalam keadaan diam (fixed) Bagaimana sekarang membuat menu serupa, tetapi bisa ditutup dan diadain lagi itu si menunya sob ;) Jadi full stylish, seperti gaya wibiya tool bar! Bisa dihidden/minimize gito lah ah, mudeung yak, ngerti yak...:) Sepertinya butuh live demo nih biar mudeung 100% ;)) perhatikan pada bagian bawah yah

Demo Vku Menu

Script dan kode dari yg empunya kreasi menu ini, bisa sobat langsung dimasukan dalam metode Add a Gadget ► HTML/Javascript :D

<div id="vkumenubardos" style="padding:4px;position:fixed;z-index:990;right:0;bottom:0;display:none;">

<a href="javascript:abVkuMenuBar()">
<img src="http://img44.xooimage.com/files/c/d/a/top-1eb247f.png" style="border: 0; margin-right: 5px; width:24px; height:24px;" />
</a>

</div>

<div id="vkumenubar" style="padding:0;position:fixed;z-index:999;left:0px;bottom:-100px;width:100%;background-color:#555;border-top: 4px double #ccc;">

<a href="javascript:closeVkuMenuBar()">
<img src="http://img10.xooimage.com/files/0/d/2/1279873511_close_box_red-1e94d34.png" style=" float: right; border: 0;margin-right: 10px;" />
</a>

<a class='linkvkumenubar' href='http://YOUR-LINK.com/' target='_blank'>
<img style="border: 0; margin:8px 10px; width:24px; height:24px;" src="http://img41.xooimage.com/files/7/9/5/logo_twitter-1eb2409.gif" title='Your-title'/>
</a>

<a class='linkvkumenubar' href='http://YOUR-LINK.com/' target='_blank'>
<img style="border: 0; margin:8px 10px; width:24px; height:24px;" src="http://img49.xooimage.com/files/0/f/f/logo_facebook-1eb23fb.gif" title='Your-title'/>
</a>

<a class='linkvkumenubar' href='http://YOUR-LINK.com/' target='_blank'>
<img style="border: 0; margin:8px 10px; width:24px; height:24px;" src="http://img41.xooimage.com/files/b/6/1/logo_youtube-1eb240c.gif" title='Your-title'/>
</a>

<a class='linkvkumenubar' href='http://YOUR-LINK.com' target='_blank'>
<img style="border: 0; margin:8px 10px; width:24px; height:24px;" src="http://img45.xooimage.com/files/2/b/3/logo_myspace-1eb2423.gif" title='Your-title'/>
</a>

<a class='linkvkumenubar' href='http://YOUR-LINK.com/' target='_blank'>
<img style="border: 0; margin:8px 10px; width:24px; height:24px;" src="http://img43.xooimage.com/files/3/f/5/rss-1eb2412.jpeg" title='Your-title'/>
</a>

<a style="text-decoration: none; bottom:17px; margin:0 10px;position:relative;color:fff" href='http://YOUR-LINK.com/' target='_blank'>¿YOUR-TITLE?</a>

</div>

<script src='http://sites.google.com/site/vkuloseasi/archivos/vkumenubar.js' type='text/javascript'></script>

Kode script yg diberi warna merah itu silahkan sobat hosting sendiri, kalau mau pake itu jg gpp (menghindari bandwith saja sih) ;)
Kalau itu modus instant dari sobat blogger kita @v_ku, sekarang versi Beben si bloglang anu ganteng kalem tea :D Sama saja sih cuman dibagus-bagus aja ;)) Click Here for look

Kode CSS

Letakan diatas kode ]]></b:skin>
#menuBar {
padding:0;
position:fixed;
z-index:999;
left:0px;
bottom:-100px;
width:100%;
background-color:#333333;
border-top: 1px solid #FF0000;
}

Javascript

Mau diahostingkan mau tidak, dan isi scriptnya sbb letakin diatas tag </body>

<script type='text/javascript'>
// By Vku
// http://loseasi.blogspot.com/
// 26/07/2010
//<![CDATA[
function showMenubar()
{
var menuBar = document.getElementById("menuBar");
var bottom = parseInt(menuBar.style.bottom);
if (bottom < 0)
{
bottom += 3;
menuBar.style.bottom = bottom+"px";
setTimeout(function(){showMenubar()}, 100);
}
else
{
if (document.all && !window.XMLHttpRequest)
menuBar.style.setExpression("bottom", 'document.compatMode=="CSS1Compat"? document.documentElement.scrollBottom+"px" : body.scrollBottom+"px"');
else
menuBar.style.bottom = 0;
}
}

function closeMenubar()
{
document.getElementById("menuBar").style.display = "none";
}

function initMenubar()
{
var docWidth = 800;

if (typeof window.innerWidth != 'undefined')
{
docWidth = window.innerWidth;
}
else
if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)
{
docWidth = document.documentElement.clientWidth;
}
else
{
docWidth = document.getElementsByTagName('body')[0].clientWidth;
}
document.getElementById("menuBar").style.width = "100%";

var height = parseInt(document.getElementById("menuBar").offsetHeight);
document.getElementById("menuBar").style.bottom = height*(-1)+"px";

showMenubar();
}
function StaticMenuBar()
{
document.getElementById("menuBar").style.display = "";
}
function initstaticMenu() {
div = document.getElementById("staticMenu");
div.style.display= "";

}
setTimeout("initstaticMenu()", 3000);

initMenubar();
//]]>
</script>

Kode HTML

Masukan didalam tag <body> ... </body> template sobat.

<div id='staticMenu' style='padding:4px;position:fixed;z-index:999;right:0;bottom:0;display:none;'>

<a href='javascript:StaticMenuBar()'><img src='http://img44.xooimage.com/files/c/d/a/top-1eb247f.png' style='border: 0; margin-right: 5px; width:24px; height:24px;'/></a>

</div>

<div id='menuBar'>

<a href='javascript:closeMenubar()'><img src='http://img10.xooimage.com/files/0/d/2/1279873511_close_box_red-1e94d34.png' style='float: right; border: 0;margin-right: 3px;margin-top:9px;width:24px; height:24px;'/></a>

<a class='linkmenuBar' href='http://YOUR-LINK.com/v_ku' target='_blank'><img src='http://img41.xooimage.com/files/7/9/5/logo_twitter-1eb2409.gif' style='border: 0; margin:8px 10px; width:24px; height:24px;' title='Your Title'/></a>

<a class='linkmenuBar' href='http://YOUR-LINK.com/' target='_blank'><img src='http://img49.xooimage.com/files/0/f/f/logo_facebook-1eb23fb.gif' style='border: 0; margin:8px 10px; width:24px; height:24px;' title='Facebook'/></a>

<a class='linkmenuBar' href='http://YOUR-LINK.com/' target='_blank'><img src='http://img41.xooimage.com/files/b/6/1/logo_youtube-1eb240c.gif' style='border: 0; margin:8px 10px; width:24px; height:24px;' title='Your Title'/></a>

<a class='linkmenuBar' href='http://YOUR-LINK.com/' target='_blank'><img src='http://img45.xooimage.com/files/2/b/3/logo_myspace-1eb2423.gif' style='border: 0; margin:8px 10px; width:24px; height:24px;' title='Your Title'/></a>

<a class='linkmenuBar' href='http://YOUR-LINK.com/' target='_blank'><img src='http://img43.xooimage.com/files/3/f/5/rss-1eb2412.jpeg' style='border: 0; margin:8px 10px; width:24px; height:24px;' title='Your Title'/></a>

<a href='http://YOUR-LINK.com/' style='text-decoration: none; bottom:17px; margin:0 10px;position:relative;color:fff' target='_blank'>?Your Title&#191;</a>

</div>

Save

Jika sobat mau melakukan setingan tinggi, lebar, jarak dll pada image dan link harap diperhatikan CSS ini menggunakan inline langsung pada image tersebut!!! Jadi tinggal lakukan edit pada atribut style. Jadi jika mau berkreasi dengan gambar sendiri, maka perhatikan atribut style tadi yah :)
Happy menu Vku ;)
Resource by: http://loseasi.blogspot.com/