We help IT Professionals succeed at work.

CSS user interface : drop down menu / combo box / list box

My website supports multiple languages. On my template I want to allow the user to change the current language.

I want to display a picture within my web interface (à la Windows Language bar - a small icon with EN within it for english, FR for french...). When the user click the image, I want a list (like a combo box) to appears. Ideally I want this list to have images in it. I don't want to use JavaScript (is that possible?).

How can I achieve this ?

Watch Question

Though it is possible to use the CSS :hover selector to achieve ~effects with only the use of CSS, you can only use the hover (mouseover) event and it can get tricky...

You will need a few lines of javascript to handle the displaying/hidding of the combox box upon clicking...

Or you could simply set the combox box css to "display:none", and then use the onclick handler in your img clause :

<div id="comboboxContainer">

<img src="mypic.png" onclick="javascript: document.getElementById('comboboxContainer').style.display='block';" />
Jonathan is right you will need to use some javascript there is no pure CSS way to do this.


OK, I feared that JavaScript was required for that... I can live with it.

Is there a complete example somewhere where I can find this? Thanks!


I managed to make the interface changes from jonathanmelnick's example.

Now I would like to know ho do I fire PHP from an A IMG ? To change the current language...


Go it

Explore More ContentExplore courses, solutions, and other research materials related to this topic.