Drop Down Menu Fixed Left Position

Info informasi Drop Down Menu Fixed Left Position atau artikel tentang Drop Down Menu Fixed Left Position ini semoga dapat bermanfaat, dan menambah wawasan. Selamat Membaca! Jangan lupa dishare juga! Jika merasa artikel ini bermanfaat juga untuk orang lain.

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

Demikian artikel tentang Drop Down Menu Fixed Left Position ini dapat kami sampaikan, semoga artikel atau info tentang Drop Down Menu Fixed Left Position ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.

Bersponsor
👉 Penerbit Content Placement Indonesia
👉 Artikel Kami Terbitkan Harga Terjangkau
👉 Jasa Content Placement
👉 Pasang Backlink Blogroll Premium
👉 Content Placement 50 Jaringan Backlink
👉 Jadi Agen Hanya 100 Ribu Selamanya
👉 Laptop Gaming Terbaik