Летающая панель (Регистрация + Меню)

02-10-2013, 10:41 AM

Итак, очередная летающая кнопка регистрации.
Требуется жкуери.

Выглядит так:

В шаблон header добавляем в начало:

PHP Code:


			
<!-- Мини-профиль -->  

<div class="MiniProfile" id="MiniProfile" style="display:none"> 

<if condition="$show['guest']">

<a href="register.php$session[sessionurl_q]" title="Регистрация!" class="url"><img src="./images/mini-profile/noavatar.png" style="width:24px; height:24px;" alt="" /> Зарегистрироваться</a>

<else />

<a href="member.php?$session[sessionurl]u=$bbuserinfo[userid]" title="Вошли как $bbuserinfo[username]" class="url"><img src="./images/mini-profile/noavatar.png" style="width:24px; height:24px;" alt="" /></a>

<a href="private.php" title="Личные сообщения" class="url"><img src="./images/mini-profile/pm.png" alt="" /></span></a>  

<a href="search.php?$session[sessionurl]do=getnew" onclick="dialogColor(); return false;" title="$vbphrase[new_posts_nav]" class="url"><img src="./images/mini-profile/favorites.png" alt="" /></a>

<a href="login.php?$session[sessionurl]do=logout&amp;logouthash=$bbuserinfo[logouthash]" title="Выход" onclick="showLogForm(); return alse;" class="url"><img src="./images/mini-profile/exit.png" alt="" /></a>

</if>

</div>  

<script type="text/javascript">  

    $(function(){  

    $("#MiniProfile").fadeIn('normal');  

    $("#MiniProfile a.url").tipsy({gravity: 'sw', html: true});  

    });  

</script>

<!-- //Мини-профиль// -->

В дополнительные параметры CSS:

PHP Code:


			
.MiniProfile {  

  background:rgba(0,0,0,0.8);  

  color:#fff;  

  float:left;  

  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.7);  

  -moz-box-shadow: 0 2px 7px rgba(0, 0, 0, 0.7);  

  -webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, 0.7);  

  padding: 4px 5px 4px 5px;  

  border-radius:3px;  

  -moz-border-radius:3px;  

  -webkit-border-radius:3px;  

  position:fixed;  

  bottom:7px;  

  left:7px;  

  }  

   

  .MiniProfile a.url, .MiniProfile a.url:visited {  

  display:block;  

  float:left;  

  color:#fff;  

  font-weight:bold;  

  height:26px;  

  line-height:26px;  

  -moz-transition:all 0.4s ease;  

  -webkit-transition:all 0.4s ease;  

  -o-transition:all 0.4s ease;  

  transition:all 0.4s ease;  

  opacity:0.4;  

  padding:0px 7px 0px 7px;  

  position:relative;  

  }  

  .MiniProfile a.url img {  

  vertical-align:-8px;  

  }  

  .MiniProfile a.url:hover {  

  text-shadow:0px 0px 5px #fff;  

  color:#fff;  

  opacity:1.0;  

  }  

   

  .MiniProfile a.url.highlighted {  

  opacity:1.0;  

  }  

   

  .MiniProfile a.url span {  

  display:block;  

  position:absolute;  

  bottom:0px;  

  left:20px;  

  color:#fff;  

  background:red;  

  padding:0px 3px 0px 3px;  

  height:14px;  

  line-height:14px;  

  font-size:7pt;  

  font-weight:bold;  

  border-radius:2px;  

  -moz-border-radius:2px;  

  -webkit-border-radius:2px;  

  }