Hello
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
riahc3 50 Â Team Colleague
stbuchok
CSS
However most people will use JavaScript and CSS.
riahc3 50 Â Team Colleague
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
stbuchok
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
riahc3 50 Â Team Colleague
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....
riahc3 50 Â Team Colleague
I made a VERY CHEESY drawup of what I want the menu to look like and the actual interface it will be used in.
This is the type of menu I want where you see icons and text.
pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
riahc3 50 Â Team Colleague
This one perhaps?
I actually found this one before making the thread. It looks OK, not the best quality, but.... I would have perfered grid but if there is nothing else....
iamthwee
Well, you could create your own. It's just html and css after all.
I'd liken it to a very fancy hovertip...
riahc3 50 Â Team Colleague
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..
Borzoi 24 Posting Whiz
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.
riahc3 commented: Non dynamic -1
riahc3 50 Â Team Colleague
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.
riahc3 50 Â Team Colleague
What is the best way to implement this?
pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
You can specify the CSS as an inline style.
riahc3 50 Â Team Colleague
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?
pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
No. Where'd you get that? It follows the same rules as regular CSS.
riahc3 50 Â Team Colleague
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...
riahc3 50 Â Team Colleague
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...
riahc3 50 Â Team Colleague
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?
riahc3 50 Â Team Colleague
Any ideas?
riahc3 50 Â Team Colleague
Well, ideas or things you need to help me out :)
Thank you
stbuchok
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)
riahc3 50 Â Team Colleague
OK I got a live site working :)
I gotta PM it to you though as it is private...
riahc3 50 Â Team Colleague
You have a PM :) There you see the resulting of the code not working correctly.
riahc3 50 Â Team Colleague
Sorry John_44 what I ment was a drop down combobox, not navigation menu.
John. 0 Newbie Poster
Yes, ie creating a 1 dropdown menu.
You can add html selectors etc to this.
Have a look at http://nettuts.s3.amazonaws.com/819_megamenu/demo/index.html
and 3 columns.
The grid at top would be exactly
small thumbnail pictures and text in a "smartphone like" grid
riahc3 50 Â Team Colleague
How could I do the pictures?
John. 0 Newbie Poster
Just change their example text to an img src.
further down 3 columns they have applied effects to pictures.
piers 8 Junior Poster in Training
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');
});
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.