Cara Mudah Membuat Menu Navigasi Di Blog Dengan Berbagai Bentuk

Tampilan Menu Navigasi Terbaru Dengan Bentuk Daun - Secara umum letak dan bentuk menu navigasi pada blog dapat kita pindahkan tempat dan fungsinya, serta dapat kita ubah sesuka hati dengan berbagai bentuk dan variasi agar terlihat cantik dan menarik. Seperti tampilan menu navigasi terbaru kali ini, saya mengambil inspirasi dari bentuk daun.

Membuat Menu navigasi seperti ini juga terbilang mudah dan tidak ribet, karena kita hanya mengubah bentuk bordernya saja agar berbentuk lingkaran daun dengan pengaturan CSS seperti ini:

.leaf-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; } //jarak tumpukan daun menu .leaf-menu li:active {margin: 30px 33px;}

Dan hasilnya akan tampak menarik layaknya helaian daun yang kita susun secara vertical seperti gambar berikut:

Bagaimana? cukup mudah bukan.!, sekarang kita tambahkan variasi sedikit agar tampilan hovernya berputar (tampilan menu daun akan berputar) dan akan membesar pada posisi center (tengah) saat menu di KLIK dengan kode CSS seperti ini:

.leaf-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); }

Saatnya penerapan menu navigasi yang cantik dan menarik ini ke blog Anda dengan pembangun kode CSS lengkap seperti ini:

nav { width: auto; height: 100px; margin: -5em auto; text-align: center;} .leaf-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; transition: all 0.3s ease;} .leaf-menu li:hover {margin: 30px 20px;} .leaf-menu li:active {margin: 30px 33px;} .leaf-menu li a { width: 100px; height: 100px; z-index: 9999; position: absolute; top: 35px; font-weight: bold; display: block; text-decoration: none; font-size: 19px; 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; transition: all 0.1s linear;} .leaf-menu li:active a {font-size: 24px;top: 30px;} .leaf-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);} .leaf-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);} .leaf-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;border-bottom:3px solid #cc0000;} #archive { background: #E42B2B;border-bottom:3px solid #f1c232;} #profile { background: #ff8400;border-bottom:3px solid #0b5394;} #article { background: #a800ff;border-bottom:3px solid lime;} #contact { background: #49a7f3;border-bottom:3px solid cyan;}

Pada kode HTML di bawah ini, silahkan gantikan teks yang sudah saya beri warna merah dengan label menu blog Anda sendiri seperti ini:

<nav> <ul class="leaf-menu"> <li><a href=#>Home</a> <div class="menu-item" id="home"> </div> </li> <li><a href=#>Archive</a> <div class="menu-item" id="archive"> </div> </li> <li><a href=#>Profile</a> <div class="menu-item" id="profile"> </div> </li> <li><a href=#>Article</a> <div class="menu-item" id="article"> </div> </li> <li><a href=#>Contact</a> <div class="menu-item" id="contact"> </div> </li> </ul> </nav>

Tampilan Menu Navigasi Terbaru Dengan Bentuk Daun seperti ini. Semoga tutorial ini dapat memberikan Anda inspirasi dalam membuat ide kreatif lainnya dilain kesempatan seperti tampilan menu navigasi desain lainnya di bawah ini:

Terima Kasih Semoga Bermanfaat... :)