Одна из самых больших проблем в адаптивном веб-дизайне — заставить ваши меню функционировать. Если вам когда-нибудь приходилось с этим возиться, вы понимаете, о чем я говорю. Вы можете использовать медиазапросы для определения CSS, который применяется, когда размер экрана различен, но иногда вам требуется дополнительная функциональность, чтобы реализовать идеальный дизайн.
Что такое дизайн мобильного меню?
Дизайн мобильного меню — это просто создание адаптивного дизайна, соответствующего размерам экрана мобильного телефона. Одной из основных концепций адаптивного веб-дизайна является постоянный доступ ко всему контенту на всех экранах. Не менее важно, что мы хотим публиковать контент только один раз, а не создавать «мобильную версию» нашего контента .
Таким образом, важно создавать адаптивные меню, которые допускают множество пунктов меню, которые работают во всех сценариях с размерами экрана.
Зачем использовать мобильный дизайн меню?
Большие и даже не очень большие навигационные меню занимают много места на маленьком экране. В идеале, вы можете сжать пункты меню, а также сделать их удобными в использовании. Слишком маленький, и пользователь не может видеть их или может изо всех сил нажимать на кнопки. Слишком большой, и мы заставляем наших пользователей прокручивать, прокручивать и прокручивать еще немного.
Таким образом, дизайн мобильного меню становится важной задачей юзабилити.
Один из методов дизайна мобильного меню
Мне нравится сворачивание меню в выпадающее меню. Это становится все более популярным, и пользователи обычно могут быстро найти меню и разобраться в нем. Раскрывающиеся меню также позволяют сэкономить много места. Они позволяют вам организовать практически бесконечное количество элементов в небольшой части экрана — просто нажмите и прокрутите ваши варианты.
TinyNav.js для быстрого дизайна мобильных меню
Говоря о мобильном дизайне, одним из соображений является количество кода, который пользователь должен загрузить. Вы можете создать огромное количество функций и создать раздутый сайт, если не будете осторожны, поэтому очень важны небольшие размеры файлов.
Одним из решений, которое я нашел, является TinyNav.js, который представляет собой небольшой файл JavaScript (433 байта), который автоматически преобразует пункты меню в раскрывающееся меню. Он подключается к jQuery, который является еще 30-100k, в зависимости от того, какую версию вы используете.
TinyNav.js прост в реализации и может управляться с помощью медиа-запросов, поэтому он свернет ваши пункты меню только тогда, когда он объявлен в рамках определенного вызова медиа-запроса.
Установка TinyNav.js на WordPress
Если у вас есть сайт WordPress, есть плагин TinyNav.js WordPress — просто установите плагин, настройте медиазапросы , и все готово. Это займет всего лишь несколько минут.
На самом деле есть некоторые темы, которые уже включают TinyNav.js в свое ядро. Это становится все более популярным решением — настолько, что я ожидаю, что TinyNav.js будет включен в качестве базовой функции в будущих выпусках WordPress или, как минимум, как часть темы TwentyEleven.
Реализация TinyNav.js самостоятельно
Ниже я создал простую реализацию TinyNav.js, чтобы показать вам, как вы можете встроить инструмент практически в любую среду. Я сделал двухстраничный сайт — «Дом» и «О нас» — который отзывчивый. Если вы уменьшите размер экрана, меню уменьшится.
Вот код home.html для вашей загрузки и экспериментов:
[sourcecode language = ”html”]
TinyNav.js Демо
<script type = «text / javascript» src = «http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js»> </ script> <script type = «text / javascript» SRC = «tinynav.min.js»> </ SCRIPT>
<script type = «text / javascript»> // <! [CDATA [
$ (function () {
$ ( «# Нав») tinyNav ().
});
//]]> </ script> </ pre>
<h1> TinyNav.js Demo! </ h1>
<div id = «navcontainer»>
<ul id = «nav»>
<li class = «selected»> <a href=»home.html»> Главная страница </a> </ li>
<li> <a href=»about.html»> О программе </a> </ li>
<li> <a href=»#»> Пункт меню </a> </ li>
<li> <a href=»#»> Пункт меню </a> </ li>
<li> <a href=»#»> Пункт меню </a> </ li>
<li> <a href=»#»> Пункт меню </a> </ li>
</ UL>
</ DIV>
<h2> Вот пример домашней страницы. </ h2>
<Предварительно>
Не так много, чтобы сказать, кроме как сказать вам изменить размер окна, чтобы увидеть, как движется контент.
Этот дизайн не реагирует, пока ширина экрана не упадет ниже 600 пикселей.
[/исходный код]
Вот страница «О нас». Скопируйте и вставьте в текстовый редактор и сохраните как about.html в той же папке, что и ваш home.html:
[sourcecode language = ”html”]
TinyNav.js Демо
<script type = «text / javascript» src = «http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js»> </ script> <script type = «text / javascript» SRC = «tinynav.min.js»> </ SCRIPT>
<script type = «text / javascript»> // <! [CDATA [
$ (function () {
$ ( «# Нав») tinyNav ().
});
//]]> </ script>
</ PRE>
<h1> TinyNav.js Demo! </ h1>
<div id = «navcontainer»>
<ul id = «nav»>
<li> <a href=»home.html»> Главная страница </a> </ li>
<li class = «selected»> <a href=»about.html»> О программе </a> </ li>
<li> <a href=»#»> Пункт меню </a> </ li>
<li> <a href=»#»> Пункт меню </a> </ li>
<li> <a href=»#»> Пункт меню </a> </ li>
<li> <a href=»#»> Пункт меню </a> </ li>
</ UL>
</ DIV>
<h2> Вот пример страницы. </ h2>
<Предварительно>
Вы можете найти больше информации о TinyNav.js на сайте GitHub: <a href=»https://github.com/viljamis/TinyNav.js»> https://github.com/viljamis/TinyNav.js </a>
Создатель TinyNav.js имеет собственную домашнюю страницу для кода: <a href=»http://tinynav.viljamis.com/»> http://tinynav.viljamis.com/ </a>
Вы можете получить плагин WordPress из репозитория: <a href=»http://wordpress.org/extend/plugins/tinynav/»> http://wordpress.org/extend/plugins/tinynav/ </a>
[/исходный код]
Наконец, вот ваш JavaScript, взятый из уменьшенного файла TinyNav.js. Сохраните его как tinynav.min.js в той же папке, что и два других файла.
[sourcecode language = ”javascript”]
/ *! http://tinynav.viljamis.com v1.1 от @viljamis * /
(function (a, i, g) {a.fn.tinyNav = function (j) {var b = a.extend ({active: «selected», header: «», label: «»}, j); возврат this.each (function () {g ++; var h = a (this), d = «tinynav» + g, f = «. l _» + d, e = a («<select> </ select>»). attr («id», d) .addClass («tinynav» + d); if (h.is («ul, ol»)) {«»! == b.header && e.append (a («»). text (b.header)); var c = «»; h.addClass («l _» + d) .find («a»). each (function () {c + = ”; var b; for (b = 0; b «}); e.append (c); b.header || e.find («: eq («+ a (f +» li «). index (a (f +» li. «+ b.active)) + «)») атр ( «выбрано», 0);.! e.change (функция () {i.location.href = а (этот) .val ()}); A (F) .После (е) ; b.label && e.before (a («»). attr («for», d) .addClass («tinynav_label» + d + «_ label»). append (b.label))}})}}) (jQuery, это, 0); [/ исходный код]
Теперь вы можете уйти в сторону! Используя базовый CSS, вы можете заставить меню выглядеть точно так, как вы хотите.
Вы использовали TinyNav.js? Если это так, не стесняйтесь делиться советами с остальными из нас!