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

Posted on 2007-08-12
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
    LVL 4

    Expert Comment

    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...

    LVL 4

    Accepted Solution

    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

    Jonathan is right you will need to use some javascript there is no pure CSS way to do this.

    Author Comment

    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

    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

    Go it

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System ( introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
    Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
    In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

    733 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

    Need Help in Real-Time?

    Connect with top rated Experts

    23 Experts available now in Live!

    Get 1:1 Help Now