Cara Membuat Menu Dropdown Css3 Keren Tanpa Javascript

Cara Membuat Menu Dropdown Css3 Keren Tanpa Javascript | Ghiyats Blogs - Hai, Salam Untuk Semua.. Mudah Mudahan Semua Sahabat dalam keadaan sehat semua ya, Pada artikel yang akan bagikan ini kita akan membuat tentang menu navigasi, Tentu sobat pada tau kan apa itu menu navigasi.

Tapi yang akan saya bagikan untuk sobat semua Kali ini, bukan Menu navigasi biasanya Tapi Menu Navigasi Dropdown, Mungkin sudah banyak blog yang membagikan bermacam macam menu dropdown dengan jenis yang berbeda beda, Tapi menu Dropdown yang bagikan ini, memiliki keunggulan Seperti Menu Dengan Css 3, Langsung saja di bawah cara membuatnya.

• Login ke Blogger.com
• Ketika Di Sudah masuk, Sekarang menuju ke menu Tata Letak atau Layout
• Terus Klik Tambah Gadget >> Setelah itu pilih menu HTML/JavaScript
• Setelah itu,  masukan kode dibawah ini di dalam widget tersebut.

<style>
/*-- CSS3 Drop Down Menu -----*/

#bt-menu, #bt-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#bt-menu {
width: 960px;
margin: 60px auto;
background: #DADFE1;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#bt-menu:before,
#bt-menu:after {
content: "";
display: table;
}
#bt-menu:after {
clear: both;
}
#bt-menu {
zoom:1;
}
#bt-menu li {
float: left;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#bt-menu a {
float: left;
padding: 12px 30px;
color: #000000;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 0px 0 #000;
}
#bt-menu li:hover > a {
background: #333333;
color: #fafafa;
}
*html #bt-menu li a:hover { /* IE6 only */
color: #333333;
}
#bt-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #DADFE1 url('images/pageglare.png') no-repeat scroll;
 -moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
#bt-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#bt-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#bt-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#bt-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#bt-menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#bt-menu ul a:hover {
background-color: #333333;
}
#bt-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#bt-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #333333;
}
#bt-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #333333;
}
#bt-menu ul li:first-child a:hover:after {
border-bottom-color: #DADFE1;
}
#bt-menu ul ul li:first-child a:hover:after {
border-right-color: #DADFE1;
border-bottom-color: transparent;
}
#bt-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}

</style>

<ul id="bt-menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">Jquery</a></li>
<li><a href="#">Blogger Tips</a></li>
</ul>
</li>
<li><a href="#">Free Vector</a>
<ul>
<li><a href="#">Social Icon</a></li>
<li><a href="#">Website Icon</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Tools</a>
<ul>
<li><a href="#">Parser Tool</a></li>
<li><a href="#">Escape Tool</a></li>
</ul>
</li>
</ul>

•  Ganti # dengan url yang ingin di tuju dan ganti judul menu sesuai kemauan anda
• Setelah klik simpan

 

Demikianlah artikel yang sudah saya bagikan kali ini, ''Yang berjudul Cara Membuat Menu Dropdown Css3 Keren Tanpa Javascript '' dan Semoga Bermanfaat dan berguna, Terima Kasih....

 

Via : MyBlogger-Tricks

 

Keep Blogging..