7
Contributors
47
Replies
195
Views
4 Years
Discussion Span
Last Post by riahc3
Featured Replies
0

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

0

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.
http://lmgtfy.com/?q=mobile+menu+tutorial

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

0

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

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

http://www.menucool.com/tooltip/javascript-tooltip

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

0

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*/
select
{
    height: 20px;
}

/*specify the size of the image*/
option
{
    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*/
option.item1
{
    background:url('http://ecx.images-amazon.com/images/I/51quac7wzJL._SL75_SS50_.jpg') no-repeat;
}

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

}

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

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

}
option.item5
{
    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:

<select>
    <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>
</select>

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
0

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.

0

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?

0

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

0

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>';
                                            }
                                            else
                                            {
                                                selecthtml=selecthtml+'<option value="'+c+' data-image="icons/icon1.png">'+n+'</option>';
                                            }




                                        }  //end for

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

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?

0

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)

0

OK I got a live site working :)

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

0

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

0

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

0

Just change their example text to an img src.

further down 3 columns they have applied effects to pictures.

0

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.

[data-role="image"]{
visibility:hidden;
}

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

$('option').on('hover',(function(){
$('data-image').css('visibility','visible');
}); 

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.