Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Touchdown is a small jQuery plugin that converts lists of links (`<ol>` or `<ul>`) to dropdown lists (`<select>`) for mobile devices

branch: master
README.markdown

TouchDown

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? http://samuelcotterall.github.com/touchdown/:

Here’s how you use it:

Make some lists like this:

<ul id="social-networks">
    <li><a href="https://plus.google.com/113158264847735001631/posts">Google+</a></li>
    <li><a href="http://twitter.com/samuelcotterall/">Twitter</a></li>
    <li><a href="http://samuelcotterall.tumblr.com/">Tumblr</a></li>
    <li><a href="http://www.last.fm/user/samuelcotterall/">last.fm</a></li>
</ul>

<ul id="powered-by">
    <li><a href="http://jquery.com">jQuery</a></li>
    <li><a href="http://html5boilerplate.com//">HTML5 Boilerplate</a></li>
</ul>   

Call the script and initialise it:

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

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.