Custom Drop-down Menu using CSS and jQuery

A google search for 'custom drop-down menu' or 'custom html select' returns several amazing articles and blog posts explaining how to customize the html select tag. And most of them customize using css and javascript. Most of them demonstrate how the tag can be edited to match websites themes and stuff.

Now, instead of just customizing the existing menu, I've tried to create a new menu using jQuery which works the same way a normal html select tag works. It's surprisingly simple to create and is cross-browser compatible.

For this, I'm gonna be using jQuery-1.7.1. Let's start with the basic structure of the new drop-down menu(ddm). Here, I'll use an html ul(Unordered List) tag to display the options and a normal html div as the base which displays the selected item.

First, Let's design the base. The CSS code for the base div tag goes like this:

.cselect{
height: 32px;
font-family:inherit;
font-size:13px;
margin-top: 20px;
width: 288px;
background: rgb(248,248,248);
border: 1px solid #d9d9d9;
padding: 14px 0 0 10px;
cursor:pointer;
}
.cselect:hover{
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0,0.15);
border-color: #999;
}
.cselect[state=selected] {
background: -webkit-gradient(linear,left top,left bottom,from(#EEE),to(#E0E0E0));
background: -moz-gradient(linear,left top,left bottom,from(#EEE),to(#E0E0E0));
background: -o-gradient(linear,left top,left bottom,from(#EEE),to(#E0E0E0));
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
border-color: #CCC;
color: #333;
}

The base is ready. Now to design the list that displays the options. For this i'll be using the html ul tag.

ul.list1{
font-family: inherit;
font-size:13px;
  width: 288px;
margin:0;
  background: rgb(249,249,249);
 border: 1px solid #d9d9d9;
cursor:default;
list-style-type: none;
padding-left: 5px;
padding-right: 5px;
 padding-top:4px;
}
ul.list1 li{
width: 288px;
height: 32px;
padding: 11px 0 0 0;
border-bottom: 1px solid #999;
}
ul.list1 li.last{
border: none;
}
ul.list1 li:hover{
background: #999;
background-size: 100%;
color: #fff;
}
#l1, #l2{
text-decoration:none;
}

Now with both the elements designed and ready, I'll animate the visibility of the list to imitate a drop-down menu.

$(".list1").hide();
$(".list1").focusout(function(){ $(this).hide();});

$(".cselect").click(function(){    
  if($(this).attr("state") == "")
  $(this).attr("state","selected");
  else if($(this).attr("state") == "selected")
  $(this).attr("state","");
  $(".list1").toggle();
   });

Now, for this to be included in a form, I'lll add an <input> tag with type="hidden" which will hold the value selected using the drop-down menu and submit it with the form.

<input type="hidden" id="hidval" name="tag">

Now to bind the input tag with the ddm so that it's value changes according to the selection.

function setvalue(id)
{
var v=$(id).text();
$(".cselect").attr("state","");
$(".cselect").html(v);
$("#hidval").val(v);
$(".list1").hide();
};

The HTML part for the base and the list goes like this:

<div class="cselect" state="">Custom Select</div>
<ul class="list1">
  <li id="l1" onClick="javascript: setvalue(this);" value="Choice1">Choice2</li>
  <li id="l2" onClick="javascript: setvalue(this);" class="last" value="Choice2">Choice2</li>
</ul>

The function setvalue() will be trigerred when a choice is selected which changes the value in the hidden input tag.

Hence the total code for the custom drop-down menu is:

<script type="text/javascript">
$(document).ready(function(){
$(".list1").hide();
$(".list1").focusout(function(){ $(this).hide();});
$(".cselect").click(function(){    
 if($(this).attr("state") == "")
 $(this).attr("state","selected");
 else if($(this).attr("state") == "selected")
 $(this).attr("state","");
 $(".list1").toggle();
 });
});
function setvalue(id){
  var v=$(id).text();
  $(".cselect").attr("state","");
  $(".cselect").html(v);
  $("#hidval").val(v);
  $(".list1").hide();
};
</script>
<style type="text/css">
.cselect{
height: 32px;
font-family:inherit;
font-size:13px;
margin-top: 20px;
width: 288px;
background: rgb(248,248,248);
border: 1px solid #d9d9d9;
padding: 14px 0 0 10px;
cursor:pointer;
}
.cselect:hover{
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0,0.15);
border-color: #999;
}
.cselect[state=selected] {
background: -webkit-gradient(linear,left top,left bottom,from(#EEE),to(#E0E0E0));
background: -moz-gradient(linear,left top,left bottom,from(#EEE),to(#E0E0E0));
background: -o-gradient(linear,left top,left bottom,from(#EEE),to(#E0E0E0));
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
border-color: #CCC;
color: #333;
}
ul.list1{
font-family: inherit;
font-size:13px;
  width: 288px;
margin:0;
  background: rgb(249,249,249);
 border: 1px solid #d9d9d9;
cursor:default;
list-style-type: none;
padding-left: 5px;
padding-right: 5px;
 padding-top:4px;
}
ul.list1 li{
width: 288px;
height: 32px;
padding: 11px 0 0 0;
border-bottom: 1px solid #999;
}
ul.list1 li.last{
border: none;
}
ul.list1 li:hover{
background: #999;
background-size: 100%;
color: #fff;
}
#l1, #l2{
text-decoration:none;
}
</style>
<div class="cselect" state="">Custom Select</div>
<ul class="list1">
  <li id="l1" onClick="javascript: setvalue(this);" value="Choice1">Choice1</li>
  <li id="l2" onClick="javascript: setvalue(this);" class="last" value="Choice2">Choice2</li>
</ul>
<input type="hidden" id="hidval" name="tag">

The custom Drop-Down Menu should work just fine with the above code.

Start Gaming...3D style!

Hi...we all like things that are 3D. I mean, we see things in 3D for real and expect our technology to deliver us the same experience, which is not unrealistic to expect.


That's why I guess the James Cameroon film "Avatar" was a big hit! Even the first post of this blog is based on 3D!


But the only thing we don't like about that stuff are those dorky-looking glasses we are required to wear! That means we cant exactly look at each others faces and gasp when we see something amazing in a movie. And they're dorky.

With the introduction of Samsung "3D" LED TVs, this will go most probably, but we still have to see how good (or bad) the experience is!


All this is good, but whoever in this world has ever thought of a 3D gaming console?? That too...wait for it...HANDHELD?? Actually one organization has already thought of the same and unveiled it also. Its the innovative Japanese again, with their company Nintendo releasing the "Nintendo 3DS".

That's supposed to give you the 3D experience- minus those glasses!


It was announced in March this year and officially unveiled at the Electronic Entertainment Expo 2010, just 4 days ago on June 15. It'll release probably during March next year.


Now Nintendo games aren't known for their graphics as much they are known for their gameplay (Eg:GBA games). We'll still have to see how this new experiment works, especially now that they have added touch-screen also. And the price (might) also be a factor, given that it might be priced at about US$300 compared to the US$150 for the Nintendo DS and US$100 for the GBA.


Things are too tight to predict anything now. 






Fingers crossed!