Find file
Fetching contributors…
Cannot retrieve contributors at this time
42 lines (29 sloc) 1.29 KB


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;}