Forums

noahgelman

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

TheDoc

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

noahgelman

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

noahgelman

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('<select value="appple" />').children().contents().unwrap();
		$('#mobile-navigation option.current_page_item').attr('selected', 'selected');
		
		$("#mobile-navigation select").change(function() {
		  window.location = $(this).find("option:selected").val();
		});

	<div id="mobile-navigation">
		<?php
            $my_pages = wp_list_pages('depth=-1&echo=0&title_li=');
            $var1 = '<li';
            $var2 = '<option';
            $var3 = '</li>';
            $var4 = '</option>';
            $my_pages = str_replace($var1, $var2, $my_pages);
            $my_pages = str_replace($var3, $var4, $my_pages);
            echo $my_pages;
        ?>
	</div>
	});

treehouse : what would you like to learn today?

Forums

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