Cara membuat menu drop down navigasi keren

Navigasi Header

Salam.
Selamat datang

Cara membuat menu drop down navigasi keren.
Kali ini saya akan share menu header yang tak kalah kerennya.
Saya akan sajikan tutorial membuat menu navigasi yang menyerupai daun, keren loh, nanti anda pasti ingin memasangnya di blog anda.

Kalau pada menu accordion kan bila disentuh mouse, maka akan bergeser ke bawah. Begitu cantiknya menu daun yang akan saya buat ini, disamping warna daunnya yang berwarni warni, juga jika disorot mouse, maka menu daun tersebut langsung berputar dan bergeser. Anda bisa melihat dahulu contoh demonya disini

Ok kita mulai cara membuat menu daun keren di blog :

1. Masuk ke Blogger
2. Pilih Rancangan
3. Pilih Edit html
4. Centang Expand widget templates
5. Backup dulu ya templatenya untuk jaga-jaga jika salah
6. Sekarang anda cari kode ]]></b:skin>
7. Kalau sudah dapat, copy kode dibawah ini dan letakkan tepat diatas kode ]]></b:skin>

nav {
width: 960px;
height: 100px;
margin: 120px auto;
text-align: center;
}
.top-menu li {
display: inline-block;
text-align: center;
margin: 30px 5px;
position: relative;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
.top-menu li:hover {
margin: 30px 20px;
}
.top-menu li:active {
margin: 30px 33px;
}
.top-menu li a {
width: 100px;
height: 100px;
z-index: 9999;
position: absolute;
top: 35px;
font-weight: bold;
display: block;
text-decoration: none;
font-size: 20px;
color: #fff;
text-shadow: 0px 1px 1px rgba(0,0,0,0.4), 0px 4px 6px rgba(0,0,0,0.1), 0px 9px 11px rgba(0,0,0,0.1);
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
}
.top-menu li:active a {
font-size: 26px;
top: 30px;
text-shadow: none;
}
.top-menu li div.menu-item {
width: 100px;
height: 100px;
display: block;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-webkit-border-top-left-radius: 100px;
-webkit-border-bottom-right-radius: 100px;
-moz-border-radius-topleft: 100px;
-moz-border-radius-bottomright: 100px;
border-top-left-radius: 100px;
border-bottom-right-radius: 100px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.top-menu li:hover div.menu-item{
-webkit-border-top-left-radius: 80px;
-webkit-border-bottom-right-radius: 80px;
-moz-border-radius-topleft: 80px;
-moz-border-radius-bottomright: 80px;
border-top-left-radius: 80px;
border-bottom-right-radius: 80px;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-o-transform: rotate(225deg);
}
.top-menu li:active div.menu-item{
-webkit-border-top-left-radius: 50px;
-webkit-border-bottom-right-radius: 50px;
-moz-border-radius-topleft: 50px;
-moz-border-radius-bottomright: 50px;
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
}
#home { background: #41D05F; }
#about { background: #E42B2B; }
#contact { background: #ff8400; }
#sitemap { background: #a800ff; }
#iklan { background: #49a7f3; }
8. Simpan dulu ya templatenya

Kita lanjutkan menuju :

1. Tata Letak
2. Tambah gadget
3. Pilih html/javascript
4. Masukkan kode berikut ke dalamnya

<nav>
<ul class="top-menu">
<li><a href=#>Home</a><div class="menu-item" id="home"></div></li>
<li><a href=#>About</a><div class="menu-item" id="about"></div></li>
<li><a href=#>Contact</a><div class="menu-item" id="contact"></div></li>
<li><a href=#>Sitemap</a><div class="menu-item" id="sitemap"></div></li>
<li><a href=#>Iklan</a><div class="menu-item" id="iklan"></div></li>
</ul>
</nav>

5. Selesai,. Save/ simpan lagi ya.

Sampai jumpa di artikel lainnya yaa.

Semoga bermanfaat. HAPPY BLOGGING!

Selamat jumpa di artikel lainnya yaa.

Bagikan

Jangan lewatkan

Cara membuat menu drop down navigasi keren

4/ 5

Oleh Home Sharing

Home Sharing 16.08 Komentar