Webboard

Pełna wersja: Wysuwane menu z panelem użytkownika
Aktualnie przeglądasz uproszczoną wersję forum. Kliknij tutaj, by zobaczyć wersję z pełnym formatowaniem.
wersja skryptu MyBB:1.6.10
adres forum:cs-goodshot.pl
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu):

Witam, otoz mam taki problem, dodalem na pasku menu nowe przyciski ale gdy zmienie rozdzielczosc na mniejsza to te menu sie rozwala ponizej przedstawie o co mi chodzi :

http://pictap.pl/di-2BB8NLZ6.jpg

chcialbym zatem zrobic cos takiego dla uzytkownika

Panel Gracza:nick

i w tym znajdowalo by sie rozsuwane menu z roznymi opcjami, ale problem tkwi w tym iz nigdy takiego czegos nie robilem wiekszosc robie metoda prob i bledow zatem prosze o wasza pomoc ponizej przedstawie kod menu ktore mam w tej chwili




Kod PHP:
#belka_LogSzu {    background:#FF6600 url(images/fussdes/thead.png) repeat-x 100% 50%;    color:#fff;    border:1pxsolid rgba(255,255,255,0.2);    border-bottom: 1px solid rgba(255,255,255,0.2);    text-shadow:0px -1px 0px rgba(0,0,0,0.4);    height:36px;}.szerokosc_all {    min-width: 100%;    max-width: 100%;    width: 100%;    margin: auto;}#navigacja1 {    color:#9f9f9f;    font-size:11px;    line-height:36px;    height:45px;    overflow:hidden;    float:left;}#navigacja1 a {    color:#000000;    float:left;    padding:0 13px;    line-height:42px;    outline:none;    height:45px;    border-left:1px solid rgba(0, 0, 0, 0.13);}#navigacja1 a:hover {    background:#232323;    background:rgba(85, 85, 85, 0.21);}#navigacja1 img {    float:left;    padding-top: 13px;    height:16px;}#navigacja2 {    color:#9f9f9f;    font-size:11px;    line-height:42px;    height:45px;    overflow:hidden;    float:left;}#navigacja2 a {    color:#eee;    float:left;    padding:0 13px;    line-height:42px;
    
outline:none;
    
height:45px;
    
border-left:1px solid rgba(0000.13);


}
#navigacja2 a:hover {
    
background:#232323;
    
background:rgba(8585850.21);

}
#navigacja2 img {
    
padding-top9px;
    
float:left;
    
height:26px;
    
width:26px;

}
#navigacja3 {
    
font-size:11px;
    
line-height:36px;
    
height:45px;
    
overflow:hidden;
    
float:left;
}
#navigacja3 a {
    
float:left;
    
padding:0 13px;
    
line-height:36px;
    
outline:none;
    
height:45px;



}
#navigacja3 img {
    
float:left;
    
padding-top10px;
        
height:16px;

}
#navigacja4  {
    
color:#000000;
    
float:left;
    
line-height:42px;    
        
outline:none;
        
        
border-left:1px solid rgba(0000.13);
}
#navigacja4 a {    
        
color:#000000;    
        
float:left;
    
padding:0 13px;    
         
outline:none;
         
height:45px;


}
#navigacja4 a:hover {    
background:#232323;    
background:rgba(8585850.21);



    
}
#navigacja5  {
    
color:#000000;
    
float:left;
    
line-height:42px;    
        
outline:none;
    
height:45px;    
        
border-left:1px solid rgba(0000.13);
}
#navigacja5 a {    
        
color:#000000;    
        
float:left;
    
padding:0 13px;    

    
outline:none;
    
height:45px;
}
#navigacja5 a:hover {    
background:#232323;    
background:rgba(8585850.21);



}
#useravy {
    
position:relative;
    
height:28px;
    
width28px;
    
width:auto;
}

.
menu_glowne_activ {
    
margin-top: -17px !important;
    
height70px;
    
width134px;
    
padding15px 0 0 0;
    
text-transformuppercase;
    
text-shadow0 0 5px #000;
    
backgroundurl(images/fussdes/przycisk.pngno-repeat;
    
color#E0E0D4;
    
font-weightbold;
}



#menu_logowania {
    
height85px !important;
    
positione;
    
border-top1px solid #13A383;
    
border-bottom0;
    
backgroundurl(images/fussdes/mentlo.pngrepeat-x top;
    
font-size:12px;   
    
text-align:left !important;
    
margin-bottom: -15px !important
}    

#menu1 {
    
font-size12px;
    
text-transformuppercase;
    
font-family"Trebuchet MS"ArialHelveticasans-serif;
    
font-weightbold;
    
floatleft;
    
padding3px 0 0 0;
    
displayinline-block;
    list-
stylenone;
}

#menu1 li {
    
margin0px -1px 0 0;
    
positionrelative
    
floatleft;
    
text-shadow0 1px 8px rgba(0000.4inset !important;text-transformuppercase;
    
color#d4d4d4 !important;
    
font-weightbold;
    
font-family"Calibri";text-aligncenter !important;font-size15px !important;positionrelative;
}

#menu1  li  a {
    
height70px;
    
width134px;
    
    
text-transformuppercase;
    
color#E0E0D4;
    
displayblock;
    
padding1px 1px;
    
text-shadow0 1px 8px rgba(0000.4inset;
    
font-weightbold;
}

#menu1  li  a:hover {
    
margin-top: -17px !important;
    
height70px;
    
width134px;
    
padding15px 0 0 0;
    
text-transformuppercase;
    
text-shadow0 0 5px #000;
    
backgroundurl(images/fussdes/przycisk.pngno-repeat;
    
color#E0E0D4;
    
font-weightbold;
}





#menu_logowania1 {font-size: 11px;}

#menu_logowania1 a {
    
color#FFFFFF;
    
floatleft;
    
padding0 13px;
    
line-height36px;
    
outlinenone;
    
height36px;
    
border-right1px solid #292929;
    
text-decorationnone;
}

#menu_logowania1 a:hover {
    
background#232323;
    
backgroundrgba(255,255,255,0.04);
    
text-decorationnone;
}
#menu_logowania1 img {
    
float:left;
    
padding-top10px;
    
height:16px;
}

#menu_logowania2 a {
    
color#FFFFFF;
    
padding0 13px;
    
line-height36px;
    
outlinenone;
    
height36px;
    
text-decorationnone;
}


#menu_logowania3 a {
    
color:#eee;
    
float:left;
    
padding:0 13px;
    
line-height:36px;
    
outline:none;
    
height:36px;
    
border-left:1px solid rgba(0000.13);
}
#menu_logowania3 a:hover {
    
background:#232323;
    
background:rgba(8585850.21);
}
#menu_logowania3 img {
    
float:left;
    
padding-top4px;
    
height:28px;
}

/***********************************************************************/
*/
#search {
    
color#556b85;
    
font-size0.85em;
    
margin10px 10px auto auto;    
    
positionrelative;
    
right0px;
    
floatright;
displayblock;
}
#search .submit_input {
    
backgroundurl(images/fussdes/search_icon.pngno-repeat;
    
text-indent: -3000em;
        
width26px;
        
height26px;
        
border0;
    
padding0;
    
floatleft;
-
webkit-box-shadow:0px 2px 4px rgba(0,0,0,0.2);
-
moz-box-shadow:0px 2px 4px rgba(0,0,0,0.2);
box-shadow:0px 2px 4px rgba(0,0,0,0.2);
}
#search input#main_search {
    
padding-top3px;
        
padding-left3px;
    
border0;
    
width120px;
    
