Unobtrusive Dropdown Page Changer

Page Changer

Page Changer

Using a <select> dropdown menu to create navigation isn’t as common as it once was, but it’s still around. It got ripped on pretty good for being an inaccessible / obtrusive. Indeed a lot of the scripts you’ll find out there for creating a menu like this are this way. Bummer. Let’s make one that works with OR without JavaScript!

View Demo

The OBTRUSIVE Way

<form>
    <select onchange="window.open(this.options[this.selectedIndex].value)">
        <option value="">Go to page...</option>
        <option value="http://css-tricks.com/">CSS-Tricks</option>
        <option value="http://digwp.com/">Digging Into WordPress</option>
        <option value="http://quotesondesign.com/">Quotes on Design</option>
    </select>
</form>

Inline JavaScript… it works, but only if JavaScript is enabled. Without, you’ll have a dropdown menu that does absolutely nothing.

The UNOBTRUSIVE Way

<form id="page-changer" action="" method="post">
    <select name="nav">
        <option value="">Go to page...</option>
        <option value="http://css-tricks.com/">CSS-Tricks</option>
        <option value="http://digwp.com/">Digging Into WordPress</option>
        <option value="http://quotesondesign.com/">Quotes on Design</option>
    </select>
    <input type="submit" value="Go" id="submit" />
</form>

Pretty similar, but no inline JavaScript. Instead we give the form and ID we will use later to target. The form now POSTs to itself, and we have added a submit button, so the form is functional. The select now has a name value, so when the submit button is pressed, it will POST a value.

At the very top of our page, we’ll check for a POST value from that form. If it is there, we’ll redirect the page to that value.

<?php
	if (isset($_POST['nav'])) {
		 header("Location: $_POST[nav]");
	}
?>

No JavaScript needed at all, the page redirect is handled entirely via server-side PHP. NOTE: this is just the way-simplified PHP. You should probably sanitize that submitted value before passing it to the header function (esp. if running PHP prior to 4.4.2 or 5.1.2) to prevent “header injection” attacks.

We can make it behave identically to the obtrusive method though, with just a few lines of jQuery.

  1. Hide the submit button.
  2. When the select is changed…
  3. Redirect to value of option
$(function() {

    $("#submit").hide();

    $("#page-changer select").change(function() {
        window.location = $("#page-changer select option:selected").val();
    })

});

View Demo

Advertisements
  1. April 4, 2010 at 10:47 pm

    Hey, I read a lot of blogs on a daily basis and for the most part, people lack substance but, I just wanted to make a quick comment to say GREAT blog!…..I”ll be checking in on a regularly now….Keep up the good work! 🙂

    established franchises for sale

  2. April 14, 2010 at 1:54 am

    This is a great post. I am trying to use it on my blog.

    When I try the “The OBTRUSIVE Way” WP deletes the onchange=”window.open(this.options[this.selectedIndex].value)”

    When I try the “The UNOBTRUSIVE Way” I get the following error: Warning: Cannot modify header information – headers already sent by … any advice

    Thanks in advance

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: