Jumat, 15 Juni 2012

Cara Membuat Menu Horizontal Drop Down Super Keren


By on 00.36

Blazer Blog, CSS - Cara Membuat Menu Horizontal Drop Down Super Keren, Menu drop down kali ini memang super keren, karena mempunyai warna yang mirip dengan saat matahari terbit (sunrise), bagi anda yang suka mendesain blog, menu ini memang cocok untuk blog anda, karena mempunyai tampilan yang keren dan hanya menggunakan CSS tanpa JavaScript.


Cara Membuat
1. Login ke blog kamu.
2. Pilih Rancangan, pilih Add Gadget > HTML JavaScript. Copy kode di bawah ini.
<style>
/*^'^ Navigation Structure ^'^*/
.nav-container-outer{
background: #990000;
padding: 0px;
height: 74px;
background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQtJNaPc62I/AAAAAAAAAKs/2BmTvxN4wyk/s1600/nav-bg.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: #FFFFFF;
font-family: Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:14px;
text-decoration:none;
font-weight: bold;
background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQtJCLgoSeI/AAAAAAAAAKU/FhQy3kYe0gY/s1600/item-primary-bg.gif);
background-repeat: no-repeat;
background-position: top;
}


#nav-container a:hover{
color: #6C3600;
background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQtJCLgoSeI/AAAAAAAAAKU/FhQy3kYe0gY/s1600/item-primary-bg.gif);
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://1.bp.blogspot.com/_jM8-wHc3NKY/TQtJG25BI4I/AAAAAAAAAKg/iHBVUZh_3gk/s1600/item-secondary-container-bg.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://2.bp.blogspot.com/_jM8-wHc3NKY/TQtJFWzovvI/AAAAAAAAAKc/Tkea8FvVTN4/s1600/item-secondary-bg.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://2.bp.blogspot.com/_jM8-wHc3NKY/TQtJFWzovvI/AAAAAAAAAKc/Tkea8FvVTN4/s1600/item-secondary-bg.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://2.bp.blogspot.com/_jM8-wHc3NKY/TQtJJ7mPTAI/AAAAAAAAAKo/TjeE_jkB_rs/s1600/item-secondary-title-bg.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;
}
</style>

<div class="nav-container-outer">
<img src="http://4.bp.blogspot.com/_jM8-wHc3NKY/TQtJOxMlB1I/AAAAAAAAAKw/hXZ77KQnoT8/s1600/nav-bg-l.jpg" alt="" class="float-left" />
<img src="http://3.bp.blogspot.com/_jM8-wHc3NKY/TQtJQzrYfsI/AAAAAAAAAK0/Wv8PRzkfPV8/s1600/nav-bg-r.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="#">Products</a>


<ul style="width:150px;">
<li><a href="#">SoftwarePlus</a></li>
<li><a href="#">MagicDriver</a></li>
<li><a href="#">GreatFX</a></li>
<li><a href="#">SampleSoft</a></li>
<li><a href="#">UnDoIt</a></li>
<li><a href="#">100% CSS Menu</a></li>
<li><a href="#;">With Cross-Browser</a></li>
<li><a href="#;">Dropdowns</a></li>
<li><a href="#;">Absolutely NO Javascript</a></li>
<li><a href="#;">Being Used On</a></li>
<li><a href="#;">These Menus</a></li>
<li><span class="divider divider-horiz" ></span></li>
<li><a href="#;">Example Of a Divider</a></li>
<li><a href="#;">With No Title</a></li>
</ul></li>


<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">Quality</a>


<ul style="width:150px;">
<li><a href="#">SoftwarePlus</a></li>
<li><a href="#">MagicDriver</a></li>
<li><a href="#">GreatFX</a></li>
<li><a href="#">SampleSoft</a></li>
<li><a href="#">UnDoIt</a></li>
<li><a href="#">100% CSS Menu</a></li>
<li><a href="#;">With Cross-Browser</a></li>
<li><a href="#;">Dropdowns</a></li>
<li><a href="#;">Absolutely NO Javascript</a></li>
<li><a href="#;">Being Used On</a></li>
<li><a href="#;">These Menus</a></li>
<li><span class="divider divider-horiz" ></span></li>
<li><a href="#;">Example Of a Divider</a></li>
<li><a href="#;">With No Title</a></li>
</ul></li>


<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">Services</a>


<ul style="width:150px;">
<li><span class="item-secondary-title" >Title For Links</span></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
<li><span class="divider divider-horiz" ></span></li>
<li><span class="item-secondary-title" >Title After Divider</span></li>
<li><a href="#">Once Again...</a></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
</ul></li>


<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#;">Very Long Item</a>