background-color#fff;
color#ACA899;}#search_wrap {background: #fff;float: left;height: 24px;width: 120px;padding: 1px 5px 0 0;border: 0;-moz-border-radius:3px 4px 4px 3px;-webkit-border-top-left-radius:3px;-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-webkit-border-bottom-left-radius:3px;border-radius:3px 0px 0px 3px;-webkit-box-shadow:0px 2px 4px rgba(0,0,0,0.2);-moz-box-shadow:0px 2px 4px rgba(0,0,0,0.2);box-shadow:0px 2px 4px rgba(0,0,0,0.2);}#adv_search {    width: 23px;    height: 20px;    margin: 3px;    background: url(images/fussdes/advanced_search.png) no-repeat 50%;    text-indent: -3000em;    float: left;    display: inline-block;    -webkit-transition: all 0.5s ease-in-out;    -moz-transition: all 0.5s ease-in-out;    -o-transition: all 0.5s ease-in-out;    transition: all 0.5s ease-in-out;}#forum_search {    width: 52px;    height: 25px;    background: url(images/fussdes/szukajkaforum.png) no-repeat 50%;    text-indent: -3000em;    float: left;    display: inline-block;    -webkit-transition: all 0.5s ease-in-out;    -moz-transition: all 0.5s ease-in-out;    -o-transition: all 0.5s ease-in-out;    transition: all 0.5s ease-in-out;-webkit-box-shadow:0px 0px 4px rgba(0,0,0,0.2);-moz-box-shadow:0px 0px 4px rgba(0,0,0,0.2);box-shadow:2px 2px 4px rgba(0,0,0,0.2);}    #adv_search:hover {    background-color: #ba3737;        border-radius: 3px 3px 3px 3px;    width: 5px;    height: 5px;}/***************************************************************************/.bannerystrglowna {    border:1px solid #303030;
margin-top: -2%;    -webkit-box-shadow:inset rgba(0000.40px 1px 6px;    -moz-box-shadow:inset rgba(0,0,0,0.40px 1px 6px;    box-shadow:inset rgba(0000.40px 1px 6px;    text-shadow:rgba(0000.80px -1px 0px;    -moz-border-radius:3px;    -webkit-border-radius:3px;
    
border-radius:3px;
    
color:#DDD;
    
font-family:Arial,Helvetica,sans-serif;
    
font-size:12px;
    
line-height:140%;
    
margin-bottom:10px;
    
padding:10px;
}
/***************************************************************************/

.obramowanie1{
    
/*background: #f4fcff;*/
    /*border: solid 1px #cccccc;*/
    
border-radius:4px;
}

.
forumbit_trow1 {
    
border-top1px solid rgb(171616);
    
backgroundurl(images/fussdes/trow.png500repeat-x rgb(292727);
      
vertical-alignmiddle;
    
padding10px;
    
color#898989;
    
line-height17px;
}



.
forumbit_trow2 {
    
backgroundurl(images/fussdes/trow.png500repeat-x rgb(373636);
        
border-bottom1px solid rgb(171616);
    
vertical-alignmiddle;
    
padding10px;
    
color#898989;
    
line-height17px;
    
padding-left10px;

}
.
forumbit_trow2 a {color#eeeeee; font: normal 11px helvetica, arial, sans-serif;}

.forumbit_trow3 {
    
padding-right5px;
    
padding-left5px;
    
vertical-alignmiddle;
    
width:15%;
    
text-align:right;
    
backgroundurl(images/fussdes/trow.png500repeat-x rgb(373636);
        
border-bottom1px solid rgb(171616);
}

.
forumbit_trow3 a:hover {
    
padding-right5px;
    
padding-left5px;
    
vertical-alignmiddle;
    
width:15%;
    
text-align:right;
    
backgroundurl(images/fussdes/trow.png500repeat-x rgb(292727);
        
border-bottom1px solid rgb(171616);

.
forumbit_trow4 {
    
backgroundurl(images/fussdes/trow.png500repeat-x rgb(373636);
        
border-bottom1px solid rgb(171616);
    
border-right1px solid rgb(171616);
    
vertical-alignmiddle;
    
padding10px;
    
color#777777;
    
line-height17px;
    
padding-right10px;
}
.
forumbit_trow4 a {color#eeeeee;}

.favimg {
border:1px solid #515151;
background:#CCCCCC;
-webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.1);
-
moz-box-shadow:0px 2px 2px rgba(0,0,0,0.1);
padding1px;
}
/*************************************************************/
.ipbfs_titlebox {
    
background:#1a1a1a;
    
border:1px solid #303030;
    
text-shadow:0px -1px 0px rgba(0,0,0,0.4);
    
color#eeeeee;
    
-moz-border-radius:3px;
    -
webkit-border-radius:3px;
    
border-radius:3px;
    -
webkit-box-shadow:inset rgba(0,0,0,0.10px 1px 4px;
    -
moz-box-shadow:inset rgba(0,0,0,0.10px 1px 4px;
    
box-shadow:inset rgba(0,0,0,0.10px 1px 4px;
    
padding:10px;
    
overflow:hidden;
}

.
ipsUserPhoto {
    
padding1px;
    
border1px solid #515151;
    
background#393939;
    
-webkit-box-shadow0px 2px 2px rgba(0,0,0,0.1);
    -
moz-box-shadow0px 2px 2px rgba(0,0,0,0.1);
    
box-shadow0px 2px 2px rgba(0,0,0,0.1);
}
    .
ipsUserPhotoLink:hover .ipsUserPhoto {
        
border-color#7d7d7d;
    
}
    
    .
ipsUserPhoto_variable max-width155px; }
    .
ipsUserPhoto_large width90pxheight90px; }
    .
ipsUserPhoto_medium width50pxheight50px; }
    .
ipsUserPhoto_mini width30pxheight30px; }
    .
ipsUserPhoto_tiny width20pxheight20px;    }
    .
ipsUserPhoto_icon width16pxheight16px;    }
    .
ipsUserPhoto_inset width25pxheight25pxpositionabsolutemargin-left:-22pxmargin-top30px; }

.
ipsType_pagetitle, .ipsType_subtitle {
    
font300 26px/1.3 HelveticaArialsans-serif;
    
color#eeeeee;
    
text-shadow:0px -1px 0px rgba(0,0,0,0.4);
}

.
tlo_boczne {
    
width:100%;
    
background#f4fcff;
    
padding4px;
    
bordersolid 1px #cccccc;
    
border-radius:4px;
}
    
.
GG_boczne {
background:#91b445;padding: 1px 6px;-moz-border-radius: 6px;
-webkit-border-radius6px;
border-top1px solid #9fbd5d;
text-shadow0px -1px 0px #677f33;
color#fff;
border-radius4px;
}    
/********************************************************/
.ver_sub {
margin0;
padding0;
list-
stylenone;
font-size12px;
}
.
ver_sub li {
width50%;
floatleft;
}
/********************************************************/
.prifix_wzor {
background:#91b445;
padding3px 6px;
-
moz-border-radius6px;
-
webkit-border-radius6px;
border-top1px solid #9fbd5d;
text-shadow0px -1px 0px #677f33;
color#fff;
border-radius4px;
}

.
prifix_info {
background:#0c6db8;
padding1px 6px;
text-shadow0px -1px 0px #677f33;
color#fff;
border-radius4px;
}    

/***********************************************************/

.statround {
-
webkit-border-bottom-left-radius3px;
-
webkit-border-bottom-right-radius3px;
-
webkit-border-radius3px;
-
webkit-border-top-left-radius3px;
-
webkit-border-top-right-radius3px;
-
webkit-box-shadowrgba(2552552550.0310px 1px 0px 0px inset;
align-contentstretch;
align-itemsstretch;
align-selfstretch;
background#2b2b2b url(images/fussdes/highlight_reallyfaint.png) repeat-x;
border-radius3px;
box-shadowrgba(2552552550.0310px 1px 0px 0px inset;
color#FFFFFF;
displayinline-block;
flex0 1 auto;
flex-basisauto;
flex-directionrow;
flex-flowrow;
flex-grow0;
flex-shrink1;
flex-wrapnowrap;
fontnormal normal 700 11px/13.2px Tahoma;
height13px;
justify-contentflex-start;
list-
stylenone;
margin0px 3px 0px 0px;
order0;
padding3px 7px;
resizenone;
text-aligncenter;
text-decorationnone;
text-shadowrgba(0000.8040px -1px 0px;

 }

 .
statround a:link
 .
statround a:visited {
    
color#fff;
    
fontnormal normal 700 11px/13.2px Tahoma;
 }

 .
statround a:hover,
 .
statround a:active {
    
color#fff;
 
}
        
/***********************************************************/
.post_linia {
    
marginauto;
    
width95%;
}

.
posty_lewo {
    
color#00a2ff;
    
padding-right:10px;
    
floatleft;
}
.
posty_prawo {
    
color:#fff;
    
float:left;
}

/***********************************************************/


.navigacjatlo {
    
backgroundurl ('images/fussdes/secondary_nav_bg.png'repeat-x 10050#FF0000;
}

        
        
.
avatar {
    
margin-left8px;
    
margin-top1px;
    
margin-bottom1px;
    
floatleft;
}

.
nick {
    
margin-top6px;
    
floatleft;
    
margin-left8px;
}

.
posty {
    
background#2e2e2e;
    
colorwhite;
    
border-radius8px;
    -
moz-border-radius8px;
    -
webkit-border-radius8px;
    
padding6px;
    
margin-top2px;
    
margin-bottom2px;
    
margin-right10px;
    
floatright;
    
font-weightbold;
}
        
/* FOOTER */    



#footer_utilities { 
    
padding8px;
    
positionrelative;
    
backgroundurl(http://localhost/~Forum/public/style_images/infinite/trans20.png) repeat-x 0 0;
    
border-bottom1px dashed rgb(192194185);
    
border-top1px dashed rgb(192194185);
colorrgb(14247195);

}
#footer_utilities a:link {
colorrgb(14247195);
}

#footer_utilities a:hover,#footer_utilities a:active {
colorrgb(255255255);
}

#footer_utilities a {
colorrgb(14247195);
}


    
    
#copyright {
        
colorrgb(224224212);
        
text-alignright;
        
line-height22px;
        
floatright;
    }
    
        
#copyright a { color: rgb(14, 247, 195); }

#ipsDebug_footer {
    
width900px;
    
margin8px auto 0px auto;
    
text-aligncenter;
    
color#404040;
    
font-size11px;
}
    
#ipsDebug_footer strong { margin-left: 20px; }
    #ipsDebug_footer a { color: #404040; }
    
#rss_menu {
    
background-color#fef3d7;
    
border1px solid #ed7710;
}
    
    
#rss_menu li { border-bottom: 1px solid #fce19b; }
    #rss_menu li:last-of-type{ border-bottom: 0; }
    #rss_menu a {
        
color#ed7710;
        
padding5px 8px;
        
text-shadownone;
    }

        
#rss_menu a:hover {
            
background-color#ed7710;
            
color#fff;
        
}
        .
clear clearboth; }
.
ipsList_inline li {
    
displayinline-block;
    
margin0 3px;
}
    .
ipsList_inline li:first-child margin-left0; }
    .
ipsList_inline li:last-child margin-right0; }
    .
ipsList_inline.ipsList_reset li:first-child margin-left3px; }
    .
ipsList_inline.ipsList_reset li:last-child margin-right3px; }
    .
ipsList_inline.ipsList_nowrap white-spacenowrap; }
.
clearfix:after content".";displayblock;height0;clearboth;visibilityhiddenoverflowhidden;}


.
custom_theme{
    -
moz-border-radius0px 3px 3px 0px;
    -
webkit-border-top-right-radius3px;
    -
webkit-border-bottom-right-radius3px;
    
border-radius0px 3px 3px 0px;
    
background#2a2a2a url(images/fussdes/color_picker.png) no-repeat 50% 50%;
    
border1px solid #3f3f3f;
    
cursorpointer;
    
width37px;
    
height36px;
    
margin-left: -2px;
    
floatright;
}
.
custom_theme:hover{
    
background-color#323232;
}
.
custom_theme #colorpicker{
    
border!important;
    
backgroundnone transparent !important;
    
text-indent: -999px !important;
    
height36px;
    
font-size0;
    
width37px;
    
padding0;
    
margin0;
    
cursorpointer;
    
opacity0;
    
displayblock;
}
margin0;
    
cursorpointer;
    
opacity0;
    
