Select-box as fallback for nav list

Standard mobile menu pattern with JS

HTML

<div class="nav">
    <ul>
        <li><a href="#filter=1">Filter 1</a></li>
        <li><a href="#filter=2">Filter 2</a></li>
        <li><a href="#filter=3">Filter 3</a></li>
        <li><a href="#filter=4">Filter 4</a></li>
        <li><a href="#filter=5">Filter 5</a></li>
    </ul>
</div>

CSS

/* Housekeeping */
body {
    font-family:Arial, Helvetica, sans-serif;        
}
/* Nav styles */
.nav {
        -webkit-border-radius:5px;
    border-radius:5px;
    overflow:hidden;
    background:#333;
    margin:1em
}
.nav ul,
.nav li {
    float:left;
}
.nav ul {
    border-right:1px solid #444;
}
.nav a {
    display:block;
    padding:0.5em;
    text-decoration:none;
    color:#eee;
    background:#333;
    border-right:1px solid #000;
    border-left:1px solid #444;
        -moz-transition:background 0.2s ease-out;
        -webkit-transition:background 0.2s ease-out;
    transition:background 0.2s ease-out;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.nav li:first-child a {
    border-left:none;        
}
.nav a.active {
    font-weight:bold;
    text-decoration:underline;
}
.nav a:hover {
    background:#444;
}
.nav a:active {
    background:#222;
}
.nav.enhanced select {
    display:none;
}
/* Media query goodness */
@media screen and (max-width:500px) {
    .nav ul,
    .nav li {
        float:none;
    }
    .nav a {
        border:none;
        border-bottom:1px solid #444;
        border-top:1px solid #000;
    }
    .nav li:first-child a {
        border-top:none;
    }
    .nav.enhanced ul {
        display:none;
    }
    .nav.enhanced select {
        display:block;
        margin:0.5em;
        font-family:Arial, Helvetica, sans-serif; 
        font-size:1em;
    }
}

JavaScript

// Determine vars
var $nav = $('.nav'),
    $navLinks = $nav.find('a'),
    filtering = function(){
        // Logging
        try {
            console.log(this, arguments);
        } catch(err) {}
        
        // Do stuff
        var $item = $(this),
            val;
        if ($item.is('select')) {
            val = this.value;
        } else {
            val = $item.attr('href');
        }
        alert(val);
    };

// Set enhanced mode
$nav.addClass('enhanced');

// Bind link event
$navLinks.click(function(e){
    e.preventDefault();
    var $link = $(this);
    $navLinks.removeClass('active');
    $link.addClass('active');
    
    // Update select item (for resize, can be omitted, might fire extra filtering in some browsers?)
    $nav
        .find('option')
        .removeAttr('selected')
        .filter('[value="'+$link.attr('href')+'"]')
        .attr('selected','selected');
    
    // Do filtering
    filtering.apply(this,arguments);
    
});

// Add fallback select
$nav.find('ul').each(function(i, el){
    var $list = $(this),
    $items = $list.find('a'),
    $container = $list.parent(),
    $select = $('<select class="nav-select" id="nav-select-'+i+'"></select>');
    
    // Add items
    $items.each(function(){
        $link = $(this),
        active = $link.hasClass('active') ? ' selected="selected"' : '' ;
        $select.append('<option value="'+$link.attr('href')+'"'+active+'>'+$link.text()+'</option>');
    });
    
    // Add listener
    $select.change(function() {
        // Update nav item (for resize, can be omitted, might fire extra filtering in some browsers?)
        $navLinks
            .removeClass('active')
            .filter('[href="'+this.value+'"]')
            .addClass('active');
        
        // Do filtering
        filtering.apply(this,arguments);
    });
    
    // Insert
    $container.append($select);
});