Красивая выдвижная панель Forkit, в содержимое этого блока можно поместить все что угодно: информеры, мини-чат, реклама, новости и т.д.
В чем чуть скрипта: в правом верхнем углу прикреплена лента, если вначале навести на неё, а потом потащить вниз, то появится блок с контентом. Подробнее в видео:
И
ДЕМО.
Теперь, когда разобрались с функциями, приступим к установке.
Для начала заходим в ПУ → Управление дизайном. Далее заходим в Таблицу стилей (CSS) и в самый низ ставим:
Код
#forkit_block {
margin: 0px;
padding: 50px 0px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.forkit_color {color:#ffffff;}
.forkit {
position: fixed;
right: 0;
top: 0;
z-index:9999;
width: 200px;
height: 150px;
font-family: 'Lato', sans-serif;
text-decoration: none;
}
.forkit .tag {
display: block;
height: 30px;
width: 200px;
color: #fff;
background: #aa0000;
text-align: center;
font-size: 13px;
font-weight: bold;
line-height: 30px;
box-shadow: 0px 0px 10px rgba( 0, 0, 0, 0.4 );
-webkit-transform-origin: 15px 0px;
-moz-transform-origin: 15px 0px;
-ms-transform-origin: 15px 0px;
-o-transform-origin: 15px 0px;
transform-origin: 15px 0px;
}
.forkit .tag:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 196px;
height: 26px;
margin: 1px;
border: 1px solid rgba( 255, 255, 255, 0.4 );
}
.forkit .string {
display: block;
height: 1px;
width: 0px;
position: absolute;
background: rgba( 255, 255, 255, 0.7 );
box-shadow: 0px 0px 10px rgba( 0, 0, 0, 0.4 );
-webkit-transform-origin: 0px 0px;
-moz-transform-origin: 0px 0px;
-ms-transform-origin: 0px 0px;
-o-transform-origin: 0px 0px;
transform-origin: 0px 0px;
}
.forkit-curtain {
position: fixed;
width: 100%;
height: 100%;
top: -100%;
z-index:9999;
}
.forkit-curtain {
text-align: center;
background: rgba( 0, 0, 0, 0.8 );
padding-top: 10%;
position: fixed;
}
.close-button {
position: absolute;
width: 32px;
height: 32px;
right: 20px;
top: 20px;
cursor: pointer;
background:url('http://my-wos.ru/load_scripts/forkit/index.png');
Теперь заходим в верхнюю часть сайта и в самый низ ставим:
Код
<div class="forkit-curtain forkit_color" id="forkit_block">
<div class="close-button"></div>
Содержимое блока. Здесь может быть все, что угодно: информеры, мини-чат, реклама, новости и т.д.
</div>
<a class="forkit" data-text="Наведи курсор" data-text-detached="Потяни вниз >"><img style="position: absolute; top: 0; right: 0; border: 0;" src="" alt="Хай)"></a>
<script src="http://my-wos.ru/load_scripts/forkit/new_1.js"></script>
, перезалейте его на свой сайт и замените ссылку.
