Боба
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1

Для добавления необходима авторизация
Граффити
Форма входа

Закрыть

Круглый фиксированный мини профиль с выпадающими разноцветными кнопками
Скрипты

Всем привет! сегодня хочу поделиться с вами очередной своей работай "Мини профиль" данный мини профиль подойдет на любой сайт и под любую тематику

О скрипте

По умолчанию видна только аватарка пользователя, после клика на неё откроется меню с четырьмя ссылками, ссылки круглые с иконками и разного цвета

Установка

Для начало нам нужно в любой глобальный блок поместить вот этот код
Код

<div id="my_prof">
<div class="m_li_g"><?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$"><?else?><img src="Ссылка на картинку нет аватара"><?endif?></div>
<a href="$PERSONAL_PAGE_LINK$" title="Профиль" class="m_li_n mlist "></a>
<a href="/index/11" title="Настройки" class="m_li_m mlist "></a>
<a href="$LOGOUT_LINK$" title="Выход" class="m_li_b mlist "></a>
<a href="/index/14" title="Сообщения" class="m_li_l mlist "></a>
<div id='clr'></div>
</div>

Цитата

Не забудьте заменить текст "Ссылка на картинку нет аватара" на соответствующую ссылку
Теперь выберите один из подходящих вам вариантов и скопируйте стили и вставьте их вконец вашей таблицы стилей
1 Вариант
Код
#my_prof {
  position: fixed;
  left: 10px;
  top: 20px;
}

.m_li_g {cursor: pointer; background: #45C7EA;width: 80px;height: 80px;border-radius: 50%;overflow: hidden;border: 3px solid #45C7EA;}
.m_li_g img {
  width: 80px;height: 80px;
  object-fit: cover;
}
.m_li_n {background: #EAA245 url("../img/prof_img.png")no-repeat;
background-size: cover;
width: 40px;
height: 40px;
border-radius: 50%;
display:none;
}
.m_li_m {background: #EA4583 url("../img/prof_img.png")no-repeat;
background-size: cover;
background-position: -81px 0;
width: 40px;height: 40px;border-radius: 50%;display:none;
}
.m_li_b {background: #EA45E0 url("../img/prof_img.png")no-repeat;
background-position: -122px 0;
background-size: cover;
width: 40px;height: 40px;border-radius: 50%;display:none;
}
.m_li_l {background: #A6EA45 url("../img/prof_img.png")no-repeat;
background-position: -42px 0;
background-size: cover;
width: 40px;height: 40px;border-radius: 50%;display:none;
}

.mlist:hover {
  box-shadow: 0 0 20px rgba(0,0,0,.3);
}

.mlist_dop {
  display: block!important;
}

.m_li_n.mlist_dop {position: absolute; margin: 15px 10px;}
.m_li_m.mlist_dop {position: absolute; margin: -35px 95px;}
.m_li_b.mlist_dop {position: absolute; margin: -85px 95px;}
.m_li_l.mlist_dop {position: absolute; margin: 5px 60px;}

.clr {
  clear: both;
}
2 Вариант
Код
#my_prof {
  position: fixed;
  right: 10px;
  top: 20px;
}

.m_li_g {cursor: pointer; background: #45C7EA;width: 80px;height: 80px;border-radius: 50%;
  overflow: hidden;border: 3px solid #45C7EA;}
.m_li_g img {
  width: 80px;height: 80px;
  object-fit: cover;
}
.m_li_n {background: #EAA245 url("../img/prof_img.png")no-repeat;
background-size: cover;
width: 40px;
height: 40px;
border-radius: 50%;
display:none;
}
.m_li_m {background: #EA4583 url("../img/prof_img.png")no-repeat;
background-size: cover;
background-position: -81px 0;
width: 40px;height: 40px;border-radius: 50%;display:none;
}
.m_li_b {background: #EA45E0 url("../img/prof_img.png")no-repeat;
background-position: -122px 0;
background-size: cover;
width: 40px;height: 40px;border-radius: 50%;display:none;
}
.m_li_l {background: #A6EA45 url("../img/prof_img.png")no-repeat;
background-position: -42px 0;
background-size: cover;
width: 40px;height: 40px;border-radius: 50%;display:none;
}

.mlist:hover {
  box-shadow: 0 0 20px rgba(0,0,0,.3);
}

.mlist_dop {
  display: block!important;
}

.m_li_n.mlist_dop {position: absolute; margin: 15px 0 0 20px ;}
.m_li_m.mlist_dop {position: absolute; margin: -35px 0 0 -55px ;}
.m_li_b.mlist_dop {position: absolute; margin: -85px 0 0 -55px ;}
.m_li_l.mlist_dop {position: absolute; margin: 5px 0 0 -30px ;}

.clr {
  clear: both;
}
3 Вариант
Код
#my_prof {
  position: fixed;
  left: 10px;
  bottom: 30px;
}

