» »

Профиль с функциями виде кнопки для uCoz


Профиль с функциями виде кнопки для uCoz

Это оригинальный мини профиль пользователя в котором содержаться все для него функций. Он выполнен стильно для сайта uCoz и будет в нижнем правом углу стоять. Возможно вы сякие профили видели, но думаю этот в первые вам попался с его уникальными и оригинальными кнопками и безусловно как уже сказано было, функциями.

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

Это так он на сайте стоять будет.



Теперь непосредственно переходим к установки.

Первое, что нужно сделать, это поставить код вверх сайта, который и будет отображать в кнопках вид.
Ставим между hеad код /hеad

Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


Переходим в CSS:

Код
.menu_br {  
  position: fixed;  
  bottom: 0px;  
  right: -15px;  
  }  

  .absolute-center {  
  position: absolute;  
  top: 0;  
  left: 0;  
  bottom: 0;  
  right: 0;  
  margin: auto;  
  width: 20px;  
  height: 20px;  
  text-align: center;  
  font-size: 18px!important; color: #fff;  
  }  
  .menu_drop {  
  position: absolute;  
  bottom: 15px;  
  right: 30px;  
  }  
  .menu_list {  
  margin: 0 0 20px;  
  padding: 0 0 0 0px;  
  list-style: none;  
  opacity: 0;  
  transition: opacity .2s ease-out;  
  display: none;  
  }  
  .menu_drop:hover .menu_list {  
  opacity: 1; display:block;  
  }  
  .menu_item {  
  position: relative;  
  width: 40px;  
  height: 40px;  
  margin: 15px 0;  
  cursor: pointer;  
  background-color: #f0f0f0;  
  border-radius: 50%;  
  box-shadow: 0 4px 8px rgba(0,0,0,.25);  
  }  
  .menu_item > a img {  
  border-radius: 50%;  
  width: 40px;  
  height: 40px;  
  }  
  .menu_yellow {  
  background-color: #d4a717;  
  }  
  .menu_green {  
  background-color: green;  
  }  
  .menu_orange {  
  background-color:orange;  
  }  
  .menu_crimson {  
  background-color:crimson;  
  }  
  .menu_blue {  
  background-color: #3c80f6;  
  }  

  .menu_item:hover > .menu_label {  
  opacity: 1;  
  }  
  .menu_btn {  
  position: relative;  
  width: 45px;  
  height: 45px;  
  float: right;  
  cursor: pointer;  
  background-color: #3080e8;  
  border-radius: 50%;  
  box-shadow: 0 4px 8px rgba(0,0,0,.25);  
  }  
  .menu_btn:hover .menu_label {  
  opacity: 1;  
  }  
  .menu_label {  
  position: absolute;  
  top: 14px;  
  right: 115%;  
  padding: 4px 8px;  
  font-size: 14px;  
  color: #fff;  
  background-color:rgba(48, 128, 232, 0.7);  
  border-radius:50px;  
  opacity: 0;  
  pointer-events: none;  
  white-space: nowrap;  
  transition: opacity .2s ease-out;  
  }


И остается поставить основной код и ставим в низ сайта.

Код
<div class="menu_br">  
  <div class="menu_drop">  
  <ul class="menu_list">  
  <li class="menu_item">  
  <span class="menu_label">$USERNAME$</span>  
  <a href="/index/8-$USER_ID$"><img src="$USER_AVATAR_URL$" alt="" /></a>  
  </li>  
  <li class="menu_item menu_orange">  
  <span class="menu_label">Пользователи</span>  
  <a href="/index/15"><i class="absolute-center fa fa-user"></i></a>  
  </li>  
  <li class="menu_item menu_green">  
  <span class="menu_label">Сообщения</span>  
  <a href="/index/14"><i class="absolute-center fa fa-paper-plane-o"></i></a>  
  </li>  
  <li class="menu_item menu_crimson">  
  <span class="menu_label">Подписки</span>  
  <a href="load/0-0-0-0-17"><i class="absolute-center fa fa-star-o"></i></a>  
  </li>  
  <li class="menu_item menu_blue">  
  <span class="menu_label">Настройки</span>  
  <a href="/index/11"><i class="absolute-center fa fa-cog"></i></a>  
  </li>  
  <li class="menu_item menu_yellow">  
  <span class="menu_label">Выйти</span>  
  <a href="/index/10"><i class="absolute-center fa fa-sign-out"></i></a>  
  </li>  
  </ul>  
  <div class="menu_btn">  
  <span class="menu_label">  
  Меню  
  </span>  
  <i class="absolute-center fa fa-bars"></i>  
  </div>  
  </div>  
  </div>


