JUMP MENU - How To Jazz It Up?

Hi there,

Here is a sample code of my jump menu i made up in dreamweaver.

<form name="form1">
<select name="sitenavigation" onchange="MM_jumpMenu('parent',this,1)">
<option value="#" selected="selected">Main Site</option>
<option value="#">About Us</option>
<option value="#">Portfolio</option>
<option value="#">Services</option>
<option value="#">Contact Us</option>
<option value="#">Forum</option>
<option value="#">Shop</option>
<option value="#">Service Areas</option>
<option value="#">Link To Us</option>
<option value="#">F.A.Q</option>
<option value="#">Service Quote</option>
<option value="#">Join Us On Myspace</option>
<option value="#">Join Us On Facebook</option>
<option value="#">Models</option>
<option value="#">Advertise With us</option>
</select>
</form>

PROBLEM:

My problem is when i add the above code to my website, there's no tie in to the site. When i click on the jump menu, background is white and text is plain - this doesn't match my site which brings down the quality of my website...Not good.

So my question is is there away to alter the code to add a coloured background, and perhaps change the text to a different font, maybe even alter the size of the text?

This would help me alot, thanks.

Plus it's important that code changes be cross-browser friendly. I don't want something that only works in IE but not Firefox.

Thanks for the help

Rob

Doesn't anyone know?

You need to be patient. Threads can take up to days to be answered.

You can make a single drop down menu

http://www.alistapart.com/articles/dropdowns

or you can look into using Nice Forms (http://www.badboy.ro/articles/2007-01-30/niceforms/).

The last solution requires JS to work. The first one doesn't. Well it does but its only a sprinkle for IE6. Using the second will allow it to degrade gracefully so it still works but then again your menu won't even work without JS. At least with the first one users can still see the links.

http://acomment.net/9-top-css-essential-skills-that-every-web-designer-should-learn/299
Look at #5 - Styling Forms

It is basically the same thing as Aerospace

Use CSS....Check out my jump menus.

http://www.stubby.ca/index.php

http://www.camerarov.com/




-------

Use CSS....Check out my jump menus.

http://www.stubby.ca/index.php

http://www.camerarov.com/




-------

I still don't see from observing your source code how your jump menu has been coloured to match your site?

Is it a simple case where i won't actually see the coloured jump menu until i upload my page onto the server?
Or should you still see the colour change when previewing in dreamweaver?

Do not double post.

Download FireFox. Download the extensions Firebug and Web developer toolbar. This will show you the classes for every item you hover over. This will make styling with CSS easier.


<form style="background: black; color: white;">
</form>

I still don't see from observing your source code how your jump menu has been coloured to match your site?

When you check the source code also check for the location and name of any external CSS files, you then can view the CSS code in the browser. Usually it will be style.css in the same folder as the index file.

<link rel="stylesheet" href="style.css" type="text/css">

-----------------------------------------------------------------------------------





index.php

<select name="menu" class="color" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;">

style.css
.color {
background-color: #000000;
color: #B4873A;
font-size: 18px;
}


-----------