Cara Membuat Menu Horizontal Drop Down Super Keren

Cara Membuat Menu Horizontal Drop Down Super Keren >>Dharla Ferdana, CSS - Cara Membuat Menu Horizontal Drop Down Super Keren, sebelumnya Blog Dharla ferdana juga pernah share artikel tentang cara membuat menu navigasi drop down efek pelangi diatas header Dan kali ini juga masih tentang membuat Menu dropdown. 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLDGeywRqGKTAu1OzU-ukHKoLgH6uc5ubFRWYvBtaFIGVOU8eUuywCdzEMLANwlkuRj0TCNyijFvrSgRWNWNYEDXhrlbjgddho5KZH6nqBoWxcAA2ThWrCFnEwNT7tHcrsZtsfFwcnZ-vY/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqF1H0mk7zhqKzNAbR5I3n4yKsLjQSRzssJM8c7jtkLlYqwmsF4_gOb2efeIqEXIxYcHOgaAaqYNfgiHCMRjqYgwkLhbmCDyA2pXU7IuJf8GKGjCWavlX3YCYBsAy0UbXS_TYSOh5vsGzq/s1600/item-primary-bg.gif);
background-repeat: no-repeat;
background-position: top;
}

#nav-container a:hover{
color: #6C3600;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqF1H0mk7zhqKzNAbR5I3n4yKsLjQSRzssJM8c7jtkLlYqwmsF4_gOb2efeIqEXIxYcHOgaAaqYNfgiHCMRjqYgwkLhbmCDyA2pXU7IuJf8GKGjCWavlX3YCYBsAy0UbXS_TYSOh5vsGzq/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc4d-YVcJXdiOp-2Qkal4DV6jF0mMUmmVd63AZ98IJaJ_jqb0A4ACmXYINlZsuh9Z2OZ0n5W29cQG7uoH3C8R0hb3sNiNbD86MFVrskIOCcuTgzgfGLck_29pbldkZMu3KzujPJUMo_a1o/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8sx4cB8GgcGhwxpcbfyxd3OYcT8da1Caymn5l0fe016Lc5jkbp-RDKCcMMpWwIuAjnL9iyiVBVMAsyTxLEbhwYU59edFhi5fjdDYApcfbCD4oIIdkHgHwpfZS81ceMPhk5ezm0UmpIpNC/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8sx4cB8GgcGhwxpcbfyxd3OYcT8da1Caymn5l0fe016Lc5jkbp-RDKCcMMpWwIuAjnL9iyiVBVMAsyTxLEbhwYU59edFhi5fjdDYApcfbCD4oIIdkHgHwpfZS81ceMPhk5ezm0UmpIpNC/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ChyxcSukSrjnzKU5A3COo-ZVT1cXWuC1_i3FKhIBQN293AtjIOqzAFZbMNq-Xgqjt0pwlHx06PcsYPeQ2J9sWG6tOktUnDCv9S2OOUTweyQo-dlNuG1TQ98UqeaNQIb-gSLZrCUCkplr/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTzodZk5j-solYYEPhLhfSg97ddIab3X2_gxOcQyUKhkbC92Z276wVKCfyQ5Eek2uc8w-ed1MI1cLkKezSSRL53y9k6KSZYrH8EPkU-cbLwbFXJ54uqP47U7ZdtCTwz3iVllCV6BdvATkT/s1600/nav-bg-l.jpg" alt="" class="float-left" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFocTkSY2uUseTHCD8n_XJkl_eXLGw6AZy4POZjjdvCoKTsvvKnMROy3f0LEGCsyBQFeLTmAkzr1hzTKZtbg3kND1ARL7P2o8RbEIJXRbjA1wsFrvGY7veJtI-Ddn-sLrelwERlCqz9Krr/s1600/nav-bg-r.jpg" alt="" class="float-right" />
<ul id="nav-container" class="nav-container">
<li><a class="item-primary" href="http://dharla-ferdana.blogspot.com">HOME</a>
</li>

<li></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></li>
<li><a href="#;">Example Of a Divider</a></li>
<li><a href="#;">With No Title</a></li>
</ul></li>

<li></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></li>
<li><a href="#;">Example Of a Divider</a></li>
<li><a href="#;">With No Title</a></li>
</ul></li>

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

<ul style="width:150px;">
<li>Title For Links</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></li>
<li>Title After Divider</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></li>
<li><a class="item-primary" href="#;">Very Long Item</a>

<ul style="width:150px;">
<li>Title For Links</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></li>
<li>Title After Divider</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></li>
<li><a class="item-primary" href="#;">Fully Flexible</a>

<ul style="width:150px;">
<li>Title For Links</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></li>
<li>Title After Divider</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"> </li></ul>
</div>

Ganti tanda # dengan URL yang dituju, dan juga ganti kata-kata lainnya.
Sekian artikel dari saya tentang Cara Membuat Menu Horizontal Dropdown Super Keren Semoga bermanfaat.

Jumat, 29 Juni 2012

Cara Membuat Menu Horizontal Drop Down Super Keren

1 Komentar Pada Artikel » Cara Membuat Menu Horizontal Drop Down Super Keren

Entri Populer

Friend Links