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

Menu Navigasi Full Design

Belum berminat? tak apa 😊 bantu kami dengan membagikan link ini ke teman, siapa tahu, justru mereka sedang mencari ini!