0

First of all sorry me for my bad English but isn’t my native language so I’ll do as best as possible to explain my problem.

I want to create a custom menu with Walker_Nav_Menu that should look like this:

----------------------------------
Section 1 | Section 2 | Section 3
----------------------------------
          | SubMenu 1 |
          | SubMenu 2 |
               | Sub SubMenu 1 |
               | Sub SubMenu 2 |
          | SubMenu 3 |
          | SubMenu 4 |

The sub submenu 1 & 2 on sub menu 2 should only appear when mouse is hover/on click link and if not, then dissapear. I was searching, and the following link show the menu I want to adapt to WordPress. The problem is I can’t set the class tags on ul’s and li’s: http://codepen.io/WhiteWolfWizard/pen/MYQGQQ

I tried to adapt it with WordPress default menu classes, but didn’t work. The codes I have:

MENU:

    <div id="menubar-menu">
<ul id="menu" class="menu"><li id="menu-item-100" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-100"><a href="#">Home</a></li>
<li id="menu-item-103" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-103"><a href="#">Section 1</a>
<ul class="sub-menu">
    <li id="menu-item-127" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-127"><a href="#">Subsection 1</a></li>
    <li id="menu-item-140" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-140"><a href="#">Subsection 2</a></li>
<ul class="sub-menu">
        <li id="menu-item-122" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-122"><a href="#">SUB subsection 1</a></li>
        <li id="menu-item-121" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-121"><a href="#">SUB subsection 2</a></li>
</ul>
    <li id="menu-item-141" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-141"><a href="#">Subsection 3</a></li>
</ul>
</li>
</ul></div>

<script>
$(document).ready(function () {
  $('#menu .menu-item.menu-item-has-children .trigger-sub-menu i').on('click', function () {
    $(this).toggleClass('fa-flip-vertical');
    $(this).parent().toggleClass('active');
    $('#menu .menu-item.menu-item-has-children .sub-menu').toggle();
    $('#menu .menu-item.menu-item-has-children .sub-menu .trigger-sub-menu i').removeClass('fa-flip-vertical').parent().removeClass('active');
    $('#menu .menu-item.menu-item-has-children .sub-menu').slideUp();
    return false;
  });
  $('#menu .menu-item.menu-item-has-children .sub-menu .sub-menu i').on('click', function () {
    $(this).toggleClass('fa-flip-vertical');
    $(this).parent().toggleClass('active');
    $('#menu .menu-item.menu-item-has-children .sub-menu').slideToggle(150);
    return false;
  });
});
</script>

CSS:

#menu .menu-item {
  float: left;
  margin: 10px 0 10px 5px;
}
#menu .menu-item a {
  position: relative;
  height: 30px;
  padding: 0 10px;
  border-radius: 2px;
  display: block;
  -webkit-transition: all 150ms ease;
  transition: all 150ms ease;
  color: #8aa4bb;
  line-height: 30px;
  white-space: nowrap;
}
#menu .menu-item a:hover, #menu .menu-item a:active {
  background: #8aa4bb;
  color: #fff;
}
#menu .menu-item a:active {
  background: #758b9f;
}
#menu .menu-item a[class*="trigger-"] {
  padding-right: 40px;
}
#menu .menu-item a i {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
#menu .menu-item a i:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 50%;
  margin: auto;
  border-left: 1px solid rgba(0, 0, 0, 0.15);
}
#menu .menu-item.menu-item-has-children {
  position: relative;
}
#menu .menu-item.menu-item-has-children .sub-menu {
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 2px;
  background: #fff;
  display: none;
  overflow: hidden;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  -webkit-transform: translateY(35px);
          transform: translateY(35px);
}
#menu .menu-item.menu-item-has-children .sub-menu li {
  float: none;
  margin: 0;
}
#menu .menu-item.menu-item-has-children .sub-menu li a {
  border-radius: 0;
}
#menu .menu-item.menu-item-has-children .sub-menu .menu-item-has-children.sub-menu {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  background: #758b9f;
  display: none;
}
#menu .menu-item.menu-item-has-children .sub-menu .menu-item-has-children.sub-menu li {
  width: 100%;
  display: table;
}
#menu .menu-item.menu-item-has-children .sub-menu .menu-item-has-children.sub-menu li a {
  height: 25px;
  font-size: 8pt;
  color: #fff;
  line-height: 25px;
}
#menu .menu-item.menu-item-has-children .sub-menu .menu-item-has-children.sub-menu li:first-child a {
  margin-top: 5px;
}
#menu .menu-item.menu-item-has-children .sub-menu .menu-item-has-children.sub-menu li:last-child a {
  margin-bottom: 5px;
}

Any help will be appreciated! Thanks in advance! :)

  • 1
    First and foremost, that jQuery is not going to work. You need to enqueue jQuery in your theme's functions.php file. Second, WordPress loads it in no-conflict mode so you will need to change $() to jQuery(). After that it's just looking at the classes and matching them up between what WordPress outputs and the CodePen example. The menu can be coded to conform to the CodePen one but that would require you writing a custom walker which is overkill. – Cedon Mar 24 '17 at 21:33
  • Thanks for your reply belinus! I'm trying to include the jQuery code on functions.php but it didn't work. Can you guide me how to enqueue it? – Dot Mar 25 '17 at 0:52
  • Search your functions.php file for wp_enqueue. Inside that function put wp_enqueue_script( 'jquery' ); – Cedon Mar 25 '17 at 0:59
0

Make sure that you do understand css, html, jquery and then wordpress navigation code flows.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.