How To Create Button Menu Horizontal Menu Horizontal II (CSS On Maskibow)

How To Create Button Menu Horizontal Menu Horizontal II (CSS On Maskibow) - On Maskibow

How To Create Button Menu Horizontal Menu Horizontal II (CSS On Maskibow)

Menu Button, Button Sample Menu, Menu Button Gallery Menu Button Tutorial, Script Menu Button, Vista Button Menu, Drop Down Menu Button, Button Horizontal Menu, Vertical Menu Button, Button Menu CSS, JavaScript Menu Button, Button Menu Java Script, HTML Menu Button, Button Menu How to create, make Button Menu Web Button Menu Button Menu Blogger, Button Menu Design

Original Script By	: Maskibow
Revised Script By	: Maskibow
Script Work In	: Mozilla Firefox, Chrome, Opera

Description :

Continued from the previous menu Button, this one single button style either a horizontal line on the menu button, and multiple on its menu list. As always I love some of the same sample will differ only in his design style. This menu button is actually still using the same java script on the previous menu button
Button drop-down menu is very simple just to play on his CSS style effects only, and based on tags <table>, <div> and <span>
To add its menu or you want edit in this script has been given the comments so that you can easily info to edit accordance with what you want ... yes if still confused or have additional info we can equally share in here ...

example :

Point your mouse towards the chart then it will exit the menu list in the drop-down menu

For example his page you can see it inHERE Skip Adf.ly Ad on the top right corner and then download and open

Step 1: Copy and paste the script below and place the position under <HEAD> code on your webpage or it could be on the post if you write posting using HTML:

Choose All

<style type="text/css">
a {text-decoration: none;}
/*List Menu Setting*/
.mkbsamplebtn,.mkbsamplebtn a{
  height: 28px;
  width: 120px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  color: orange;
  valign: bottom;
  text-align: center;
  font: normal 13px Verdana;
  list-style-type: none;
  text-decoration: none;
  text-shadow: 3px 3px 3px black;
  line-height: 25px;
  border: 2px ridge orange;
  border-radius: 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px;
  }
.mkbsamplebtn:hover,.mkbsamplebtn a:hover{
  color: black;
  background-color: orange;
  }
/*Button Menu Posisi Setting*/
.mkbbtndiv, #sample1, #sample2{
  width:500;
  list-style-type: none;
  text-decoration: none;
  }
/*Button Menu Setting*/
.mkbsamplebtnbtn,.mkbsamplebtnbtn a{
  padding-top: 2px;
  padding-bottom: 2px;
  height: 25px;
  width: 120px;
  list-style-type: none;
  text-decoration: none;
  text-align: center;
  font: bold 14px Verdana;
  text-shadow: 3px 3px 3px black;
  border: 0px solid;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  }
.mkbsamplebtnbtn:hover,.mkbsamplebtnbtn a:hover{
  color: lime;
  }
/* setting warna border*/
  .batangtop, .menulistmkbbtn, .mkbsamplebtn, .mkbsamplebtn a, .mkbsamplebtn:hover, 
  .mkbsamplebtn a:hover, .mkbsamplebtnbtn, .mkbsamplebtnbtn a{
  border-color: orange;
  }
/* setting warna background*/
  .batangtop, .menulistmkbbtn, .mkbsamplebtn, .mkbsamplebtn a, .mkbsamplebtnbtn, 
  .mkbsamplebtnbtn a{
  background-color: #990099; 
  color: orange;
  }
/* setting Batang atas button*/
  .batangtop{
  width: 100%;
  height: 28px;
  border: 2px solid orange;
  border-color: orange;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  -moz-box-shadow: 4px 4px 4px gray;
  -webkit-box-shadow: 4px 4px 4px gray;
  -goog-ms-box-shadow: 4px 4px 4px gray;
  box-shadow: 4px 4px 4px gray;
  }
