4 Years
Discussion Span
Last Post by riahc3
Featured Replies

I imagine it would be done with CSS and Javascript, thank you for confirming :) but my question is HOW; What library or tool can I use to accomplish this?

Thank you


Nowhere in your original question do you mention that you want to use a library or a tool, so maybe it would be good to include that next time.

Try jQuery mobile: http://jquerymobile.com/themeroller/

if you do a simple search, you will get tutorials on how to make one.

Im sorry.

But I didnt say that I wanted to do this for a mobile either. I want it to be for a desktop. I simply want a combobox filled with small thumbnails and text using the most simple method (which would be a library or/and tool).

i dont think jQuery Mobile is what I want and I dont want a menu for mobile....


Well, you could create your own. It's just html and css after all.

I'd liken it to a very fancy hovertip...


No time, nor knowledge, nor even wanting to do that.

I will try to use the library pritaeas and I found but even that looks a bit complicated: It works good for static images (images you predefine and add) but for dynamic ones I dont know..


This can be done purely with CSS if it's just a drop-down menu. The <option> tag doesn't allow <img> tags to be nested in but you can use the CSS backround option. My below example assumes that each item has a different image and I'm using random cat images I found on Google in the example.

Put this in your CSS:

/*Required to make the drop-down menu box size stay normal and not increase*/
    height: 20px;

/*specify the size of the image*/
    padding-left: 50px; /*This needs to match the width of the image*/
    height: 50px; /*This needs to match the height of the image*/

/*Specify the image for each item and ensure it doesn't repeat*/
    background:url('http://ecx.images-amazon.com/images/I/51quac7wzJL._SL75_SS50_.jpg') no-repeat;

    background:url('https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/373022_109028169156820_1762275121_q.jpg') no-repeat;


    background:url('http://static.zsl.org/images/width50/tabby-cat-cat-map-13274.png') no-repeat;

    background:url('https://profile-b-ord.xx.fbcdn.net/hprofile-frc3/373166_211062615614589_1144510708_q.jpg') no-repeat;

    background:url('https://profile-a-sea.xx.fbcdn.net/hprofile-prn2/186922_1140912124_762827619_q.jpg') no-repeat;


You then just need to add the classes to each option:

    <option class="item1">Test item 1</option>
    <option class="item2">Test item 2</option>
    <option class="item3">Test item 3</option>
    <option class="item4">Test item 4</option>
    <option class="item5">Test item 5</option>

Remember to include your name/id and other attributes alonside the class. I've never tried making it a grid view though so not sure if that would be possible but if I have time, I'm going to try.

Votes + Comments
Non dynamic

Borzoi, I understand your code but the problem is that there can be 1 item o r 999999999 items. I cant declare a style in CSS for each of them.

Also the url is NOT a static URL. It changes names.

Thats the main problem, I think.


You can specify the CSS as an inline style.

I hate web development but AFAIK inline style declares a element style that depends on the previous element style, right?


No. Where'd you get that? It follows the same rules as regular CSS.

OK, I reread and it seems makes the element blend in with HTML code but thats it. Its 821AM so sorry...


Wow this is going to take some tinkering....

From a related to this thread: I have this code:

                               var selecthtml='Things: <select name="d" id="d">'

                                    for (var i=0;i<data.length;i++)
                                        {    //start for  

                                            var r = data[i];          
                                            var n = r[0]; 

                                            var c = r[1]; 

                                            if (i==0)
                                                selecthtml=selecthtml+'<option value="'+c+' data-image="icons/icon1.png" selected="selected">'+n+'</option>';
                                                selecthtml=selecthtml+'<option value="'+c+' data-image="icons/icon1.png">'+n+'</option>';

                                        }  //end for

                                        selecthtml=selecthtml+'<option value="Default">Default</option>';

This is part of the code; Lets not point out missing ; or commas or somethign missing to actually make this work.

As you can see I have added a data-image parameter. When I load up the page, it gives me a http://testsite.dev/null/icon1.png not found. I have no idea where it gets that null from (well I do from the code below) but ok.

Using Firebug, I discover that the select was dynamically generated the following form:

<option icon1.png"="" icons="" value="c data-image=">n</option>

n is correct but something stranged happpened with the rest. What the hell happened with data-image???

What can be happening?


Sorry, I'd help, but I need a live site that I can see (even just a test site, as long as it's available to look at)


OK I got a live site working :)

I gotta PM it to you though as it is private...


You have a PM :) There you see the resulting of the code not working correctly.


Sorry John_44 what I ment was a drop down combobox, not navigation menu.


Just change their example text to an img src.

further down 3 columns they have applied effects to pictures.


How about using the HTML5 data-image="icons/icon1"
data-image="icons/icon2" etc
and then in your external css set the visibility to hidden.


then using jquery set the visibility to visible when it is hovered over.


Edited by piers: wrong selector entered first time

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.