Адаптивное выпадающее меню.

Здравствуйте, дорогие читатели thisis-blog.ru!

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

pesponsive-menu

Когда у вас маленький экран (здесь показан экран iPhone), и вы нажимаете на выпадающий список, откроется интерфейс выбора пункта меню. Каждый пункт хорошо отображен и удобен для выбора.

iphoneselect

Да, это два касания вместо одного, но и это спорно, т.к. вам вероятнее всего придется делать дополнительные касания для увеличения.

HTML код адаптивного меню.

На деле у вас будет 2 меню. Одно будет отображаться на больших экранах, соответственно другое на маленьких.

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 для адаптивного меню.

По умолчанию скроем меню с помощью display: none; . На самом дела это хорошо для доступности т.к. будет скрывать не нужное меню с экрана.

nav select {
display: none;
}

Затем, используя медиа запросы мы можем на определенную ширину экрана задать стили, которые нам нужно отобразить. Ширину можно выбрать ориентируясь на инструменты адаптивности из этой статьи.

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

Как сделать содержание обоих меню одинаковым?

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

С помощью jQuery мы можем сделать это просто с помощью нескольких строчек кода.

// Create the dropdown base
$("<select />").appendTo("nav");

// Create default option "Go to..."
$("<option />", {
"selected": "selected",
"value" : "",
"text" : "Go to..."
}).appendTo("nav select");

// Populate dropdown with menu items
$("nav a").each(function() {
var el = $(this);
$("<option />", {
"value" : el.attr("href"),
"text" : el.text()
}).appendTo("nav select");
});

$("nav select").change(function() {
window.location = $(this).find("option:selected").val();
});

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

Demo & Download

 ПОСМОТРЕТЬ ДЕМО                                СКАЧАТЬ ФАЙЛЫ

Видео Презентация работы

Источник: http://css-tricks.com/convert-menu-to-dropdown/
Автор: Chris Coyier

ПоделитьсяShare on Facebook1Share on VKShare on Google+0Tweet about this on TwitterShare on LinkedIn0Pin on Pinterest0

Добавить комментарий