Здравствуйте, дорогие читатели thisis-blog.ru!
Сегодняшняя статья о том, как за несколько простых шагов сделать адаптивное меню, которое на устройствах с меленьким экраном превращается в выпадающее.
Когда у вас маленький экран (здесь показан экран iPhone), и вы нажимаете на выпадающий список, откроется интерфейс выбора пункта меню. Каждый пункт хорошо отображен и удобен для выбора.
Да, это два касания вместо одного, но и это спорно, т.к. вам вероятнее всего придется делать дополнительные касания для увеличения.
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
Оставить комментарий