Skip to content
Touchdown is a small jQuery plugin that converts lists of links (`<ol>` or `<ul>`) to dropdown lists (`<select>`) for mobile devices
Find file
Latest commit 3f396c6 Mar 7, 2012 @samuelcotterall License



Touchdown is a tiny bit of JavaScript that converts <ul> or <ol> navigation elements to <select> dropdowns—which is nice if you’re using an iPhone or something.

Want to see a demo?

Here’s how you use it:

Make some lists like this:

<ul id="social-networks">
    <li><a href="">Google+</a></li>
    <li><a href="">Twitter</a></li>
    <li><a href="">Tumblr</a></li>
    <li><a href=""></a></li>

<ul id="powered-by">
    <li><a href="">jQuery</a></li>
    <li><a href="">HTML5 Boilerplate</a></li>

Call the script and initialise it:

<script defer src="../jquery.touchdown.js"></script>
        $('#social-networks, #powered-by').Touchdown();

Use Media Queries or whatever to show/hide the lists and <select>s depending on screensize. Do this however you like, it’s up to you:

.touchdown-list {display: none;}
.touchdown {display: block;}

@media only screen and (min-width: 768px) {
.touchdown-list {display: block;}
.touchdown {display: none;}
Something went wrong with that request. Please try again.