Membuat Menu Horizontal Keren

Posted on by Unknown

Menu ini hanya beda dalam tampilan dan dilengkapi jquery yang membuat lebih atraktif. Selebihnya gampang membuatnya dan gak membuat blog menjadi berat. Ikuti langkah berikut.

<style>
#nav1{ margin:0; padding:6px 7px 0; height:37px; background:#7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDkCXNh4lnevyfTorK4pYP5PbgSUtZjmwnr-jHQrArLCGl5bvwDvute2sYbq9a8dDgWbv5fsEGpQIN1vkxwqLLtN5pZ6ZViiHChQRWU8B9tHRSW42NefpDeM6UwB1a-H-E7yaBg_lyRDBw/s320/image1.png) repeat-x 0 -110px; line-height:100%; border-radius:3em; -webkit-border-radius:3em; -moz-border-radius:3em; -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4); -moz-box-shadow:0 1px 3px rgba(0,0,0,.4)}
#nav1 li{ margin:0 5px; padding:0 0 8px; float:left; position:relative; list-style:none}
#nav1 a{ font-weight:bold; color:#000; text-decoration:none; display:block; padding: 8px 20px; margin:0; -webkit-border-radius:1.6em; -moz-border-radius:1.6em; text-shadow:0 1px 1px rgba(0,0,0,.3)}
#nav1 a:hover{ background:#000; color:#fff}
#nav1 .current a, #nav1 li:hover >a{ background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCsLmhLk2d1C88pYxv3Wi4R2SNF1Mdsf3eQ-SOLVaUPmMFiQNgbh_pL44ox3PdsD8RIwPwvnqtorQ8p0QTRE14LAC5vzV5uoZrRd8XTdNQ3hKLQ-7KFaxakv_aZVLeCmoUhvnVpNhvr9CE/s320/image1.png) repeat-x 0 -40px; color:#444; border-top:solid 1px #f8f8f8; -webkit-box-shadow:0 1px 1px rgba(0,0,0,.2); -moz-box-shadow:0 1px 1px rgba(0,0,0,.2); box-shadow:0 1px 1px rgba(0,0,0,.2); text-shadow:0 1px 0 rgba(255,255,255,1)}
#nav1 ul li:hover a, #nav li:hover li a{ background:none; border:none; color:#666; -webkit-box-shadow:none; -moz-box-shadow:none}
#nav1 ul a:hover{ background:#0078ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCsLmhLk2d1C88pYxv3Wi4R2SNF1Mdsf3eQ-SOLVaUPmMFiQNgbh_pL44ox3PdsD8RIwPwvnqtorQ8p0QTRE14LAC5vzV5uoZrRd8XTdNQ3hKLQ-7KFaxakv_aZVLeCmoUhvnVpNhvr9CE/s320/image1.png) repeat-x 0 -100px !important; color:#fff !important; -webkit-border-radius:0; -moz-border-radius:0; text-shadow:0 1px 1px rgba(0,0,0,.1)}

#nav1 li:hover >ul{ display:block}
#nav1 ul{ display:none; margin:0; padding:0; width:185px; position:absolute; top:35px; left:0; background:#ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDkCXNh4lnevyfTorK4pYP5PbgSUtZjmwnr-jHQrArLCGl5bvwDvute2sYbq9a8dDgWbv5fsEGpQIN1vkxwqLLtN5pZ6ZViiHChQRWU8B9tHRSW42NefpDeM6UwB1a-H-E7yaBg_lyRDBw/s320/image1.png) repeat-x 0 0; border:solid 1px #b4b4b4; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; -webkit-box-shadow:0 1px 3px rgba(0,0,0,.3); -moz-box-shadow:0 1px 3px rgba(0,0,0,.3); box-shadow:0 1px 3px rgba(0,0,0,.3)}
#nav1 ul li{ float:none; margin:0; padding:0}
#nav1 ul a{ font-weight:normal; text-shadow:0 1px 0 #fff; font-weight:bold; color:#000}
#nav1 ul ul{ left:181px; top:-3px}

#nav1 ul li:first-child >a{ -webkit-border-top-left-radius:9px; -moz-border-radius-topleft:9px; -webkit-border-top-right-radius:9px; -moz-border-radius-topright:9px}
#nav1 ul li:last-child >a{ -webkit-border-bottom-left-radius:9px; -moz-border-radius-bottomleft:9px; -webkit-border-bottom-right-radius:9px; -moz-border-radius-bottomright:9px}
#nav1:after{ content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0}
#nav1{ display:inline-block}
</style>

<ul id="nav1">
<li class="current"><a href="alamat blog anda">Home</a></li>
<li><a href="#">judul utama</a>
<ul>
<li><a href="masukkan alamat link anda" rel="nofollow" target="_blank">judul 1</a></li>
<li><a href="masukkan alamat link anda" rel="nofollow" target="_blank">judul 2</a></li>
<li><a href="masukkan alamat link anda" rel="nofollow" target="_blank">judul 3</a></li>
<li><a href="masukkan alamat link anda" rel="nofollow" target="_blank">judul 4</a></li>
</ul>
</li>

<li><a href="#">judul utama</a>
<ul>
<li><a href="masukkan alamat link anda" rel="nofollow" target="_blank">judul 1</a></li>
<li><a href="masukkan alamat link anda" rel="nofollow" target="_blank">judul 2</a></li>
<li><a href="masukkan alamat link anda" rel="nofollow" target="_blank">judul 3</a></li>
<li><a href="masukkan alamat link anda" rel="nofollow" target="_blank">judul 4</a></li>
</ul>
</li>
<li><a href="masukkan alamat link anda" rel="nofollow" target="_blank">judul</a></li>
<li><a href="masukkan alamat link anda" rel="nofollow" target="_blank">judul</a></li>
</ul>

Silahkan tulisan berwarna biri sesuai petunjuk
Ganti tulisan merah sesuai kebutuhan anda
Semua link di atas akan terbuka di jendela baru, jika anda ingin terbuka pada jendela yang sama, silahkan hilangkan kode target="_blank"

Klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep blogging smiley"