» »

Выдвижной мини-профиль на сайт uCoz


Выдвижной мини-профиль на сайт uCoz

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

Что сама кнопка не будет не кому мешать, но каждый пользователь здесь будет понимать, как что сделать. Некоторые регистрируются на сайт через социальные кнопки и там не установлено изображение, здесь будет автоматически показывать No Avarat и при наведение будет появляться небольшой эффект. А так очень удобный для фиксированного ресурса, чтоб все было на фоне, но и главное это вы освободите место под него. Если вам нужно будет закрыть его, то с ним идет кнопка яркая, что при открытие вы сделаете свое дело и закроете и после этого появится кнопка, которую вы можете по стилям еще в стилистике изменить.

Приступаем к установке:

Это основной код, который нужно разместить в низ сайта.

Код
<?if($USER_LOGGED_IN$)?>  
  <ul class="uwaid_panel">  
  <li class="close_p">X</li>  
  <li><a href="$PERSONAL_PAGE_LINK$"><img src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>http://zornet.ru/Ajaxoskrip/Forma_skriptov/zZdU4oy.jpg<?endif?>">Мой профиль</a></li>  
  <li><a href="$PM_URL$"><i class="uwaid_icon message"></i>Сообщения <span>$UNREAD_PM$</span></a></li>  
  <li><a href="/index/11"><i class="uwaid_icon settings"></i>Изменить данные</a></li>  
  <li><a href="$LOGOUT_LINK$"><i class="uwaid_icon exit"></i>Выйти с сайта</a></li>  
  </ul><script src="/js/table.js" type="text/javascript"></script>  
  <div class="my_profile">Мой профиль</div>  
  <script type="text/javascript" src="/js/js_profil.js"></script>  
<?endif?>


Теперь переходим к стилям, вы при нажатие получите их, они будут под изображением.

Светлый оттенок:

Мини профиль выдвижной - светлый

Стили на светлый мини профиль

Темный оттенок:

Мини профиль темный на сайт

Стили на темный мини профиль

Так будет смотрется кнопка с монитора:



Скачиваем архив и там будет 2 папки, что нужно разместить в файловом менеджере. Но здесь можно заканчивать, выбираем стили и прописываем в CSS сайта, скрипт остается один, его менять не нужно.

Источник: StarWebs.Ru
17.10.2016 Загрузок: 12 Просмотров: 549 Комментарий: (27)

Поделиться в социальных сетях

Материал разместил

Комментарий: 27
Сопрано
Сопрано 17.10.2016 21:471
0
Сообщение, так вообще нормально, можно сейчас точно не пихать этот профиль в горизонтальное меню, а просто кнопкой выставить и все, по функциям там не чего лишнего нет, а то что нужно все установлено.
Kosten
Kosten 17.10.2016 22:022
0
Проверил на тестовой площадке, все работает и также все функций показывают корректно. Как говорил. кнопку вызова профиля можно поменять, и сделать что то свое, если она вам по дизайн не подходит или по каким то другим причинам.
FeStemBer
FeStemBer 17.10.2016 22:043
0
Так вообще можно же сделать и под другой цвет, все же в стилях выставляется, если идут 2 стиля, а там из ссылок, только на кнопки.
Kosten
Kosten 18.10.2016 04:0723
0
Скинул всю палитру по цвету, возможно поможет, чтоб не искать как там сменить.
Сафрон
Сафрон 17.10.2016 22:144
0
Не очень нравится, желтый цвет на светлом, вот на темном он будет смотреться, просто эти оттенки вмести всегда ярко выглядят.
Советник
Советник 17.10.2016 22:215
0
Что то новое, но если немного только сами кнопки по меньше сделать и шрифт, то нормально. Но так смотрится не чего, что то подобное уже встречал, но не на uCoz, хотя можно вообще кнопку убрать и при нажатие надпись сделать, но скнопкой как то понятнее.
1 2 »
avatar