ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Плагин JQuery для переключения на сайте

Плагин 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 Апреля 2017 Загрузок: 3 Просмотров: 4110 Комментариев: (3)

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

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

Оставь свой отзыв

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