.m_li_g {cursor: pointer; background: #45C7EA;width: 80px;height: 80px;border-radius: 50%;overflow: hidden;border: 3px solid #45C7EA;}
.m_li_g img {
  width: 80px;height: 80px;
  object-fit: cover;
}
.m_li_n {background: #EAA245 url("../img/prof_img.png")no-repeat;
background-size: cover;
width: 40px;
height: 40px;
border-radius: 50%;
display:none;
}
.m_li_m {background: #EA4583 url("../img/prof_img.png")no-repeat;
background-size: cover;
background-position: -81px 0;
width: 40px;height: 40px;border-radius: 50%;display:none;
}
.m_li_b {background: #EA45E0 url("../img/prof_img.png")no-repeat;
background-position: -122px 0;
background-size: cover;
width: 40px;height: 40px;border-radius: 50%;display:none;
}
.m_li_l {background: #A6EA45 url("../img/prof_img.png")no-repeat;
background-position: -42px 0;
background-size: cover;
width: 40px;height: 40px;border-radius: 50%;display:none;
}

.mlist:hover {
  box-shadow: 0 0 20px rgba(0,0,0,.3);
}

.mlist_dop {
  display: block!important;
}

.m_li_n.mlist_dop {position: absolute; margin: -135px 20px;}
.m_li_l.mlist_dop {position: absolute; margin: -115px 70px;}
.m_li_m.mlist_dop {position: absolute; margin: -70px 95px;}
.m_li_b.mlist_dop {position: absolute; margin: -20px 85px;}

.clr {
  clear: both;
}
4 Вариант
Код
#my_prof {
  position: fixed;
  right: 10px;
  bottom: 30px;
}

.m_li_g {cursor: pointer; background: #45C7EA;width: 80px;height: 80px;border-radius: 50%;overflow: hidden;border: 3px solid #45C7EA;}
.m_li_g img {
  width: 80px;height: 80px;
  object-fit: cover;
}
.m_li_n {background: #EAA245 url("../img/prof_img.png")no-repeat;
background-size: cover;
width: 40px;
height: 40px;
border-radius: 50%;
display:none;
}
.m_li_m {background: #EA4583 url("../img/prof_img.png")no-repeat;
background-size: cover;
background-position: -81px 0;
width: 40px;height: 40px;border-radius: 50%;display:none;
}
.m_li_b {background: #EA45E0 url("../img/prof_img.png")no-repeat;
background-position: -122px 0;
background-size: cover;
width: 40px;height: 40px;border-radius: 50%;display:none;
}
.m_li_l {background: #A6EA45 url("../img/prof_img.png")no-repeat;
background-position: -42px 0;
background-size: cover;
width: 40px;height: 40px;border-radius: 50%;display:none;
}

.mlist:hover {
  box-shadow: 0 0 20px rgba(0,0,0,.3);
}

.mlist_dop {
  display: block!important;
}

.m_li_n.mlist_dop {position: absolute; margin: -135px 0 0 10px;}
.m_li_l.mlist_dop {position: absolute; margin: -115px 0 0 -40px;}
.m_li_m.mlist_dop {position: absolute; margin: -70px 0 0 -60px;}
.m_li_b.mlist_dop {position: absolute; margin: -20px 0 0 -55px;}

.clr {
  clear: both;
}
Теперь вам осталось только скачать архив с картинкой и залить её в папку img

Также хочу обратить ваше внимание на то что данный профиль будет показываться и гостям чтоб этого не было поместите первый код между вот этим
Код
<?if($GROUP_ID$=="0")?><?else?>ТУТ ПЕРВЫЙ КОД ВМЕСТО ТЕКСТА<?endif?>

Особености:

Тематика
Для любого сайта
Браузеры
Одинаково работаее на всех браузерах последней версии
Адаптация
Нет
Архив
Все нужные файлы
Размер
4.2Kb

Скачивать файлы могут только зарегистрированные пользователи, Войдите на сайт под своим именем.

Запись добавлена

Комментарии

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

Добавлять комментарии могут только зарегистрированные пользователи, Войдите на сайт под своим именем.