Grow your CSS skills. Land your dream job.

WordPress: How do you make a navigation menu with select and options?

  • # May 30, 2012 at 7:43 pm

    For mobile browsers, I want to give them a select dropdown that they can use to navigate. How can I make one?

    # May 31, 2012 at 1:43 am

    You should be able to simply create one with wp_list_pages and then make sure it only shows on mobile devices (I’m thinking media queries here).

    # May 31, 2012 at 1:04 pm

    Do I have to do anything special to get it to link?
    Do I just wrap the inside of the options with an anchor tag?
    How do I get to current page to be the default selection of the select box?

    I probably should have asked these at the beginning

    # May 31, 2012 at 1:43 pm

    Was able to get it

    $(document).ready(function() {
    $('#mobile-navigation option a').each(function() {
    var newValue = $(this).attr('href');
    $(this).parent().attr('value', newValue);

    });

    $('#mobile-navigation option').wrapAll('').children().contents().unwrap();
    $('#mobile-navigation option.current_page_item').attr('selected', 'selected');

    $("#mobile-navigation select").change(function() {
    window.location = $(this).find("option:selected").val();
    });


    < ?php
    $my_pages = wp_list_pages('depth=-1&echo=0&title_li=');
    $var1 = '
  • $var2 = ' $var3 = '';
    $var4 = '';
    $my_pages = str_replace($var1, $var2, $my_pages);
    $my_pages = str_replace($var3, $var4, $my_pages);
    echo $my_pages;
    ?>

    });
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

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