Простой мини-профиль для uCoz
09.04.2026 1145 0 VeL
Мини-профиль - это небольшая часть сайта. Экий элемент навигации для пользователя где он может перейти на свою персональную страницу, открыть настройки и дальше в таком же духе. В многих случаях мини-профиль состоит из аватарки и различными ссылками на персональные разделы.
Представляю вашему вниманию оригинальный мини-профиль от ucozblog с минимальной информацией, но довольно таки большим функционалом. В случае если пользователь авторизован на сайте при нажатии на аватарку будет выпадать меню. С помощью данного меню пользователь сможет перейти на свой профиль, в настройки, на страницу списка пользователей, и конечно же разместить свой материал на сайте. Если пользователь не авторизовался на вашем сайте, то показывается только страница регистрации и
вход.
Вот так все это и выглядит:
Установка:
1. Скачиваем архив и заливаем папку
images в корень вашего сайта.
2. Добавьте код в Таблицу стилей (CSS):
Код
/****-----start-wrapper-dropdown-2----****/
.wrapper-dropdown-2 { position: relative; cursor: pointer; outline: none; text-align:right; float:left; padding-right:35px;
} .wrapper-dropdown-2 img { width: 50px; border:2px solid #97d6ad; margin:0 auto; border-radius:50%;
} .wrapper-dropdown-2 .dropdown { /* Size & position */ position: absolute; top: 135%; width: 180px; right: -30px; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; -o-border-radius:3px; /* Styles */ -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; list-style: none; z-index:1; /* Hiding */ opacity: 0; pointer-events: none; font-size: 6px; text-align:left;
}
.dropdown:before { content: ""; width: 0; height: 0; position: absolute; left: 78px; top: -6%; border-width: 0px 12px 12px 12px; border-style: solid; border-color: #37867E rgba(0, 0, 0, 0);
}
.wrapper-dropdown-2 .dropdown li
{ -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
}
.wrapper-dropdown-2 .dropdown li a { display: block; text-decoration: none; color: #D4D4D6; padding:15px 10px 15px 10px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; text-transform: capitalize; font-size: 13px; font-weight: 100;
} .dropdown li a:hover{ color:#FFF;
} /* Hover state */
.wrapper-dropdown-2 .dropdown li:hover { background: #97d6ad; color:#A9A9A9;
}
.wrapper-dropdown-2 .dropdown li:nth-child(1) { border-top-left-radius:3px; -webkit-border-top-left-radius:3px; -moz-border-top-left-radius:3px; -o-border-top-left-radius:3px; border-top-right-radius:3px; -webkit-border-top-right-radius:3px; -moz-border-top-right-radius:3px; -o-border-top-right-radius:3px;
}
.wrapper-dropdown-2 .dropdown li:nth-child(4){ border-bottom-left-radius:3px; -webkit-border-bottom-left-radius:3px; -moz-border-bottom-left-radius:3px; -o-border-bottom-left-radius:3px; border-bottom-right-radius:3px; -webkit-border-bottom-right-radius:3px; -moz-border-bottom-right-radius:3px; -o-border-bottom-right-radius:3px;
}
.wrapper-dropdown-2 .dropdown li:nth-child(2),.wrapper-dropdown-2 .dropdown li:nth-child(3),.wrapper-dropdown-2 .dropdown li:nth-child(4)
{ border-radius: none;
}
/* Active state */
.wrapper-dropdown-2.active .dropdown { opacity: 1; pointer-events: auto;
}
/* No CSS3 support */
.no-opacity .wrapper-dropdown-2 .dropdown,
.no-pointerevents .wrapper-dropdown-2 .dropdown { display: none; opacity: 1; /* If opacity support but no pointer-events support */ pointer-events: auto; /* If pointer-events support but no pointer-events support */
}
.no-opacity .wrapper-dropdown-2.active .dropdown,
.no-pointerevents .wrapper-dropdown-2.active .dropdown { display: block;
}
.wrapper-dropdown-2.active .dropdown { opacity: 1; pointer-events: auto; text-align: left; background:#37867E;
} .wrapper-dropdown-2 .dropdown li a span{ width: 16px; height: 16px; display: inline-block; float:right;
} .icon0{ background: url(../images/pro.png) no-repeat ;
}
.icon1{ background: url(../images/st.png) no-repeat ;
} .icon2{ background: url(../images/u.png) no-repeat ;
}
.icon3{ background: url(../images/pro1.png) no-repeat ;
}
/****-----end-wrapper-dropdown-2----****/
Вставьте там, где хотели бы видеть мини-профиль. Например, в верхней части сайта.
Код
<div class="h_menu"> <?if($USER_LOGGED_IN$)?> <div id="dd" class="wrapper-dropdown-2" tabindex="1"><img src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>/.s/t/1090/logo-img.png<?endif?>" alt="" /> <div class="dropdown"> <li><a href="$PERSONAL_PAGE_LINK$">Мой профиль<span class="icon icon0"> </span></a></li> <li><a href="$USERS_LIST_URL$">Пользователи<span class="icon icon1"> </span></a></li> <li><a href="/index/11">Настройки<span class="icon icon2"> </span></a></li> <li><a href="/load/0-0-0-0-1">Добавить материал<span class="icon icon3"> </span></a></li> </div>
</div>
<?else?> <div id="dd" class="wrapper-dropdown-2" tabindex="1"><img src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>/.s/t/1090/logo-img.png<?endif?>" alt="" /> <div class="dropdown"> <li><a href="$REGISTER_LINK$">Регистрация</a></li> <li> <a href="$LOGIN_LINK$" class="last">Вход</a> </li> </div>
</div>
<?endif?> </div> <!--start-script--> <script type="text/javascript"> function DropDown(el) { this.dd = el; this.initEvents(); } DropDown.prototype = { initEvents : function() { var obj = this; obj.dd.on('click', function(event){ $(this).toggleClass('active'); event.stopPropagation(); }); } } $(function() { var dd = new DropDown( $('#dd') ); $(document).click(function() { // all dropdowns $('.wrapper-dropdown-2').removeClass('active'); }); }); </script> <!--end-script-->
Вот и завершилась установка. Вам осталось только подогнать его под свой сайт, заменить цвета если это необходимо.
Комментариев:0
