CSS Horizontal Drop Down Navigation Menu Tool

S

etelah saya jalan-jalan di dunia maya, saya telah menemukan beberapa MENU (CSS Horizontal Drop Down Navigation Menu Tool) yang mungkin sobat berkenan untuk dijadikan menu di website atau halaman Blog sobat. Sobat  dapat mengubah sifat css seperti latar belakang dan warna font utama dan submenu  membuat jumlah yang diperlukan menu horisontal. Setiap yang baru dibuat setelah pemilihan warna akan membawa warna default yang dapat diubah lagi sesuai kebutuhan Sobat.

Wezzzzzzz tak usah banyak bacot langsung saja kita TKP hehehe . . .
OK sangat mudah sekali dan ikutilah langkah-langkahnya sebagai berikut :

1. Seperti biasa Agan buka akun blog'a utk login
2. Pilih "Design/Rancangan"
3. Lalu Klik "Add a/tambah Gadget"
4. Kemudian Pilih dan Klik "HTML/Javascript"
5. Kemudian silahkan Sobat Copy Script Widget di bawah ini dan Pastekan pada "HTML/Javascript"



<link rel="stylesheet" type="text/css" href="./style.css" /><script type='text/javascript' src='http://www.hscripts.com/jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function () {   
    $('#nav li').hover(
          function () {
                 $('ul', this).slideDown(100);
        },
        function () {
            $('ul', this).slideUp(100);           
        }
    );
   $('ul.sub li a').mouseover(function () {
      $subag=$('#ssel').val();
        $(this).css('background',$subag);
       });
       $('ul.sub li a').mouseout(function () {
       $norbag=$('#subag').val();
       $(this).css('background',$norbag);
       });

         $('ul.sub li a').mouseover(function () {
       $sfont=$('#mfont').val();
       $(this).css('color',$sfont);
       });
       $('ul.sub li a').mouseout(function () {
       $norfont=$('#sfont').val();
       $(this).css('color',$norfont);
       });
     
         $('a.top_link').mouseover(function () {
      $mfont=$('#mfont').val();
       $(this).css('color',$mfont);
       });
       $('a.top_link').mouseout(function () {
      $normfont=$('#mnufnt').val();
       $(this).css('color',$normfont);
       });
    

});
</script>
<?php $selcolor='#FF00FF';$mousefont='#fff';$mnubag='#000000';$subag='#FF00FF';$mnufnt='#00FF00';$sfont='#00FFFF';?>
<style type='text/css'>
#nav li:hover ul.sub li a:hover
{
background:#FF00FF;color:#fff;
}
</style>
                <input type="hidden" value="#000000" id="mnubag" name="mnubag" />
                <input type="hidden" value="#FF00FF" id="subag" name="subag" />
                <input type="hidden" value="#00FF00" id="mnufnt" name="mnufnt" />
                <input type="hidden" value="#00FFFF" id="sfont" name="sfont" />
                <input type="hidden" value="#FF00FF" id="ssel" name="sel" />
                <input type="hidden" value="#fff" id="mfont" name="mfont" />
            

<table id="preview" valign="top" postion="absolute" style="padding-top:0px;padding-left:10px;" cellpadding="29" cellspacing="29">
<tbody>
<tr id="pretr"><td><ul id="nav"><li class="top"><a id="mainlink1" href="#nogo1" class="top_link"><span class="down" id="1">Menu1</span></a> <ul class="sub" style="display: none;" id="ul1"><div id="submen1"></div><span id="delli2"><li><a id="submnuli2" class="subclass" href="#nogo">submenu2</a><ul style="display: block;" id="adsbmnu2"></ul></li></span><span id="delli3"><li><a id="submnuli3" class="subclass" href="#nogo">submenu3</a><ul style="display: block;" id="adsbmnu3"></ul></li></span><span id="delli4"><li><a id="submnuli4" class="subclass" href="#nogo">submenu4</a><ul style="display: block;" id="adsbmnu4"></ul></li></span><span id="delli5"><li><a id="submnuli5" class="subclass" href="#nogo">submenu5</a><ul style="display: block;" id="adsbmnu5"></ul></li></span></ul></li></ul> </td><td id="predeletemain2"><ul id="nav"><li class="top"><a id="mainlink2" href="#nogo1" class="top_link"><span class="down" id="2">Menu2</span></a><ul class="sub" id="ul2"><span id="delli6"><li><a id="submnuli6" class="subclass" href="#nogo">submenu6</a><ul id="adsbmnu6"></ul></li></span><span id="delli7"><li><a id="submnuli7" class="subclass" href="#nogo">submenu7</a><ul id="adsbmnu7"></ul></li></span><span id="delli8"><li><a id="submnuli8" class="subclass" href="#nogo">submenu8</a><ul id="adsbmnu8"></ul></li></span></ul></li></ul></td><td id="predeletemain3"><ul id="nav"><li class="top"><a id="mainlink3" href="#nogo1" class="top_link"><span class="down" id="3">Menu3</span></a><ul class="sub" id="ul3"><span id="delli9"><li><a id="submnuli9" class="subclass" href="#nogo">submenu9</a><ul id="adsbmnu9"></ul></li></span><span id="delli10"><li><a id="submnuli10" class="subclass" href="#nogo">submenu10</a><ul id="adsbmnu10"></ul></li></span></ul></li></ul></td><td id="predeletemain4"><ul id="nav"><li class="top"><a id="mainlink4" href="#nogo1" class="top_link"><span class="down" id="4">Menu4</span></a><ul class="sub" id="ul4"><span id="delli11"><li><a id="submnuli11" class="subclass" href="#nogo">submenu11</a><ul id="adsbmnu11"></ul></li></span><span id="delli12"><li><a id="submnuli12" class="subclass" href="#nogo">submenu12</a><ul id="adsbmnu12"></ul></li></span><span id="delli13"><li><a id="submnuli13" class="subclass" href="#nogo">submenu13</a><ul id="adsbmnu13"></ul></li></span><span id="delli14"><li><a id="submnuli14" class="subclass" href="#nogo">submenu14</a><ul id="adsbmnu14"></ul></li></span></ul></li></ul></td><td id="predeletemain5"><ul id="nav"><li class="top"><a id="mainlink5" href="#nogo1" class="top_link"><span class="down" id="5">Menu5</span></a><ul class="sub" id="ul5"><span id="delli15"><li><a id="submnuli15" class="subclass" href="#nogo">submenu15</a><ul id="adsbmnu15"></ul></li></span><span id="delli16"><li><a id="submnuli16" class="subclass" href="#nogo">submenu16</a><ul id="adsbmnu16"></ul></li></span></ul></li></ul></td></tr></tbody></table>

Lihat Demonya

Terakhir tinggal Savelihat hasilnya
 Salam dari Spensa Malang Semoga berhasil hehehe . . .

NB : Tulisan yang berwarna Kuning bisa diganti Menu-Menu sesuai dengan keinginan sobat, warna Hijau ganti dengan Submenu blog sobat, Mudah bukan sahabat BLOGGER.