регистрация
856материалов
3289комментариев
235тем на форуме
6854пользователя

Плавающий мини-профиль для uCoz


Описание:

Очень красивый, стильный, плавающий, "фиксированный" мини-профиль Вашего пользователя! Скрипт выполнен по все современным нормам, HTML и CSS3, с использованием иконочных шрифтов Fontawesome.

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

Установка:

Данный код вставляете в Ваш CSS:
Код
.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-color: #d4a717;          
          }          
          .menu_green {          
          background-color: green;          
          }          
          .menu_orange {          
          background-color:orange;          
          }          
          .menu_crimson {          
          background-color:crimson;          
          }          
          .menu_blue {          
          background-color: #3c80f6;          
          }          

          .menu_item:hover > .menu_label {          
          opacity: 1;          
          }          
          .menu_btn {          
          position: relative;          
          width: 45px;          
          height: 45px;          
          float: right;          
          cursor: pointer;          
          background-color: #3080e8;          
          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(48, 128, 232, 0.7);          
          border-radius:50px;          
          opacity: 0;          
          pointer-events: none;          
          white-space: nowrap;          
          transition: opacity .2s ease-out;          
          }

Html код вставляете перед тегом </body>:
Код
<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_orange">          
          <span class="menu_label">Пользователи</span>          
          <a href="/index/15"><i class="absolute-center fa fa-user"></i></a>          
          </li>          
          <li class="menu_item menu_green">          
          <span class="menu_label">Сообщения</span>          
          <a href="/index/14"><i class="absolute-center fa fa-paper-plane-o"></i></a>          
          </li>          
          <li class="menu_item menu_crimson">          
          <span class="menu_label">Подписки</span>          
          <a href="load/0-0-0-0-17"><i class="absolute-center fa fa-star-o"></i></a>          
          </li>          
          <li class="menu_item menu_blue">          
          <span class="menu_label">Настройки</span>          
          <a href="/index/11"><i class="absolute-center fa fa-cog"></i></a>          
          </li>          
          <li class="menu_item menu_yellow">          
          <span class="menu_label">Выйти</span>          
          <a href="/index/10"><i class="absolute-center fa fa-sign-out"></i></a>          
          </li>          
          </ul>          
          <div class="menu_btn">          
          <span class="menu_label">          
          Меню          
          </span>          
          <i class="absolute-center fa fa-bars"></i>          
          </div>          
          </div>          
          </div>

Иконочный шрифт взят из сайта Fontawesome.


Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 11.02.2016 в 11:00
Материал просмотрен: 2389 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 17 комментариев

Пожаловаться
Сказать спасибо
Источник

17 комментариев


schoolonly
Неплохо.Правда, можно сделать задержку, с которой при наведении на кнопку меню будет держаться еще 5 сек.
Ромчик
Хорошо. Сделаю
ТОРНАДО
Красиво вот бы еще горизонтально бы сделать вообще цены бы не было.
Ромчик
Хорошо, на досуге и горизонтальную версию сделаю
yuzzasa
Рассмотрите, пожалуйста, возможность открывания меню только при клике, а не при наведении.
Ромчик
Учту, когда перерабатывать буду
YaVi
Виктор @YaVi 11.02.2016 17:287
+2
Отличный мини-профиль)
k
Цитата KopHack
Иконочный шрифт взят из сайта Fontawesome.
vkcommarketvzlom108
Можете, пожалуйста, помочь, вот так все сьехало: https://yadi.sk/i/8VQJRbyhogsMk
k
ты наверное стили не установил.
vkcommarketvzlom108
не, стили были установлены, щас скрипт заработал. может подключался как-то долго) хотя видны только цветные кружки, т.е. только цвета, картинок нету
k
установите тогда себе Иконочный шрифт Fontawesome. и все будет!
1 2 »
avatar
Партнерская программа uKitCPA
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 2
Гостей: 2
Пользователей: 0