Dropdown Menu with Extra Code

  • Resolved scottcarlton

    (@scottcarlton)


    12 years, 3 months ago

    I have been searching for a way to edit the code of my dropdown on wp_nav_menu. Below is what I am trying to do.

    <nav class="main">
    <div class"center">
       <ul>
        <li>Menu Item 1</li>
             <ul>
              <div class="center">
               <li class="dropdown">dropdown menu 1</li>
               <li class="dropdown">dropdown menu 1</li>
             </div>
             </ul>
        <li>Menu Item 2</li>
             <ul>
              <div class="center">
               <li class="dropdown">dropdown menu 2</li>
               <li class="dropdown">dropdown menu 2</li>
             </div>
             </ul>
     </ul> <!-- Close main ul -->
    <div> <!-- Close main center -->
</nav>

    The nav container and center div is easy, but getting the center div in the dropdown is the challenge. I have been looking at a walker class but was sure if this is the right approach. I would like to do this without a plugin because of some of the custom coding. Has anyone else been able to do this? Thanks for any help!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You can’t have any elements outside <li> elements within an unordered list.
    What functionality do you want the center <div> to do?

    Thread Starter scottcarlton

    (@scottcarlton)

    WOW that was quick. Thanks!
    I am trying to create a dropdown with a full-width background like here using css. Have been working on it for sometime.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Use a Browser Inspector tool like Firebug or the developer tool built into Chrome to literally inspect how that website (linked) implements it.

    Thread Starter scottcarlton

    (@scottcarlton)

    I have been search through google and found that you can use the walker class for wp_nav_menu to change the out put of your HTML. I need to put the div center class between the ul and li to center the li because the ul is 100% width.
    Now it is just about finding out more about writing the walker class to change just my second level ul.

    Thread Starter scottcarlton

    (@scottcarlton)

    This walker did the trick with adding a wrapper to center the li’s for me but it also adds it to the child ul as well. So need to figure out how to stop it from repeating with each child ul.

    class Walker_dropdown extends Walker_Nav_Menu {
	// Displays start of a level. E.g '<ul>'
	// @see Walker::start_lvl()
	function start_lvl(&$output, $depth=0, $args=array()) {
		$output .= "\n<ul><div class=\"center960\">\n";
	}
	// Displays end of a level. E.g '</ul>'
	// @see Walker::end_lvl()
	function end_lvl(&$output, $depth=0, $args=array()) {
		$output .= "<div></ul>\n";
	}
}

    Thread Starter scottcarlton

    (@scottcarlton)

    Problem Solved! This is how I did it. Using some code from Bootstrap_Walker for WordPress by George Huger. I hope this helps anyone else looking to do the same.

    class Walker_dropdown extends Walker_Nav_Menu {
	function start_lvl(&$output, $depth)
        {
            $indent = str_repeat("\t", $depth);
            if ($depth == -1 || $depth == 0) {
                $output .= "\n$indent<ul><div class=\"center960\">\n";
            } else {
                $output .= "\n$indent<ul>\n";
            }
            return;
        }
  function end_lvl(&$output, $depth)
        {
            $indent = str_repeat("\t", $depth);
            if ($depth == -1 || $depth == 0) {
                $output .= "\n$indent</div></ul>\n";
            } else {
                $output .= "\n$indent</ul>\n";
            }
            return;
        }
}

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Dropdown Menu with Extra Code’ is closed to new replies.