Выдвижная верхняя панель с красивым эффектом
827материалов
228тем на форуме
3004комментария
6157пользователей

Выдвижная верхняя панель с красивым эффектом

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

Здесь Ваше содержимое - вставляем что хотим.

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 30.06.2015 в 14:00
Материал просмотрен: 2045 раз
Категория материала: Скрипты для uCoz
К материалу оставлены: 4 комментария

Пожаловаться
Сказать спасибо

4 комментария


trojan3428
подсобите, пожайлуста ...
надо ее в левый угол переместить, подскажите где и что редактить?
Ромчик
Можно поменять, но вот что получиться http://f5.s.qip.ru/19yBhtbgM.png
Romis26
Скажите, при выдвижении не полностью отображается http://www.rgptks.by/
что делать?
avatar
Прикольная штучка ;) И даже работает, что большая редкость.
Мне нужно было что-то для размещения рекламы на странице, на которой ее по дизайну категорически размещать нельзя (http://artgallery.ltd.ua). Этот скрипт решает проблему - кто вытянул блок, тот сам и виноват ;)
А я дизайн страницы не портил!!!
Спасибо
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта