JSFiddle - React, Tailwind, and code Playground

by brightonmike

HTML

<li id="archives-3" class="side-widget-container widget_archive"><h3 class="side-widget-title">History</h3>
<select name="archive-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'> <option value="">Select Month</option>     <option value='http://www.maxumi.co.uk/2012/04/'> April 2012 &nbsp;(15)</option>
    <option data-html-text="March 2012" value='http://www.maxumi.co.uk/2012/03/'> March 2012 &nbsp;(25)</option>
    <option data-html-text="February 2012" value='http://www.maxumi.co.uk/2012/02/'> February 2012 &nbsp;(20)</option>
    <option data-html-text="January 2012" value='http://www.maxumi.co.uk/2012/01/'> January 2012 &nbsp;(24)</option>
    <option data-html-text="March 2012" value='http://www.maxumi.co.uk/2011/12/'> December 2011 &nbsp;(21)</option>
    <option data-html-text="March 2012" value='http://www.maxumi.co.uk/2011/11/'> November 2011 &nbsp;(19)</option>
    <option data-html-text="March 2012" value='http://www.maxumi.co.uk/2011/10/'> October 2011 &nbsp;(16)</option>
    <option data-html-text="March 2012" value='http://www.maxumi.co.uk/2011/09/'> September 2011 &nbsp;(18)</option>
    <option value='http://www.maxumi.co.uk/2011/08/'> August 2011 &nbsp;(14)</option>
    <option value='http://www.maxumi.co.uk/2011/07/'> July 2011 &nbsp;(19)</option>
    <option value='http://www.maxumi.co.uk/2011/06/'> June 2011 &nbsp;(26)</option>
    <option value='http://www.maxumi.co.uk/2011/05/'> May 2011 &nbsp;(9)</option>
    <option value='http://www.maxumi.co.uk/2011/04/'> April 2011 &nbsp;(20)</option>
    <option value='http://www.maxumi.co.uk/2011/03/'> March 2011 &nbsp;(17)</option>
    <option value='http://www.maxumi.co.uk/2011/02/'> February 2011 &nbsp;(20)</option>
    <option value='http://www.maxumi.co.uk/2011/01/'> January 2011 &nbsp;(25)</option>
</select></li>

CSS

.tzSelect{
    
    /* This is the container of the new select element */
    
    height:34px;
    display:inline-block;
    min-width:200px;
    position:relative;

    background:#222;
}

.tzSelect .selectBox{
    position:absolute;
    
    height:40px;
    width:100%;
    
    /* Font settings */
    
    font:13px/34px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    text-align:center;
    text-shadow:1px 1px 0 #333;
    color:#fff;

    /* Using CSS3 multiple backgrounds and a fallback */
    
    background:#222;
    
    cursor:pointer;
}

.tzSelect .selectBox:hover,
.tzSelect .selectBox.expanded{
    background-position:0 -170px, right -238px, 50% -102px, 0 -34px;
    color:#fff;
    text-shadow:1px 1px 0 #222;
}

.tzSelect .dropDown{
    position:absolute;
    top:40px;
    left:0;
    width:100%;
    max-height:100px;
    list-style:none;
    overflow:hidden;
}


.tzSelect li{
    height:85px;
    cursor:pointer;
    position:relative;
    
    /* Again, using CSS3 multiple backgrounds with a fallback */
    
    background:#0A93CC;
}

.tzSelect li:hover{
    background-position: 50% -256px, 0 -85px, 0 0;
}

.tzSelect li span{
    left:0;
    position:absolute;
    top:27px;
    text-align:center;
    width:100%;
    color:#fff;
}

.tzSelect li i{
    color:#999999;
    display:block;
    font-size:12px;
}

.tzSelect li img{
    left:9px;
    position:absolute;
    top:13px;
}

JavaScript

$(document).ready(function(){
    
    // The select element to be replaced:
    var select = $('#archives-3 select');

    var selectBoxContainer = $('<div>',{
        width        : select.outerWidth(),
        class       : 'tzSelect',
        html        : '<div class="selectBox">Monthly Archives</div>'
    });

    var dropDown = $('<ul>',{class:'dropDown'});
    var selectBox = selectBoxContainer.find('.selectBox');
    
    // Looping though the options of the original select element
    
    select.find('option').each(function(i){
        var option = $(this);
        
        if(i==select.attr('selectedIndex')){
            selectBox.html(option.text());
        }
        
        // As of jQuery 1.4.3 we can access HTML5 
        // data attributes with the data() method.
        
        if(option.data('skip')){
            return true;
        }
        
        // Creating a dropdown item according to the
        // data-icon and data-html-text HTML5 attributes:
        
        var li = $('<li>',{
            html:    '<span>'+
                    option.data('html-text')+'</span>'
        });
                
        li.click(function(){
            
            selectBox.html(option.text());
            dropDown.trigger('hide');
            
            // When a click occurs, we are also reflecting
            // the change on the original select element:
            select.val(option.val());
            
            return false;
        });
        
        dropDown.append(li);
    });
    
    selectBoxContainer.append(dropDown.hide());
    select.hide().after(selectBoxContainer);
    
    // Binding custom show and hide events on the dropDown:
    
    dropDown.bind('show',function(){
        
        if(dropDown.is(':animated')){
            return false;
        }
        
        selectBox.addClass('expanded');
        dropDown.slideDown();
        
    }).bind('hide',function(){
        
        if(dropDown.is(':animated')){
           ...