Преобразование списка навигационных ссылок в раскрывающееся меню

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

Например, вот как на текущий момент выглядит любая страница сайта And the winner isn’t., имея лишь шесть ссылок на другие страницы, при загрузке в небольшой по размеру области просмотра (рисунок 9.11).

Навигационная панель сайта частично скрывается на небольшом экране.

Я хотел бы сделать так, чтобы список этих ссылок заменялся раскрывающимся меню, но только если ширина области просмотра в браузере окажется меньше определенной величины. Вы можете добавить собственный JavaScript-код для преобразования ссылок в элементы раскрывающегося меню. Почтенный Крис Койер написал статью о том, как этого можно добиться (http://css-tricks.com/convert-Menu-to-dropdown/). В качестве альтернативы вы можете прибегнуть к уже готовым сценариям, которые сделают эту работу за вас. Ради краткости и простоты я решил воспользоваться одним из таких сценариев. На рисунке 9.12 показано, как все будет выглядеть после преобразования списка наших навигационных ссылок в раскрывающееся меню в меньших по размеру областях просмотра.

Вместо перечня ссылок появилась кнопка.

После нажатия кнопки Select a page (Выбрать страницу) на экране отобразятся навигационные ссылки, как показано На рисунке 9.13.

Нажав кнопку, можно выбрать нужную страницу.

Это отличный пример прогрессивного улучшения. Конечно, это не самая важная функциональность, однако она обеспечивает больше видимого без прокрутки содержимого для пользователей в меньших по размеру областях просмотра. Итак, реализуем ее. Прежде всего скачайте сценарий Responsive Menu (https:// github.com/mattkersley/Responsive-Menu). Как и ранее, сохраните соответствующий файл (jquery. mobilemenu. js) в папке js. Сначала нужно в разметке снабдить идентификаторами наши навигационные ссылки на каждой странице:

<nav role="navigation">

<ul id="mainNav">

<li><a href="why. html">Why?</a></li>

<li><a href="offline. html">Offline</a></li>

<li><a href="redemption. html">Redemption</a></li>

<li><a href="video. html">Videos/clips</a></li>

<li><a href="quotes. html">Quotes</a></li>

<li><a href="3Dquiz. html">Quiz</a></li>

</ul>

</nav>

Мы смогли бы не делать этого, однако jQuery-селекторы работают намного быстрее, если указать идентификатор, на который они смогут ориентироваться. Теперь добавим в файл conditional. js следующий код:

Modernizr. load ([

{

Test: Modernizr. mq (‘only all’), nope: ‘js/respond. min. js’

},

{

// загрузить преобразователь меню, если значением max-width будет 600px; test: Modernizr. mq (‘only screen and (max-width: 600px)’), yep: [‘js/jquery-1.7.1.js, ‘js/jquery. mobilemenu. js’], complete: function () {

// Выполнить это после того, как все в данной группе будет загружено // и выполнено, равно как и во всех предыдущих группах $(document). ready (function (){

$(‘#mainNav’). mobileMenu ({switchWidth: 600,  //  ширина  в  пикселах,  при  которой

// должно осуществляться // преобразование topOptionText: ‘Select a page, // текст первого параметра indentString: ‘&nbsp;&nbsp;&nbsp;’ // строка для задания отступов между

// вложенными элементами

});

});

}

}

р;

После предыдущей условной загрузки, при которой добавляется Respond. js для устаревших версий Internet Explorer, мы указали новый тест:

Test: Modernizr. mq (‘only screen and (max-width: 600px)’),

В этом тесте мы поставили вопрос о том, поддерживает ли браузер медиазапросы, и если да, то составляет ли максимальная ширина области просмотра в нем 600 пикселов. Если он их поддерживает.

Yep: [‘js/jquery-1.7.1.js, ‘js/jquery. mobilemenu. js’],

Приведенная выше строка обеспечивает загрузку как библиотеки jQuery, так и файла Responsive Menu:

Complete: function () {

….еще код™

В секции complete говорится, что, как только все файлы будут загружены и выполнены, необходимо сделать следующее:

$(document). ready (function (){

$(‘#mainNav’). mobileMenu ({switchWidth: 600, // ширина в пикселах, при которой должно осуществляться преобразование topOptionText: ‘Select a page, // текст первого параметра indentString: ‘&nbsp;&nbsp;&nbsp;’ // строка для задания отступов

// между вложенными элементами

});

});

Это переменные для сценария Responsive Menu. Первая и самая важная определяет, при какой ширине области просмотра мне требуется преобразовать существующее меню в раскрывающееся (я задал, что это должно произойти при ширине 600 пикселов).

Опять-таки использование Modernizr для выполнения этого задания позволяет избежать применения дополнительного кода для браузеров пользователей, которые в нем не нуждаются, а также дает возможность обеспечить прогрессивное улучшение пользовательского взаимодействия для тех, которым этот код необходим.

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