Horje
Generate nav menu with DIVs instead of ULs (walker_nav_menu?) - Wordpress Solution
[Solved] - Generate nav menu with DIVs instead of ULs (walker_nav_menu?) - Wordpress Solution
Try following codes
I want to have a Wordpress menu generated so that the rendered HTML looks like the template below. The DIVs and classes have to match the HTML below. (Obviously the actual links inside the menu are placeholder, and they would be generated based on what is in the database.)
      <div class="menu">         
          <div class="menu-item">
              <strong class="home-icon"></strong>
              <a class="menu-enabled" href="#">Home</a>
          </div> 
          
          <div class="menu-item">
              <strong class="features-icon"></strong>
              <a class="menu-disabled deploy-submenu" href="#">Features</a>
              <div class="clear"></div>
              <div class="submenu">
              	  <a href="#">The Drawer Introduction</a> 	  <em class="submenu-decoration"></em>
                  <a href="#">Typography Features</a>         <em class="submenu-decoration"></em>
                  <a href="#">jQuery Features</a>             <em class="submenu-decoration"></em>
                  <a href="#">Other Features</a>
              </div>
          </div> 
          
          <div class="menu-item">
              <strong class="gallery-icon"></strong>
              <a class="menu-disabled deploy-submenu" href="#">Gallery</a>
              <div class="clear"></div>
              <div class="submenu">
                  <a href="#">Full Width Portfolio</a>        <em class="submenu-decoration"></em>
                  <a href="#">Two Column Portfolio</a>        <em class="submenu-decoration"></em>
                  <a href="#">Swipable Thumbnail Gallery</a>  <em class="submenu-decoration"></em>
                  <a href="#">Filtrable Image Gallery</a>
              </div>
          </div> 
          
          <div class="menu-item">
              <strong class="blog-icon"></strong>
              <a class="menu-disabled" href="#">Blog</a>
          </div>
            
          <div class="menu-item">
              <strong class="contact-icon"></strong>
              <a class="menu-disabled" href="#">Contact</a>
          </div>  
      </div>
You can see this menu in action (plain HTML) [[LINK href="http://paultrifa.com/envato/codecanyon/drawernav/index.html"]]here[[/LINK]]. I want to have Wordpress generate basically the above HTML using a Wordpress menu. Is this clear? Can you help me out?

Solution - 1

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=\"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";
    }

  }  

}


Solution - 2

hi! insert this code in you're functions.php

function register_my_menu() { register_nav_menu('header-menu',__( 'Header Menu' )); } add_action( 'init', 'register_my_menu' );
after this you can use the administration panel to generate the menu using the interface


Solution - 3

Hi, Check the following link, it describes how to customize wordpress menu http://codex.wordpress.org/Function_Reference/wp_nav_menu#Removing_the_Navigation_Container


Solution - 4

Yes to modify the html output, you'll have to use a walker in your wp_nav_menu(), extending the Walker_Nav_Menu class. I have a very great resource on this but it's in french


Solution - 5

try custom from here


class theme_extended_walker extends Walker_Nav_Menu{
    function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
        if ( !$element )
            return;

        $id_field = $this->db_fields['id'];

        //display this element
        if ( is_array( $args[0] ) )
            $args[0]['has_children'] = ! empty( $children_elements[$element->$id_field] );

        //Adds the 'parent' class to the current item if it has children
        if( ! empty( $children_elements[$element->$id_field] ) )
            array_push($element->classes,'parent');

        $cb_args = array_merge( array(&$output, $element, $depth), $args);

        call_user_func_array(array(&$this, 'start_el'), $cb_args);

        $id = $element->$id_field;

        // descend only when the depth is right and there are childrens for this element
        if ( ($max_depth == 0 || $max_depth > $depth+1 ) && isset( $children_elements[$id]) ) {

            foreach( $children_elements[ $id ] as $child ){

                if ( !isset($newlevel) ) {
                    $newlevel = true;
                    //start the child delimiter
                    $cb_args = array_merge( array(&$output, $depth), $args);
                    call_user_func_array(array(&$this, 'start_lvl'), $cb_args);
                }
                $this->display_element( $child, $children_elements, $max_depth, $depth + 1, $args, $output );
            }
            unset( $children_elements[ $id ] );
        }

        if ( isset($newlevel) && $newlevel ){
            //end the child delimiter
            $cb_args = array_merge( array(&$output, $depth), $args);
            call_user_func_array(array(&$this, 'end_lvl'), $cb_args);
        }

        //end this element
        $cb_args = array_merge( array(&$output, $element, $depth), $args);
        call_user_func_array(array(&$this, 'end_el'), $cb_args);
    }
}

<?php if (has_nav_menu('primary')) wp_nav_menu(array('theme_location' => 'primary', 'depth' => 0, 'container' => '', 'menu_class' => 'pie-css3 clearfix', 'walker' => new theme_extended_walker)); ?>

Date: 2022-10-21 05:01:10
Category: Wordpress
More for You