» »

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

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

Выдвигающаяся панель этим уже не удивить на сайте, но здесь рассмотрим одну из них и установим на сайт с контактами на ней прописаны. Так как сейчас регион нужен в Яндекс веб мастере, чтоб подтвердить, нужно обязательно на главной странице иметь все данные, и здесь эта панель отлично подойдет. Не говоря об официальный интернет ресурсов, где как пример производиться продажа или данные на тех поддержку.

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

Это так предоставлено в DEMO версий.

Выдвигающаяся панель на JQuer

Приступаем к установке:

Предоставленные коды ниже нужно размещать в том же порядке (сверху вниз). Вы можете вставить на страницы в секцию 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="http://zornet.ru">zornet.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 - что с левой стороны будет, здесь вы можете этот класс поменять и перенести по правую сторону. Также выставить ширину, просто возможно много данных будет и высоко, все редактируем здесь, по гамме цвета в стилях выставить. Чтоб понимали как работает, то скачав архив, там вам нужен файл в корень сайта залить и там будет для вас демонстрация, что можно реально и визуально посмотреть как работает этот материал.

Источник: yraaa.ru
03.03.2017 Загрузок: 6 Просмотров: 609 Комментарий: (5)

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

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

Комментарий: 5
FeStemBer
FeStemBer 03.03.2017 12:361
0
Хороший материал, вот только по региональности, мне так кажется, что данные должны быть открыты, там же предоставляешь ссылку.
Kosten
Kosten 03.03.2017 13:002
0
Но думаю если на главной будет, то все равно данные найдут, здесь смотря еще какие данные, это может простой скайп или почта, а может и телефон. А чтоб регион установить, то там больше данных нужно.
ТОРНАДО
ТОРНАДО 03.03.2017 13:143
0
Да материал хороший не спорю,но красивей и стильно смотрелось бы если сделать регистрация и вход на сайт, но это моё мнение.
Kosten
Kosten 03.03.2017 14:164
0
Это хорошая идея и можно попробовать поставить вход и регистрацию сайта.
Kosten
Kosten 03.03.2017 17:185
0
Больше подойдет для сайта, где предлагают различные услуги. На главную можно само окно ссылками вывести, который вел бы на материал с оформлением на услуги.
avatar