Пример:ссылка
Выезжает при наводке мышью.
Полностью кроссбраузерная.
На чистом JavaScript, никакого jQuery.
Установка:
1. Установим скрипт, который будет реализовывать плавание панели:
Код
Code
<script type="text/javascript">
function slide(obj, direction, a) {
clearInterval(window.z);
counter = 0;
z = setInterval(function () {
if (a ? parseInt(obj.style.marginTop) < 0 : parseInt(obj.style.marginTop) > -300) {
obj.style.marginTop = parseInt(obj.style.marginTop) + direction;
counter++;
} else {
clearInterval(z);
}
},
10);
}
var pad = document.getElementById('x');
pad.onmouseover = function () {
slide(this, 3, true);
}
pad.onmouseout = function () {
slide(this, -3, false);
}
</script>
2. Установим саму панель:
Код
<div id="x" style="width: 100%; height: 300px; border-bottom: 5px dashed #eee; background: #555; position: absolute; margin-top: -300px;">
<span style="color: white; font-weight: bold;">
Slide Panel by $USERNAME$
Кстати, на чистом JS, без jQuery <img rel="usm" src="http://fifagamers.do.am/vsio_dlya_ucoz/skripti2/15Sypsena-1-.gif" border="0" align="absmiddle" alt=":)">
Хотя кого это волнует.
</span>
</div>
Внутри неё можно поставить форму входа, регистрации, мини-профиль, информер — в-общем, всё что захотите.
По просьбам сделал панель выезжащей сбоку:
Пример:ссылка
HTML
Код
<div id="x" style="width: 300px; height: 50%; border-right: 5px dashed #eee; background: #555; position: absolute; margin-left: -300px; margin-top: 100px;">
<span style="color: white; font-weight: bold;">
Slide Panel by $USERNAME$
Кстати, на чистом JS, без jQuery <img rel="usm" src="http://fifagamers.do.am/vsio_dlya_ucoz/skripti2/15Sypsena-1-.gif" border="0" align="absmiddle" alt=":)">
Хотя кого это волнует.
</span>
</div>
JavaScript:
Код
<script type="text/javascript">
function slide(obj, direction, a) {
clearInterval(window.z);
counter = 0;
z = setInterval(function () {
if (a ? parseInt(obj.style.marginLeft) < 0 : parseInt(obj.style.marginLeft) > -300) {
obj.style.marginLeft = parseInt(obj.style.marginLeft) + direction;
counter++;
} else {
clearInterval(z);
}
},
10);
}
var pad = document.getElementById('x');
pad.onmouseover = function () {
slide(this, 3, true);
}
pad.onmouseout = function () {
slide(this, -3, false);
}
</script>
Главная страница
Форум сайта
Создание сайтов на uCoz 
Вопросы по uCoz
Заработок в интернете 
Уроки Photoshop
Автомобиль от А до Я 
Электроника 
Всё для смартфонов 
Браузерные игры 
Музыка
