Содержание
Панель Draw или боковое меню — это панель навигации, которая в большинстве случаев будет отображать параметры навигации для посетителя на веб-странице. Обычно, но не обязательно, он расположен в левой части экрана (скрыто) и отображается, когда пользователь нажимает кнопку.
В этом топе мы расскажем вам о 10 самых впечатляющих плагинах меню боковой панели в Интернете.
10. Слайд Показать
Slide Reveal — это плагин jQuery, который показывает боковую панель, скользя слева или справа от страницы. Плагин не добавляет какой-либо причудливый CSS на вашу боковую панель. Таким образом, вам нужно оформить его самостоятельно, чтобы получить красивую панель затенения или красивую навигацию.
9. Сидр
Sidr — это плагин jQuery для создания боковых адаптивных меню. Он использует CSS3 переходы в современных браузерах и отступает в jQuery.animate когда они не поддерживаются.
Использовать Sidr очень просто, просто создайте div с именем sidr и разместите там свое меню. Затем активируйте плагин, привязав его к ссылке. По умолчанию меню не будет отображаться, и оно будет отображаться или скрываться при нажатии на ссылку. На одной странице вы можете создать столько меню, сколько хотите, и расположить их справа или слева. В плагин включены две темы (две таблицы стилей): темная и светлая. Вы можете использовать их, создавать новые или переопределять их своими собственными стилями.
8. Выдвижной ящик
Drawer — это гибкая реализация меню с использованием jQuery, iScroll и CSS.
7. Упрощенная боковая панель
Плагин jQuery, который позволяет создавать боковую навигацию, как в современных мобильных приложениях. Он нацелен на простоту, так что каждый может использовать его независимо от того, опытные программисты или нет. Вам нужно будет подготовить определенный HTML-шаблон, чтобы он работал правильно. В нижней части веб-страницы, перед тег, включите библиотеку jQuery. Если вы заинтересованы в улучшении режима работы, включите также библиотеку jQuery-UI. В конце концов, включить простую боковую панель. Чтобы настроить плагин, добавьте нужную опцию в сам плагин. Проверьте все доступные варианты в документация по списку опций страница тоже.
6. Регуляторы
Slidebars — это плагин jQuery для быстрой и простой реализации меню и боковых панелей в стиле приложения на вашем сайте. Slidebars, родившиеся в 2014 году в результате постоянно возникающей необходимости создавать мобильные меню в адаптивном дизайне, быстро стали выбором номер один для разработчиков. С выпуском версии 2, Slidebars предоставляет больше функциональных возможностей, чем когда-либо прежде, с еще меньшим объемом.
При весе всего 1.69kb в распакованном виде новые слайд-бары имеют чистую и осторожную разметку, позволяют неограниченное количество экземпляров вне холста с любой стороны и оснащены полным API, обратными вызовами и событиями для максимального контроля.
5. Хобот
Если вы работаете на ноутбуке или настольном компьютере, измените ширину окна в соответствии с содержанием вашего сердца. Адаптивные сайты — это путь в будущее! Зачем вам поддерживать несколько сайтов, если вы можете создать один и позволить вашему CSS делать всю работу? Trunk.js помогает облегчить нагрузку и дает вам начало, предоставляя вам плавный навигационный блок. Trunk.js заправляет вашу навигацию в «ящик» на портрете и отображает его сверху в альбомной ориентации. Почти все ящики, с которыми я сталкивался, созданы с использованием анимации jQuery. Дрожание или щелчки являются результатом этого метода. Я создал Trunk.js для запуска события с помощью jQuery, но он перемещается с помощью CSS. Этот метод делает анимацию более естественной и плавной.
Trunk.js говорит: «Нет больше неуклюжих анимаций на вашем iPhone Android-устройство «. Слишком долго сайты лениво использовали Навигационный ящик. Это здорово — освободить такую ценную область экрана, но почему она должна испортить UX? Разве у нас не может быть и то и другое? Trunk.js отвечает оглушительным «ДА». Откройте это на вашем мобильном устройстве Посмотрите, как на самом деле выглядит Nav Drawer. Мини-планшеты очень похожи на своих старших братьев (или сестер). IPad Mini на самом деле имеет те же размеры экрана, что и обычный iPad, чтобы разработчикам было проще кодировать для одного устройства. Kindle Fires и даже некоторые смартфоны Galaxy настолько велики, что пересекают забор. Trunk.js является ценным макетом для всех этих мини-монстров.
4. Sliiide
Если у вас есть div (возможно, навигационное меню или боковая панель), который вы хотите анимировать с эффектом скольжения снаружи окна просмотра внутри окна просмотра. Вы хотите иметь полный контроль над расстоянием, которое этот слайд скользит, но вам не нужно беспокоиться о том, как его расположить или как растянуть, чтобы он соответствовал размерам экрана. Вы также не хотите беспокоиться о том, как анимация влияет на остальную часть страницы, как справляться с прокруткой и логикой активации и деактивации меню. Тогда Sliiide — правильный плагин для вас.
3. bigSlide.js
bigSlide — крошечный плагин jQuery (сжатый ~ 1 КБ) для создания навигации за пределами экрана. Он будет перемещать панель навигации, а также любые контейнеры, имеющие класс .push (или класс по вашему выбору в настройках).
MMenu — это плагин jQuery для приложений, как на холсте, так и вне его, со скользящими подменю для вашего веб-сайта и веб-приложения. Это очень настраиваемый с помощью широкого спектра опций, расширений и дополнений, и он всегда будет соответствовать вашим потребностям. Плагин jQuery.mmenu — это программное обеспечение с открытым исходным кодом, вы можете свободно использовать плагин jQuery.mmenu для своих личных или некоммерческих веб-сайтов. Для коммерческого использования, пожалуйста купить лицензию. HTML-код для вашего меню, как обычно, использует UL, LI а также A элементы, плагин автоматически связывает событие нажатия, которое открывает меню для каждого A элемент, который ссылается на меню.
1. Slideout.js
Slideout.js — это сенсорное меню навигации для ваших мобильных веб-приложений. Особенности этого плагина:
- Зависимость от свободной.
- Простая разметка.
- Родная прокрутка.
- Простая настройка.
- CSS трансформации переходы.
- Всего 2 Кб! (мин GZIP)
Если вы знаете еще один замечательный плагин боковой панели для мобильных устройств, поделитесь им с сообществом в поле для комментариев.
