Creating custom vertical menu

Question

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! 🙂

0
Dot 8 months 0 Answers 101 views 0

Leave an answer