Мини-профиль с выдвижными пунктами

Уважаемый гость! Для скачивания файлов с нашего портала необходимо авторизоваться:

Понравилась статья?

Поделись с друзьями!
Красивый и функциональный мини-профиль с выдвижными пунктами для сайтов uCoz. Красный цвет мини-профиля придает ему элегантность. Благодаря простому виду и удобному интерфейсу, мини-профиль впишется почти в любой дизайн.

Установка
1. Скачать архив с uCozBook, и загрузить его содержимое в корень сайта (папки "images" и "js")
2. В конец таблицы стилей CSS вставьте следующий код:
 
Код

.icon{  
  background: url(../images/img-sprite.png);  
  width: 25px;  
  height: 23px;  
  display: inline-block;  
  float:left;  
  }  
  .icon {  
  background: url(../images/img-sprite.png) no-repeat -1px -2px;  
  }  

  .stat{  
  background: url(../images/img-sprite.png) no-repeat -30px -4px;  
  }  

  .msg{  
  background: url(../images/img-sprite.png) no-repeat -62px -2px;  
  }  

  .signout{  
  background: url(../images/img-sprite.png) no-repeat -93px -2px;  
  }  
  ul{  
  margin:0;  
  padding:0;  
  }  
  ul.content{  
  width: 362px;  
  margin: 3% auto;  
  background: #e4644b;  
  border-radius: 5px;  
  -webkit-border-radius: 5px;  
  -moz-border-radius: 5px;  
  -o-border-radius: 5px;  
  font-weight: 100;  
  }  
  li.button a {  
  padding: 27px 27px;  
  margin: 0;  
  display: block;  
  }  
  li.dropdown {  
  background: #484141;  
  font-weight: 100;  
  font-size: 14px;  
  }  
  li.button {  
  list-style: none;  
  text-align: left;  
  }  
  li.menu{  
  padding: 0;  
  width: 100%;  
  border-bottom: 1px solid#CD5F4A;  
  margin: 0;  
  }  
  li.menu:hover {  
  background: #C6533D;  
  }  
  li.button a:hover{  
  text-decoration:none;  
  }  
  li.button a span{  
  margin-right: 22px;  
  }  
  .dropdown{  
  display:none;  
  padding: 0;  
  width:100%;  
  }  
  .dropdown li{  
  color: #ae9f9f;  
  }  
  .dropdown li a{  
  border-left: 6px solid #484141;  
  padding: 14px 0 15px 25px;  
  display: block;  
  }  
  ul.icon-navigation li a span {  
  color: #CB5252;  
  float: right;  
  margin-right: 28px;  
  font-size: 14px;  
  font-weight: 100;  
  }  
  ul.icon-navigation li a:hover {  
  border-left: 6px solid#d05942;  
  }  
  li.menu.info {  
  border-bottom: none;  
  }  
  li.button i {  
  background: #374559;  
  float: right;  
  padding: 4px 12px;  
  font-size: 13px;  
  display: block;  
  border-radius: 4px;  
  -webkit-border-radius: 4px;  
  -moz-border-radius: 4px;  
  -o-border-radius: 4px;  
  font-style: normal;  
  }  
  ul.icon-navigation{  
  position: relative;  
  }  
  ul.icon-navigation li:before {  
  content: "";  
  width: 0;  
  height: 0;  
  position: absolute;  
  right: 310px;  
  top: 0%;  
  border-width: 11px 12px 0px 12px;  
  border-style: solid;  
  border-color: #e4644b rgba(0, 0, 0, 0);  
  }  
  ul.icon-navigation li a {  
  color: #999;  
  }  
  h2{  
  font-size:12px;  
  font-weight:normal;  
  padding-right:140px;  
  right:0;  
  text-align:right;  
  text-transform:uppercase;  
  top:15px;  
  }  
  .clear{  
  clear:both;  
  }  
  #main{  
  margin:15px auto;  
  text-align:center;  
  width:920px;  
  position:relative;  
  }  
  a, a:visited {  
  color:#fff;  
  }  
  p{  
  padding:10px;  
  text-align:center;  
  }  
  .copy-right {  
  text-align: center;  
  margin-top: 30em;  
  }  
  .copy-right p {  
  color: #fff;  
  padding: 0;  
  margin: 0;  
  }  
  .copy-right p a{  
  color: #fff;  
  }  
  .copy-right p a:hover {  
  color: #CD5F4A;  
  }  
  .menu {  
  list-style-type: none !important;
  }  
  /*--адаптив--*/  
  @media (max-width:1440px){  
  .copy-right {  
  margin-top: 16em;  
  }  
  }
  @media (max-width:320px){
  li.button a {  
  width: 223px;  
  font-size: 18px;  
  }  
  ul.content {  
  width: 285px;  
  top: 3em;  
  }  
  li.button a span {  
  right: 236px;  
  }  
  .dropdown li a {  
  padding: 11px 0 9px 18px;  
  }  
  .copy-right {  
  margin-top: 10em;  
  }  
  body {  
  min-height: 480px;  
  margin: 0;  
  }  
  .copy-right p {  
  padding: 0;  
  margin: 0;  
  }  
  h1 {  
  font-size: 1.5em;  
  }  
  }  
  /*--адаптив--*/


3. Идем во вкладку "Дизайн" — "Быстрая замена участков шаблона" и выбираем "Многострочный" режим замены. В "Что заменить" вставляем:
Код
</head>

В "На что заменить" вставляем:
Код
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>  
  <link href='http://fonts.googleapis.com/css?family=Exo+2:400,700,100' rel='stylesheet' type='text/css'>
</head>

4. В место, где хотим видеть мини-профиль, вставляем его каркас:
Код
<?if($USER_LOGGED_IN$)?>  
  <ul class="content">  
<li class="menu">  
<ul>  
<li class="button"><a href="$PERSONAL_PAGE_LINK$">$USERNAME$<span class="icon"> </span></a></li>  
</ul>
</li>
<li class="menu">  
<ul>  
<li class="button"><a href="#">Сообщения<span class="icon stat"> </span><i>$UNREAD_PM$</i></a></li>
<li class="dropdown">  
<ul class="icon-navigation">  
<li><a href="/index/14">Входящие</a></li>  
<li><a href="/index/14-0-1">Исходящие</a></li>  
<li><a href="/index/14-0-0-1">Отправить сообщение</a></li>  
</ul>  
</li>  
</ul>
</li>  
<li class="menu">  
<ul>  
<li class="button"><a href="/index/11">Настройки<span class="icon msg"> </span> </a></li>  
</ul>
</li>  
<li class="menu info">
<ul>  
<li class="button"><a href="/index/10">Выйти<span class="icon signout"> </span> </a></li>  
</ul>  
</li>  
  </ul>  
  <?endif?>

5. Снова идем во вкладку "Дизайн" — "Быстрая замена участков шаблона" и выбираем "Многострочный" режим замены. В "Что заменить" вставляем:
Код
</body>

В "На что заменить" вставляем:
Код
<script type="text/javascript" src="/js/script.js"></script>

Добавил: Admin Просмотров: 2053 Загрузок: 33 Категория: Интересные решения Комментарии
avatar
1
Спасибо! Полезная вещь!
А как изменить ширину блока? В дизайн сайта не вписывается с такими размерами
avatar
0
2
Код
ul.content {
    width: Ширина в пикселяхpx;
}
avatar
3
установил себе спасибо!
avatar
4
не работает на firefox
avatar
0
5
Теперь работает: http://test-0521.ucoz.com/
Немного переписал инструкцию.
avatar
6
Установил отлично работает спасибо)
avatar
7
good! nice work thank you very mach! smile
avatar