Существует несколько способов создания адаптивной навигации и мы воспользуемся самым простым решением.
Хотя выбранный нами метод создания навигации и кажется на первый взгляд очень простым, существует множество важных факторов, которые необходимо продумать и реализовать должным образом. Всегда нужно искать самое простое решение, без добавления сложных элементов к пользовательскому интерфейсу.
Одна из проблем, с которыми я столкнулся при создании адаптивной навигации — это то, что браузеры пока еще не поддерживают CSS3 переходы для высоты символов, которая определена в режиме auto. В большинстве случаев, мы не можем использовать фиксированную высоту символов потому, что высота пунктов меню будет различаться в разных моделях браузеров, что приведет к изменению числа элементов. Я всегда стараюсь уменьшить выделяемую для страниц память, поэтому мне давно хотелось найти такое решение, которое не требует использования большой библиотеки, такой как jQuery, для работы.
Сегодня я рад представить вам Адаптивную систему Nav, бесплатный плагин с открытым исходным JavaScript кодом, который решает эти проблемы. Этот плагин выпущен под Лицензией свободного программного обеспечения, так что вы можете использовать его во всех ваших проектах абсолютно бесплатно и без каких-либо ограничений. Я считаю, что любое решение должно быть уникальным и нельзя все время использовать аналоги. Но для тех, кто ищет решение, которое можно применить во многих проектах — адаптивная система Nav, безусловно, хороший выбор.
Официальный сайт, просмотреть информацию можно на responsive-nav.com.
Характеристики.
Адаптивная система Nav представляет собой крошечный JavaScript плагин, который весит всего 1,6 KB, обладает возможностью архивации и поможет вам создать варианты навигации для небольших экранов. Он использует сигналы, поступающие от сенсорного экрана и CSS3 переходы для оптимальной производительности. Он также содержит набор «умных» решений, которые позволяют переходить от height: 0 к height: auto, что невозможно сделать в обычных CSS3 переходах.
- Простая семантическая разметка.
- Весит всего 1,6 KB, при этом существует возможность архивации программой Gzip’ed.
- Не требует наличия никаких внешних библиотек.
- Использование CSS3 переходов и возможность обработки событий сенсорного экрана.
- Позволяет обеспечить задержку в 300 мс между физической обработкой и событием нажатия.
- Делает возможным использование CSS3 переходов с командой
height: auto. - Встроенная доступность просмотра означает, что все элементы будут отображаться на экране читателей, даже когда отсутствует поддержка JavaScript.
- Работает во всех основных браузерах для персональных …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров