Generate nav menu with DIVs instead of ULs (walker_nav_menu?) WordPress

marct comments:

I dig it! But let me ask an embarrassing question:

What is the code I should use to generate this walker on my page. eg. <?php wp_nav_menu( array( 'theme_location' => 'menu' ) ); ?>

Giri comments:

As for the icon its not possible unless they are same icon.

wp_nav_menu( array('theme_location'=>'menu','walker' => new Custom_Nav_Walker()) );

Giri comments:

Added menu-disabled class. You should use jquery to change that class on click.


class Custom_Nav_Walker extends Walker_Nav_Menu {

function start_lvl(&$output, $depth = 0, $args = array()) {
$output .= "\n<div class=\"submenu\">\n";
}
function end_lvl(&$output, $depth = 0, $args = array()) {
$output .= "\n</div>\n";
}


function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
parent::start_el($item_html, $item, $depth, $args);
if ($item->is_dropdown && ($depth === 0)) {
$output .= "<div class=\"menu-item\"><a class=\"menu-disabled deploy-submenu\" href=\"".esc_attr($item->url)."\">".esc_attr($item->title)."</a><div class=\"clear\"></div>";
} elseif ($depth === 0) {
$output .= "<div class=\"menu-item\"><a class=\"\" href=\"".esc_attr($item->url)."\">".esc_attr($item->title)."</a>";
} elseif ($depth > 0) {
$output .= "<a href=\"".esc_attr($item->url)."\">".esc_attr($item->title)."</a>";
}
}

function end_el(&$output, $item, $depth=0, $args=array()) {
if ($item->is_dropdown && ($depth === 0)) {
$output .= "</div>\n";
} elseif ($depth === 0) {
$output .= "</div>\n";
} elseif ($depth > 0) {
$output .= "<em class=\"submenu-decoration\"></em>\n";
}

}

}

Giri comments:

Small esc_url fix added


class Custom_Nav_Walker extends Walker_Nav_Menu {

function start_lvl(&$output, $depth = 0, $args = array()) {
$output .= "\n<div class=\"submenu\">\n";
}
function end_lvl(&$output, $depth = 0, $args = array()) {
$output .= "\n</div>\n";
}


function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
parent::start_el($item_html, $item, $depth, $args);
if ($item->is_dropdown && ($depth === 0)) {
$output .= "<div class=\"menu-item\"><a class=\"menu-disabled deploy-submenu\" href=\"".esc_url($item->url)."\">".esc_attr($item->title)."</a><div class=\"clear\"></div>";
} elseif ($depth === 0) {
$output .= "<div class=\"menu-item\"><a class=\"\" href=\"".esc_url($item->url)."\">".esc_attr($item->title)."</a>";
} elseif ($depth > 0) {
$output .= "<a href=\"".esc_url($item->url)."\">".esc_attr($item->title)."</a>";
}
}

function end_el(&$output, $item, $depth=0, $args=array()) {
if ($item->is_dropdown && ($depth === 0)) {
$output .= "</div>\n";
} elseif ($depth === 0) {
$output .= "</div>\n";
} elseif ($depth > 0) {
$output .= "<em class=\"submenu-decoration\"></em>\n";
}

}

}

Giri comments:

Sorry I forgot to add one more thing..

You should use wp_nav_menu like this

wp_nav_menu( array('theme_location'=>'menu','items_wrap' => '<div class="menu">%3$s</div>','walker' => new Custom_Nav_Walker()) );

marct comments:

Thanks a lot. I'm trying to make it work on my page. It seems you really understand this and put it together nice. I've been working on it for the past 30 min. I'm making progress and I'll come back to let you know.

Giri comments:

Fixed em tag..

class Custom_Nav_Walker extends Walker_Nav_Menu {
function start_lvl(&$output, $depth = 0, $args = array()) {
$output .= "\n<div class=\"submenu\">\n";
}
function end_lvl(&$output, $depth = 0, $args = array()) {
$output .= "\n</div>\n";
}
function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
parent::start_el($item_html, $item, $depth, $args);
if ($item->is_dropdown && ($depth === 0)) {
$output .= "<div class=\"menu-item\"><a class=\"menu-disabled deploy-submenu\" href=\"".esc_url($item->url)."\">".esc_attr($item->title)."</a><div class=\"clear\"></div>";
} elseif ($depth === 0) {
$output .= "<div class=\"menu-item\"><a class=\"menu-disabled\" href=\"".esc_url($item->url)."\">".esc_attr($item->title)."</a>";
} elseif ($depth > 0) {
$output .= "<a href=\"".esc_url($item->url)."\">".esc_attr($item->title)."</a>";
}
}

function end_el(&$output, $item, $depth=0, $args=array()) {
if ($item->is_dropdown && ($depth === 0)) {
$output .= "</div>\n";
} elseif ($depth === 0) {
$output .= "</div>\n";
} elseif ($depth > 0) {
$output .= "<em class=\"submenu-decoration\"></em>\n";
}
}
}

Giri comments:

Sorry here is the code. Last one missing the closing em tag again

class Custom_Nav_Walker extends Walker_Nav_Menu {
function start_lvl(&$output, $depth = 0, $args = array()) {
$output .= "\n<div class=\"submenu\">\n";
}
function end_lvl(&$output, $depth = 0, $args = array()) {
$output .= "\n</div>\n";
}
function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
parent::start_el($item_html, $item, $depth, $args);
if ($item->is_dropdown && ($depth === 0)) {
$output .= "<div class=\"menu-item\"><a class=\"menu-disabled deploy-submenu\" href=\"".esc_url($item->url)."\">".esc_attr($item->title)."</a><div class=\"clear\"></div>";
} elseif ($depth === 0) {
$output .= "<div class=\"menu-item\"><a class=\"menu-disabled\" href=\"".esc_url($item->url)."\">".esc_attr($item->title)."</a>";
} elseif ($depth > 0) {
$output .= "<a href=\"".esc_url($item->url)."\">".esc_attr($item->title)."</a>";
}
}

function end_el(&$output, $item, $depth=0, $args=array()) {
if ($item->is_dropdown && ($depth === 0)) {
$output .= "</div>\n";
} elseif ($depth === 0) {
$output .= "</div>\n";
} elseif ($depth > 0) {
$output .= "<em class=\"submenu-decoration\"></em>\n";
}
}
}

Giri comments:

I don't know why closing em tag automatically removed when i paste here. Its kind of weird.

[[LINK href="https://gist.github.com/mistergiri/5801194"]]https://gist.github.com/mistergiri/5801194[[/LINK]]

Giri comments:

Hello here, did you try my last answer? (see github link)

marct comments:

Hi Giri, thanks. Sorry my working hours ran up yesterday and I had no move on to other projects. I am back and I'm looking at your code now!

marct comments:

Giri, you mentioned, "As for the icon its not possible unless they are same icon." However, could you use the built-in Wordpress "advanced menu properties" to make this work? Eg. could you use the menu "description" in order to set this line? Do you understand what I mean? Even if the description was "<strong class="home-icon">" it would work.

Can you also build in the "menu-enabled" class for the active top menu item like it is there in the template? Do you get what I mean?

Thank you for the great answer and your work.

marct comments:

Hi Giri,

I see you're in India so it is late for you. I want to stay in touch if you are a WordPress expert because I do a lot of work in WordPress and it would be great to work on more projects together. I have been trying to figure out your code and I even came across questions from you on StackExchange :D

Some of your code isn't working from what you posted on github. I think it could be because the "$item->is_dropdown" part of this code isn't being recognized properly:

if ($item->is_dropdown && ($depth === 0)) {
$output .= "<div class=\"menu-item\"><a class=\"menu-disabled deploy-submenu\" href=\"".esc_url($item->url)."\">".esc_attr($item->title)."</a><div class=\"clear\"></div>";
} elseif ($depth === 0) {
$output .= "<div class=\"menu-item\"><a class=\"menu-disabled\" href=\"".esc_url($item->url)."\">".esc_attr($item->title)."</a>";
} elseif ($depth > 0) {
$output .= "<a href=\"".esc_url($item->url)."\">".esc_attr($item->title)."</a>";
}

The issue is that the dropdown menu links are being generated with the menu class "menu-disabled", even though they're supposed to have "menu-disabled deploy-submenu". This is making the menu links clickable, and the dropdown is not being deployed! I hope this is clear.