Каков наилучший способ сделать меню переходов (выпадающий список HTML)?

Question

Каждый <option> в HTML <select> будет иметь внешний URL и должен открываться в новом окне. Если возможно сделать только в CSS и HTML, то хорошо, если невозможно без JavaScript, это должно быть ненавязчиво.

Answer 1

«Меню перехода» - это дискредитированное навигационное устройство, созданное много лет назад, и его не следует возвращать.

Авто-навигация при изменении <select> меню не подходят для навигации, потому что:

1. пользователи клавиатуры будут запускать событие изменения при каждом перемещении выделения, что делает невозможным использование элемента управления;

2. агенты, не относящиеся к JavaScript (включая поисковые системы), не смогут видеть или переходить по ссылкам;

3. Значения формы сохраняются при переходах назад / вперед страницы, что делает выбор отображать неправильное значение после навигации, делая невозможным повторный выбор того же параметра;

4. пользователи не могут использовать обычные навигационные инструменты своего браузера, такие как средний щелчок, «открыть на новой вкладке» или «ссылка на закладку».

Поэтому «лучший» способ создать меню перехода - это не делать. Если вы хотите что-то, что ведет себя аналогично, но не имеет этих недостатков, перейдите на <div>, который скрыт и снова появляется в JavaScript, содержащий простые <a> ссылки, указывающие на страницы, на которые они переходят. Вы можете сделать так, чтобы он выглядел как выпадающий список, если вы действительно хотите, и вы можете сделать так, чтобы они открывали новые окна при щелчке левой кнопкой мыши, если нужно (хотя я бы хотел, чтобы вы этого не сделали).

Answer 2

Вы не можете открывать ссылки из <select> элементов без Javascript. Способ открыть новое окно с помощью Javascript выглядит следующим образом:

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

Чтобы прикрепить к элементу <select>, попробуйте следующее:

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

Предполагается, что URL установлен в атрибуте value каждого элемента <option>.