How do I create an expandable search menu?

[youngnelss]

Never done anything like this before but I'm trying to figure out the neccesary languages/technologies in this search menu

http://tv.blinkx.com/

I'm talking about the gray search box in the middle - not the black bar on top.

How would you go about creating a search box like this?

[megamoose]

There probably is an easier way to do this, but here's how I would do it.

Create a DIV for every letter

<div id="coxA">
 <a href="#">A random link</a>
</div>

<div id="coxB">
 <a href="#">B random link</a>
</div>

<div id="coxC">
 <a href="#">C random link</a>
</div>

Then create your search DIV

<div>
 Your menu<br>
 <a href="#" onClick="HideAll(); document.getElementById('coxA').style.display=''; ">A</a>
 <a href="#" onClick="HideAll(); document.getElementById('coxB').style.display=''; ">B</a>
 <a href="#" onClick="HideAll(); document.getElementById('coxC').style.display=''; ">C</a>
</div>

Then a javascript at the top of your page, something like:

function HideAll() {
document.getElementById('coxA').style.display='none';
document.getElementById('coxB').style.display='none';
document.getElementById('coxC').style.display='none';
}

Now this is so rough it probably won't work exactly, but you get the drift. Using jQuery as well could add some real nice effects to this such as the $('coxA').fadeIn

Have a wee look here:
http://docs.jquery.com/Effects