• Страница 1 из 1
  • 1
Модератор форума: SmokeRom, Vlad98  
Боковой контейнер в развернутом виде
Дата: Пятница, 25.04.2014, 06:16 | Сообщение # 1
Сообщений:393
Клан:[PG]
Награды:14
88

Код
<style>   
   .chat_box {display:none;position:fixed;bottom:15px;right:15px;border:1px solid #dddddd;background:#fbfbfb;padding:4px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-moz-box-shadow:2px 2px 3px #9b9b9b;-webkit-box-shadow:2px 2px 3px #9b9b9b;box-shadow:2px 2px 3px #9b9b9b;}   
   .chat_box div.close {display:block;position:absolute;right:0;top:0;background:url('http://scripts-for-ucoz.ru/images2/chat_box_closeprofil.png') no-repeat;width:16px;height:16px;opacity:0.6;-moz-opacity:0.6;filter:alpha(opacity=60);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);}   
.chat_box div.close:hover {cursor:pointer;opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);}   
     
   div.chat_button {display:block;width:75px;height:75px;background:url('http://pro-gameinfo.ru/FILESSSS/131.png') no-repeat;position:fixed;bottom:15px;right:15px;opacity:0.8;-moz-opacity:0.8;filter:alpha(opacity=80);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);}   
div.chat_button:hover {cursor:pointer;opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);}   
</style>   
<div class="chat_button" onclick="$('.chat_button').fadeOut('fast');$('.chat_box').slideToggle('slow');"></div>   
<div class="chat_box"><div class="close" onclick="$('.chat_box').slideToggle('fast');$('.chat_button').fadeIn('slow');"></div>   
<div id="chatBox">$GLOBAL_CLEFTER$</div>

Я взял за основу выдвижной чат, изменил пару строк и получилось выдвижной блок.
Плюсы:
+Очень удобно
+Кнопка не занимает очень много места
+Можно закрыть контейнер
Минусы:
-Не видно гостям
-Если контейнер большой, то он может не сочетаться  с дизайном
Установка:
ПУ>Страницы сайта>
Ищем "$GLOBAL_CLEFTER$"
Заменяем его на скрипт.
Демонстрацию можно посмотреть на сайте, но он виден только пользователям.

Скрин: http://pro-gameinfo.ru/A/13131.jpg
Скрин№2: http://pro-gameinfo.ru/A/13333.jpg


Делаю сборки CS:S http://7up.ipb.su/index.php?showtopic=6


Сообщение отредактировал ĴŎŏķėŔ - Пятница, 25.04.2014, 06:17
  • Страница 1 из 1
  • 1
Поиск: