Grow your CSS skills. Land your dream job.

Convert Menu to Dropdown (variation)

  • # March 17, 2012 at 12:29 pm

    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
    $("").appendTo("nav");

    // Create default option "Go to..."
    $("", {
    "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) {

    $("", {
    "label": el.find("> a").text()
    }).appendTo("nav select");

    children.each(function() {

    $("", {
    "text": " - " + $(this).text()
    }).appendTo("optgroup:last");

    });

    } else {

    $("", {
    "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
    # March 17, 2012 at 3:02 pm

    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…

    # March 17, 2012 at 5:17 pm

    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.

    # March 17, 2012 at 6:46 pm

    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?

    # March 19, 2012 at 7:51 am

    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.

    # March 19, 2012 at 7:11 pm

    Hey. :)

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


    ->

    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. :)

    # May 4, 2012 at 9:49 am

    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.

    # March 1, 2013 at 8:14 pm

    Try this:

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

    // Create the dropdown base
    $(““).appendTo(“nav”);

    // Create default option “Go to…”
    $(““, {
    “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) {

    $(““, {
    “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) {

    $(““, {
    “value” : $(this).find(“> a”).attr(“href”),
    “text” : ‘ — ‘ + $(this).find(“> a”).text()
    }).appendTo(“nav select”);

    level_3.each(function() {
    $(““, {
    “value” : $(this).find(“> a”).attr(“href”),
    “text” : ‘ —- ‘ + $(this).find(“> a”).text()
    }).appendTo(“nav select”);
    });

    }
    else
    {
    $(““, {
    “value” : $(this).find(“> a”).attr(“href”),
    “text” : ‘ — ‘ + $(this).find(“> a”).text()
    }).appendTo(“nav select”);
    }
    });
    }
    else
    {
    $(““, {
    “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);

    # March 2, 2013 at 3:38 am

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

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".