Matt’s Blog

design a

One of the challenges faced with building any web site is getting it to look like the design comp.  Z Drinks had a particularly challenging problem as show in “design a”.  This is fairly simple to do with css, but not on select and option tags.
 

screenshot a

The problem is that select/drop down boxes are limited in what you can style.  The reason for this is that they take their look from the browser and/or operating system as show in “screenshot a”.  Each browser: Firefox, Safari, and Opera renders the select box differently. 

How do we get “screenshot a” to look like “design a” ? Using jQuery we can transform the select box into something more advantageous for styling, like a list item. I searched around and found a few plugins, but in the end decided to write my own.  This plugin will take any select tag on a page that you choose and transform it into a list item for easier styling.

So for example it will take this code:

<select name="forum_id" id="forum-id">
    <option value="0">Any</option>
    <option value="1">Hot or Not</option>
    <option value="2">Last Night</option>
    <option value="3">Missed Connections</option>
    <option value="4">Specials</option>
    <option value="5">Everything Else</option>
</select>

and turn it into this:

<ul id="val-forum_id">
<li>
    <a href="#val-forum_id" class="val-forum_id-0" title="Any" 
id="val-forum_id-selected">Any</a>
    <ul>
        <li class="val-forum_id-0" id="val-forum_id-selected">Any</li>
        <li class="val-forum_id-1"> Hot or Not</li>
        <li class="val-forum_id-2"> Last Night</li>
        <li class="val-forum_id-3"> Missed Connections</li>
        <li class="val-forum_id-4"> Specials</li>
        <li class="val-forum_id-5"> Everything Else</li>
    </ul>
</li>
</ul>
<input type="hidden" id="val-forum_id-hidden" value="0" name="forum_id"/>

To get this to work, all you need is:

1. jQuery
2. zselect plugin
3. call it like this:  $(’select’).zselect();