Menu Walker for FREE

Hello everyone, i am kind of new here and from the start working with this CMS i faced issue with ability to have xx custom menus to exact positions i want so here is some FREE knowledge if someone else want to have dropdown menu in custom position.

1. From settings -> menu manager create your new Menu Set, while you editing the exact menu set notice the id of the menu set in url in the end (ex. /edit-set/1)

2. Developer -> Template manager -> common group create a new template “menu” with content: p.s. make sure you Allow PHP in template from template settings

$results = ee()->db->select(‘*’)->from(‘menu_items’) ->where(‘set_id = {embed:menuid} ‘) ->order_by(‘sort’, ‘asc’) ->get(); if({embed:nomobile} == ‘true’){}else{ echo ‘<div class=”mobile_menu_button”><i class=”qode_icon_font_awesome fa fa-bars “></i></div><ul class=”desktop”>’; } foreach ($results->result_array() as $i) { if(“{segment_1}” == strtolower(str_replace(’ ‘, ‘-‘, $i[‘name’]))){ $class= ‘class=”active”’; }else{ $class=”“; } if($i[‘type’] == ‘submenu’){ echo ‘<li class=”havesub”>void(0)”class=”parent” title=”’.$i[‘name’].’” menuid=”’.$i[‘item_id’].’”]’.$i[‘name’].’’; echo ‘<ul class=”submenu” id=”m’.$i[‘item_id’].’”>’; $results2 = ee()->db->select(‘*’)->from(‘menu_items’) ->where(‘parent_id = ‘.$i[‘item_id’]) ->order_by(‘sort’, ‘asc’) ->get(); foreach($results2->result_array() as $i2){ if(“{segment_1}” == strtolower(str_replace(’ ‘, ‘-‘, $i2[‘name’]))){ $class1= ‘class=”active”’; }else{ $class1=”“; } echo ‘<li>.’” title=”’.$i2[‘name’].’”]’.$i2[‘name’].’</li>’; } echo ‘</ul></li>’; }else{ echo ‘<li>.’” title=”’.$i[‘name’].’”]’.$i[‘name’].’</li>’; } } if({embed:nomobile} == ‘true’){}else{ echo ‘</ul>’; }

sorry about bad formating .. but it seems “code” tag allow js script only i cannot use it for php scripts.

3. Developer -> template manager -> Template Partials create a new template named “mainnav” or “footernav” etc after that you will use this in main template as {mainnav} or {footernav} . The content of this partial is “{embed='common/menu' menuid='3' nomobile='false'}” menuid= is the id which you want to show nomobile=”true/false” is the way you output the menu , do you want to have mobile menu icon below xx resolution or just simple <li><a></a></li> output.

4. Here is also the simple js which to include on page to handle dropdown on hover + mobile menu showup on click on mobile menu icon(toggler) p.s. best way is just to link to it into the footer where are the rest of js files included

$(document).ready(function(){
 $(document).on('mouseenter', 'li.havesub', function(){
 $(this).addClass('opened');
 $(this).find('.submenu').animate({
     height: "toggle"
   }, 300, function() {
   });
  
 })
 $(document).on('mouseleave', 'li.havesub.opened', function(){
 $(this).removeClass('opened');
 $(this).find('.submenu').animate({
     height: "toggle"
   }, 300, function() {
   });
  
 })
 $(document).on('touchend click', '.mobile_menu_button', function(){
  if($(this).hasClass('opened')){
   $(this).removeClass('opened');
  }else{
   $(this).addClass('opened');
  }
 $(this).next('ul.desktop').animate({
     height: "toggle"
   }, 300, function() {
   });
  
 })
})

Hope to were in help here. Enjoy.