Membuat Drop Down Efek Sun Rise

Membuat menu navigasi Drop Down Efek Sun Rise

Menu navigasi digunakan untuk memudahkan mencari kategori postingan pada blogger dengan judul dan label yang menarik. Salah satu menu navigasi horisontal dengan script css yang bisa dijadikan alternatif untuk dipasang di blog adalah menu navigasi horisontal/dropdown menu dengan efek  sun rise. Seperti gambar di bawah ini:

Menu navigasi di atas terkesan rounded dengan warna coklat kekuningan mengarah ke warna orange disertai warna putih di belakang teks.

Jika sobat ingin menggunakan Menu navigasi harizontal dengan efek sun rise ini, berikut ini scipt kode untuk membuat nya. Untuk membuat menu navigasi di atas, berikut ini langkah-langkahnya :

• Masuk ke dashboard blogger sobat
• Pilih Template > Edit HTML > Cari kode  ]]></b:skin>
• Masukkan kode berikut, diatas kode ]]></b:skin>

@charset "utf-8";/* CSS Document */
body{padding: 25px;}
/*^'^ Navigation Structure ^'^*/.nav-container-outer{background: #990000;padding: 0px;height: 74px;background: url(http://i48.tinypic.com/hur12s.jpg);}.float-left{float: left;}.float-right{float: right;}.nav-container .divider{display:block;font-size:1px;border-width:0px;border-style:solid;}.nav-container .divider-vert{float:left;width:0px;display: none;}.nav-container .item-secondary-title{display:block;cursor:default;white-space:nowrap;}.clear{font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none;}.nav-container{position:relative;zoom:1;margin: 0 auto;}.nav-container a, .nav-container li{float:left;display:block;white-space:nowrap;}.nav-container div a, .nav-container ul a, .nav-container ul li{float:none;}.nav-container ul{left:-10000px;position:absolute;}.nav-container, .nav-container ul{list-style:none;padding:0px;margin:0px;}.nav-container li a{float:none}.nav-container li{position:relative;}.nav-container ul{z-index:10;}.nav-container ul ul{z-index:20;}.nav-container ul ul ul{z-index:30;}.nav-container ul ul ul ul{z-index:40;}.nav-container ul ul ul ul ul{z-index:50;}li:hover>ul{left:auto;}#nav-container ul {top:100%;}#nav-container ul li:hover>ul{top:0px;left:100%;}
/*^'^ Primary Items ^'^*/ #nav-container a{ padding:7px 17px 7px 18px;margin: 10px 0px 0px 0px;color: blue;font-family: Trebuchet MS, Arial, sans-serif, Helvetica;font-size:14px;text-decoration:none;font-weight: bold;background: url(http://i50.tinypic.com/an25cp.jpg);background-repeat: no-repeat;background-position: top;}
#nav-container a:hover{color: #6C3600;background: url(http://i49.tinypic.com/md1emv.jpg);background-repeat: no-repeat;background-position: center;}
/*^'^ Secondary Items Container ^'^*/ #nav-container div, #nav-container ul{ padding:10px 4px 10px 4px;margin:0px 0px 0px 0px;background: url(http://i49.tinypic.com/xauknl.jpg);background-repeat: repeat-x;background-color: #FF9900;border-bottom: 1px solid #CA6500;}
/*^'^ Secondary Items ^'^*/ #nav-container div a, #nav-container ul a{ padding:3px 10px 3px 6px;background-color: #FFFFFF;background: url(http://i48.tinypic.com/14l21jb.jpg);background-repeat: no-repeat;background-position: 0px 22px;font-size:11px;border-width:0px;border-style:none;margin: 0px 0px 0px 0px;width: 149px;}
/*^'^ Secondary Items Hover State ^'^*/ #nav-container div a:hover, #nav-container ul a:hover{ background-color: #FFFFFF;background: url(http://i48.tinypic.com/14l21jb.jpg);background-repeat: no-repeat;color:#CC0000;}
/*^'^ Secondary Item Titles ^'^*/ #nav-container .item-secondary-title{ cursor:default;padding:4px 0px 3px 7px;color: #6C3600;font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;font-size:11px;background: url(http://i47.tinypic.com/or1755.jpg);background-repeat: no-repeat;font-weight:bold;}
/*^'^ Horizontal Dividers ^'^*/ #nav-container .divider-horiz{ border-top-width:1px;margin:5px 5px;border-color: #C16100;}
/*^'^ Vertical Dividers ^'^*/ #nav-container .divider-vert{ border-left-width:1px;height:15px;margin:4px 2px 0px 2px;border-color:#AAAAAA;}

• Simpan.
• Sekarang sobat masuk ke Tata Letak > add HMTL/JavaScript
• Masukkan kode script berikut ini :

<div class="nav-container-outer">
<img src="http://i49.tinypic.com/2rcu35h.jpg" alt="" class="float-left" />
<img src="http://i49.tinypic.com/2mww0vr.jpg" alt="" class="float-right" />
<ul id="nav-container" class="nav-container">
<li><a class="item-primary" href="#">HOME</a>
</li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">Menu 2</a>
<ul style="width:150px;">
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
<li><a href="#">Menu 2.3</a></li>
</ul></li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">Menu 3</a>
<ul style="width:150px;">
<li><a href="#">Menu 3.1</a></li>
<li><a href="#">Menu 3.2</a></li>
<li><a href="#">Menu 3.3</a></li>
</ul></li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">Menu 4</a>
<ul style="width:150px;">
<li><a href="#">Menu 4.1</span></li>
<li><a href="#">Menu 4.2</a></li>
</ul></li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#;">Menu 5</a>
<ul style="width:150px;">
<li><a href="#">Menu 5.1</span></li>
<li><a href="#">Menu 5.2</a></li>
<li><a href="#">Menu 5.3</a></li>
<li><a href="#">Menu 5.4</a></li>

</ul></li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#;">Menu 6</a>
</li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#;">Menu 7</a>
</li>

<li class="clear"> </li></ul>
</div>

• Save dan Lihat hasilnya.

Catatan:

Pada script di atas

Ganti semua tanda # pada href="#" dengan url target atau url tujuan.

Teks Menu1 , Menu2, ..., diganti dengan teks yang akan ditampilkan di menu

Agar script bisa berfungsi dengan baik, maka sebaiknya dicopy ke notepad atau word pad kemudian diedit sesuai kebutuhan blog sobat.

-==™  SELAMAT MENCOBA ™==-