Dropdown menu with icons?

allworknoplay · 02-28-2009, 12:36 AM

hey guys,

looking to see if anyone knows how to do this. I've been seeing some site use dropdowns but along with the text, it also has icons.

The icons are usually small, I'd assume they were around 16x16 or maybe even 20x20, but does anyone know how to include images in a drop down? the format is below:

Dropdown Menu
-------------
[icon] Link#1
[icon] Link#2
[icon] Link#3

Orc · 02-28-2009, 12:50 AM

Quote:

Originally Posted by allworknoplay

hey guys,

looking to see if anyone knows how to do this. I've been seeing some site use dropdowns but along with the text, it also has icons.

The icons are usually small, I'd assume they were around 16x16 or maybe even 20x20, but does anyone know how to include images in a drop down? the format is below:

Dropdown Menu
-------------
[icon] Link#1
[icon] Link#2
[icon] Link#3

What I do is get the mouse position, and just position the dropdown menu to the x and y corridinates of the mouses current position, which is also called events, then I check if its displayed or not, and change that, besides that the contents of the drop down element is formated the way it should be, and that's about it.

The icons are probably from FamFamFam

allworknoplay · 02-28-2009, 12:59 AM

Quote:

Originally Posted by Orc

What I do is get the mouse position, and just position the dropdown menu to the x and y corridinates of the mouses current position, which is also called events, then I check if its displayed or not, and change that, besides that the contents of the drop down element is formated the way it should be, and that's about it.

The icons are probably from FamFamFam

Ok you completely lost me, but I'm glad you sent me that link, I've never seen that site before but looking at it quickly looks like a fun site to scour around...

I'll be taking a look at it...thanks!

Orc · 02-28-2009, 01:02 AM

Quote:

Originally Posted by allworknoplay

Ok you completely lost me, but I'm glad you sent me that link, I've never seen that site before but looking at it quickly looks like a fun site to scour around...

I'll be taking a look at it...thanks!

It's a site where you can get a large variety pack of icons.

WildHoney uses it on WiredFlame.

allworknoplay · 02-28-2009, 01:08 AM

Quote:

Originally Posted by Orc

It's a site where you can get a large variety pack of icons.

WildHoney uses it on WiredFlame.

I'm seeing a "UK" theme around here...is everyone from the UK?

Orc · 02-28-2009, 01:15 AM

Quote:

Originally Posted by allworknoplay

I'm seeing a "UK" theme around here...is everyone from the UK?

I don't understand?

allworknoplay · 02-28-2009, 01:17 AM

Quote:

Originally Posted by Orc

I don't understand?

It's just a joke, it just seems like a lot of the members here are from the U.K.

Wildhoney · 02-28-2009, 01:55 AM

It is as simple as the following code. Albeit Internet Explorer doesn't play so nicely so that would require more of a hack.

css Code:

select option
{
    background-repeat: no-repeat;
    background-position: 3px center;
    padding-left: 25px;
}

select option#ar { background-image: url('ar.gif'); }
select option#be { background-image: url('be.gif'); }
select option#en { background-image: url('en.gif'); }
select option#fr { background-image: url('fr.gif'); }

Using this HTML code:

html4strict Code:

<select>
    <option id="ar">Argentina</option>
    <option id="be">Belgium</option>
    <option id="en">England</option>
    <option id="fr">France</option>
</select>

Wildhoney · 02-28-2009, 01:57 AM

! Hehe. Yes, I think many of us are from the UK. Where are you from again?

allworknoplay · 02-28-2009, 02:01 AM

Quote:

Originally Posted by Wildhoney

It is as simple as the following code. Albeit Internet Explorer doesn't play so nicely so that would require more of a hack.

css Code:

select option
{
    background-repeat: no-repeat;
    background-position: 3px center;
    padding-left: 25px;
}

select option#ar { background-image: url('ar.gif'); }
select option#be { background-image: url('be.gif'); }
select option#en { background-image: url('en.gif'); }
select option#fr { background-image: url('fr.gif'); }

Using this HTML code:

html4strict Code:

<select>
    <option id="ar">Argentina</option>
    <option id="be">Belgium</option>
    <option id="en">England</option>
    <option id="fr">France</option>
</select>

I sooooo hate IE...it never plays nicely with anything!!

You have no idea how many times I design something, check it out in FF...wrap it up, call it a day, and say, "oops I forgot to try this in IE.."

Low and behold, it won't look right in IE....

Quote:

Originally Posted by Wildhoney

! Hehe. Yes, I think many of us are from the UK. Where are you from again?

I am from New York....

allworknoplay · 02-28-2009, 02:03 AM

BTW, thanks for the dropdown code, I will try it out tonite...

Orc · 02-28-2009, 02:43 AM

IE8 seems to get the standards right this time. ;p

allworknoplay · 03-14-2009, 05:16 PM

Quote:

Originally Posted by Orc

IE8 seems to get the standards right this time. ;p

That may be, but what else will they introduce that will conflict with the so called "standards"....

It will forever be an ongoing battle between FF and IE.

It's always apples to oranges, oranges to apples....

Perhaps one day we'll finally just get apples to apples....