Красивая выдвижная панель 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://webo4ka.ru/Ucoz8/index_close.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://webo4ka.ru/Ucoz8/new_1_panel.js"></script>
|