I want to have a drop down menu showing small thumbnail pictures and text in a "smartphone like" grid.

What can I use to accomplish this? Thank you

Recommended Answers

All 47 Replies

Member Avatar


However most people will use JavaScript and CSS.

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.

commented: Non dynamic -1

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.

What is the best way to implement this?

You can specify the CSS as an inline style.

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.

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

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

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


I reread this thread and MAYBE was going to show the image with a tooltip but I see comboboxes dont have tooltips...

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?

Any ideas?

Well, ideas or things you need to help me out :)

Thank you

Member Avatar

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.

How could I do the pictures?

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.