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:

Navigation menu leaf image


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

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Tampilan Menu Navigasi Terbaru Dengan Bentuk Daun
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

17 komentar

  1. sekedar berbagi bahwa kode seperti -moz- webkit dan sebagainya sudah tak diperlukan lagi seiring validasi HTML5 :)

    BalasHapus
    Balasan
    1. jika memvalidasi, mungkin "ya" kode seperti ini tidak diperlukan, tetapi jika itu kita hilangkan maka pemanggilan efek pada pemakai peramban tidak akan merespon,
      sebagai contoh coba buat beberapa efek yang tidak menggunakan kode -webkit dan lain sebagainya, apakah efek tersebut dapat direspon oleh mozilla, jika chrome mungkin ya tetapi pada mozilla masih terkendala dengan hal ini,
      terkecuali kode tersebut kita ubah semua selectornya menjadi css3

      Hapus
    2. wow keren...tp klo pengen menambah sub menunya gmn mba,.. makasih..

      Hapus
    3. kita harus tambahkan pengaturan tampilan untuk sub menu mbak, misalnya seperti ini;

      [pre].sub-menu {
      width:120px;
      overflow:hidden;
      .....
      }[/pre]

      lalu kita panggil elemen class CSS tersebut pada wilayah HTML <li>
      seperti ini:

      [pre]<nav>
      <ul class="leaf-menu">
      <li><a href=#>Home</a>
      <li><a href=#>Menu 1</a></li>
      <ul class="sub-menu">
      <li><a href=#>Sub Menu 1</a></li>
      <li><a href=#>Sub Menu 2</a></li>
      </ul>
      <li><a href=#>Menu 2</a>
      </ul>
      </nav>[/pre]

      Atau selengkapnya mbak bisa pelajari di sini

      Menu Navigasi Bertingkat

      Hapus
  2. sepertinya bagus untuk dicoba.. tetapi sederhana juga sudah cukup gan..hehe

    BalasHapus
  3. Bagus juga kreatif banget..bikin tergoda merubah tampilan blog,

    BalasHapus
  4. mkasi mbak devi tutorialnya

    BalasHapus
  5. eh hiyah keren menu bentuk daunnya euy...pas banget buat blog yang suka warna ijo mah ya...
    patut dipasang yeuh kayanya mah...
    nuhun nya'.
    mohon maafin saya lahir dan batin yea...

    salam sehat dan ceria selalu por yu

    BalasHapus
  6. wew...ada yang baru lagi nih tampilan menu navigasinya

    BalasHapus
  7. Saya bakal terus kunjungi blog ini.. keep posting.

    BalasHapus
    Balasan
    1. hmm..emang ada apa di blog ini mas,,hehe

      Hapus
  8. Makin bnyak yah tutorial blog yang unik skrang sob... dah lama juga gak mosting tentang blog...

    BalasHapus
  9. jujur mbak, blog diblog ini hampir semua tutorialnya bisa dicoba sama saya.Saya sudah coba kunjungi blog lain yang membahas hal yang sama tapi nihil, atau mungkin saya yang ga ngerti ya hehe. Tapi kalau diblog ini sih bisa diterapin. Thanks

    BalasHapus
    Balasan
    1. tidak semua blog memberikan kode-kode tertentu dengan cuma-cuma (gratis) mas,ada blog yang khusus dibuat untuk tempat belajar, misalnya untuk mendesain tampilan blog, sehingga kode yang diberikan tidak secara komplit diberikan, maka sudah pasti jika kode tersebut langsung kita Copy, dan hasilnya nihil.

      di blog ini saya hanya memperjelas saja mas dalam penerapan, sehingga jika ada kendala, mari sama-sama kita bahas dalam komentar, itulah artinya sahabat blogger 77

      Hapus
  10. Silakan bergabung bersama kami di www.168sdbet.com

    BalasHapus
  11. keren dan unik bentuknya, hehehe

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK