Fancy select options with jQuery & CSS3

While working on a current project I tried out a few experiments using select option alternatives for added style control. My aim was to emulate something like what Themeforest use on their website selector, however I wanted the design to have application to more than just anchor links.

Demo of Fancy select options

In this demo I have taken advantage of the CSS3 selectors and properties to pepper the design with extra polish.

Code overview

This technique uses jQuery to action events on an unordered list. The demo gives a couple of instances of how this works but I will focus on the click and select example. The HTML for this is simple enough:

<div>
 <h2>Click With Styles</h2>
 <ul id="sort3">
 <li><a href="" alt="option 1">Option One</a></li>
 <li><a href="" alt="option 2">Option Two</a></li>
 <li><a href="" alt="option 3">Option Three</a></li>
 <li><a href="" alt="option 4">Option Four</a></li>
 </ul>
 </div>

Note that the list items wrap around standard anchor links in the page. The funcitonality of the select dropdowns focuses on the classes attached to the links. We are using 2 classes which define the tigger and display. option and selected, every link has an option class, but only the selected option has a class of selected.

The styling for these options is also pretty straight forward:

#sort3 {
 clear:left;
 float:left;
 margin:0;
 padding:0;
 position:relative;
 width:250px;
 }
 #sort3 li {
 list-style:none;
 position:relative;
 float:left;
 outline:none;
 width:288px;
 -moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
 }
#sort3 li a.option:link, #sort3 li a.option:active, #sort3 li a.option:visited {
 background: #211919;
 border-top:1px solid #211919;
 border-bottom:1px solid #211919;
 padding: 20px;
 width:250px;
 display:none;
 outline:none;
 position:relative;
 float:left;
 }

Now for the fun part, using only the classes that we have applied to the anchors in the list element we can easily manipulate the DOM elements. The functions to do this are broken into two parts:

$(function() {
 $('#sort3 li a.selected').live('click', function() {
 //check if the options are visible
 if( $('#sort3 li a.option:visible').length > 1) {
 //hide the options if currently displaying
 $('#sort3 li a.option:not(.selected)').hide();
 } else {
 //show the options if hidden
 $('#sort3 li a.option:not(.selected)').show();
 }
 return false;
 });
 //check for selecting a new option
 $('#sort3 li a.option:not(.selected)').live('click', function() {
 //change over the selected class
 $('#sort3 li a').removeClass('selected');
 //apply this to the new selection
 $(this).addClass('selected');
 //slide up the selected option
 $('#sort3 li a.option:not(.selected)').hide();
 return false;
 });
 });

You can see 2 click functions, with the important differences being what the click function is acting on. This enacts both parts of the users interaction with the select options. Firstly we click on the option to display the full view, then secondly we make the selection, which hides the select options and denotes the new selection. It’s that straightforward.

Considerations & restraints

The select options have been tested cross browser and work however to take advantage of the CSS3 goodness modern browsers will reap the benefits of dropdown shadows and transparent PNG’s some of these issues can be resolved, although they are out of scope for this experiment.

Please feel free to leave comments or if you have any suggestions on how the code / application could be improved please feel free to share.