» »

Универсальное меню гамбургер при помощи CSS

Универсальное меню гамбургер при помощи CSS

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

Небольшой экскурс по материалу:

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

Вообще говоря, настоящие нарушители спокойствия будут старыми смартфонами или обесцененными браузерами, такими как Internet Explorer 6 или Firefox 2. Хотя эти старые браузеры поддерживают JavaScript, они могут не поддерживать CSS рендеринг для меню поверх контента или скользящей анимации.

Примеры гамбургер-меню:

Выбор формата значка

Меню навигации для сенсорного экрана для ваших мобильных веб-приложений.

Одно из многих меню

Но в какой то момент вам придется принять, какие браузеры поддерживают а какие нет. Можно создать резервную копию с использованием условий IE, где скользящий ящик становится строковым списком ссылок.

Ваша цель должна заключаться в поддержке самого широкого разнообразия браузеров без ущерба для дизайна. Возможно, будет невозможно поддерживать IE6, но вы должны стремиться к подавляющему большинству мобильных операционных систем вместе со всеми существующими браузерами. Также попробуйте использовать Google Analytics для отслеживания того какие браузеры чаще всего используются посетителями в течение длительного периода времени.

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

Также можете скачать архив, где будет код и стили на такой формат навигаций, где можете на бемонстраций изначально посмотреть.

Все создано при помощи базовых стилей и javascript здесь не пременяется.

Демонстрация:
13.01.2018 Загрузок: 1 Просмотров: 232 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar