7.5.15
21
Cara Terbaru Membuat Menu Navigasi Blog Dengan Drop-down Effect.
Drop Down Menu Fixed Left Position - DROP merupakan efek untuk menavigasi link menu secara individual, sedangkan DOWN adalah efek untuk menampilkan sub menu dengan tampilan menurun kebawah. Membuat Menu Navigasi dengan dropdown design biasanya dibentuk untuk memudahkan pengguna atau pengunjung untuk memilih beberapa opsi dari daftar menu yang tersedia, seperti » Cara Membuat Diagram Menu Navigasi Bertingkat adalah salah satu cara untuk merangkum daftar menu penting yang didalamnya banyak menyisipkan sub-menu.

Drop Down Menu Fixed


Identiknya letak posisi menu selalu disejajarkan dengan halaman HEADER, atau tampilan menu berada diatas judul posting, namun untuk menu navigasi kali ini saya desain dengan posisi FIXED (melayang) disebelah kiri halaman (Left-Position). Lengkapnya seperti ini:



<style type="text/css">
/* Drop Down Menu Fixed Left Position
Input().menu: ID-sesi ()[SB-77] class()[dd-dropdown]
released publish: May 07, 2015
visit: Devy Indriyani
source: http://sahabatblogger77.blogspot.com */
#menuSB-77{
 width:280px;height:50px;position:fixed !important;top:20px;left:0;color:#fff;
 background:#000;box-shadow: 0 0 10px #000;overflow:hidden;
 -webkit-backface-visibility: hidden;backface-visibility: hidden;
 -webkit-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
 -moz-transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
 transition: all 0.3s cubic-bezier(0.7, 0.01, 0.3, 1);
 -webkit-transition-delay: 400ms;-moz-transition-delay: 400ms;
 transition-delay: 400ms}

#menuSB-77.shownav {width:280px;height: 100%;border-left:5px solid yellow}
nav{width: 50px;height: 50px;background: rgba(0,0,0,0.2)}
.dd-menu {
 position: absolute;top: 0px;left: 11px;display: block;width: 28px;height: 50px;
 cursor: pointer;z-index: 30;transition-delay: 600ms;
 -webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.36, 0.63);
 -moz-transition: all 0.5s cubic-bezier(0.7, 0, 0.36, 0.63);
 transition: all 0.5s cubic-bezier(0.7, 0, 0.36, 0.63);
  -webkit-transition-delay: 600ms;-moz-transition-delay: 600ms}

.dd-menu span {
 position: absolute;top: 50%;left: 0;display: block;width: 100%;height: 3px;
 margin-top: -2px;background-color: #fff;font-size: 0px;
 -webkit-user-select: none;-moz-user-select: none;user-select: none;
 -webkit-transition: background-color 0.5s;transition: background-color 0.5s;
 -moz-transition: background-color 0.5s}

.dd-open .dd-menu span {background-color:transparent}
.dd-open .dd-menu {
 left:88%;-webkit-transition: all 0.4s cubic-bezier(0.7, 0, 0.36, 0.63);
 transition: all 0.4s cubic-bezier(0.7, 0, 0.36, 0.63);
-moz-transition: all 0.4s cubic-bezier(0.7, 0, 0.36, 0.63)}

.dd-menu span:before,
.dd-menu span:after {
 position: absolute;left: 0;width: 100%;height: 100%;background: #fff;
 content: '';-webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.36, 0.63);
 transition: all 0.5s cubic-bezier(0.7, 0, 0.36, 0.63);
 -webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.36, 0.63)}

.dd-menu span:before {
 -webkit-transform: translateY(-250%);
 -moz-transform: translateY(-250%);
 transform: translateY(-250%)}

.dd-menu span:after {
 -webkit-transform: translateY(250%);
 -moz-transform: translateY(250%);
 transform: translateY(250%)}

.dd-open .dd-menu span:before {
 -webkit-transform: translateY(0) rotate(45deg);
 -moz-transform: translateY(0) rotate(45deg);
 transform: translateY(0) rotate(45deg)}

.dd-open .dd-menu span:after {
 -webkit-transform: translateY(0) rotate(-45deg);
 -moz-transform: translateY(0) rotate(-45deg);
 transform: translateY(0) rotate(-45deg)}

.ddTM-close .dd-menu:before {
 -webkit-animation: plusVertical 0.3s ease forwards;
 -moz-animation: plusVertical 0.3s ease forwards;
 animation: plusVertical 0.3s ease forwards}

.ddTM-close .dd-menu:after {
 -webkit-animation: plusHorizontal 0.3s ease forwards;
 -webkit-animation: plusHorizontal 0.3s ease forwards;
 animation: plusHorizontal 0.3s ease forwards}

.menu {z-index: 10;position: absolute;top: 0px;width: 100%;height: 100%}
.menu.open {background:#000;height: 100%}
.menu ul {
 position: absolute;visibility: hidden;list-style-type:none;top: -40%;left: 0;
 width: 100%;padding: 0;opacity: 0;display: table-cell;vertical-align: middle;
 -webkit-transition: all 0.6s cubic-bezier(0.7, 0, 0.36, 0.63);
 -moz-transition: all 0.6s cubic-bezier(0.7, 0, 0.36, 0.63);
 transition: all 0.6s cubic-bezier(0.7, 0, 0.36, 0.63);
 -webkit-transform: perspective(600px) rotateX(20deg) rotateY(-20deg);
 -moz-transform: perspective(600px) rotateX(20deg) rotateY(-20deg);
 transform: perspective(600px) rotateX(20deg) rotateY(-20deg)}

.menu ul li a {text-align:left;color:#fff;font:700 14px/24px Verdana,sans-serif}
.menu ul li a:hover {color:aqua;border-left:solid 2px yellow;padding-left:5px}
.menu.open ul {
 top: 40px;left:0;visibility: visible;opacity: 1;margin-top: 0;
 -webkit-transform: perspective(600px) rotateX(0deg) rotateY(0deg);
 -moz-transform: perspective(600px) rotateX(0deg) rotateY(0deg);
 transform: perspective(600px) rotateX(0deg) rotateY(0deg);
 -webkit-transition: all 0.6s cubic-bezier(0.7, 0, 0.36, 0.63);
 -moz-transition: all 0.6s cubic-bezier(0.7, 0, 0.36, 0.63);
 transition: all 0.6s cubic-bezier(0.7, 0, 0.36, 0.63);
 -webkit-transition-delay: 400ms;-moz-transition-delay: 400ms;
 transition-delay: 400ms}
</style>

Kita tambahkan sedikit fungsi JavaScript untuk membuat perintah Click event, namun pastikan Template Anda sudah dilengkapi dengan script-jQuery, sehingga opsi pada sub-menu bisa kita tampilkan dan sembunyikan dengan tombol Open/Close dengan toggle-slide seperti ini:


<script type="text/javascript">
  //<![CDATA[
$(document).ready(function() {     
 $('.dd-menu').click(function(){
  $('nav').toggleClass( "dd-open" );
  $('.menu').toggleClass( "open" );
   //$(id='menuSB-77','http://sahabatblogger77.blogspot.com');
  $('#menuSB-77').toggleClass( "shownav" );
  });
});
  //]]>
</script>

Dan hasilnya :





DEMO SHOW




Tahap akhir tinggal menyisipkan link menu sebanyak yang Anda mau pada HTML berikut, Anda cukup ganti teks yang sudah saya beri warna MERAH dengan URL-menu Laman Blog Anda, dan teks ORANGE dengan title menu. Lengkapnya seperti ini:


<div id="menuSB-77">
   <nav class="ddTM">
      <a href="#menuSB-77" class="dd-menu"><span>Menu</span></a>
         <div class="menu">
     <ul>
          <li><a href="http://sahabatblogger77.blogspot.com">Menu 1</a></li>
          <li><a href="http://sahabatblogger77.blogspot.com">Menu 2</a></li>
          <li><a href="http://sahabatblogger77.blogspot.com">Menu 3</a></li>
          <li><a href="http://sahabatblogger77.blogspot.com">Menu 4</a></li>
          <li>..tambahkan lebih banyak menu lagi disini...</li>
          ....
          ....
     </ul>
         </div>
   </nav>
</div>


Mudah dan cukup beberapa saat Drop Down Menu Fixed Left Position pada blog sudah selesai dibuat, setelah ini mungkin sahabat semua pecinta SAHABAT BLOGGER 77 ingin memilih bentuk menu navigasi lainnya disini:

Menu Navigasi Dalam Posting

Menu Navigasi Full Design

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Drop Down Menu Fixed Left Position
Ditulis oleh= Devy
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 =

21 komentar

  1. .Tampilannya seperti tombol di android yah mbak dev.
    .Nambah koleksi, asyik. :D

    BalasHapus
    Balasan
    1. kerja efek mungkin iya mas,hanya bedanya jika dalam tampilan mobile phone (android) layar utama akan tertutup saat menu di drop, nah kalau dropdown menun kali ini memang terinspirasi dari sana, hanya tampilannya saya posisikan bersebelahan dengan posting blog,

      melihat atau membaca posting bisa sambil menikmati menu drop-downnya, kurang lebih seperti itulah mas, hehe..!!

      Hapus
    2. .Iyaiya mbak, ngerti kok. .Lagian kan tampilan pada android juga kecil. -_-
      .Jauh beda dengan tampilan monitor kita. :D
      .Tapi kalau menu seperti ini diakses melalui mobile phone, efeknya tetap sama kah?

      Hapus
    3. pada menu saya tidak mengatur tampilannya menjadi responsive, jadi jika menu ini dibuka dalam resolusi layar yang kecil, lebar menu akan sama seperti lebar yang ada saat ini (pada PC)

      Hapus
    4. .Oh begitu toh, ternyata sama tanpa ada perbedaan baik dari pc maupun dari hp.
      .Okedeh mbak. :)

      Hapus
  2. gk ngerti saya kak @-) penempatanya cssnya tuh dimananya ya?

    BalasHapus
  3. kpn sy bisa kek devy nih ... mahir2 kek yg bginian, ... hehe edit2 kode yg dh jadi aja mash gado2 rasanya ...hhee

    BalasHapus
    Balasan
    1. Emang Devy bisa apa mas, sama saja kok, gak ada yang istemewa, bermain dan meng-edit file CSS sama saja dengan pikiran hal apa yang harus kita tuliskan saat ini untuk membuat postingan.

      kalau kita sudah punya tema untuk menulis cerita, maka tidak ada yang sulit bukan.? begitupun dengan CSS, perbedaannya hanya kita menguji hasil tampilannya terlebih dahulu kebebrapa browser, apakah efek ini bisa bekerja jika dilihat dengan browser MOZILLA, Chrome, IE dan lain sebagainya sebelum kita publikasikan.

      Hapus
  4. Cakep. ternyata begini cara bikinnya. terima kasih mastah

    BalasHapus
  5. Bagus juga kok hasilnya, mungkin bisa dicoba untuk diterapkan pada situs Blog. Terima kasih atas ilmunya, sangat membantu bagi blog yang memiliki banyak sub menu didalamnya.

    :)

    BalasHapus
  6. Kece bingits...tampilannya

    BalasHapus
  7. Keren mbak. Pintar banget ni kalau urusan mempercantik dan ngedit template. Jadi salut ni sama mbak devy. Izin belajar di blognya mba

    BalasHapus
    Balasan
    1. hanya sekedar hobby saja kok mbak, karena pelajaran dalam kuliah juga seperti hal ini, jadi berbagi apa yang bisa diedit. itu doang. hehe..!!

      Hapus
  8. Tutorialnya sangat bagus Mbak Devy, jarang ada tutorial drop down menu seperti ini. Kalau boleh tahu, apakah SB-77 juga menerbitkan tutorial agar menu tetap di atas meskipun posting digeser ke bawah ? Soalnya saya lagi mencarinya ^_^ Thanks

    BalasHapus
    Balasan
    1. Coba perhatikan hasil pada DEMO SHOW, menu ini sudah saya desain dengan tampilan fixed-position, silahkan scroll tulisannya, menu akan tetap berada disana bukan, (menu melayang).

      Kalau untuk Navigasi Menu Blog, saya berikan 2 pilihan, lihat disini:

      1. Membuat Menu Navigasi Fixed Fly Out Dengan CSS3
      2. Membuat Navigasi Menu Fixed Full RotateX

      Hapus
    2. Terima kasih banyak atas tutorialnya Mbak Devy, tapi sayang kode scriptnya tidak support dengan template yang saya gunakan, jadinya malah amburadul...sekali lagi terima kasih ^_^ salam sukses !!!

      Hapus
    3. sejauh yang saya tahu tidak ada kode yang tidak supprt oleh Template, karena struktur element dalam bahasa kode adalah sama sebagai sebuah perintah, jika apa yang saya tampilkan dalam hasil DEMO tidak dapat bekerja dalam Template yang Anda gunakan, kemungkinan Template Anda belum menggunakan script-jQuery, atau belum browser yang Anda gunakan belum mendukung file peramban efek.

      Hapus
  9. Saya masih kurang paham mbak, izin baca sampai saya ngerti ya mbak :)

    BalasHapus
  10. OOT: Mbak kotak komentar pada artikel membuat-garis-berwarna-pada-teks hilang atau tidak muncul :-t
    padahal saya udach mau ngambil pertamax ;-(

    BalasHapus
  11. Kalau yang ini jadi lebih mobile-friendly ya ? Tapi saya sejujurnya saya jatuh cinta dengan menu fixed yang terdahulu. Saya pernah memasangnya tapi karena ganti template belum saya pasang lagi. Itupun menyesuaikan dengan template mobile friendly.

    Idenya aja dalam berbagi codingnya, mantap.

    Udah lama juga saya baru datang kesini. Ternyata kuliah toh dimana ? Jurusan apa neng?

    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