Webboard

Pełna wersja: Panel Użytkownika(rozsuwany) rozsuwa się całe forum
Aktualnie przeglądasz uproszczoną wersję forum. Kliknij tutaj, by zobaczyć wersję z pełnym formatowaniem.
wersja skryptu MyBB:1.8.3
adres forum:fppolska.cba.pl
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu):
Opis na screenie

[Obrazek: hi0dm3bpzs77.jpg]


css, html
Kod PHP:
//html
<div id='cssmenu'>
<
ul>
  <
li class='active has-sub'><a href="#"><span><center>{$mybb->user['username']}
   <
class="fa fa-angle-down"></i>
    </
center></span></a>
      <
ul>
         <
li class='last'><a href='{$mybb->settings['bburl']}/usercp.php'>
           <
span>{$lang->welcome_usercp}</span></a>
      
         </
li>
        <
li class='last'><a href='#'><span>{$lang->welcome_newposts}</span></a></li>
         <
li class='last'><a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}">
          {
$lang->welcome_logout}</span></a>
        
         </
li>
            </
ul>
         </
li>
      </
ul>
   </
li>
</
ul>
</
div>

//css
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  
margin0;
  
padding0;
  
border0;
  list-
stylenone;
  
line-height1;
  
displayblock;
  
positionrelative;
  -
webkit-box-sizingborder-box;
  -
moz-box-sizingborder-box;
  
box-sizingborder-box;
}
#cssmenu {
  
width200px;
  
font-familyHelveticaArialsans-serif;
  
color#ffffff;
}
#cssmenu ul ul {
  
displaynone;
}
.
align-right {
  
floatright;
}
#cssmenu > ul > li > a {
  
padding15px 2px;
width100px;
  
cursorpointer;
  
z-index2;
  
font-size14px;
  
font-weightbold;
  
text-decorationnone;
  
backgroundrgb(315489);
/* background: -webkit-linear-gradient(#1fa0e4, #1992d1); */
/* background: linear-gradient(#1fa0e4, #1992d1); */

  
color#ffffff;
  
text-shadow0 1px 1px rgba(0000.35);

}
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a,
#cssmenu > ul > li.open > a {
  
color#eeeeee;

}

#cssmenu > ul > li.open > a {

}
#cssmenu > ul > li:last-child > a,
#cssmenu > ul > li.last > a {

}

#cssmenu > ul > li > a:hover > span::after,
#cssmenu > ul > li.active > a > span::after,
#cssmenu > ul > li.open > a > span::after {
  
border-color#eeeeee;
}

#cssmenu ul ul li a {
  
top25px;
  
positionrelative;
  
  
cursorpointer;
  
border-bottom1px solid #32373e;
  
border-left1px solid #32373e;
  
border-right1px solid #32373e;
  
padding10px 20px;
  
z-index1;
  
text-decorationnone;
  
font-size13px;
  
color#eeeeee;
  
background#49505a;
  
box-shadowinset 0 1px 0 rgba(2552552550.1);
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
  
background#424852;
  
color#ffffff;
}
#cssmenu ul ul li:first-child > a {
  
box-shadownone;
}
#cssmenu ul ul ul li:first-child > a {
  
box-shadowinset 0 1px 0 rgba(2552552550.1);
}
#cssmenu ul ul ul li a {
  
padding-left30px;
}
#cssmenu > ul > li > ul > li:last-child > a,
#cssmenu > ul > li > ul > li.last > a {
  
border-bottom0;
}
#cssmenu > ul > li > ul > li.open:last-child > a,
#cssmenu > ul > li > ul > li.last.open > a {
  
border-bottom1px solid #32373e;
}
#cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
  
border-bottom0;
}
#cssmenu ul ul li.has-sub > a::after {
  
displayblock;
  
positionabsolute;
  
content"";
  
width5px;
  
height5px;
  
right20px;
  
z-index10;
  
top11.5px;
  
border-top2px solid #eeeeee;
  
border-left2px solid #eeeeee;
  
-webkit-transformrotate(-135deg);
  -
moz-transformrotate(-135deg);
  -
ms-transformrotate(-135deg);
  -
o-transformrotate(-135deg);
  
transformrotate(-135deg);
}
#cssmenu ul ul li.active > a::after,
#cssmenu ul ul li.open > a::after,
#cssmenu ul ul li > a:hover::after {
  
border-color#ffffff;




jscript
Kod PHP:
( function( $ ) {
$( 
document ).ready(function() {
$(
'#cssmenu li.has-sub>a').on('click', function(){
        $(
this).removeAttr('href');
        var 
element = $(this).parent('li');
        if (
element.hasClass('open')) {
            
element.removeClass('open');
            
element.find('li').removeClass('open');
            
element.find('ul').slideUp();
        }
        else {
            
element.addClass('open');
            
element.children('ul').slideDown();
            
element.siblings('li').children('ul').slideUp();
            
element.siblings('li').removeClass('open');
            
element.siblings('li').find('li').removeClass('open');
            
element.siblings('li').find('ul').slideUp();
        }
    });

    $(
'#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');

    (function 
getColor() {
        var 
rgb;
        var 
textColor = $('#cssmenu').css('color');
        
textColor textColor.slice(4);
        
textColor.slice(0textColor.indexOf(','));
        
textColor textColor.slice(textColor.indexOf(' ') + 1);
        
textColor.slice(0textColor.indexOf(','));
        
textColor textColor.slice(textColor.indexOf(' ') + 1);
        
textColor.slice(0textColor.indexOf(')'));
        var 
rgbToHsl(rgb);
        if (
0.7) {
            $(
'#cssmenu>ul>li>a').css('text-shadow''0 1px 1px rgba(0, 0, 0, .35)');
            $(
'#cssmenu>ul>li>a>span').css('border-color''rgba(0, 0, 0, .35)');
        }
        else
        {
            $(
'#cssmenu>ul>li>a').css('text-shadow''0 1px 0 rgba(255, 255, 255, .35)');
            $(
'#cssmenu>ul>li>a>span').css('border-color''rgba(255, 255, 255, .35)');
        }
    })();

    function 
rgbToHsl(rgb) {
        
/= 255/= 255/= 255;
        var 
max Math.max(rgb), min Math.min(rgb);
        var 
hs= (max min) / 2;

        if(
max == min){
            
0;
        }
        else {
            var 
max min;
            
0.5 / (max min) : / (max min);
            switch(
max){
                case 
r= (b) / + (0); break;
                case 
g= (r) / 2; break;
                case 
b= (g) / 4; break;
            }
            
/= 6;
        }
        return 
l;
    }
});
} )( 
jQuery ); 

Test

123456