Плавающая инфопанель

Параметр Значение
Категория Другие скрипты
Добавил uAdministrator
Дата публикации 25.03.2025, 12:08
Размер файла 41.2 Kb
Авторский
Адапт. дизайн
Просмотрен 14

Предлагаю вашему вниманию информационную панель с выпадающими вкладками для установки ссылок на важные темы вашего сайта. Панель имеет три стиля на выбор под ваш сайт, работает на jquery и не влияет на скорость загрузки страниц.

Установка:
1. В корне сайта создать папку "themes" и залить картинки из архива.
2. Заходим в "ПУ" → "Управление дизайном" → "Нужная вам страница" и перед устанавливаем код:

Код
<link type="text/css" href="/css/jx.stylesheet.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/jquery.jixedbar.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
  $("#sample-bar").jixedbar();
  });
</script>


3. Заходим в "ПУ" → "Управление дизайном" → "Нужная вам страница" и перед устанавливаем код:

Код
<div id="sample-bar">

  <ul>
  <li title="Home"><a href="ссылка">На главную</a></li>
  </ul>

  <span class="jx-separator-left"></span>
   
  <ul>  
  <li title="Социальные сети"><a href="#">Социальные сети</a>
  <ul>
  <li><a href="http://www.facebook.com/"><img src="/pic/facebook.png" title="Facebook" width="16" />Facebook</a></li>
  <li><a href="http://twitter.com/"><img src="/pic/twitter.png" title="Twitter" width="16" />Twitter</a></li>
  <li><a href="https://vk.com/uajax"><img src="/pic/vk.png" title="Flickr" width="16" />Группа в контакте</a></li>
  <li><a href="http://ok.ru"><img src="/pic/ok.png" title="Одноклассники" width="16" />Одноклассники</a></li>
  </ul>
  </li>
  </ul>
   
  <span class="jx-separator-left"></span>

<span class="jx-separator-left"></span>
   
  <ul>  
  <li title="Название"><a href="#">Название</a>
  <ul>
  <li><a href="ссылка"><img src="картинка" title="" width="16" />название ссылки</a></li>
  <li><a href="ссылка"><img src="картинка" title="" width="16" />название ссылки</a></li>
  <li><a href="ссылка"><img src="картинка" title="" width="16" />название ссылки</a></li>
  <li><a href="ссылка"><img src="картинка" title="" width="16" />название ссылки</a></li>
  </ul>
  </li>
  </ul>
   
  <span class="jx-separator-left"></span>

   
  <div>Ваш текст с ссылкой</div>
   
  <ul class="jx-bar-button-right">
  <li title="Важно"><a href="#"><img src="картинка" alt="" />Важно</a>
  <ul>
  <li><a href="ссылка"><img src="картинка" title="" />название ссылки</a></li>
  <li><a href="ссылка"><img src="картинка" title="" />название ссылки</a></li>
  </ul>
  </li>
  </ul>
   
  <span class="jx-separator-right"></span>

<ul class="jx-bar-button-right">
  <li title="инфо"><a href="#"><img src="картинка" alt="" />инфо</a>
  <ul>
  <li><a href="ссылка"><img src="картинка" title="" />название ссылки</a></li>
  <li><a href="ссылка"><img src="картинка" title="" />название ссылки</a></li>
  <li><a href="ссылка"><img src="картинка" title="" />название ссылки</a></li>
  <li><a href="ссылка"><img src="картинка" title="" />название ссылки</a></li>
  </ul>
  </li>
  </ul>
   
  <span class="jx-separator-right"></span>

<ul class="jx-bar-button-right">
  <li title="еще инфо"><a href="#"><img src="картинка" alt="" />еще инфо</a>
  <ul>
  <li><a href="ссылка"><img src="картинка" title="" />название ссылки</a></li>
  <li><a href="ссылка"><img src="картинка" title="" />название ссылки</a></li>
  </ul>
  </li>
  </ul>
   
  <span class="jx-separator-right"></span>
   
</div>

: плавающая, UCOZ, script, Scripts, инфопанель, скрипт

Комментариев пока нет..

Ты можешь быть первым, кто оставит комментарий к публикации!

Всего комментариев: 0
avatar



Администратор в сети
Администратор не в сети