√ Cara Menciptakan Sajian Dropdown Multilevel Responsive Di Blogger

Menu navigasi pada sebuah website atau blog merupakan hal yang peting dan wajib ada, ini bertujuan biar pengunjung situs lebih gampang menavigasi situs Anda.

Ada satu alasan yang aku ingat saat daftar AdSense lalu di tolak dengan alasan"Navigasi Situs Sulit", ini menerangkan bahwa menciptakan sajian navigasi di blog atau website harus dengan terang dan gampang di pahami.

Saya yakin bahwa memakai sajian navigasi yang responsive menjadi pilihan terbaik untuk mengatasi penolakan adsense tersebut.

Balik lagi, kita bahas mengenai sajian navigasi.

Sebenarnya ada banyak bentuk navigasi yang dapat Anda gunakan, ada yang berbentuk vertikal biasanya di tempatkan di bab kiri, ada juga berbentuk horizontal biasanya di tempatkan di bab header atau bab teratas dari sebuah blog atau website.

Kebanyakan orang memakai sajian navigasi horizontal.

Menu navigasi mempunyai fitur masing-masing ada yang flat atau datar tanpa mempunyai sub menu, ada juga yang mempunyai dropdown bahkan multi dropdown.

Di sini aku akan menjelaskan cara menciptakan menu navigasi dorpdown multilevel responsive.

Lengkap banget pokoknya.

Menu dropdown multilevel responsive ini memakai font awesome sehingga terlihat lebih keren ada gambar atau icon di samping tulisannya.

Tapi kalau Anda tidak ingin menampilkan gambar atau icon yang berada di samping kiri tulisannya dapat dengan menghapus kodenya di bab html atau tidak perlu memakai file css bundle font awesome.

Jika Anda tertarik untuk menciptakan sajian navigasi dropdown multilevel responsive di blog silahkan ikuti langkah-langkahnya di bawah ini.

Cara Membuat Menu Dropdown Multilevel Responsive di Blog

Untuk berjaga-jaga lebih baik template blog Anda di back-up terlebih dahulu, silahkan baca artikel mengenai cara backup template blog.

Jika blog Anda sebelumnya sudah mempunyai sajian navigasi alangkah lebih baiknya kalau arahan cssnya di hapus terlebih dahulu untuk menghindari tampilan sajian yang berserakan alasannya yakni arahan css usang bentrok atau bertubrukan dengan arahan css baru.

Silahkan lihat demonya terlebih dahulu di bawah ini sebelum menciptakan sajian navigasi di blog Anda.

DEMO

Pertama, tambahkan arahan CSS ini kedalam template blog Anda, simpan di atas arahan ]]></b:skin> atau </style>

nav {     display: block;     background: #374147; }  .menu {     display: block; }  .menu li {     display: inline-block;     position: relative;     z-index: 100; }  .menu li:first-child {     margin-left: 0; }  .menu li a {     font-weight: 600;     text-decoration: none;     padding: 20px 15px;     display: block;     color: #fff;     transition: all 0.2s ease-in-out 0s; }  .menu li a:hover,.menu li:hover>a {     color: #fff;     background: #ff3c41; }  .menu ul {     visibility: hidden;     opacity: 0;     margin: 0;     padding: 0;     width: 150px;     position: absolute;     left: 0px;     background: #fff;     z-index: 99;     transform: translate(0,20px);     transition: all 0.2s ease-out; }  .menu ul:after {     bottom: 100%;     left: 20%;     border: solid transparent;     content: " ";     height: 0;     width: 0;     position: absolute;     pointer-events: none;     border-color: rgba(255, 255, 255, 0);     border-bottom-color: #fff;     border-width: 6px;     margin-left: -6px; }  .menu ul li {     display: block;     float: none;     background: none;     margin: 0;     padding: 0; }  .menu ul li a {     font-size: 12px;     font-weight: normal;     display: block;     color: #797979;     background: #fff; }  .menu ul li a:hover,.menu ul li:hover>a {     background: #ff3c41;     color: #fff; }  .menu li:hover>ul {     visibility: visible;     opacity: 1;     transform: translate(0,0); }  .menu ul ul {     left: 149px;     top: 0px;     visibility: hidden;     opacity: 0;     transform: translate(20px,20px);     transition: all 0.2s ease-out; }  .menu ul ul:after {     left: -6px;     top: 10%;     border: solid transparent;     content: " ";     height: 0;     width: 0;     position: absolute;     pointer-events: none;     border-color: rgba(255, 255, 255, 0);     border-right-color: #fff;     border-width: 6px;     margin-top: -6px; }  .menu li>ul ul:hover {     visibility: visible;     opacity: 1;     transform: translate(0,0); }  .responsive-menu {     display: none;     width: 100%;     padding: 20px 15px;     background: #374147;     color: #fff;     text-transform: uppercase;     font-weight: 600; }  .responsive-menu:hover {     background: #374147;     color: #fff;     text-decoration: none; }  a.homer {     background: #ff3c41; }  @media (min-width: 768px) and (max-width: 979px) {     .mainWrap {         width: 768px;     }      .menu ul {         top: 37px;     }      .menu li a {         font-size: 12px;     }      a.homer {         background: #374147;     } }  @media (max-width: 767px) {     .mainWrap {         width: auto;         padding: 50px 20px;     }      .menu {         display: none;     }      .responsive-menu {         display: block;         margin-top: 100px;     }      nav {         margin: 0;         background: none;     }      .menu li {         display: block;         margin: 0;     }      .menu li a {         background: #fff;         color: #797979;     }      .menu li a:hover,.menu li:hover>a {         background: #ff3c41;         color: #fff;     }      .menu ul {         visibility: hidden;         opacity: 0;         top: 0;         left: 0;         width: 100%;         transform: initial;     }      .menu li:hover>ul {         visibility: visible;         opacity: 1;         position: relative;         transform: initial;     }      .menu ul ul {         left: 0;         transform: initial;     }      .menu li>ul ul:hover {         transform: initial;     } }  @media (max-width: 480px) { }  @media (max-width: 320px) { }

Kedua, silahkan masukkan arahan HTML sajian navigasi di bawah ini. Letaknya dapat Anda sesuaikan sendiri, biasanya diletakan di dalam bab header atau Anda dapat mencoba menyimpannya sebelu arahan </header>

<nav> <a id="resp-menu" class="responsive-menu" href="#"><i class="fa fa-reorder"></i> Menu</a>        <ul class="menu">    <li><a class="homer" href="#"><i class="fa fa-home"></i> HOME</a>    <ul class="sub-menu">    <li><a href="#">Sub-Menu 1</a></li>    <li><a href="#">Sub-Menu 2</a></li>    <li><a href="#">Sub-Menu 3</a></li>    <li><a href="#">Sub-Menu 4</a></li>    <li><a href="#">Sub-Menu 5</a></li>       </ul>    </li>   <li><a  href="#"><i class="fa fa-user"></i> ABOUT</a></li>   <li><a  href="#"><i class="fa fa-camera"></i> PORTFOLIO</a>   <ul class="sub-menu">    <li><a href="#">Sub-Menu 1</a></li>    <li><a href="#">Sub-Menu 2</a>     <ul>     <li><a href="#">Sub Sub-Menu 1</a></li>     <li><a href="#">Sub Sub-Menu 2</a></li>  <li><a href="#">Sub Sub-Menu 3</a></li>     <li><a href="#">Sub Sub-Menu 4</a></li>  <li><a href="#">Sub Sub-Menu 5</a></li>      </ul>    </li>      <li><a href="#">Sub-Menu 3</a>     <ul>     <li><a href="#">Sub Sub-Menu 1</a></li>     <li><a href="#">Sub Sub-Menu 2</a></li>  <li><a href="#">Sub Sub-Menu 3</a></li>     <li><a href="#">Sub Sub-Menu 4</a></li>  <li><a href="#">Sub Sub-Menu 5</a></li>      </ul>    </li>    </ul>   </li>   <li><a  href="#"><i class="fa fa-bullhorn"></i> BLOG</a></li>     <li><a  href="#"><i class="fa fa-tags"></i> CATEGORIES</a>   <ul class="sub-menu">    <li><a href="#">Sub-Menu 1</a></li>    <li><a href="#">Sub-Menu 2</a>     <ul>     <li><a href="#">Sub Sub-Menu 1</a></li>     <li><a href="#">Sub Sub-Menu 2</a></li>  <li><a href="#">Sub Sub-Menu 3</a></li>     <li><a href="#">Sub Sub-Menu 4</a></li>  <li><a href="#">Sub Sub-Menu 5</a></li>      </ul>    </li>      <li><a href="#">Sub-Menu 3</a>     <ul>     <li><a href="#">Sub Sub-Menu 1</a></li>     <li><a href="#">Sub Sub-Menu 2</a></li>  <li><a href="#">Sub Sub-Menu 3</a></li>     <li><a href="#">Sub Sub-Menu 4</a></li>  <li><a href="#">Sub Sub-Menu 5</a></li>      </ul>    </li>    </ul>   </li>   <li><a  href="#"><i class="fa fa-envelope"></i> CONTACT</a></li>   <li><a  href="#"><i class="fa fa-sitemap"></i> SITEMAP</a></li>   <li><a  href="#"><i class="fa fa-exclamation-triangle"></i> DISCLAIMER</a></li>   </ul>   </nav>

Ketiga, tambahkan arahan jQuery di bawah ini dan letakan sebelum arahan </body>

<script type='text/j4vascript'> //<![CDATA[ $(document).ready(function(){   var touch  = $('#resp-menu');  var sajian  = $('.menu');    $(touch).on('click', function(e) {   e.preventDefault();   menu.slideToggle();  });    $(window).resize(function(){   var w = $(window).width();   if(w > 767 && menu.is(':hidden')) {    menu.removeAttr('style');   }  });   }); //]]> </script>

Keempat, jika Anda ingin memakai font awesome biar muncul gambar atau icon di samping goresan pena sajian navigasi silahkan tambahkan arahan bundle css ini dan letakan sebelum arahan <b:skin>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Kemudian silahkan simpan template blog Anda dan lihat hasilnya.

Itulah artikel mengenai cara menciptakan sajian dropdown multilevel responsive di blogger, semoga bermanfaat.
Sumber http://www.caramanual.com