Membuat multi level dropdown menu bootstrap 3 pada wordpress

Kesempatan pagi ini penulis akan membahas tentang cara membuat multi level dropdown menu bootstrap pada wordpress, monggo dinikmati juragan jengkol...!!!!!☺☺☺☺

Anda menggunakan bootstrap dropdown menu pada wordpress yang di download di sini https://github.com/twittem/wp-bootstrap-navwalker jika iya maka mungkin anda akan mengalami masalah yang sama dengan saya yaitu pada menu dropdown nya hanya bisa 2 level saja dropdown nya untuk level ketiganya tidak jalan.

mari kita perbaiki scriptnya.

yang perlu di perbaiki yaitu pada file berikut ini

1. bootstrap.js
2. wp-bootstrap-navwalker
3. style.css

ok cuma dikit to yang di perbaiki he he he

ok langsung saja pertama kita bongkar yang paling mudah dulu yaitu file
style.css

yaitu hanya menambahkan script berikut pada akhir style.css

.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu:active>.dropdown-menu{display:block;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:active>a:after{border-left-color:#ffffff;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}

untuk file style.css cukup disitu saja. mudah bukan

kamudian mari kita lanjutkan ke file yang kedua yaitu file bootstrap.js

untuk baris yang di edit yaitu pertama baris berikut

  function clearMenus(e) {
    if (e && e.which === 3) return
    $(backdrop).remove()
    $(toggle).each(function () {
      var $this         = $(this)
      var $parent       = getParent($this)
      var relatedTarget = { relatedTarget: this }

      if (!$parent.hasClass('open')) return

      $parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))

      if (e.isDefaultPrevented()) return

      $this.attr('aria-expanded', 'false')
      $parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget)
    })
  }

ubah baris berikut menjadi baris berikut

  function clearMenus() {
    $('.dropdown-backdrop').remove()
    $(toggle).each(function () {
      getParent($(this)).removeClass('open')
    })
  }

kemudian ubah baris berikut

  $(document)
    .on('click.bs.dropdown.data-api', clearMenus)
    .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
    .on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
    .on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
    .on('keydown.bs.dropdown.data-api', '[role="menu"]', Dropdown.prototype.keydown)
    .on('keydown.bs.dropdown.data-api', '[role="listbox"]', Dropdown.prototype.keydown)

ubah menjadi

  $(document)
    .on('click.dropdown.data-api', clearMenus)
    .on('click.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
    .on('click.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
    .on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)

mudah bukan cukup untuk file bootstrap.js

kemudian file terakhir yang harus kita ubah yaitu file wp-bootstrap-navwalker.php

carilah baris berikut

if ( $args->has_children )
                $class_names .= ' dropdown';

ubah menjadi seperti berikut

if($args->has_children && $depth === 0) { $class_names .= ' dropdown'; } elseif($args->has_children && $depth > 0) { $class_names .= ' dropdown-submenu'; }

ok sudah selesei dan selamat mencoba semoga berhasil dengan selamat ya he he he

jangan lupa tinggalkan komentar dan jejak jengkol ya😃😃😃😃

Related post: