Forums

rivana

I really hope someone can help me with this. I'm trying to get the Convert Menu to Dropdown (variation) to work in my WP-theme like on http://css-tricks.com/examples/ConvertMenuToDropdown/optgroup.php

The simple non-nested version of the script works fine, but when I try to implement this nested version something just goes awry. And yes, obviously I'm a total noob at scripting. And no, I don't want a plugin to take away my worries. Please help anyway?

The problem: All I get is a dropdown with the 'selected' value (Go to...) and no actual menu items.

My CSS

#access ul { display: none; }
#access select { display: inline-block; width:90%; }

My PHP

 <?php wp_enqueue_script( 'menuconvert', get_template_directory_uri() . '/js/menuconvert.js', array( 'jquery' )); ?>

Javscript (in menuconvert.js)

(function($) {
		  		  
	 // DOM ready
	 $(function() {
	   
      // Create the dropdown base
      $("<select />").appendTo("nav");
      
      // Create default option "Go to..."
      $("<option />", {
         "selected": "selected",
         "value"   : "",
         "text"    : "Go to..."
      }).appendTo("nav select");
      
      // Populate dropdown with menu items
      $("nav > ul > li").each(function() {
      
      	var el = $(this);
      
      	var hasChildren = el.find("ul"),
      	    children    = el.find("li");
       
      	if (hasChildren.length) {
      	
      		$("<optgroup />", {
      			"label": el.find("> a").text()
      		}).appendTo("nav select");
      		
      		children.each(function() {
      		      			
      			$("<option />", {
      				"text": " - " + $(this).text()
      			}).appendTo("optgroup:last");
      		
      		});
      		      	
      	} else {
      	
      		$("<option />", {
	           "value"   : el.attr("href"),
	           "text"    : el.text()
	       }).appendTo("nav select");
      	
      	} 
             
      });
      
	   // To make dropdown actually work
      $("nav select").change(function() {
        window.location = $(this).find("option:selected").val();
      });
	 
	 });
})(jQuery);

xpy

If you included the menu's code it could help...
Is it in this form 'nav > ul > li' ??? Otherwise the menuconvert.js wont find a menu to copy...

rivana

Thanks. :) I had to add the 'div' as well. Now I have the menu populated, but the links don't want to work.

Edit// Never mind, got it working. Looks like the script only works for pages with pretty permalinks and not numbered pages.

On a related note - anybody know how to get the links working WITHOUT the pretty permalinks and WITH numbered pages instead? Sure, it's not the usual way to do things, but it's still good to know these things.

rivana

The script only seems to work one level down. Does anybody know how to get it down to three or four levels?
Also, it changes parent pages to labels which means the links for those parent pages don't work. Since I do use my parent pages as actual pages that kinda sucks. Any solutions?

Mottie

Hi Rivana!

Can you share some HTML, it make it easier for us to help if we have something to start from and not work from scratch. Also, I'm not sure what you mean by the script changing parent pages to labels.

rivana

Hey. :)

The menu is your basic Wordpress dynamic menu. In other words just a bunch of nested lists. Like thus:

<nav id="access" role="navigation">
<h3 class="assistive-text">Main Menu</h3>

<div class="skip-link"><a class="assistive-text" href="#content" title="Jump to primary">Jump to primary</a></div>
<div class="skip-link"><a class="assistive-text" href="#secondary" title="Jump to secondary">Jump to secondary</a></div>

<div class="menu">
<ul>

<li class="page_item page-item-143"><a href="#">Link 2</a> <!-- top level link -->
	<ul class='children'>
		<li class="page_item page-item-146"><a href="#">Link 3</a> <!-- second level link -->
			<ul class='children'>
				<li class="page_item page-item-156"><a href="#">Link 4</a><!-- third level link -->
                	<ul class='children'>
						<li class="page_item page-item-156"><a href="#">Link 4</a></li><!-- fourth level link -->
					</ul>
                </li>
			</ul>
		</li>
    </ul>        
</li>

</ul><!-- main list -->

</div><!-- menu -->
</nav><!-- #access -->
->

My problems are:

1. Getting the select list more than two levels deep so that the parent/child relationship is properly reflected regarding labels and indents.
2. The script at the moment takes the parent links and transforms them into optgroup labels. Since my parent links actually LINK to pages as well I need a way to clone them so that one link is transformed into an optgroup label while the other stays a working link. Ideally I would like the optgroup labels themselves to remain links, but I'm not sure that's possible. Select elements are not something I'm terribly familiar with.

Hope you can help. :)

jonedwards

I'm having a similar problem, but it's not to do with your HTML. It's the jQuery script that's not working... And, like you, I don't know how to fix it.

crivatf

Try this:

    (function($) {
      // DOM ready
      $(function() {

        // Create the dropdown base
        $("<select />").appendTo("nav");

        // Create default option "Go to..."
        $("<option />", {
           "selected": "selected",
           "value"   : "",
           "text"    : "Go to..."
        }).appendTo("nav select");

        // Populate dropdown with menu items
        $("nav > ul > li").each(function() {

          var level_1 = $(this);
          var level_1_hasChildren = $(this).find("> ul"),
              level_2             = $(this).find("> ul > li");

          if (level_1_hasChildren.length) {

            $("<option />", {
               "value"   : level_1.find("> a").attr("href"),
               "text"    : level_1.find("> a").text()
            }).appendTo("nav select");

            level_2.each(function() {

              var level_2 = $(this);
              var level_2_hasChildren = level_2.find("> ul"),
                  level_3             = level_2.find("> ul > li");

              if (level_2_hasChildren.length) {

                $("<option />", {
                   "value"   : $(this).find("> a").attr("href"),
                   "text"    : ' -- ' + $(this).find("> a").text()
                }).appendTo("nav select");

                level_3.each(function() {
                  $("<option />", {
                     "value"   : $(this).find("> a").attr("href"),
                     "text"    : ' ---- ' + $(this).find("> a").text()
                  }).appendTo("nav select");
                });

              }
              else
              {
                $("<option />", {
                   "value"   : $(this).find("> a").attr("href"),
                   "text"    : ' -- ' + $(this).find("> a").text()
                }).appendTo("nav select");
              }
            });       
          }
          else
          {
            $("<option />", {
               "value"   : $(this).find("> a").attr("href"),
               "text"    : $(this).find("> a").text()
            }).appendTo("nav select");
          }      
       });
       // To make dropdown actually work
        $("nav select").change(function() {
          window.location = $(this).find("option:selected").val();
        });
      });
    })(jQuery);

HugoGiraudel

@crivatf: Put 4 spaces before each line of code.