Jumat, Juni 18, 2010

Cara membuat menu navigasi horisontal dropdown sunrise (css drop down menu)

Salahsatu menu navigasi horisontal dengan script css yang bisa dijadikan alternatif untuk dipasang di blog adalah menu navigasi horisontal/dropdown menu (sun rise). Seperti gambar di bawah ini:



Beberapa menu dropdown lainnya bisa dilihat disini:
1. Simple dropdown
2. Dropdown 2 level
3. Drop down massive blue

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

Untuk membuat menu navigasi di atas, bisa ikuti prosedur berikut:



1. Login ke akun blogger

Pilih Dashboard - Tata letak (Rancangan)- Edit HTML

menu horisontalcari kode berikut:

]]></b:skin>

2. Di bagian atas kode tersebut masukkan kode berikut



@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 template

3. Pada gadget html/javascript masukkan kode berikut:

<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>
<li><a href="#">Menu 3.4</a></li>
<li><a href="#">Menu 3.5</a></li>
<li><a href="#">Menu 3.6</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>
<li><a href="#">Menu 4.3</a></li>
<li><a href="#">Menu 4.4</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.1</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>


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 anda.

Contoh blog yang memakai menu horisontal dropdown sunrise bisa dilihat disini





Artikel Terkait :



16 komentar:

Awang Satrijana mengatakan...

Aku senamh lo bisa buat menu horizintal, tapi bagaimana ya, membuat dan mengganti warna kan menu tabnya berwarna kuning keemasan, begitu juga sub menunya, ingin di rubah warnanya gitu selain itu juga panjang tabnya..trim's.

Blog BSP mengatakan...

Kalau punya saya gimana ya mas,
biar navigasi sebelah kanan ada dropdownnya juga.

terima kasih,

Artikel Komputer mengatakan...

@Awang Satrijana
Gambarnya harus diganti dulu dengan gambar baru , bisa edit gambat di bawah ini :
http://i49.tinypic.com/2mww0vr.jpg
http://i49.tinypic.com/2rcu35h.jpg
kemudian upload ke situs image hosting, Selanjutnya ganti url gambar di atas dengan url gambar anda
@Blog BSP
Saya sudah cek tapi menu tidak terpasang di blognya.

combet mengatakan...

mas kok menu dropdown nya di blog aq gak kluar sie,mohon pencerahan mas makasih,dah tak coba berkali2 tp ttp nihil hasil nya.

Artikel Komputer mengatakan...

Mungkin templatenya tidak kompatible, bisa gunakan menu dropdown masive blue karena lebih cocok dengan template blogger designer
Drop down massive blue

Ady mengatakan...

Assalam,
blog nya bagus banget, senang bisa belajar diblog ini, tp aku uda coba menu horisontalnya, namun diblog saya muncul bukan menu horisontal tap menu vertikal ( dari atas kebawah)gimana ya, mohon petunjuknya, terima kasih...wassalam

Artikel Komputer mengatakan...

Wlkm salam
Menu navigasi sunrise ini hanya cocok uuntuk template lama blogger, untuk template baru terkadang bermasalah cabangnya tidak muncul, Untuk menu dropdown yang sudah saya edit dan bisa jalan di template baru blogger bisa gunakan versi massive blue Drop down massive blue.

Mang Ajat mengatakan...

Makasih banget, udah di coba dan berhasil, tapi ada satu masalah, bagaimana ngilangin menu yang sudah ada dari bawaan template (hasil donload)yg tidak berfungsi kalo di klik
terima kasih atas jawabannya,,,, ditunggu

Artikel Komputer mengatakan...

saya sudah cek di blognya bapak
http://lemahabang-karawang.blogspot.com/
Kemungkinan menu navigasi yang ada di header blog berasal dari page halaman statis Beranda dan
Falsafah Guruminda
Coba digeser letak link halaman statisnya, bisa dilihat panduannya disini
http://komputerseo.blogspot.com/2011/02/cara-mengatur-letak-link-page-pada-blog.html

gielien mengatakan...

gan sukses ane buat menu navigasi tuh,
terimakasih yah gan,
kunjungi blog ane gan,ane masih nubi sapa tau ada yang kurang gitu,mohon bimbingan nya gan,
gielien 2122

jayagrup mengatakan...

salam gan ,makasih untuk infonya yg ane mo tanyakan ,untuk tab menunya ,bisa di pendekkan gk ,gan ...?

Sehabudin ibn Juandi al-Bogory mengatakan...

Mas... tks

tas panduannya...

aku dh seminggu cari panduan bikin menu kaya gini... wah ribet2 tuh jelasinx...

tpi alhmdulillah berkat panduan mas akhirx qu berhasil...

mas berkunjung ya ke blog ku...syukur2 klo follow mas ma blog ku...hehehe

Sehabudin ibn Juandi al-Bogory mengatakan...

MAS TKS tas panduanx...

mas berkunjung ya ke blog ku... sklian follow ma blog ku... hehe.

smg ilmux ttp berguna...

hipnotis surabaya mengatakan...

Alhamdulillah, sudah bisa mempraktekan yg membat menu horizontal yg paleng atas Mas... terimaksih bnyak atas postingan.nya ya, semoga jg bs bermanfaat sm yg lainya...

Firman Ngocop mengatakan...

sangat mudah untuk dipasang di blog, yang bikin saya lebih tertarik adalah pagerank blog ini...MANTAPP!!!

vika anada mengatakan...

link untuk menu 2.1 itu link yang mana ya?
kalau home kan tampilan awal blog, nah kalau yang menu 1 misalkan namanya Puisi, itu linknya yang seprti apa?
mohon bantuaannya