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

Sabtu, 06 Juli 20131komentar

Beberapa waktu yang lalu saat merubah lay out blog ini, saat itu masih mempergunakan menu drop down/ menu navigasi masive blue, bosan dengan dominasi warna hitam putih, dimana saat itu belum saya pasang banyak banner produk afiliasi. Setelah banyak banner afiliasi yang saya pasang, tampilan menu drop down dengan warna cerah tampaknya lebih sesuai.

Seperti biasa setelah mempraktekan membuat menu navigasi horisontal dropdown sunrise (css drop down menu), tibalah saatnya menuliskan pengalaman ini kembali, untuk berbagi kepada anda..... posting baru lagi :)

Sebetulnya sudah beberapa lama saya pakai  menu navigasi horisontal dropdown sunrise (css drop down menu), saya coba dan berhasil. Cuma saat itu lagi pengen menulis terkait dengan Afiliasi, Pay Per Click (PPC) termasuk mempraktekan bagaimana mempromosikan blog atau web Replika dengan menggunakan autosubmit, jadi agak kelewatan, malah saya pikir sudah saya tulis tinggal menerbitkan saja, ternyata belum.... :)

Baiklah langsung saja, ikuti langkah-langkah berikut ini :

Langkah Pertama :
  1. Login ke Akun Blogger
  2. Klik Rancangan/Tata Letak
  3. Klik Edit HTML (Jangan lupa download Template lengkap atau Copy !)
  4. Cari Kode berikut :
]]></b:skin>

5. Masukan di atas kode tersebut, kode dibawah ini (copy paste) :





Script




@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;
}



6. Simpan template..... langkah pertama selesai

Langkah Kedua
  1. Buka Elemen Laman
  2. Klik Tambah Gadget Pada Header (untuk Template yang memungkinkan tambah gadget pada header, jika tidak bisa, sebaiknya anda baca disini)
  3. Pada Gadget HTML/ Java skript, masukkan kode berikut (copy paste) :
<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>


4. Selesai, jangan lupa Simpan


Selamat Mencoba


Catatan :
  • Ganti Tanda # dengan href="#" link url target 
  • Ganti Home, Utama dst dengan teks yang ditampilkan pada menu navigasi
  • Blog ini pernah mempergunakan menu navigasi masive blue, contohnya dapat dilihat disini
  • Bagi Anda yang menginginkan menu dropdown yang lebih komplek dapat dilihat disini

Referensi : http://artikelkomputerku.blogspot.com/2010/06/cara-membuat-menu-navigasi-horisontal_18.html
Share this article :

+ komentar + 1 komentar

27 November 2016 20.00

KISAH SUKSES
Assalamu alaikum wr wb,,senang sekali saya bisa menulis dan berbagi kepada teman2 melalui room ini, sebelumnya dulu saya adalah seorang Pengusaha Butik yg Sukses, kini saya gulung tikar akibat di tipu teman sendiri, ditengah tagihan utang yg menumpuk, Suami pun meninggalkan saya, dan ditengah himpitan ekonomi seperti ini, saya coba buka internet untuk cari lowongan kerja dan secara tdk sengaja sy liat situs pesugihan AKI SYEH MAULANA Di Website/situnya Saya pun langsug hubungi beliau dan Semua petunjuk AKI saya ikuti dan hanya 3 hari, Alhamdulilah benar benar terbukti dan, semua utang saya lunas dan sisanya buat modal usaha, kata kata beliau yang selalu sy ingat setiap manusia bisa menjadi kaya, hanya saja terkadang mereka tidak tahu atau salah jalan. Banyak orang menganggap bahwa miskin dan kaya merupakan bagian dari takdir Tuhan. Takdir macam apa? Tuhan tidak akan memberikan takdir yang buruk terhadap kita, semua cobaan yang Tuhan berikan merupakan pembuktian seberapa kuat Anda bertahan di dalamnya. Tuhan tidak akan merubah nasib Anda jika Anda tidak berusaha untuk merubahnya. Dan satu hal yang perlu Anda ingat, “Jika Anda terlahir miskin itu bukan salah siapapun, namun jika Anda mati miskin itu merupakan salah Anda, saya juga tidak lupa mengucap syukur kepada ALLAH karna melalui Ritual Penarikan Dana Hibah AKI ZYEH MAULANA saya Bisa sukses. Jadi kawan2 yg dalam kesusahan jg pernah putus asah, kalau sudah waktunya tuhan pasti kasi jalan asal anda mau berusaha, AKI ZYEH MAULANA Banyak Dikenal Oleh Kalangan Pengusaha Dan Artis Ternama Karna Beliau adalah guru spiritual terkenal di indonesia, jika anda ingin seperti saya silahkan Lihat No Tlp Aki Di website/internet ~>KLIK DISINI<~ Wassalam

Posting Komentar

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Prolingkungan - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger