Drop Down Menu Fixed Left Position

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.

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

• Cara Mudah Membuat Menu Navigasi Pada Postingan
• Floating Menu Dropdown Dengan Transisi

Menu Navigasi Full Design

• Membuat Menu Blogger Dengan Target Gambar
• Daftar Artikel Terbaru Dalam Menu Navigasi
• Menu Lingkaran Dengan Submenu Efek Rotasi

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 >>

https://sahabatblogger77.blogspot.com/2015/05/drop-down-menu-fixed-left-position.html

= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77