<ul style="width:150px;">
<li><span class="item-secondary-title" >Title For Links</span></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
<li><span class="divider divider-horiz" ></span></li>
<li><span class="item-secondary-title" >Title After Divider</span></li>
<li><a href="#">Once Again...</a></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
</ul></li>


<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#;">Fully Flexible</a>


<ul style="width:150px;">
<li><span class="item-secondary-title" >Title For Links</span></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
<li><span class="divider divider-horiz" ></span></li>
<li><span class="item-secondary-title" >Title After Divider</span></li>
<li><a href="#">Once Again...</a></li>
<li><a href="#">These Links Still Appear</a></li>
<li><a href="#">Just Like The Others</a></li>
<li><a href="#">Even When Under A Title</a></li>
</ul></li>
<li class="clear">&nbsp;</li></ul>
</div>
Ganti tanda # dengan URL yang dituju, dan juga ganti kata-kata lainnya.

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

21 komentar:

  1. cara ganti warnanya biar bukan kuning gamana?

    BalasHapus
  2. Ga bisa di ubah gan soalnya background nya pake gambar bukan kode warna, dan jika diganti bisa kacau.

    BalasHapus
  3. mantap...

    tapi apa gak bikin brat blog?

    BalasHapus
  4. Tenang saja gan untuk kecepetan internet yg sedang ga bikin berat.

    BalasHapus
  5. @Ignatiustrf : bisa di ganti warna , warna kuning memang tidak menggunakan code warna..tetapi memakai image2 yang telah di sesuaikan.. ganti dulu semua image2 yang sudah ada. paste url gambar ke browser dan simpan gambar tersebut jika sudah.. sesuaikan gambar-gambar tadi dengan editing menggunakan photoshop.. jangan mengganti ukuran gambar, karna dapat merusak design menu horizontalnya...memang sih agak panjang jalannya, tetapi kita bisa kreasikan sendiri.. jangan menggunakan intensitas atau resolusi gambar yang besar, karna akan membuat blog anda berat jika di pasang nanti..

    # buat yang udah share .. tanks untuk infonya, yang seperti ini saya cari. gak pake ribet, langsung menuju ke TKP.

    BalasHapus
  6. bos ane dah coba, tapi kok efek drop down nya kagak nongol ya ?

    BalasHapus
  7. gan kok second title nya gak isa ya???

    BalasHapus
  8. thanks gan infonya, saya coba pasang . .

    BalasHapus
  9. Bro CSS dasar untuk membuat dropdown itu apa yha..apakah harus di tambah hover,position,float ataukah yg lainnya..soalnya saya cuman butuh dropdownnya saja..jadi tampilan menunya tetep seperti yg ada di blg saya,,saya hanya ingin menambah dropdown saja tolong di bantu yha.

    BalasHapus
  10. Iya mas entar saya kirimin lewat email emas tapi besok hari selasa.

    BalasHapus
  11. Pas bener Gan,lagi nyari menu horizontal yang keren eee....ketemu disini. Mau tak coba dulu deh.
    Thankyu and Salam Sukses

    BalasHapus
  12. keren sob infonya.,,.
    kunjungi blog sy jga ya
    http://onerizone.blogspot.com/

    BalasHapus
  13. gan cara posting di menu nya gmna ????

    BalasHapus
  14. Ya sobat harus buat posting dan jangan lupa kasih label. Nanti jia posting tersebut di lihat, anda lihat pada bagian addres bar (tempat kamu ngetik alamat web)copy alamt URL nya.

    BalasHapus
  15. saya suka blok anda tentang cara membuat menu horizontal drop down, saya berharap untuk melihat lebih banyak dari anda. apakah anda menjalankan situs lain????

    BalasHapus
  16. sob mantap and dah ane pake di blog ane

    http://sunnahmu.blogspot.com/

    cuma ane tanya
    cara mengurangi sensitiv waktu buka sub menunya bgmn caranya yach....
    mohon bantuanya sob

    BalasHapus
  17. keren postingannya sob,, kunjungan balik ya.. sebenernya saya juga pengen coba buat navigasi menu drop down yang keren tapi blum ada basicnya.. ntarlah belajar dlu...

    Areapublik.blogspot.com

    BalasHapus
  18. sob, bisa ilangin reflectionnya ngga, soalnya terlalu gede mas..hehehe, request az mas...
    MAs, nanya lagi, kalo mau bikin menu horizontal kayak "tokoh indonesia"

    Contoh gambar:
    https://sites.google.com/site/harjonsimbolon/home/horizontal.png?attredirects=0

    Makasih parah mas...

    BalasHapus
  19. Keren Gan tapi Sub Menunya tidak muncul

    BalasHapus
  20. keren.. udh sy pasang di header http://togelfrance.com
    thx ya udh bikin artikel sebagus ini.

    BalasHapus