« Плавающий и удобный Мини-профиль для uCoz »

Описание материала:

Отличный и в то же время удобный, плавающий мини-профиль на сайт в системе uCoz. Мини-профиль отличается от других, своей разноцветностью и удобством. При установке данного мини-профиля, у Вас в правом, нижнем углу появится оранжевое меню, при наведение на него курсором мыши, вверх открывается меню мини-профиля и в нем Вы можете увидеть ссылки на - Выход с сайта, Настройки, Подписки, Сообщения, Пользователи и ссылка на Профиль пользователя. Данное меню видит только зарегистрированный пользователь, зашедший в свой профиль на сайте. Автор данного мини-профиля Роман, его сайт Вы можете увидеть, перейдя по ссылки "Источник" в низу материала.

Установка:
1. Скачиваем архив с нашего сайта, загружаем папку с иконками pl_menu в корень своего сайта
2. Заходим в ПУ - Управление дизайном - Нижняя часть сайта и в самый низ ставим данный код:

Код
<div class="menu_br">  
  <div class="menu_drop">  
  <ul class="menu_list">  
  <li class="menu_item">  
  <span class="menu_label">$USERNAME$</span>  
  <a href="/index/8-$USER_ID$"><img src="$USER_AVATAR_URL$" alt="" /></a>  
  </li>  
  <li class="menu_item menu_blue">  
  <span class="menu_label">Пользователи</span>  
  <a href="/index/15"></a>  
  </li>  
  <li class="menu_item menu_green">  
  <span class="menu_label">Сообщения</span>  
  <a href="/index/14"></a>  
  </li>  
  <li class="menu_item menu_crimson">  
  <span class="menu_label">Подписки</span>  
  <a href="load/0-0-0-0-17"></a>  
  </li>  
  <li class="menu_item menu_orange">  
  <span class="menu_label">Настройки</span>  
  <a href="/index/11"></a>  
  </li>  
  <li class="menu_item menu_yellow">  
  <span class="menu_label">Выйти</span>  
  <a href="/index/10"></a>  
  </li>  
  </ul>  
  <div class="menu_btn">  
  <span class="menu_label">  
  Меню  
  </span>  
  </div>  
  </div>  
  </div>

3. Заходим в ПУ - Управление дизайном - Таблица стилей (CSS) и в самый низ ставим код:
Код
/* Плавающий и удобный Мини-профиль для uCoz */
.menu_br {  
  position: fixed;  
  bottom: 0px;  
  right: -15px;  
  }  

  .absolute-center {  
  position: absolute;  
  top: 0;  
  left: 0;  
  bottom: 0;  
  right: 0;  
  margin: auto;  
  width: 20px;  
  height: 20px;  
  text-align: center;  
  font-size: 18px!important; color: #fff;  
  }  
  .menu_drop {  
  position: absolute;  
  bottom: 15px;  
  right: 30px;  
  }  
  .menu_list {  
  margin: 0 0 20px;  
  padding: 0 0 0 0px;  
  list-style: none;  
  opacity: 0;  
  transition: opacity .2s ease-out;  
  display: none;  
  }  
  .menu_drop:hover .menu_list {  
  opacity: 1; display:block;  
  }  
  .menu_item {  
  position: relative;  
  width: 40px;  
  height: 40px;  
  margin: 15px 0;  
  cursor: pointer;  
  background-color: #f0f0f0;  
  border-radius: 50%;  
  box-shadow: 0 4px 8px rgba(0,0,0,.25);  
  }  
  .menu_item > a img {  
  border-radius: 50%;  
  width: 40px;  
  height: 40px;  
  }  
  .menu_yellow {
  background: #d4a717 url(/pl_menu/exit.png);
  background-position: center;
  background-repeat: no-repeat;
  }  
  .menu_green {  
  background: #008000 url(/pl_menu/mail.png);
  background-position: center;
  background-repeat: no-repeat;
  }  
  .menu_blue {  
  background: #3c80f6 url(/pl_menu/users.png);
  background-position: center;
  background-repeat: no-repeat;
  }  
  .menu_crimson {  
  background: #ED143D url(/pl_menu/pin.png);
  background-position: center;
  background-repeat: no-repeat;
  }  
  .menu_orange {  
  background: #F27935 url(/pl_menu/spanner.png);
  background-position: center;
  background-repeat: no-repeat;
  }  

  .menu_item:hover > .menu_label {  
  opacity: 1;  
  }  
  .menu_btn {  
  position: relative;  
  width: 45px;  
  height: 45px;  
  float: right;  
  cursor: pointer;  
  background: #F27935 url(/pl_menu/menu.png);
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;  
  box-shadow: 0 4px 8px rgba(0,0,0,.25);  
  }  
  .menu_btn:hover .menu_label {  
  opacity: 1;  
  }  
  .menu_label {  
  position: absolute;  
  top: 14px;  
  right: 115%;  
  padding: 4px 8px;  
  font-size: 14px;  
  color: #fff;  
  background-color:rgba(232, 133, 48, 0.77);  
  border-radius:50px;  
  opacity: 0;  
  pointer-events: none;  
  white-space: nowrap;  
  transition: opacity .2s ease-out;  
  }
/* InternetEmpire.Ru */


Готово!


Скачать ( Размер архива 44.6 Kb )

По данной ссылке, Вы можете скачать или купить архив данного материала

Демонстрация

Демонстративная страница или сайт материала

Установка материала

Мы поможем установить данный материал к Вам на сайт

Источник

Материал взят со стороннего ресурса и был проверен нами


Добавил: YaVi | Категория: Скрипты для uCoz | Просмотров: 653 | Загрузок: 30


Поделиться в соц. сетях:
Комментариев к материалу: 2
Вероника 13.02.2016 в 15:21Спам
Ничего так )
0
Виктор Ягодин 13.02.2016 в 15:38
Да, мини-профиль, не плохой)
0
avatar