Tampilan Menu Navigasi Terbaru Dengan Bentuk Daun

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

Mungkin sedikit penjelasan diatas sudah cukup memberikan panduan buat Anda dalam mendesain ulang tampilannya, semoga sahabat semua pecinta SAHABAT BLOGGER 77 bisa mendapatkan inspirasi untuk membuat menu navigasi dengan bentuk berbeda lagi. Saatnya penerapan menu navigasi yang cantik dan menarik ini ke blog Anda dengan pembangun kode CSS lengkap seperti ini:

//*navigasi menu blogger leaf style with css
default code:'leaf-menu nav'
sumber: http://sahabatblogger77.blogspot.com/
post at august 09, 2014
author: devy indriyani
*/
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;}

DEMO SHOW



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>

Persahabatan itu bukan hanya sekedar kamu kenal aku, dan aku kenal kamu, tetapi lebih dari itu kita bisa berbagi hal-hal menarik seperti 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:

➟ Cara Membuat Diagram Menu Navigasi Bertingkat
➟ Daftar Artikel Terbaru Dalam Menu Navigasi
➟ Tampilan Daftar Menu Terbaru Model Rolling Top
➟ Membuat Menu Navigasi Fixed Fly Out Dengan CSS3