</style>
<script language="JavaScript">
  var linktext=new Array (0)
  
  linktext[0]="<div align='left'> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>Al-Qur'an 
  OnLine</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>Playing 
  Game</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>Watching 
  TV</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>Info 
  Jual-Beli</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>FaceBook</a> 
  </div>"
  linktext[1]="<div align='left'> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Antivirus'>Anti 
  Virus</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Billing'>Billing</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Design'>Design</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Tools'>Tools</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Multimedia'>Multimedia</a> 
  </div>"
  linktext[2]="<div align='left'> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Action'>Action</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/RPG'>R 
  P G</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/RTS'>R 
  T S</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Sport'>Sport</a> 
  </div>"
  linktext[3]="<div align='left'> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/TWeb'>Tutorial</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/TWeb'>HTML, 
  CSS, Java</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/TWeb'>Blogger</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Barang'>Info 
  Jual-Beli</a> </div>"
var ns6=document.getElementById&&!document.all
  var ie=document.all
function show_text(thetext, whichdiv){
  if (ie) eval("document.all."+whichdiv).innerHTML=linktext[thetext]
  else if (ns6) document.getElementById(whichdiv).innerHTML=linktext[thetext]
  }
function resetit(whichspan){
  if (ie) eval("document.all."+whichspan).innerHTML=''
  else if (ns6) document.getElementById(whichspan).innerHTML=''
  }
</script>

Step 2: If the above is already running then, Copy and put the script below under <BODY> code on your webpage or could also be on the post if you write a post using HTML:

Choose All

<div class="mkbbtndiv" style="position:absolute;"> 
<div class="batangtop">
<table align="left" id="sample1">
<tr valign="top" > 
<td class="mkbsamplebtnbtn"><a href="##" onmouseover="show_text(0,'div0');resetit('div1');resetit('div2');resetit('div3');"> 

On Maskibow</a></td>
<td class="mkbsamplebtnbtn"><a href="##" onmouseover="show_text(1,'div1');resetit('div0');resetit('div2');resetit('div3');"> 

Free Software</a></td>
<td class="mkbsamplebtnbtn"><a href="##" onmouseover="show_text(2,'div2');resetit('div0');resetit('div1');resetit('div3');"> 

Free Games</a></td>
<td class="mkbsamplebtnbtn"><a href="##" onmouseover="show_text(3,'div3');resetit('div0');resetit('div1');resetit('div2');"> 

Tips 'n Trik</a></td>

</tr>
</table>
<br/>
<table border="0" id="sample2">
<tr>
<td><div align="center"><span id="div0"></span><span 
id="div1"></span><span id="div2"></span><span 
id="div3"></span> 
</div>
</td>
</tr>
<tr onmouseover="resetit('div0');resetit('div1');resetit('div2');resetit('div3');"> 


<td colspan="4"> 
</td>
</tr>
</table>
  </div>
  </div>

Note: To Friends of the blogger if you want to add this script on the page blogs can use the methods above, but you can also easily with how to enter an existing script block above the widget you bro .. try it select the widget HTML / Java script and input it into two widgets into you!

Label: Button Menu, Tutorial, Tutorial 2, TWeb, TWeb 5

0 Komentar

Baca Selengkapnya

Original Script By	: Maskibow
Revised Script By	: Maskibow
Script Work In	: Mozilla Firefox, Chrome, Opera

Description :

example :

Point your mouse towards the chart then it will exit the menu list in the drop-down menu

Choose All

<style type="text/css">
a {text-decoration: none;}
/*List Menu Setting*/
.mkbsamplebtn,.mkbsamplebtn a{
  height: 28px;
  width: 120px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  color: orange;
  valign: bottom;
  text-align: center;
  font: normal 13px Verdana;
  list-style-type: none;
  text-decoration: none;
  text-shadow: 3px 3px 3px black;
  line-height: 25px;
  border: 2px ridge orange;
  border-radius: 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px;
  }
.mkbsamplebtn:hover,.mkbsamplebtn a:hover{
  color: black;
  background-color: orange;
  }
/*Button Menu Posisi Setting*/
.mkbbtndiv, #sample1, #sample2{
  width:500;
  list-style-type: none;
  text-decoration: none;
  }
/*Button Menu Setting*/
.mkbsamplebtnbtn,.mkbsamplebtnbtn a{
  padding-top: 2px;
  padding-bottom: 2px;
  height: 25px;
  width: 120px;
  list-style-type: none;
  text-decoration: none;
  text-align: center;
  font: bold 14px Verdana;
  text-shadow: 3px 3px 3px black;
  border: 0px solid;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  }
.mkbsamplebtnbtn:hover,.mkbsamplebtnbtn a:hover{
  color: lime;
  }
/* setting warna border*/
  .batangtop, .menulistmkbbtn, .mkbsamplebtn, .mkbsamplebtn a, .mkbsamplebtn:hover, 
  .mkbsamplebtn a:hover, .mkbsamplebtnbtn, .mkbsamplebtnbtn a{
  border-color: orange;
  }
/* setting warna background*/
  .batangtop, .menulistmkbbtn, .mkbsamplebtn, .mkbsamplebtn a, .mkbsamplebtnbtn, 
  .mkbsamplebtnbtn a{
  background-color: #990099; 
  color: orange;
  }
/* setting Batang atas button*/
  .batangtop{
  width: 100%;
  height: 28px;
  border: 2px solid orange;
  border-color: orange;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  -moz-box-shadow: 4px 4px 4px gray;
  -webkit-box-shadow: 4px 4px 4px gray;
  -goog-ms-box-shadow: 4px 4px 4px gray;
  box-shadow: 4px 4px 4px gray;
  }
</style>
<script language="JavaScript">
  var linktext=new Array (0)
  
  linktext[0]="<div align='left'> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>Al-Qur'an 
  OnLine</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>Playing 
  Game</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>Watching 
  TV</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>Info 
  Jual-Beli</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>FaceBook</a> 
  </div>"
  linktext[1]="<div align='left'> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Antivirus'>Anti 
  Virus</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Billing'>Billing</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Design'>Design</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Tools'>Tools</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Multimedia'>Multimedia</a> 
  </div>"
  linktext[2]="<div align='left'> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Action'>Action</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/RPG'>R 
  P G</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/RTS'>R 
  T S</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Sport'>Sport</a> 
  </div>"
  linktext[3]="<div align='left'> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/TWeb'>Tutorial</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/TWeb'>HTML, 
  CSS, Java</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/TWeb'>Blogger</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Barang'>Info 
  Jual-Beli</a> </div>"
var ns6=document.getElementById&&!document.all
  var ie=document.all
function show_text(thetext, whichdiv){
  if (ie) eval("document.all."+whichdiv).innerHTML=linktext[thetext]
  else if (ns6) document.getElementById(whichdiv).innerHTML=linktext[thetext]
  }
function resetit(whichspan){
  if (ie) eval("document.all."+whichspan).innerHTML=''
  else if (ns6) document.getElementById(whichspan).innerHTML=''
  }
</script>

Step 2: If the above is already running then, Copy and put the script below under <BODY> code on your webpage or could also be on the post if you write a post using HTML:

Choose All

<div class="mkbbtndiv" style="position:absolute;"> 
<div class="batangtop">
<table align="left" id="sample1">
<tr valign="top" > 
<td class="mkbsamplebtnbtn"><a href="##" onmouseover="show_text(0,'div0');resetit('div1');resetit('div2');resetit('div3');"> 

On Maskibow</a></td>
<td class="mkbsamplebtnbtn"><a href="##" onmouseover="show_text(1,'div1');resetit('div0');resetit('div2');resetit('div3');"> 

Free Software</a></td>
<td class="mkbsamplebtnbtn"><a href="##" onmouseover="show_text(2,'div2');resetit('div0');resetit('div1');resetit('div3');"> 