Если решите поменять кнопки, то переходим на сайт fontawesome.io и выбираем, что вам нужно, так как пол все мы в шапке установили стили.
Источник: http://kanavas.at.ua/
07.02.2016 Просмотров: 560 Комментарий: (11)

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

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

Комментарий: 11
Сопрано
Сопрано 07.02.2016 01:091
0
Так красиво и удобно сделано, а что будет, если просто выйти, что останется?
Kosten
Kosten 07.02.2016 01:122
0
По нему обратно не зайти, это скажем так, кнопка меню для пользователя, все как мини профиль, только не прописать логин и не зарегистрироваться с него.
Сопрано
Сопрано 07.02.2016 01:143
0
Но это минус, но не чего, всегда есть что поставить, для регистраций или входа на сайт, спасибо на профиль и тому кто создал.
Maryges
Maryges 07.02.2016 01:194
0
Сделано красиво и тени как вижу есть, но а что зарегистрироваться, для этого социальные кнопки есть и под логин, но можно было сделать, чтоб нажать на вход, появилось окно, так бы намного лучше будет, но и так почти не заметно.
Сафрон
Сафрон 07.02.2016 01:235
+1
Maryges, тут дело в другом! Ставим в блок регистрацию, но какая у вас выставлена, и в условные операторы заключаеи, а это вы когда вошли на сайт, просто этот блок исчезает, как раньше на всех сайтах было, это сейчас сделали профиль и ава появляется. И когда исчезнет, вы просто уже работаете этим скриптом, так как он полностью заменит мини профиль, и уже все оригинально видеться со стороны. Классно сделано, просто немного не доработали с условными операторами.
Сопрано
Сопрано 07.02.2016 01:276
0
Сафрон, а какие операторы нужны, что то забыл, что то связано с USER_LOGGED, чтоб закрывало, когда зашел на сайт.
Сафрон
Сафрон 07.02.2016 01:317
0
Если не ошибаюсь, чтоб пользователь зашел на сайт и все закрылось, нужно эти операторы.

Код
<?if($USER_LOGGED_IN$)?> Здесь код профиля, что заходите на сайт <?endif?>
Kosten
Kosten 07.02.2016 01:348
0
А вот нет тех профилей старых, и уже с головы вылетело, мне кажется эти операторы отвечают, но не нужно закрывать этот код, который здесь.
ucozmental
ucozmental 07.02.2016 01:379
0
Kosten, так все нормально, но личных сообщений на нем нет.
AnTron
AnTron 07.02.2016 01:4010
0
Для чего здесь сообщение, если только при наведение будет открываться. Это что нужно постоянно открывать и смотреть, вот как раз оно лишнее, есть много кодов под него. Так задумка нормальная, как дополнение, хотя все функций есть и в профиле, но если только операторами закрывать, то по теме будет стоять, но кому как.
Tergran
Tergran 07.02.2016 01:4511
0
Но это нужно сообщение переносить на другую сторону и если есть кнопка вверх, также. Просто этот профиль в низу будет и должен один. Сейчас его установил, так на светлом дизайн нормально смотрится и думаю, что и на темном также будет.
avatar