Drop Down Menus!

Yes, those super crazy little drop down boxes that everyone seems to be oogling over. I'd be more than happy to show you how to use em'.

Incase you're lost on this one, a drop down menu (to show your interests, music, etc.) looks like this:



Okay, so I'm going to give you all ONE code for the drop down menu. Not 20 with different colors; I'm going to TEACH you how to change your colors, size, etc! So that way you don't feel so lost; and you have more control over your drop down menus!

Alright...here is the code:

<form name="ex2" method="POST"> <div align="center"> <select name="xfer" size="1" style="color:5e3816; background-color:fffd6e; font-family:trebuchet ms; font-size:11px; border:thin solid 5e3816";> <option>MENU ITEM #1</option> <option>MENU ITEM #2</option> <option>MENU ITEM #2</option> </select> </div></form>

Alrighty...so you've copied the code and you now see it comes out in the brownish-yellow color, correct? So you may either A.) Like it, okay, keep it...or B.) You want it to match your layout. In that case, read on:

COLOR OF TEXT/DROP DOWN MENU

Where it says "COLOR:5e3816;", the ACTUAL color of the TEXT is 5e3816. That is a HEX color code. You can view hex color codes here. Okay, so if you wanted your TEXT color to be black you would replace 5e3816 with 000000; So there, your text color would now be BLACK in the drop down menu.

COLOR OF THE BACKGROUND OF DROP DOWN MENU

Where it says "background-color:fffd6e;" that is where the "yellowish" background color is. You can change it the same way that you changed the text color. By using a color chart and finding the HEX value you would like. So if you wanted the background color to be WHITE, simply change the "fffd6e" to "FFFFFF". Then WAH-LAH! Your drop down menu is now BLACK lettering on a WHITE background. Good job. You can toy around with it as much as you'd like; to fit your layout, all funk and what not.

I want a different font on my drop down menu...

No problem. Remember in the myspace basics 2 where it was explained what Fonts could be used online? Well, so we shall replace!

Take the font-family:trebuchet ms; part of the code and replace "trebuchet ms" with the font of your choice (Arial, Georgia, Verdana, Times, Courier New). NOTE*** Downloaded fonts may not work at all/only be visible to those who have it as well, so it is recommended not to put in downloaded fonts.


Okay, so now you're done! Congratulations. ♥
AshBo!