Вид материаловМенюКатегорииИнформерКнопки
Наш чат 1
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1

Фиксированный мини профиль с выезжающим меню

Добавлено 05-01-2018 в 14:47

Фиксированный мини профиль с выезжающим меню
Здравствуйте! давно не было новых материалов на сайте, это связано с праздниками и тем что я работаю один над сайтам и вот сегодня хочу предложить вам скрипт мини профиля

Мини профиль фиксированный, располагается в правом верхнем углу, при наведении на него плавно выезжает меню пользователя так же есть визуальное уведомление о новых сообщениях пользователя как в самом профиле так и в меню.

Видео демонстрация

Установка

Данный код нужно вставить в верхнюю часть сайта в самый верх
Код
<div id="min_prof_g">
  <a href="/index/8"><div id="min_prof_g_name">$USERNAME$</div>
  <div id="min_prof_g_a"> <?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$"><?else?><img src="http://boba.ucoz.com/img/g_tema.png"><?endif?></div></a>
  <?if($UNREAD_PM$=="0")?><?else?><div id="min_prof_g_l"><a href="$PM_URL$">$UNREAD_PM$</a></div><?endif?>
  <div id="min_prof_g_k"></div>
  <div id="clr"></div>
  <div id="min_prof_g_m">
  <ul> <?if($USER_LOGGED_IN$)?>  
  <li><a href="/index/8">Мой профиль</a></li>
  <li><a href="">Ссылка </a></li>
  <li><a href="$PM_URL$">Сообщения</a></li>
  <li><a href="/index/11">Настройки</a></li>
  <li><a href="$LOGOUT_LINK$">Выйти</a></li><?else?>
  <li><a href="$LOGIN_LINK$">Войти</a></li>
  <li><a href="$REGISTER_LINK$">Зарегистрироваться</a></li><?endif?>
  </ul>
  </div>
</div>


Данный код вам нужно вставить в вашу таблицу стилей в самый конец
Код
#min_prof_g {
  width: 120px;
  height: 120px;
  background: url("../img/min_prof.png")no-repeat ;
  position: fixed;
  right: 0;
  padding:15px;
  z-index: 9999100;
}
#min_prof_g:hover {
  width: 200px;
  height: 250px;
  background: rgba(97,207,235,.8);
  -o-transition: all .3s;
  -moz-transition: all .3s;
  -webkit-transition: all .3s;
  transition: all .3s;
}

#min_prof_g_a {
  position: absolute;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border: 3px solid #FFF;
  border-radius: 50%;
  -o-border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  right: 15px;
}

#min_prof_g_a img {
  width: 40px;
  height: 40px;
  object-fit: cover;
}

#min_prof_g_name {
  float: left;
  color: #000;
  font-size: 16px;
  font-family: 'Open Sans', Tahoma, sans-serif;
  line-height: 40px;
  padding-left: 20px;
  display: none;

}
#min_prof_g:hover #min_prof_g_name, #min_prof_g:hover #min_prof_g_m,#min_prof_g:hover #min_prof_g_l a {
  display: block;
}

#min_prof_g_m {
  padding-top: 20px;
  display: none;
}
#min_prof_g_m ul {
  padding: 0 20px;
  width: 170px;
}
#min_prof_g_m ul li a {
  color: #000;
  font-size: 13px;
  font-family: 'Open Sans', Tahoma, sans-serif;
  line-height: 30px;
  display: block;
}
#min_prof_g_m ul li a:hover {
  color: #fff;
}

#min_prof_g_l {
  position: absolute;
  margin-left: -10px;
  margin-top: 40px;
  background: url("../img/ls_p.png")no-repeat;
  background-size: cover;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  -o-border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}
#min_prof_g_l a {
  width: 28px;
  height: 28px;
  text-align: center;
  font-size: 12px;
  font-family: 'Open Sans', Tahoma, sans-serif;
  color: #FFF;
  display: none;
  line-height: 28px;
}
#min_prof_g:hover #min_prof_g_l {
  margin-left: 120px;
  margin-top: 120px;
  width: 28px;
  height: 28px;
  background: rgba(253,72,76,.7);
  z-index: -1;
  -o-transition: all .3s;
  -moz-transition: all .3s;
  -webkit-transition: all .3s;
  transition: all .3s;
}
#clr {
  clear: both;
}


Теперь осталось загрузить картинки из папки "img"в папку "img" в файловый менеджер на своём сайте и всё готово!

Скачать файлы материала

36 загрузок 8.9 Kb Скачать
Скачивание файлов без ограничений доступно только зарегистрированным пользователям.

Оставить комментарий

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

Регистрация Вход
Комментарии
pa patali2k

Спасибо большое!

06-06-2025 в 05:58 материал
waak

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

Код
У вас $NUM_ENTRIES$ заклад<?if($NUM_ENTRIES$%10=0||$NUM_ENTRIES$%10>4||$NUM_ENTRIES$%100>10&&$NUM_ENTRIES$%100<15)?>ок<?else?><?if($NUM_ENTRIES$%10=1)?>ка<?else?>ки<?endif?><?endif?>

05-06-2025 в 22:07 материал
pa patali2k

Добрый день! Waak подскажи как вы сделали У вас N закладок, у меня выходит 1-5 например, так если можете подскажите как вывести кол.во закладок пользователя например в мини профиль, чтоб кол.во закладок показывало на любой странице

04-06-2025 в 16:51 материал
pa patali2k

Добрый день!
Сегодня снова попробовал установить скрипт и он снова не заработал, все перерыл, изменял, убирал и никак не заводился.
Решение: В общих настройках сайта нужно переключить Версия библиотеки jQuery: на jquery-1.12.4.min.js
В общем теперь просьба, не могли бы переписать скрипт закладок под jquery-3.6.0.min.js qv

19-05-2025 в 17:16 материал
waak

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

13-04-2025 в 17:56 материал
pa patali2k

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

13-04-2025 в 01:45 материал
ch chirianovconstantin

Спасибо буду ждать

18-02-2025 в 23:03 материал
waak

Здравствуйте сейчас нет времени на это но чуть позже сделаю выложу на сайт

16-02-2025 в 18:32 материал
ch chirianovconstantin

здавствуите помогите зделать скрипт под модуля бог

15-02-2025 в 23:13 материал
waak

Пожалуйста, вам спасибо что заходите на сайт

10-02-2025 в 12:32 материал
sa sardor

Спасибо огромное

06-02-2025 в 13:34 материал
Fr Frag

Прикольно работает

15-11-2024 в 01:20 материал

Услуга от адмиистратора

Вы можите заказать установку от администратара ( waak ) этого материала или любого другога с нашего сайта на ваш сайт или доработку под ваши нужды!

от 150рзаказать