Kali ini saya akan
ngasi sebuah trik untuk membuat menu horisontal tanpa edit HTML alias
menggunakan java script.tutorial ini saya dapatkan dari teman saya
. Untuk contohnya sobat bisa lihat sendiri diblog ini or pada gambar dibawah:
1. login ke blog anda
2. terus
3. kemudian
4. selanjutnya anda copy – paste kode dibawah ini...
<style type="text/css">
.black{
float:left; margin-bottom:10px;
padding:0px; width: 100%;
overflow: hidden; background: #499bea;
background: -moz-linear-gradient(top, #999 0%, #000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#000));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999', endColorstr='#000',GradientType=0 );
-moz-box-shadow: 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;}
.black ul{
margin: 0; padding: 0; padding-left: 10px;
font: bold 14px Verdana;
list-style-type: none; }
.black li{
display: inline; margin: 0;}
.black li a{
float: left; text-decoration: none;
margin: 0; padding:12px; color: white;}
.black li a:visited{color: white; }
.black li a:hover, .black li.selected a{color:#ccff00;}
#searchboxo{
width:250px; float:right; padding: 4px; margin:0px; }
#searchboxo form input.searchinput{
background: #fff; padding:6px; margin:0px; width: 160px;
border: solid 1px #999; outline: none;
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
-moz-box-shadow: inset 0 1px 3px #666;
-webkit-box-shadow: inset 0 1px 3px #666;
box-shadow: inset 0 1px 3px #aaa; }
#searchboxo form input.submitbutton{
cursor:pointer; width: 60px;
background: #FCFCFC;
background: -moz-linear-gradient(top, #FCFCFC 0%, #E8E8E8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FCFCFC), color-stop(100%,#E8E8E8));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FCFCFC', endColorstr='#E8E8E8',GradientType=0 );
border:1px solid #d8d8d8;
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
color:#000; padding:4px; text-shadow:1px 1px #fff;}
</style>
<div class='black'>
<ul><li><a href="
#">
Home</a></li>
<li><a href="
#">
About</a></li>
<li><a href="
#">
Contact</a></li>
<li><a href="
#">
Galery</a></li>
</ul>
<div id='searchboxo'>
<form action='/search' id='searchform' method='get'> <input
class='searchinput' id='searchbox' name='q' onblur='if (this.value ==
"") {this.value = "Insert keyword here...";}' onfocus='if (this.value
== "Insert keyword here..."{this.value = "";}' type='text'
value='insert keyword here...'/><input class='submitbutton'
type='submit' value='search'/></form></div></div>