displayblock;

}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td margin:0padding:0; } 
table {    border-spacing:0; }
fieldset,img border:0; }
address,caption,cite,code,dfn,th,var { font-style:normalfont-weight:normal; }
ol,ul { list-style:none; }
caption,th text-align:left; }
h1,h2,h3,h4,h5,h6 font-size:100%;    font-weight:normal; }
q:before,q:after content:''; }
abbr,acronym border:0; }
hr displaynoneborder0; }
addressdisplayinline; }

inputselecttextarea {
    
fontnormal 12px tahomahelveticaarialsans-serif;
}

h3strong font-weightbold; }
em font-styleitalic; }
img, .input_check, .input_radio vertical-alignmiddle; }
legend displaynone; }
table width100%; }
td padding3px
}
{
    
color#595959;
    
text-decorationnone;
}
    
a:hover colorrgb(102550); }
::-
moz-selection color#fff;  background: #82b8e6; }
::selection      color#fff;  background: #82b8e6; }
.ipsList_inline li {
    
displayinline-block;
    
margin0 3px;
}
#nav_wrap{
    
floatright;
    
margin21px 0 0 0;
}


#branding {
    
height80px;
    
positionrelative;
}

#ipboard_body.minimal #ipbwrapper{
    
width900px;
    
margin0 auto;
}
.
wrapper{    width90%;    min-width975px;    max-width1300px;    margin0 auto;}#admin_bar {    font-size: 11px;        padding: 0 12px;        border-top: 0;    overflow: hidden;    -moz-border-radius: 0px 0px 3px 3px;    border-radius: 0px 0px 3px 3px; margin-top: -15px;}#admin_bar li{ padding-left: 10px; padding-right: 10px; }#admin_bar li.active a { color: #fc6d35; }#admin_bar a { color: #8a8a8a; }#admin_bar a:hover { color: #fff; }.ipsList_inline > li {    display: inline-block;    margin: 0 3px;}    .ipsList_inline > li:first-child { margin-left: 0; }    .ipsList_inline > li:last-child { margin-right: 0; }    .ipsList_inline.ipsList_reset > li:first-child { margin-left: 3px; }    .ipsList_inline.ipsList_reset > li:last-child { margin-right: 3px; }    .ipsList_inline.ipsList_nowrap { white-space: nowrap; }    .userlinks{        display: inline;    width: 250px;    color: #ffffff;    padding: 6px;    -moz-border-radius: 3px;    -webkit-border-radius: 3px;}.userlinks:hover{background: url(images/fussdes/cp.png) repeat-x top center;}.czerwone_menu {    color: #ffffff;    background-color: #cf2020;        padding:0px 4px;        font-family: Arial, Verdana, 'Trebuchet MS', Helvetica, Univers, Futura;    -moz-border-radius: 2px;    -webkit-border-radius: 2px;    border-radius: 2px;    font-size: 9px;        margin-top:-9px;        margin-left:-25px;        text-decoration:none;        font-weight:normal;        box-shadow: 1px 1px 1px #2f2f2f;        position:absolute;}                #boxes #info {    width: 600px;    height: 450px;    position: fixed;    -webkit-box-shadow: 0px 0px 20px #222;    -moz-box-shadow: 0px 0px 20px #222;    box-shadow: 0px 0px 20px #222;    background: url(images/stylo/trans.png) repeat;    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    border-radius: 5px;    top: 110px !important;    margin: auto;    left: 25% !important;}        .kolorek {    color:#0ef7c3;}#wykonanie {color: rgb(213, 213, 213);text-align: left;line-height: 22px;float: left;}.paseczek { padding: 20px;} 
Czytam to po raz piąty i nie rozumiem o co dokładnie ci chodzi.
zobacz sobie screena i to wszystko chcialem dac w buttonie ktory bedzoe sie rozsuwal ja nie wiem co tu jest niejasne ....
kurcze to nie moja wiedze dotychczasowa;/// myslalem ze to latwiejsze;./

cos takiego ale linki nie dzialaja do plikow

na poczatek chcialbym w ogole stworzyc takie menu pozniej zajac sie przekierowaniami itd
chodzi mi narazie o wyglad

Aby cos takiego stworzyć potrzebna jest wiedza o HTML/CSS i być może JavaScript, ale z tym ostatnim zależy, bo są różne menu.
kurcze szkoda bo widzisz co mi sie dzieje jak rozdzielczosc jest miejsza a 1024 sporo ludzi ma bo praktycznie te stare monitory na takiej rozdzielczosci pracuja nie wiem moze sprobuje zmienic wielkosc napisow w menu i na rozdzielczosci bedzie to lepiej wygladac