الكود الكامل للقائمة المنزلقة user bar التي تظهر في شريط header_bar لإستايلات 3.0.2
أسم الخاصية : القائمة المنزلقة للعضوية
الكود :
CODE
<link rel="stylesheet" href="{$ForumAdress}look/fonts/font-awesome.min.css" />
<link rel="stylesheet" href="{$ForumAdress}look/fonts/fonts.css" />
<script type="text/javascript" src="{$ForumAdress}includes/js/pbboard_toggle.js"></script>
<style>
.header-top-right {
list-style: none;
float: right;
margin: 0px;
margin-right: 7px;
padding-right: 3px;
padding-left: 3px;
}
.userbar{
margin-left: 5px;
margin-right: 10px;
padding: 0px;
}
.userbar_icon ,
.userbar{
color:#FFFFFF;
margin-right: 4px;
margin-left: 1px;
margin-top: 0px;
}
#userlink-trigger{
font-family:Droid Arabic Kufi;
font-size: 12px;
color:#FFFFFF;
vertical-align: middle;
}
.usermenu{
color:#FFFFFF;
margin-right: 1px;
margin-left: 1px;
}
.UserPhoto_tiny{
width:33px;
height:15px;
min-height: 20px;
float:right;
padding:1px;
margin-left:6px;
margin-top:1px;
background-color:transparent;
border-radius: 1px;
background-position: center;
background-repeat: no-repeat;
background-size: 26px;
display: block;
border: 0px solid #e4e4e4;
}
.UserPhoto_tiny img{
width:12px;
height:12px;
min-height: 12px;
}
#userlink_menu {
display: none;
position: absolute;
top: 40px;
right: 0px;
z-index: 99102;
margin-right: 33px;
background: #F2F2F2;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#F2F2F2));
background-image: -webkit-linear-gradient(top, #fff, #F2F2F2);
background-image: -moz-linear-gradient(top, #fff, #F2F2F2);
background-image: -ms-linear-gradient(top, #fff, #F2F2F2);
background-image: -o-linear-gradient(top, #fff, #F2F2F2);
background-image: linear-gradient(top, #fff, #F2F2F2);
box-shadow: 0px 7px 20px rgba(0, 0, 0, 0.2);
border: 1px solid #e4e4e4;
border-radius: 3px;
padding: 1px;
opacity: 1;
width: 280px;
clear:both;
}
#userlink_menu .element_menu li
{
float:right;
margin-right: 10px;
}
.view_profile
{
margin-top: 10px;
margin-left: -15px;
}
#userlink_menu li{
width: 250px;
margin-top: 2px;
}
#userlink_menu ul{
width: 250px;
margin-top: 5px;
}
#userlink_menu a{
color:#4C2E2E;
}
#userlink_menu .Menu_item a{
line-height: 20px;
color:#4C2E2E;
font-family: "Droid Arabic Kufi","tahoma",sans-serif;
font-size: 13px;
font-weight: normal;
}
#userlink_menu .Menu_title
{
margin-top: 10px;
padding: 5px;
background:#dfd0ab;
font-family: "Droid Arabic Kufi","tahoma",sans-serif;
font-size: 13px;
font-weight: blod;
color:#4C2E2E;
}
.Menu_sep hr{
border-top:1px solid #4C2E2E;
}
#userlink_menu .view_profile{
font-family: "Droid Arabic Kufi","tahoma",sans-serif;
font-size: 13px;
font-weight: bold;
color:#4C2E2E;
position: absolute;
top: 10px;
left: 0px;
text-align:center;
width: 200px;
}
#userlink_menu .view_profile a{
font-family: "Droid Arabic Kufi","tahoma",sans-serif;
font-size: 10px;
color:#4C2E2E;
}
#userlink_menu .view_profile .user_title{
display:inline-block;
font-family: "Droid Arabic Kufi","tahoma",sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
color:#4C2E2E;
margin-top: 10px;
max-width: 137px;
}
#userlink_menu .view_profile .a_view_profile{
margin-top: 5px;
color:#4C2E2E;
font-weight: bold;
}
#userlink_menu .PBB-WBS-Menu {
border-style:solid;
border-width:22px;
border-left-color:transparent;
border-top-style:none;
border-bottom-color:#FFFFFF;
border-right-color:transparent;
float:right;
margin-top: -14px;
}
.UserPhoto_Menu{
border:1px solid #e4e4e4;
width:95px;
height:95px;
min-height: 95px;
float:right;
padding:1px;
margin: 0px;
background-color:transparent;
border-radius: 0px;
background-position: center;
background-repeat: no-repeat;
background-size: 95px;
display: block;
clear:both;
}
</style>
{if {$_CONF['member_permission']}}
<ul class="header-top-right">
<li class="userbar">
<a id="userlink-trigger" href="#">
{$_CONF['rows']['member_row']['username']} <i class="usermenu fa fa-caret-down"></i>
<i class="UserPhoto_tiny l-left" style="background-image: url({$avater_path});"></i>
</a>
<div id="userlink_menu">
<div class="PBB-WBS-Menu"></div>
<ul class="element_menu">
<li class="row2 elm">
{if {$avater_change}}
<a href="index.php?page=usercp&control=1&avatar=1&main=1" title="{$lang['Change_avatar']}">
{else}
<a href="index.php?page=profile&show=1&id={$_CONF['rows']['member_row']['id']}" title="{$lang['view_profile']}">
{/if}
<span class="UserPhoto_Menu r-right" style="background-image: url({$avater_path});"></span>
</a>
<div class="view_profile l-left">
<b>{$username_style}</b>
<br />
<span class="user_title">{$_CONF['rows']['member_row']['user_title']}</span>
<br />
<br />
<span class="a_view_profile"><a href="index.php?page=profile&show=1&id={$_CONF['rows']['member_row']['id']}" title="{$lang['view_profile']}">{$lang['view_profile']}</a></span>
</div>
</li>
<li class="Menu_title"> {$lang['settings']} </li>
<li class="Menu_item"><a href="index.php?page=usercp&control=1&setting=1&main=1" title="{$lang['usercp']}">{$lang['usercp']}</a></li>
<li class="Menu_item" data-menuitem="setting security"><a href="index.php?page=privacy&infosecurity=1&main=1" title="{$lang['account_security_settings']}">{$lang['account_security_settings']}</a></li>
<li class="Menu_item" data-menuitem="setting email"><a href="index.php?page=usercp&control=1&email=1&main=1" title="{$lang['Change_email']}">{$lang['Change_email']}</a></li>
<li class="Menu_item" data-menuitem="show last your subjects"><a href="index.php?page=usercp&options=1&subject=1&main=1" title="{$lang['Your_Subjects']}">{$lang['Your_Subjects']}</a></li>
<li class="Menu_item" data-menuitem="Attachments"><a href="index.php?page=usercp&options=1&attach=1&main=1" title="{$lang['Your_Attachments']}">{$lang['Your_attach']}</a></li>
<li class="Menu_item Menu_sep">
<a href="index.php?page=logout&index=1" onclick="return confirm('{$lang['confirm']}')" title="{$lang['logout']}">
<i class="Menu_item fa fa-sign-out"></i> {$lang['logout']} </li> </a>
</ul>
</div>
</li>
</ul>
{/if}
صورة توضيحية للقائمة ..
المصدر : أضغط هنا
أنتهى ..
القائمة المنزلقة للعضوية
