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

Posted on 2007-08-12
Medium Priority
Last Modified: 2013-11-19
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 ?

Question by:mychel_normandeau
  • 3
  • 2

Expert Comment

ID: 19680584
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...


Accepted Solution

jonathanmelnick earned 1500 total points
ID: 19680595
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';" />
LVL 18

Expert Comment

ID: 19682297
Jonathan is right you will need to use some javascript there is no pure CSS way to do this.
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Author Comment

ID: 19683996
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!

Author Comment

ID: 19684366
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...

Author Comment

ID: 19685959
Go it

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question