Тут скриптом надо.
Например так
http://azs-crimea-service.ru
Код в шаблоне:
<div class="profile">
<p><insert name="show_login" module="registration"></p>
</div>
<div class="profile1">
<a href="#">
<?php
if(! $this->diafan->_users->id)
{
echo '<div class="login1"><p>Авторизация на сайте</p></div>';
}
else
{
echo '<div class="login2">
<nobr><p>'.$this->diafan->_users->fio.'</p></nobr>
</div>';
}
?>
</a>
</div>
Показать весь код
Код js:
$(function(){
$('.profile1 a').click(function(){
$('.profile').slideToggle();
});
});
CSS:
.profile {
z-index: 30;
position: relative;
width: 300px;
height: 92px;
margin: 0 auto;
background: none;
display: none;
color: #fff;
left: 120px;
font-size: 20px;
padding-top: 37px;
}
.profile .block {
background: #FFF;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.55);
}
.profile .block .profile-hello-text {
margin-top: -20px;
text-align: left;
color: #000;
padding-top: 25px;
}
.profile .block h3 {
visibility: hidden;
margin-bottom: 60px !important;
}
.profile .block label {
font-size: 14px;
color: #000;
}
.profile .profile-block .menu li:first-child {
list-style: url(../img/20934.png) outside; line-height: 150%;
margin-left: 20px;
}
.profile .profile-block .menu li:nth-last-child(2) {
list-style: url(../img/50x50_52135.png) outside; line-height: 150%;
margin-left: 25px;
}
.profile .profile-block .menu li:nth-last-child(1) {
list-style: url(../img/Email-icon.png) outside; line-height: 150%;
margin-left: 25px;
}
.profile .profile-block .menu li a {
margin-left: 0px;
}
.profile .block .arrow-link {
font-size: 14px;
}
.profile .block {
margin-top: -23px !important;
}
.login1 {
font-size: 16px;
background: url(../img/add-user-2-xxl.png) no-repeat left 3px;
margin-top: -20px;
}
.profile input[type="submit"] {
font-family: "Open Sans","Arial","Trebuchet MS",Verdana,sans-serif;
-moz-user-select: none;
text-decoration: none;
display: inline-block;
padding: 4px 15px;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
border: 2px solid #000;
color: #000;
margin: 5px 0px;
background-color: transparent;
cursor: pointer;
background-position: 15px center;
background-repeat: no-repeat;
opacity: 1;
transition: opacity 0.2s ease 0s, box-shadow 0.4s ease 0s;
box-shadow: none;
}
.profile .block .button {
color: #000 !important;
border: 2px solid #000 !important;
font-size: 12px;
padding: 3px 10px;
font-weight: normal;
margin: 0 0 0 10px;
}
.login1 p {
padding: 1px 25px;
}
.login2 {
font-size: 16px;
background: url(../img/checked-user-xxl.png) no-repeat left 3px;
margin-top: -20px;
}
.login2 p {
padding: 1px 25px;
white-space: nowrap; /* Отменяем перенос текста */
overflow: hidden; /* Обрезаем содержимое */
text-overflow: ellipsis; /* Многоточие */
}
.profile1 a {
z-index: 30;
position: relative;
display: block;
padding: 1px 20px;
background: #000;
color: #fff;
margin: 0 auto;
width: 300px;
left: 120px;
text-align: left;
height: 42px;
}
Показать весь код