Материалы

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

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

Установка 


1. Скачать архив и загрузить его содержимое в корень сайта (папки "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>

Советуем к просмотру:

Сохраните в социальную сеть
Прикрипления

Комментарии
Комментариев пока нет, вы можете оставить комментарий первым.
Оставить комментарий
avatar