» »

Плагин JQuery для переключения на сайте


Плагин JQuery для переключения на сайте

Вашему вниманию небольшой по функциям плагин для сайта, который будет по клику переводить элементы в одну сторону как навигация или меню. Он работает на 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
28.04.2017 Загрузок: 3 Просмотров: 650 Комментарий: (3)

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

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

Комментарий: 3
FeStemBer
FeStemBer 28.04.2017 05:101
0
Вот мне интересно, на сайт можно конструктора поставить, но видать есть возможность, но здесь сразу идет под мобильную настройку, если посмотреть демо, то можно было горизонтальное меню поставить, а оно идет сразу с боку.
Brung
Brung 28.04.2017 19:212
0
Есть на сайте намного лучше код, который также скрывает, не могу найти его, но ранее ставил его.
Kosten
Kosten 28.04.2017 20:013
+1
На сайте такого материала точно не было. Этот нашел на англоязычном ресурсе.
avatar