Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Выдвижная панель на jQuery для связи с администрацией

Дата добавления: 03.03.2017 - 14:29
Добавил: Buger
Количество просмотров: 241
Количество комментариев: 0
Размер файла: 71.2Kb
Рейтинг материала: 5.0 / 1
Выдвижная панель на jQuery для связи с администрацией
рейтинг 5.0
/
голосов 1
Выдвигающаяся панель этим уже не удивить на сайте, но здесь рассмотрим одну из них и установим на сайт с контактами на ней прописаны. Так как сейчас регион нужен в Яндекс веб мастере, чтоб подтвердить, нужно обязательно на главной странице иметь все данные, и здесь эта панель отлично подойдет. Не говоря об официальный интернет ресурсов, где как пример производиться продажа или данные на тех поддержку.

Сама панель будет как с правой или левой стороны, здесь сам веб мастер уже выставит как он видит ее на портале. Работает на JQuery, где только будет видно кнопка с контактом и при клике на его появится основа со всеми данные, которые вы сами оформили. Здесь вы моете настроить оригинально, а это замедлить скорость выдвижение или установить небольшое изображение в саму панельку для визуальной видимости.

Установка:
Предоставленные коды ниже нужно размещать в том же порядке (сверху вниз). Вы можете вставить на страницы в секцию BODY просто все коды подряд.
Первым делом подключаем JQuery, если у вас конструктор uCoz, то не нужно делать, он идет по умолчанию.
Код
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

Плагин jQuery TabSlideOut - нужно поставить между <head> и </head> это обязательно.
Код
<script src="jquery.tabslideout.js" type="text/javascript"></script>

В стилях CSS вы можете вывести изменения такие как: оттенок цвета, размеры и т.д. То есть настроить под свои нужды.
Код
<style>  
.panel {  
  height:138px;  
  width: 250px;  
  background: #0080d9;  
  color:#FFFFFF ;  
}  
.sp {padding:20px}  
</style>

И теперь как основа код HTML.
Код
<div class="panel">  
<div class="sp">  
<a class="handle" href="https://art-ucoz.ru/">art-ucoz.ru</a>  
  <span lang="ru">  
  мой@e-mail  
  Здесь возможно skype
  8-385-552-67-39
  icq: 566655667  
  </span>  
</div>  
</div>

Осталось только активировать работу плагина при помощи JavaScript.
Код
<script type="text/javascript">
  $(function () {
  $('.panel').tabSlideOut({ //Класс панели
  tabHandle: '.handle', //Класс кнопки
  pathToTabImage: 'contacts.png', //Путь к изображению кнопки
  imageHeight: '138px', //Высота кнопки
  imageWidth: '40px', //Ширина кнопки
  tabLocation: 'left', //Расположение панели top - выдвигается сверху, right - выдвигается справа, bottom - выдвигается снизу, left - выдвигается слева
  speed: 300, //Скорость анимации
  action: 'click', //Метод показа click - выдвигается по клику на кнопку, hover - выдвигается при наведении курсора
  topPos: '35%', //Отступ сверху
  fixedPosition: false //Позиционирование блока false - position: absolute, true - position: fixed
  });
  });
  </script>

В этом скрипте установлено значение left для расположения панели в левой стороне, но вы можете поменять значение переменной и перенести на правую сторону, сверху и снизу. Код отлично прокомментирован. Чтоб понимали как работает, нужно скачать архив и открыть файл index.html.

Источник: https://yraaa.ru/
Добавлять комментарии могут только зарегистрированные пользователи.