CSS Menu Horisontal

Print this page
 Berikut langkah membuat CSS Menu Horisontal

1. Login keBlog Sobat
2. Masuk ke Rancangan Klik ad gadget pilih HTML/Javascript
3. Copy kode dibawah ini dan ubah URLnya dan nama Menu-menumya
4. Biar lebih menarik rubah kode warnanya
5. Lalu simpan dan letakkan di bagian atas blog sobat

<style type="text/css">#tabs {  float:left;  width:100%;  height:auto;  font-size:93%; line-height:normal;  border-bottom:grey;  margin-bottom:1em;  overflow:hidden;  }  #tabs ul {  margin:0;  padding:10px 10px 0 0px;  list-style:none;   }  #tabs li {  display:inline;  margin:0;  padding:0;  }  #tabs a {  float:left;  -moz-border-radius: 10px 10px 0px 0px;-webkit-border-radius: 10px 10px 0px 0px;-o-border-radius:10px 10px 0px 0px; background: black; background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f); background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f)) ; border: 4px inset red;  margin:2px;  padding:0px 5px 0px 5px;  font-family: Comic Sans MS,sans-serif;  font-size: large;  }  #tabs a span {  float:left;  display:block;  padding:4px 6px 4px 6px;  margin-right:2px;  color:#FFF;  }  #tabs a span {float:none;}  /* End IE5-Mac hack */ #tabs a:hover span {  }  #tabs a:hover { background: -moz-linear-gradient(center top, #7ad690, #3ec05c 25%, #298a40 45%, #3ec05c 85%, #7ad690); background: -webkit-gradient(linear, center top, center bottom, from(#7ad690), color-stop(25%, #3ec05c), color-stop(45%, #298a40), color-stop(85%, #3ec05c), to(#7ad690)); transform:rotate(-6deg); -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg); } #tabs a:hover span { background: -moz-linear-gradient(center top, #7ad690, #3ec05c 25%, #298a40 45%, #3ec05c 85%, #7ad690); background: -webkit-gradient(linear, center top, center bottom, from(#7ad690), color-stop(25%, #3ec05c), color-stop(45%, #298a40), color-stop(85%, #3ec05c), to(#7ad690)); transform:rotate(-6deg); -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg); } </style> <br />

<div id="tabs">

<ul>

<li></li>

<li><a href="">Menu 1</a></li>

<li><a href="">Menu 2</a></li>

<li><a href="">Menu 3</a></li>

<li><a href="">Menu 4</a></li>

<li><a href="">Menu 5</a></li>

</ul>

</div>

Lihat Contoh Berikut ini :

• Menu 1
• Menu 2
• Menu 3
• Menu 4
• Menu 5

Artikel Terkait