What is the best way to make a transition menu (HTML drop down menu)?

Question

Each <option> in the HTML <select> will have an external URL and should open in a new window. If this can be done in CSS and HTML only then is it good, if this is not possible without JavaScript, then this should be unobtrusive.

Answer 1

The Transition Menu is a discredited navigation device many years ago that does not need to be returned.

The "Auto-navigate-on-change" <select> menus are unsuitable for navigation because:

• keyboard users will trigger a change event each time they move the selection, making it impossible to use the control;

• agents without JavaScript (including search engines) will not be able to see or follow links;

  Form Values

• they are saved for navigation back and forth through the pages, making a choice, displaying the wrong value after navigation, which makes it impossible to repeat the selection of the same option;

• users cannot use the usual browser navigation tools, such as the middle click, to open bookmarks in a new tab or link.

Therefore, "the best way to make the jump menu is wrong. If you want something that behaves the same but does not have these shortcomings, go to the <div> , which is hidden and re-popped using JavaScript containing simple <a> links, indicated on the pages that they go to. You can create it to look like a drop-down list if you really want it, and you can make them open new windows when you left-click if you need (I would like you to didn’t).

Answer 2

You cannot open links from <select> elements without Javascript. The way to open a new window with Javascript is as follows:

 window.open("http://example.com"); 

To connect to the <select> element, try the following:

 $('#selectId').change( function() { window.open( $(this).val() ); } 

Assuming the URL is set in the value attribute for each <option> element.