Добро пожаловать на форум!
Новые сообщения Участники Правила форума Поиск RSS
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные пользователи Новые участники
Болт (3758)
Skyline (2679)
XemorDio (2473)
Strelok41 (2129)
vlad [23.02.2017]
tolay [22.02.2017]
romanzario [21.02.2017]
Antihit [19.02.2017]
Fankor [18.02.2017]
Страница 1 из 11
Форум » Web-раздел » Скрипты uCoz » Выдвижная верхняя панель с красивым эффектом
Выдвижная верхняя панель с красивым эффектом
XemorDio Дата: Суббота, 10.09.2016, 17:31 | Сообщение # 1
Группа: Админы
Сообщений: 2473
Награды: 11 Репутация: 281
Статус: Offline


Красивая выдвижная панель 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>
Форум » Web-раздел » Скрипты uCoz » Выдвижная верхняя панель с красивым эффектом
Страница 1 из 11
Поиск:
21:22
Обновить

Хостинг от uCoz | Design by XemorDio | MODSTALKER © 2009-2017