May 21, 2006

Drop Down Menus

The first step to creating the dropdown menus seen at the top of this page was to add what CSS calls a "selector". this will define the properties of the dropdown. The code below was added to the style section of the template between the:
<style type="text/css"> tag and the </style> closing tag.

.dropdown {
font-family: arial;
font-size:10px;
font-weight: 500;
color: #000000;
width:140px;
background-color: #FFFFFF;
}

Then for each of the dropdown menus the following code was added below the header with the descriptions and links that you find at the top of the page. (Tip: you can view the page source and template with the Ctrl+U keys. You should be able to find the location of the blogatech dropdowns this way.)

<form name="linksmenu">
<select name="url" size="1" class="dropdown" onChange="location = this.options[this.selectedIndex].value;">
<option selected> DISPLAYED TITLE </option>
<option value="ADDRESS OF LINK ONE ">LINK ONE</option>
<option value="ADDRESS OF LINK TWO">LINK TWO</option>
</select>
</form>

You can add as many option lines as you want and you will have to change the above to the URL link and discriptions that you want.

The above code will create this dropdown:



Unfortunitly you can not change the standard gray color of the arrow or the outline color of the dropdown but you can change the background color by simply changing the color# in the background line of the .dropdown selector. You can find a list of HTML color codes here.

6 comments:

cool_78 said...

hi! love your tips. I was wondering is there a way for your dropdown menus to open in a new window and when you select an item it will not immediately go to the link? You have to double click on it for to go to a new window

ericat said...

the information is overwhelming. I feel a bit cramped in the mid region. I take it you done that on purpose?

Stratman said...

I've only done it on purpose in that I have to pack a lot of information into a small space because of the subject matter. Most blogs would not have all these examples of addon content.

I could expand the width of blogatech but I have chosen to keep it within the width of lower resolution monitors. Even though I have a large screen monitor powered by a rocket launcher of a cpu, some don't.

Arti Honrao said...

Hi! The drop down menu works good at my blog, the only problem is that it loads in same window :(
Is there any way to make it load in new window?


Any help much appreciated
Thanks in advance



GBU
Arti
Straight From The Heart

Stratman said...

I have looked all over and have not seen a simple way to do it. You can do it by adding a go button.

Checkout this generator, it lets you specify what window to open the link in and makes it easy to create dropdowns with a go button.

http://www.ricocheting.com/js/drop.html

Zaheer Abbas said...

Hey

Awsome tips....

Great work

"Z"