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

Это отличное по стилистике меню, которое появляется по клику с правой стороны, где создано в темных тонах под навигацию по сайту. Когда вы нажимаете на него, многоуровневое навигационное меню открывается в модальном окне слева. Разработанные скользящие навигационные меню могут идеально вписываться в большинство макетов и стали популярным интерфейсом большинства пользователей смартфонов. Обратите внимание, что эта статья не будет обсуждать преимущества и недостатки использования гамбургерных меню. Небольшой экскурс по материалу: Значки гамбургеров - это те маленькие значки с тремя барами, которые вы видите в углу многих веб-сайтов и мобильных приложений. Они в первую очередь запускают передвижную навигационную панель, содержащую ссылки на страницы по всему веб-сайту. Навигационные меню с выдвижными ящиками отлично подходят для гибкого дизайна, но они также могут быть сложными для реализации. Эти советы помогут дизайнерам прийти к соглашению с самыми популярными решениями для дизайна меню. Вообще говоря, настоящие нарушители спокойствия будут старыми смартфонами или обесцененными браузерами, такими как Internet Explorer 6 или Firefox 2. Хотя эти старые браузеры поддерживают JavaScript, они могут не поддерживать CSS рендеринг для меню поверх контента или скользящей анимации. Примеры гамбургер-меню: Выбор формата значка Меню навигации для сенсорного экрана для ваших мобильных веб-приложений. Одно из многих меню Но в какой то момент вам придется принять, какие браузеры поддерживают а какие нет. Можно создать резервную копию с использованием условий IE, где скользящий ящик становится строковым списком ссылок. Ваша цель должна заключаться в поддержке самого широкого разнообразия браузеров без ущерба для дизайна. Возможно, будет невозможно поддерживать IE6, но вы должны стремиться к подавляющему большинству мобильных операционных систем вместе со всеми существующими браузерами. Также попробуйте использовать Google Analytics для отслеживания того какие браузеры чаще всего используются посетителями в течение длительного периода времени. Большинство современных браузеров поддерживают чистые CSS-меню и в основном поддерживают JavaScript. Поэтому хорошей идеей может быть использование чистого CSS для анимации с JavaScript в качестве резервной копии. Также можете скачать архив, где будет код и стили на такой формат навигаций, где можете на бемонстраций изначально посмотреть. Все создано при помощи базовых стилей и javascript здесь не пременяется. Демонстрация:

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

Kosten

Войдите:

• Отправить