Here’s an easy way to generate a dropdown menu from your blog pages using the WordPress wp_dropdown_pages() function.
Adding a bit of javascript you can send the user to the page when they select it…
<section id="pageselect">
<span>
<?php wp_dropdown_pages('show_option_none=Explore...'); ?>
</span>
<script type="text/javascript"><!--
var selectmenu = document.getElementById("page_id");
function onPageChange() {
if ( selectmenu.options[selectmenu.selectedIndex].value > 0 ) {
location.href = "<?php echo get_option('home'); ?>/?page_id="+selectmenu.options[selectmenu.selectedIndex].value;
}
}
selectmenu.onchange = onPageChange;
--></script>
</section><!-- end pageselect -->
You can add this to your header and hide it with CSS until the screen size indicates the page is being viewed on a mobile device, then show it as a handy alternative navigation.
—————————————————
ADDITION 27th June 2013…..
It’s not clear in the WordPress codex for wp_dropdown_pages(), but you can sort the list using additional arguments…
<?php wp_dropdown_pages('sort_column=menu_order&show_option_none=Explore...'); ?>
“sort_column=menu_order” as above will sort the list by it’s menu order value rather than by the post title which is the default. You can also use “ID” in that argument.
Does this work no matter what permalinks are set to? I’d prefer it if the value=”20″ parameter actually contained the permalink rather than the page ID.
Thanks for the snippet.