Javascript Easy Selector Menu Tutorial

Adding a quick Javascript select & option menu

Sticky Note Free Javascript
Javascript selection drop down using form <select> and <option> code for automatic link redirection. Copy and paste the code as outlined below. Works in HTML5, HTML 4.01 and responsive websites.

See Also…


Step #1: Add code to the head section
Copy the following code and add it just above the </head> in your HTML webpage(s):

Note: This script can optionally be added globally to your Allwebco template by placing the above script near the top of your "javascripts.js" and removing the opening and closing <script> tags (does not work in templates with jQuery includes, see section below).

Step #2: Add menu HTML code
Copy the code below and paste it anywhere into the <body> section of your HTML webpages, or in your "sidebar.htm" if your template has one (see notes below). The script can optionally be added to global .js files (menu, sidebar, header or footer). Adding to a .js file is more involved and is recommended for more experienced HTML programmers (see notes below).

Copy and paste any link line to add another link:

<option value="services.htm">Our Services</option>

Adding the menu to a .js file
If you are adding the menu to a .js file (sidebar.js, menu.js, etc.), still do step #1 above just as outlined in each of your HTML pages. For step #2, add the code to the .js file, remove the top note, and place document.write(' in front of every line and '); at the end of every line. Also see the add to .js files support page.

Adding to an IFrame sidebar.htm
Do the steps as normal above adding all code to the "sidebar.htm" as long as your "sidebar.htm" is not in the "includes" folder.

Adding to a sidebar.htm "include"
If adding this script to a "sidebar.htm" that is inside an "includes" folder, just add the step #1 <head> code to the top of the "sidebar.htm". There is no <head> section in jQuery "include" files.

Using absolute css to re-locate it
You can use css "position absolute" code to place the selector menu anywhere on your HTML pages. See: css locate DIV tutorial.

Related Topics:
Editing Template Menus
Adding Drop Down Menus