Плавно Выезжающий мини профиль

1176
10 из 10
Проголосовало: 2






Установка:

В css (Настраиваем под себя)

Code
<style>  
#iconbar li {  
  float:left;  
  position:relative;  
  overflow: hidden;  
  margin-right:10px;  
  background-image: url("http://webo4ka.ru/Ucoz4/plavno_viezchauchii_profil_bl_1.png");  
  background-size: 100% 100%;  
  border: #BFCCEF solid 1px;  
  box-shadow: 0px 0px 10px #BFCCEF;  
  color: #657194;  
  }  
#iconbar a {  
  text-decoration: none;  
  outline: none;  
  display: block;  
  width: 48px;  
  cursor:pointer;  
}  
#iconbar span {  
  width: 100px;  
  position: absolute;  
  line-height:110%;  
  font-family: "Tahoma";  
  font-size: 13px;  
  color: #9099b4;  
  padding-top: 5px;  

  text-shadow: 1px 1px 0px #FFFFFF;  
  }  
</style>


тоже самое только сжато:

Code
#iconbar li{float:left;position:relative;overflow:hidden;margin-right:10px;background-image:url(http://webo4ka.ru/Ucoz4/plavno_viezchauchii_profil_bl_1.png);background-size:100% 100%;border:#BFCCEF solid 1px;box-shadow:0 0 10px #BFCCEF;color:#657194}  
#iconbar a{text-decoration:none;outline:none;display:block;width:48px;cursor:pointer}  
#iconbar span{width:100px;position:absolute;line-height:110%;font-family:Tahoma;font-size:13px;color:#9099b4;padding-top:5px;text-shadow:1px 1px 0 #FFF}


далее скрипт ставим в нижнюю или верхнюю часть сайта:

Code
<script language="JavaScript" type="text/javascript">  
  $(function(){  
  $(".auserpanel")  
  .hover(function() {  
  $(this).animate({'width': '155'}, "fast");  
  })  
  .mouseleave(function(){  
  $(this).animate({'width': '48'}, "fast");  
  });  
});  
</script>


и по месту ставим ( обычно перед $BODY$ возле ссылки добавления материала):

Code
<ul id="iconbar">  
<li><a class="auserpanel" href="$PERSONAL_PAGE_LINK$"><img style="padding-left: -10px;" src="http://webo4ka.ru/Ucoz4/perconalinai_ctranicha_userpm.png" border="0" ><span>Персональная Стрница</span></a></li>  
<li><a class="auserpanel" href="$PM_URL$"><img src="http://webo4ka.ru/Ucoz4/lichnii_coobchenii_userls.png" border="0" ><span>Личные Сообщения</span></a></li>  
<li><a class="auserpanel" href="/index/10"><img src="http://webo4ka.ru/Ucoz4/zaverchiti_ceanc_exit.png" border="0" ><span>Завершить Сеанс</span></a></li>  
</ul>
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://uarts.ucoz.ru/
  • Всего комментариев: 1

Torontex
+1
Torontex написал: Написано 02 Октября 2011 в 18:03
Комментарий №1
какого материала??? где вставлять????

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • Можете добавить свои input поля, но сохраняйте их порядок в html для правильного сохранения и вывода.
  • Marishka написал:
  • Новая версия 1.3 (+6 новых станций):
    Установка:
    Демо: Перейти
  • Marishka написал:
  • Доп 8 станций:
    Код
    <div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>  
      <div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>  
      <div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>  
      <div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>  
      <div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>  
      <div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>  
      <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>  
      <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>


    Fix работы радио:
    Находим: if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc")
    Меняем на: if (radUrl == "tm" || radUrl == "ps" || radUrl == "teo" || radUrl == "dc" || radUrl == "gop")
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
  • waak написал:
  • и ещё забыл добавить что использую модуль каталог сайтов
    Последние темы
    Опрос
    258
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 3
    Гостей: 3
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: