Welcome to WebmasterWorld Guest from 54.162.227.136

Forum Moderators: incrediBILL

Message Too Old, No Replies

Making Reactive Drop Down Link Menus

     
9:36 pm on May 5, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



What is the secret to making form drop down lists that immediately take you to the link you choose when you release the mouse button (without having to click "submit")?

Also, can it be done in a search engine friendly way?

11:10 pm on May 5, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Done in javascript (e.g. using the onchange event), hence not search engine friendly. To make it search engine friendly, you could include a <noscript> tag containing all the <a ...> links corresponding to each of the options in the drop-down.

Shawn

8:28 am on May 6, 2003 (gmt 0)

10+ Year Member



Here is the non-SE friendly version:

<form>
<SELECT name="SELECT" onchange="window.location=this.options[this.selectedIndex].value;">
<OPTION value="">Site Menu....
<OPTION value="">-----------------------
<OPTION value="home.html">Home Page
<OPTION value="photo.html">Photo Galleries
<OPTION value="links.html">Links
</SELECT>
</form>

I would suggest you put simple text links elsewhere on the page, like at the bottom - not only for SEO, but for the few users who keep Javascript disbaled.

8:51 am on May 6, 2003 (gmt 0)

10+ Year Member



Doesnt Google not like <noscript> tags however because I noticed a few months ago that google dropped a load of listing because of the <noscript> tag..!
3:13 pm on May 6, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



That works great. I have a shopping cart where the customer has to select 4 options and it makes it much easier for the customer now. Thanks for your help.

For other uses it would be cool to have a search engine friendly version, so if anyone knows, I hope you'll give me a hint.

3:20 pm on May 6, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Is there a way to pass variables using the above javascript example?

If not, that messes up my plan.

11:55 pm on May 7, 2003 (gmt 0)

10+ Year Member



You should be able to pass variables from a form, if the drop-down is inside of it, by changing the code to something like:

.. onchange="document.forms[0].action=this.value;document.forms[0].submit();"

Or if it's just one or two variables, you can put them in the querystring:
[Serverside variable]

.. onchange="location.href=this.value+'?inputVar=<%= serverVar %>';"

[Javascript or DOM variable]

.. onchange="location.href=this.value+'?inputVar='+document.getElementById('myVarToPass');"

If that's even close to what you need, hope it helps a little..
g.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month