Выдвижная верхняя панель с красивым эффектом - Меню - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Меню


Красивая выдвижная панель Forkit, в содержимое этого блока можно поместить все что угодно: информеры, мини-чат, реклама, новости и т.д. В чем чуть скрипта: в правом верхнем углу прикреплена лента, если вначале навести на неё, а потом потащить вниз, то появится блок с контентом, который тоже можно будет обратно вернуть в исходное положение. Данная ленточка в пишется в любой дизайн сайта и не будет нагружать страницу.

В Таблицу стилей (CSS) и в самый низ ставим:
Code
#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');

Теперь заходим в верхнюю часть сайта и в самый низ ставим:
Code
<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>

 
 

Важно!

При копировании материала указывать ссылку на источник.

- 406
- 06-Декабря-2016
- 0
Материал разместил:

Похожий материал
Статьи сайта