 |
| Sunrise Menu Drop Down DEMO |
Cara Memasang Menu Horizontal Drop Down pada Blog | Cara Memasang Menu Horizontal Drop Down dengan CSS - Kali ini saya akan share lagi mengenai Tutorial Blogspot yakni Cara Memasang Menu Horizontal Drop Down Keren, Menu drop down yang satu ini benar-benar keren dan sangat mudah untuk diterapkannya begitu juga warnanya sangat cerah bagaikan matahari yang akan terbit (sunrise), bagi Anda yang suka mengutak-ngatik blognya Menu Drop Down ini sangat cocok sekali bagi Anda apalagi hanya menggunakan CSS tanpa Javascript. Berikut ini saya berikan screenshoot beserta demo nya.
Jika Anda tertarik dengan Menu Drop Down ini silahkan ikuti beberapa langkah dibawah ini:
Seperti biasa:
- Login ke blogger.
- Pilih Tata Letak -> Tambah Gadget lalu pilih HTML/JavaScript.
- Salin kode dibawah ini dan masukkan pada gadget tersebut.
<style>
/*^'^ Navigation Kreasi Anak Garut ^'^*/
.nav-container-outer{
background: #990000;
padding: 0px;
height: 74px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu7cebatsPhORA4RsXYy8UpGgJS5IUQo15h6a_kDNOkB2iAM9-st-Yqv08tdPWqCWJw8cEZ_EtcpnzHLd4Ix1Ynxiz8cP38xZ0ltiJPNj2vsgOrIznyRsqhGxiNcPWnrjnS-gycG27PO45/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/AVvXsEgCGAPHNF29ynshIjIqlUbkTJu8BLU2Jwzzdspg0fw3OhS70_Oc-gXyQT3-dFs6tV44_xy6UdB8Z2Pk9AFz6mp3gQZlUZQMygabL5Vw3FI-n2wDx0nv0BezRlv0NLyD0MKoVzZNUzj9L9_F/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/AVvXsEgCGAPHNF29ynshIjIqlUbkTJu8BLU2Jwzzdspg0fw3OhS70_Oc-gXyQT3-dFs6tV44_xy6UdB8Z2Pk9AFz6mp3gQZlUZQMygabL5Vw3FI-n2wDx0nv0BezRlv0NLyD0MKoVzZNUzj9L9_F/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/AVvXsEg5vAZdjVAKAz9CTlGhZvwsEcrp4aafzuID-73rdICqrDW40HMWkIB7_o00QMAQEAZPqpCJY4ivSfr49jyrNQVxdaifEBaanDeAZNg-WCNShxxIgO1m_whqjcP5_rS-A9y82-IJWyGNA7o1/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/AVvXsEinBxahFdDj6UFMCTL0ye_ue_UQ16qeKEvOSiU6_VO4RjZyr6yeDIm65KkMZBAEgp244grJdF6lSXdwdysPSPg2SLUiNqybBwAVlwT3kFTNCbtmAfaN6Ma6fp3f_RimM-1K_DJUDr0hm448/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/AVvXsEinBxahFdDj6UFMCTL0ye_ue_UQ16qeKEvOSiU6_VO4RjZyr6yeDIm65KkMZBAEgp244grJdF6lSXdwdysPSPg2SLUiNqybBwAVlwT3kFTNCbtmAfaN6Ma6fp3f_RimM-1K_DJUDr0hm448/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/AVvXsEg-p_qV0DGH9ulTmszGvKOqMtndhqNob_PZY0Eg0pADG6C9qNMJMH3g_aajnfn8lq_kxvIYZLHFhIc3s5q0lK9y8sXq9DRCJfS_x-NGYIFabPKrCxk2_SoQPHe8XItBB6aaYP8EAhQV2sA1/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/AVvXsEixBAva-EK10A7-qvklZy8Sd9nbwbWdLd_8rr_cN4JMQpiJUwO6VPghOj2HT2JLlwNM745cNnD6zPs9c38W0QKpi5FC3IDesjokx84ttzzWCnwebiA4JQvu7Fy5ppJcOqn_tXmhcMrvM-_u/s1600/nav-bg-l.jpg" alt="" class="float-left" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTNudxANgt1rkUqGEBJTz46npg0d5LZr36Hg-_bZV1kkAq6g1_RntjsAdzIgt73NCEo3yQVco9Z5CwubnNulUvCeEBCDUEo2o0N5xJ9-1OkYiMxPSLb31kqoTV1KVryA-8c_tWEB7xi9Qj/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"> </li></ul>
</div>
Notes: Ganti tanda # dengan URL yang akan Anda Tuju beserta kalimatnya.
