Конвертация меню в выпадающий список

На сайте с адаптивным дизайном позволяется разрабатывать проекты, которые автоматически подстраиваются под любое устройство, на котором его проглядывают. При этом не теряется общая стилистика дизайна. А разработчик выкладывает меньше усилий, чтобы его сайт был удобным в использовании для всех браузеров.

Например, на мобильных устройствах, таких как iPod, проще выбирать необходимый пункт меню с помощью крупных надписей, прокручиваемых по вертикали, чем использовать мелкое горизонтальное меню.

Рассмотрим всю последовательность работы.
HTML
Для двух типов меню один код HTML не применяется. Элементам <select> и <option> не удастся установить стили так, чтобы они работали и выглядели как <a> и наоборот. Поэтому используем два варианта кода.

<nav>

<ul>
<li><a href="/" class="active">Home</a></li>
<li><a href="/collections/all">Books</a></li>
<li><a href="/blogs/five-simple-steps-blog">Blog</a></li>
<li><a href="/pages/about-us">About Us</a></li>
<li><a href="/pages/support">Support</a></li>
</ul>

<select>
<option value="" selected="selected">Select</option>

<option value="/">Home</option>
<option value="/collections/all">Books</option>
<option value="/blogs/five-simple-steps-blog">Blog</option>
<option value="/pages/about-us">About Us</option>
<option value="/pages/support">Support</option>
</select>

</nav>

CSS
Вариант меню <select> по умолчанию скрывается меню свойством display: none;. Данный подход выгодный в использовании для совместимости, а также для скрытия лишнего меню от пользователя.

nav select {
  display: none;
}

Теперь применяем медиа запрос, которому задаем ширину экрана:

@media (max-width: 960px) {
  nav ul     { display: none; }
  nav select { display: inline-block; }
}

Поддержка двух одинаковых меню
Если Ваше меню динамически генерируется, контролировать вывод достаточно сложно. Да и для менюшки, сделанную вручную, точно никто не может гарантировать точную синхронизацию двух вариантов.
Поэтому используем метод — динамическая генерация выпадающего меню из оригинального. jQuery позволяет решить такую задачу всего с помощью нескольких строчек кода:

$(function() {

      // Создаем основу для выпадающего списка
      $("
", {
         "selected": "selected",
         "value"   : "",
         "text"    : "Перейти к..."
      }).appendTo("nav select");

      // Наполняем выпадающий список пунктами меню
      $("nav a").each(function() {
       var el = $(this);
       $("", {
           "value"   : el.attr("href"),
           "text"    : el.text()
       }).appendTo("nav select");
      });

	   // чтобы выпадающий список дейстивтельно работал
     $("nav select").change(function() {
        window.location = $(this).find("option:selected").val();
      });

});

Примите во внимание, что большинство современных мобильных устройств, благосклонны к использованию JavaScript.