Плавающий мини-профиль для uCoz
827материалов
228тем на форуме
3004комментария
6161пользователь

Плавающий мини-профиль для 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
Материал просмотрен: 1639 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 18 комментариев

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

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


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