Free Games</a></td>
<td class="mkbsamplebtnbtn"><a href="##" onmouseover="show_text(3,'div3');resetit('div0');resetit('div1');resetit('div2');"> 

Tips 'n Trik</a></td>

</tr>
</table>
<br/>
<table border="0" id="sample2">
<tr>
<td><div align="center"><span id="div0"></span><span 
id="div1"></span><span id="div2"></span><span 
id="div3"></span> 
</div>
</td>
</tr>
<tr onmouseover="resetit('div0');resetit('div1');resetit('div2');resetit('div3');"> 


<td colspan="4"> 
</td>
</tr>
</table>
  </div>
  </div>

Label: Button Menu, Tutorial, Tutorial 2, TWeb, TWeb 5

Original Script By	: Maskibow
Revised Script By	: Maskibow
Script Work In	: Mozilla Firefox, Chrome, Opera

Description :

example :

Point your mouse towards the chart then it will exit the menu list in the drop-down menu

Choose All

<style type="text/css">
a {text-decoration: none;}
/*List Menu Setting*/
.mkbsamplebtn,.mkbsamplebtn a{
  height: 28px;
  width: 120px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  color: orange;
  valign: bottom;
  text-align: center;
  font: normal 13px Verdana;
  list-style-type: none;
  text-decoration: none;
  text-shadow: 3px 3px 3px black;
  line-height: 25px;
  border: 2px ridge orange;
  border-radius: 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px;
  }
.mkbsamplebtn:hover,.mkbsamplebtn a:hover{
  color: black;
  background-color: orange;
  }
/*Button Menu Posisi Setting*/
.mkbbtndiv, #sample1, #sample2{
  width:500;
  list-style-type: none;
  text-decoration: none;
  }
/*Button Menu Setting*/
.mkbsamplebtnbtn,.mkbsamplebtnbtn a{
  padding-top: 2px;
  padding-bottom: 2px;
  height: 25px;
  width: 120px;
  list-style-type: none;
  text-decoration: none;
  text-align: center;
  font: bold 14px Verdana;
  text-shadow: 3px 3px 3px black;
  border: 0px solid;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  }
.mkbsamplebtnbtn:hover,.mkbsamplebtnbtn a:hover{
  color: lime;
  }
/* setting warna border*/
  .batangtop, .menulistmkbbtn, .mkbsamplebtn, .mkbsamplebtn a, .mkbsamplebtn:hover, 
  .mkbsamplebtn a:hover, .mkbsamplebtnbtn, .mkbsamplebtnbtn a{
  border-color: orange;
  }
/* setting warna background*/
  .batangtop, .menulistmkbbtn, .mkbsamplebtn, .mkbsamplebtn a, .mkbsamplebtnbtn, 
  .mkbsamplebtnbtn a{
  background-color: #990099; 
  color: orange;
  }
/* setting Batang atas button*/
  .batangtop{
  width: 100%;
  height: 28px;
  border: 2px solid orange;
  border-color: orange;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  -moz-box-shadow: 4px 4px 4px gray;
  -webkit-box-shadow: 4px 4px 4px gray;
  -goog-ms-box-shadow: 4px 4px 4px gray;
  box-shadow: 4px 4px 4px gray;
  }
</style>
<script language="JavaScript">
  var linktext=new Array (0)
  
  linktext[0]="<div align='left'> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>Al-Qur'an 
  OnLine</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>Playing 
  Game</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>Watching 
  TV</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>Info 
  Jual-Beli</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>FaceBook</a> 
  </div>"
  linktext[1]="<div align='left'> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Antivirus'>Anti 
  Virus</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Billing'>Billing</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Design'>Design</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Tools'>Tools</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Multimedia'>Multimedia</a> 
  </div>"
  linktext[2]="<div align='left'> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Action'>Action</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/RPG'>R 
  P G</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/RTS'>R 
  T S</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Sport'>Sport</a> 
  </div>"
  linktext[3]="<div align='left'> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/TWeb'>Tutorial</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/TWeb'>HTML, 
  CSS, Java</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/TWeb'>Blogger</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Barang'>Info 
  Jual-Beli</a> </div>"
var ns6=document.getElementById&&!document.all
  var ie=document.all
function show_text(thetext, whichdiv){
  if (ie) eval("document.all."+whichdiv).innerHTML=linktext[thetext]
  else if (ns6) document.getElementById(whichdiv).innerHTML=linktext[thetext]
  }
function resetit(whichspan){
  if (ie) eval("document.all."+whichspan).innerHTML=''
  else if (ns6) document.getElementById(whichspan).innerHTML=''
  }
</script>

Step 2: If the above is already running then, Copy and put the script below under <BODY> code on your webpage or could also be on the post if you write a post using HTML:

Choose All

<div class="mkbbtndiv" style="position:absolute;"> 
<div class="batangtop">
<table align="left" id="sample1">
<tr valign="top" > 
<td class="mkbsamplebtnbtn"><a href="##" onmouseover="show_text(0,'div0');resetit('div1');resetit('div2');resetit('div3');"> 

On Maskibow</a></td>
<td class="mkbsamplebtnbtn"><a href="##" onmouseover="show_text(1,'div1');resetit('div0');resetit('div2');resetit('div3');"> 

Free Software</a></td>
<td class="mkbsamplebtnbtn"><a href="##" onmouseover="show_text(2,'div2');resetit('div0');resetit('div1');resetit('div3');"> 

Free Games</a></td>
<td class="mkbsamplebtnbtn"><a href="##" onmouseover="show_text(3,'div3');resetit('div0');resetit('div1');resetit('div2');"> 

Tips 'n Trik</a></td>

</tr>
</table>
<br/>
<table border="0" id="sample2">
<tr>
<td><div align="center"><span id="div0"></span><span 
id="div1"></span><span id="div2"></span><span 
id="div3"></span> 
</div>
</td>
</tr>
<tr onmouseover="resetit('div0');resetit('div1');resetit('div2');resetit('div3');"> 


<td colspan="4"> 
</td>
</tr>
</table>
  </div>
  </div>

Label: Button Menu, Tutorial, Tutorial 2, TWeb, TWeb 5

8 stars -10 stars -10 KomentarOver 1,500,000

4 stars-

Original Script By	: Maskibow
Revised Script By	: Maskibow
Script Work In	: Mozilla Firefox, Chrome, Opera

Description :

example :

Point your mouse towards the chart then it will exit the menu list in the drop-down menu

Choose All

<style type="text/css">
a {text-decoration: none;}
/*List Menu Setting*/
.mkbsamplebtn,.mkbsamplebtn a{
  height: 28px;
  width: 120px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  color: orange;
  valign: bottom;
  text-align: center;
  font: normal 13px Verdana;
  list-style-type: none;
  text-decoration: none;
  text-shadow: 3px 3px 3px black;
  line-height: 25px;
  border: 2px ridge orange;
  border-radius: 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px;
  }
.mkbsamplebtn:hover,.mkbsamplebtn a:hover{
  color: black;
  background-color: orange;
  }
/*Button Menu Posisi Setting*/
.mkbbtndiv, #sample1, #sample2{
  width:500;
  list-style-type: none;
  text-decoration: none;
  }
/*Button Menu Setting*/
.mkbsamplebtnbtn,.mkbsamplebtnbtn a{
  padding-top: 2px;
  padding-bottom: 2px;
  height: 25px;
  width: 120px;
  list-style-type: none;
  text-decoration: none;
  text-align: center;
  font: bold 14px Verdana;
  text-shadow: 3px 3px 3px black;
  border: 0px solid;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  }
.mkbsamplebtnbtn:hover,.mkbsamplebtnbtn a:hover{
  color: lime;
  }
/* setting warna border*/
  .batangtop, .menulistmkbbtn, .mkbsamplebtn, .mkbsamplebtn a, .mkbsamplebtn:hover, 
  .mkbsamplebtn a:hover, .mkbsamplebtnbtn, .mkbsamplebtnbtn a{
  border-color: orange;
  }
/* setting warna background*/
  .batangtop, .menulistmkbbtn, .mkbsamplebtn, .mkbsamplebtn a, .mkbsamplebtnbtn, 
  .mkbsamplebtnbtn a{
  background-color: #990099; 
  color: orange;
  }
/* setting Batang atas button*/
  .batangtop{
  width: 100%;
  height: 28px;
  border: 2px solid orange;
  border-color: orange;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  -moz-box-shadow: 4px 4px 4px gray;
  -webkit-box-shadow: 4px 4px 4px gray;
  -goog-ms-box-shadow: 4px 4px 4px gray;
  box-shadow: 4px 4px 4px gray;
  }
</style>
<script language="JavaScript">
  var linktext=new Array (0)
  
  linktext[0]="<div align='left'> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>Al-Qur'an 
  OnLine</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>Playing 
  Game</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>Watching 
  TV</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>Info 
  Jual-Beli</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>FaceBook</a> 
  </div>"
  linktext[1]="<div align='left'> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Antivirus'>Anti 
  Virus</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Billing'>Billing</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Design'>Design</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Tools'>Tools</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Multimedia'>Multimedia</a> 
  </div>"
  linktext[2]="<div align='left'> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Action'>Action</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/RPG'>R 
  P G</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/RTS'>R 
  T S</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Sport'>Sport</a> 
  </div>"
  linktext[3]="<div align='left'> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/TWeb'>Tutorial</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/TWeb'>HTML, 
  CSS, Java</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/TWeb'>Blogger</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Barang'>Info 
  Jual-Beli</a> </div>"
var ns6=document.getElementById&&!document.all
  var ie=document.all
function show_text(thetext, whichdiv){
  if (ie) eval("document.all."+whichdiv).innerHTML=linktext[thetext]
  else if (ns6) document.getElementById(whichdiv).innerHTML=linktext[thetext]
  }
function resetit(whichspan){
  if (ie) eval("document.all."+whichspan).innerHTML=''
  else if (ns6) document.getElementById(whichspan).innerHTML=''
  }
</script>

Step 2: If the above is already running then, Copy and put the script below under <BODY> code on your webpage or could also be on the post if you write a post using HTML:

Choose All

<div class="mkbbtndiv" style="position:absolute;"> 
<div class="batangtop">
<table align="left" id="sample1">
<tr valign="top" > 
<td class="mkbsamplebtnbtn"><a href="##" onmouseover="show_text(0,'div0');resetit('div1');resetit('div2');resetit('div3');"> 

On Maskibow</a></td>
<td class="mkbsamplebtnbtn"><a href="##" onmouseover="show_text(1,'div1');resetit('div0');resetit('div2');resetit('div3');"> 

Free Software</a></td>
<td class="mkbsamplebtnbtn"><a href="##" onmouseover="show_text(2,'div2');resetit('div0');resetit('div1');resetit('div3');"> 

Free Games</a></td>
<td class="mkbsamplebtnbtn"><a href="##" onmouseover="show_text(3,'div3');resetit('div0');resetit('div1');resetit('div2');"> 

Tips 'n Trik</a></td>

</tr>
</table>
<br/>
<table border="0" id="sample2">
<tr>
<td><div align="center"><span id="div0"></span><span 
id="div1"></span><span id="div2"></span><span 
id="div3"></span> 
</div>
</td>
</tr>
<tr onmouseover="resetit('div0');resetit('div1');resetit('div2');resetit('div3');"> 


<td colspan="4"> 
</td>
</tr>
</table>
  </div>
  </div>

Label: Button Menu, Tutorial, Tutorial 2, TWeb, TWeb 5

MaskibowCara Membuat Button Menu Horizontal Menu Horizontal I (HTML Sample On Maskibow) - On Maskibow

Cara Membuat Button Menu Horizontal Menu Horizontal I (HTML Sample On Maskibow)

Button Menu, Button Menu Sample, Button Menu Gallery, Button Menu Tutorial, Button Menu Script, Vista Button Menu, Button Menu Drop Down, Button Menu Horizontal, Button Menu Vertikal, Button Menu CSS, Button Menu JavaScript, Button Menu Java Script, Button Menu HTML, Cara membuat Button Menu, membikin Button Menu, Button Menu Web, Button Menu Blogger, Button Menu Design, Button Menu, Button Menu Sample,Button Menu Gallery, Button Menu Tutorial, Button Menu Script, Vista Button Menu, Button Menu Drop Down, Button Menu Horizontal, Button Menu Vertikal, Button Menu CSS, Button Menu JavaScript, Button Menu Java Script, Button Menu HTML, Cara membuat Button Menu, membikin Button Menu, Button Menu Web, Button Menu Blogger, Button Menu Design, Button Menu, Button Menu Sample,Button Menu Gallery, Button Menu Tutorial, Button Menu Script, Vista Button Menu, Button Menu Drop Down, Button Menu Horizontal, Button Menu Vertikal, Button Menu CSS, Button Menu JavaScript, Button Menu Java Script, Button Menu HTML, Cara membuat Button Menu, membikin Button Menu, Button Menu Web, Button Menu Blogger, Button Menu Design, Button Menu, Button Menu Sample,Button Menu Gallery, Button Menu Tutorial, Button Menu Script, Vista Button Menu, Button Menu Drop Down, Button Menu Horizontal, Button Menu Vertikal, Button Menu CSS, Button Menu JavaScript, Button Menu Java Script, Button Menu HTML, Cara membuat Button Menu, membikin Button Menu, Button Menu Web, Button Menu Blogger, Button Menu Design, Button Menu, Button Menu Sample,Button Menu Gallery, Button Menu Tutorial, Button Menu Script, Vista Button Menu, Button Menu Drop Down, Button Menu Horizontal, Button Menu Vertikal, Button Menu CSS, Button Menu JavaScript, Button Menu Java Script, Button Menu HTML, Cara membuat Button Menu, membikin Button Menu, Button Menu Web, Button Menu Blogger, Button Menu Design, Button Menu, Button Menu Sample,Button Menu Gallery, Button Menu Tutorial, Button Menu Script, Vista Button Menu, Button Menu Drop Down, Button Menu Horizontal, Button Menu Vertikal, Button Menu CSS, Button Menu JavaScript, Button Menu Java Script, Button Menu HTML, Cara membuat Button Menu, membikin Button Menu, Button Menu Web, Button Menu Blogger, Button Menu Design, Button Menu, Button Menu Sample,Button Menu Gallery, Button Menu Tutorial, Button Menu Script, Vista Button Menu, Button Menu Drop Down, Button Menu Horizontal, Button Menu Vertikal, Button Menu CSS, Button Menu JavaScript, Button Menu Java Script, Button Menu HTML, Cara membuat Button Menu, membikin Button Menu, Button Menu Web, Button Menu Blogger, Button Menu Design, Button Menu, Button Menu Sample,Button Menu Gallery, Button Menu Tutorial, Button Menu Script, Vista Button Menu, Button Menu Drop Down, Button Menu Horizontal, Button Menu Vertikal, Button Menu CSS, Button Menu JavaScript, Button Menu Java Script, Button Menu HTML, Cara membuat Button Menu, membikin Button Menu, Button Menu Web, Button Menu Blogger, Button Menu Design, Button Menu, Button Menu Sample,Button Menu Gallery, Button Menu Tutorial, Button Menu Script, Vista Button Menu, Button Menu Drop Down, Button Menu Horizontal, Button Menu Vertikal, Button Menu CSS, Button Menu JavaScript, Button Menu Java Script, Button Menu HTML, Cara membuat Button Menu, membikin Button Menu, Button Menu Web, Button Menu Blogger, Button Menu Design, Button Menu, Button Menu Sample,Button Menu Gallery, Button Menu Tutorial, Button Menu Script, Vista Button Menu, Button Menu Drop Down, Button Menu Horizontal, Button Menu Vertikal, Button Menu CSS, Button Menu JavaScript, Button Menu Java Script, Button Menu HTML, Cara membuat Button Menu, membikin Button Menu, Button Menu Web, Button Menu Blogger, Button Menu Design, Button Menu, Button Menu Sample,Button Menu Gallery, Button Menu Tutorial, Button Menu Script, Vista Button Menu, Button Menu Drop Down, Button Menu Horizontal, Button Menu Vertikal, Button Menu CSS, Button Menu JavaScript, Button Menu Java Script, Button Menu HTML, Cara membuat Button Menu, membikin Button Menu, Button Menu Web, Button Menu Blogger, Button Menu Design, Button Menu, Button Menu Sample,Button Menu Gallery, Button Menu Tutorial, Button Menu Script, Vista Button Menu, Button Menu Drop Down, Button Menu Horizontal, Button Menu Vertikal, Button Menu CSS, Button Menu JavaScript, Button Menu Java Script, Button Menu HTML, Cara membuat Button Menu, membikin Button Menu, Button Menu Web, Button Menu Blogger, Button Menu Design, Button Menu, Button Menu Sample,Button Menu Gallery, Button Menu Tutorial, Button Menu Script, Vista Button Menu, Button Menu Drop Down, Button Menu Horizontal, Button Menu Vertikal, Button Menu CSS, Button Menu JavaScript, Button Menu Java Script, Button Menu HTML, Cara membuat Button Menu, membikin Button Menu, Button Menu Web, Button Menu Blogger, Button Menu Design,

Original Script By	: Maskibow
Revised Script By	: Maskibow
Script Work In	: Mozilla Firefox, Chrome, Opera

Deskripsi :

Satu lagi tambahan Button menu buat sobat-sobat bloger nih, yang satu ini bergaya multiple button horizontal baik itu baris pada tombol menunya, maupun pada menu list-nya. Seperti biasanya gw kasih beberapa contoh yang sama nantinya hanya berbeda pada style design nya. button menu ini sebenarnya menggunakan script java yang sama pada button menu sebelumnya
Button drop-down menu ini sangat simple hanya bermain pada efek style CSS-nya saja, dan berbasis pada tag <table>, <div> dan <span>
Untuk menambahkan menu nya atau kamu ingin mengkotak-katik di script ini sudah diberi komentar info agar kamu dapat mudah mensettingnya sesuai dengan yang kamu mau bro...ya kalo masih bingung atau ada tambahan infonya bisa kita sama-sama share disini...

Contoh :

Arahkan mouse kamu kearah bagan menunya maka akan keluar list menu secara drop-down

Untuk Contoh halaman-nya kamu bisa melihatnya di SINI Skip Ad pada Adf.ly pada pojok kanan atas lalu download dan open deh..

Langkah 1: Copy dan taruh script dibawah ini dan letakan posisinya dibawah code <HEAD> pada webpage kamu atau bisa juga pada postingan kamu jika menulis postingan menggunakan HTML:

Folder on Maskibow...Free all For You...

How To Create Button Menu Horizontal Menu Horizontal II (CSS On Maskibow)

Cara Membuat Button Menu Horizontal Menu Horizontal I (HTML Sample On Maskibow)

Button Menu Drop-Down ToolBar (HTML Sample On Maskibow)

Button Menu Drop-Down Capsule (JavaScript Sample On Maskibow)

Folder on Maskibow
...Free all For You...