Вашему вниманию небольшой по функциям плагин для сайта, который будет по клику переводить элементы в одну сторону как навигация или меню. Он работает на JQuery и идет три версии, которая из всех предоставлена одна. Здесь по дизайн похоже на функцию, где появляется на малых размерах монитора или на мобильных аппаратах. У него также есть кнопка в правом верхнем углу, что и отвечает за функцию переключение или просто появление запросов. Цвет по умолчанию идет темный, а вот знаки сами можете по гамме сделать, на картинке они светло-синее, а в DEMO версий алые будут.
Под него вы найдете в архиве файл демонстраций, где откроете на любом браузере, где визуально увидите как работает. Здесь присутствует JavaScript, который будет отвечать ghj заглаживание анимации при работе. По сути сделан для мобильных платформ и приложений, где происходит скольжение боковой панели, в который вы сами прописываете категорий или самых актуальные запросы. Создан 2017 году и все обновление в нем уже стоят и корректно работать будет на лбом браузере.
По умолчанию настроен:
Как это использовать:
1. Загрузите необходимые JQuery и библиотеки Velocity в вашем HTML документе.
Код <script src="/path/to/jquery-3.2.0.min.js"></script> <script src="/path/to/velocity.min.js"></script> 2. Скачать и загрузить скрипт плагина sideToggle в sideToggleExtended.js после того, как библиотеки JQuery.
Код <script src="sideToggleExtended.js"></script>
3. Создание меню бокового тумблера для вашей веб-страницы.
Код <div id="side<a href="http://www.jqueryscript.net/menu/">Menu</a>Container"> <h2>Side Menu</h2> <a href="#">Menu Item 1</a> <a href="#">Menu Item 2</a> <a href="#">Menu Item 3</a> ... </div>
4. CSS, чтобы скрыть боковое меню на странице загрузки.
Код #sideMenuContainer { background: #202020; height: 100%; padding: 10px; position: fixed; top: 56px; right: -200px; width: 200px; z-index: 4; }
5. Создание триггера элемент для переключения меню на стороне.
Код <div id="sideMenu"> <span id="sideMenuClosed"></span> </div>
6. Активное меню переключения со стороны, как это:
Код $('#sideMenu').sideToggle({ moving: '#sideMenuContainer', direction: 'left' });
В материале был указан официальный сайт, где также можно ближе ознакомиться с этим плагином.
Сайт с переходом: github.com/hjools/sideToggle |