WordPress.org

Ready to get started?Download WordPress

Forums

wp_nav_menu dropdown walker (4 posts)

  1. kjavaid
    Member
    Posted 3 years ago #

    Hello

    Hope you guys are great. I have put a wp_nav_menu() in a theme with depth (0) meaning that it will have a structure like (roughly)

    • Company
      • about
      • contact

      now the dropdown is being handled through superfish and its great. however, superfish adds a span <span href="arrow"></span> through javascript just before the start of submenu

        to add an arrow showing a dropdown.

        However, this happens when the page is full loaded and all of a sudden an arrow springs on many menu items jittering the whole menu left/right.

        Could you tell me how I could achieve that I add a span before start of submenu

        through nav_menu options or a custom walker to achieve this.

        Warm regards

        Khuram

  2. kjavaid
    Member
    Posted 3 years ago #

    Hello

    I tried to find any good tutorial on writing walkers. Could anyone point me. Or more specifically, could anyone tell me how I can find and insert code when wp_nav_menu is about to go inside a dropdown menu

    • ferahl
      Member
      Posted 3 years ago #

      Its not really possible to differentiate in the current design using only css.

      However it is pretty clean to do it in js, example with jquery:

      $('#header ul#nav > li').has('ul').children('a').addClass('submenu-indicator-down'); // top level
      $('#header ul#nav li li').has('ul').children('a').addClass('submenu-indicator-right'); // all other levels
    • stur
      Member
      Posted 2 years ago #

      You can follow any responses to simplify css code dropdovn menu.
      1) Add a class parent for items that have a submenu
      2) add depth class (depth0 , depth1, depth2 ...)

      add to function.php your theme

      class DD_Wolker_Menu extends Walker_Nav_Menu {
      	function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ){
      	    $GLOBALS['dd_children'] = ( isset($children_elements[$element->ID]) )? 1:0;
              $GLOBALS['dd_depth'] = (int) $depth;
              parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
          }
      }
      add_filter('nav_menu_css_class','add_parent_css',10,2);
      function  add_parent_css($classes, $item){
           global  $dd_depth, $dd_children;
           $classes[] = 'depth'.$dd_depth;
           if($dd_children)
               $classes[] = 'parent';
          return $classes;
      }

      now in header.php

      wp_nav_menu( array( 'container_class' => '','container' => '',  'menu' => 'header-menu', 'walker'=> new DD_Wolker_Menu ) );

      header-menu replaced by the name of your menu

      CSS simplified code may be the

      #menu-header-menu{
          margin: 0;
          padding: 0;
      }
      #menu-header-menu  ul{
      
      }
      
      #menu-header-menu> li{
          display: inline;
          margin-left: 1.618em;
      }
      #menu-header-menu  li{
          list-style: none;
      }
      #menu-header-menu  li a{
          text-decoration: none;
          font-size: 	1em;
          font-family:	'Lato',Helvetica,Arial,sans-serif ;
          letter-spacing:	1px;
      }
      #menu-header-menu li.parent::after{
          content:'+';
      }
      
      #menu-header-menu  .sub-menu {
         display: none;
         position: absolute;
         background-color: #fff;
      }
      
      #menu-header-menu  li:hover>.sub-menu{
          display: inline;
          width: auto;
          height: auto;
          border: solid 1px #BBBBBB;
          z-index: +1;
      }

      #menu-header-menu - id the main UL list

    Topic Closed

    This topic has been closed to new replies.

    About this Topic

    Tags