Menambahkan CSS 3 Dropdown Menu Navigasi Tanpa JavaScript

Menambahkan CSS 3 Dropdown Menu Navigasi Tanpa JavaScript

Menambahkan CSS 3 Dropdown Menu Navigasi Tanpa JavaScript . Dalam posting sebelumnya dibahas bagaimana membuat menu navigasi dengan javas... 21.41.00

Menambahkan CSS 3 Dropdown Menu Navigasi Tanpa JavaScript. Dalam posting sebelumnya dibahas bagaimana membuat menu navigasi dengan javascript. Kali ini akan dibagikan cara bagaimana membuat menu navigasi yang indah dan menarik yang siap digunakan denganCSS3 Dropdown. Widget ini Sederhana, Menu ini tidak membutuhkan JQUERY atau JavaScript. Ada juga beberapa blog juga menggunakan menu navigasi yang vertikal agar blog semakin tambah menarik dan mudah di gunakan pengunjung. ini tergantung oleh admin saja. Ini tidak menggunakan gambar sama sekali dan memuat cepat. Ini Indah menu drop-down yang dibuat oleh Catalin Rosu dan tidak menggunakan gambar atau script sama sekali! Dan disini akan diberikan versi modifikasi yang bekerja sempurna dengan Blogger. Dalam Post Anda akan melihat bagaimana Anda bisa membangun CSS3 animasi dropdown menu dengan beberapa CSS3 Fitur. CSS 3 Dropdown Menu tanpa JavaScript

Cara Menambahkan Css3 Drop Down Menu
1. Masuk ke Blogger Dashboard>>  Layout >> dan klik Add a gadget
2. Anda pilih HTML/JAVASCRIPT Widget
3. Kemudian paste kode dibawah ini.

style>
/*-- CSS3 Drop Down Menu By Blogger Tricks http://.bl0gger-tricks.blogspot.com-----*/
#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>

Anda dapat mengubah widget ini dengan mudah. Untuk mengubah judul link hanya diganti dengan teks judul halaman Anda dan mengganti tanda hash # dengan Halaman link anda. Klik simpan dan Selesai.

[source]