Главная » Скрипты для ucoz » Другие скрипты для ucoz

2 новых спойлера в стиле "vk" и "facebook"



В последнее время многие пытаются сделать свой сайт похожий на "vk" или "facebook", но не дорабатывают разные мелочи. Я упрощу эту несложную задачку сделав спойлеры в стиле этих 2-х "гигантов". 

Вставляем в CSS в любое место:


В стиле "vk":
Code
.uSpoilerButton {  
  width: 100%;  
  border: none;  
  background: #FFF;  
  padding: 9px;  
  color: #2B587A;  
  cursor: pointer;  
  }  
   
  .uSpoilerButton:hover {  
  background: #E9EDF1;  
  }  
   
  .uSpoilerText {  
  margin-top: -10px;  
  padding: 0 5 5 5px;  
  }


В стиле "facebook":
Code
.uSpoilerButton {  
  width: 100%;  
  border: none;  
  background: #FFF;  
  padding: 3 0 3 0px;  
  margin-left: -3px;  
  color: #333;  
  font-size: 17px;  
  font-weight: bold;  
  text-align: left;  
  cursor: pointer;  
  background:url(http://joomla.ucoz.com/hlam/fcaa41cf47a9.png) no-repeat; //изображение 1px  
  }  
   
  .uSpoilerClosed {  
  border-bottom: 1px solid #D9D9D9;  
  margin-bottom: -4px;  
  padding-bottom: 10px;  
  background:url(http://joomla.ucoz.com/hlam/a8c56da21be6.png) no-repeat right top; //изображение +  
  }  
   
  .uSpoilerOpened {  
  border-bottom: 1px solid #D9D9D9;  
  padding-bottom: 23px;  
  background:url(http://joomla.ucoz.com/hlam/c23ab6ea310d.png) no-repeat right top; //изображение -  
  }  
   
  .uSpoilerText {  
  margin-top: -20px;  
  font-size: 15px;  
  color: #333;  
  }


Готово.


Источник |  Категория: Другие скрипты для ucoz | Добавил: AID | Дата: 15.02.2012

Другие новости

Поделиться ссылкой

Ссылка:
BB-code:
HTML:
аватар отсутствует
2 | YemSalat пишет: | 16.04.2012 | 17:03 Страница с комментарием |
Цитата (Drskif) ну вставил в таблицу стилей и что дальше
Ну и все,лично у меня работает прекрасно
biggrin
Давай помогу установить пиши )
+ (-1) -