...Итак, прошу строго не судить, мое первое пояснение. Всю жизнь учился на уроках других, а сам знаниями не делился. Пора плюсануть себе в карму =)
- Что делаем? - делаем такую кнопульку в любом месте сайта, на нее нажимаешь(или наводишь) - она открывает дополнительный контент.
Поехали.
1. - css.
В catalog/view/theme/ВАША_ТЕМА/stylesheet/stylesheet.css добавляем
.slide-out-div {
padding: 20px;
width: 250px;
background: #ccc;
border: #666 2px solid;
}
2. - сам шаблон. Я вставлял в catalog/view/theme/МОЯ_ТЕМА/template/common/header.tpl
Ищем
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.3.2.min.js"></script>Сразу за ним вставляем <script src="catalog/view/javascript/jquery/jquery.tabSlideOut.v1.2.js"></script>и ниже ДО тега </head> это: <script>
$(function(){
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //тут класс элемента
pathToTabImage: 'image/slide_out.png', //обязательно путь к изображению. Я положил в папку image, что в корне магазина
imageHeight: '122px', //Высота изображения. Обязательна
imageWidth: '40px', //Ширина. Тоже обязательно
tabLocation: 'left', //Сторона, где располагаем вкладку. left, right, top, bottom
speed: 300, //скорость анимации
action: 'click', //опции=: 'click' или 'hover', нажимаешь, или наводишь
topPos: '165px', //расположение от верхнего края/ использовать если tabLocation = left или right
leftPos: '20px', //расположение от левого края/ использовать если tabLocation = bottom или top
fixedPosition: true //опции: true - будет неподвижной при скролле, false - останется там, где ты ее поставишь.
});
});
</script>
.. и дальше, где удобно, после тега <body>:
<div class="slide-out-div">
<a class="handle" href="#">123</a><!--Эту ссылку мы показываем юзерам, у которых отключен жабаСкрипт-->
<h3><span lang="ru">Заголовок</span></h3>
<br /><span lang="ru">А здесь у нас то, что напихаем)<br />
<br />
<br />
опа<br /><br />
ОПА
опа-ПА</span></div>
3. Дополнительно нужно файло.. jquery.tabSlideOut, что во вложении, кладем в catalog/view/javascript/jquery/slide_out.png кладем в image в корень магазина.
4. - PROFIT!
Надеюсь, понятно объяснил. Ну если уж вопросы возникнут, то помогу чем смогу.
С уважением.
Собственно, что должно получиться можно посмотреть здесь. Слева кнопка "контакты"
jquery.tabSlideOut.v1.2.zip