ForumCommunity

Wiki - Menu

    Menus laterais

    Menu suspenso lateral
    [ screencap ]
    Inserir o seguinte código em Gestão código HTML no fim do fórum.
    CODICE
    <script type="text/javascript"><!--
    moving=setTimeout('null',1);
    function move(b){if(b<0&&parseInt(Menu.left)>-Width||b>0&&parseInt(Menu.left)<0)
    {clearTimeout(moving); moving=setTimeout('move('+b+')',slideSpeed); theleft+=b; Menu.left=theleft} else{clearTimeout(moving); moving=setTimeout('null',1)}}
    function startMenu(menu,barText){document.write('<div id=ssm style="width:'+(Width+30)+'px; left:-'+(Width)+'px; z-index:9; top:'+Yoffset+'px; '+(isStatic?'':'top:expression('+Yoffset+'+(y=document.body.scrollTop)+\'px\'); position:fixed!important; ')+'position:absolute" onmouseover=move(10) onmouseout="clearTimeout(moving); moving=setTimeout(\'move(-10)\',waitTime)"><table class=mainbg width=100% cellpadding=4 cellspacing=1><tr><td class=title align=center><b>'+menu+'<\/b><td class=ww rowspan=100 style="width:20px;padding:12px 4px 12px 4px;font-size:10pt;font-weight:bold" align=center valign=middle>'+barText); Menu=document.getElementById("ssm").style; theleft=-Width}
    function addItem(text,link){document.write('<tr><td class=aa><span class=web><a HREF='+link+'>'+text+'<\/a><\/span>')}
    function endMenu(){document.write('<\/table><\/div>')}
    if(document.getElementById){

    isStatic=false;
    Yoffset=20;
    Width=130;
    slideSpeed=20;
    waitTime=500;

    startMenu("Menù","M<br>e<br>n<br>ù<br><br>l<br>a<br>t<br>e<br>r<br>a<br>l<br>e");

    addItem("Supporto","http://supporto.forumfree.net");
    addItem("Skin Lab","http://skinlab.forumfree.net");

    endMenu()}
    //--></script>

    Para bloquear o menu em cima e não fazê-lo passar, substituir
    CODICE
    isStatic=false;
    com
    CODICE
    isStatic=true;

    O menu tem as mesmas cores da skin do fórum, mas pode-se sempre muda rem Alterar cores e estilos acrescentando os seguintes selectores coma s propriedades desejadas.
    CITAZIONE
    #ssm .mainbg {} /* margem entre os botões das ferramentas */
    #ssm .title {} /* título horizontal */
    #ssm .ww {} /* título vertical */
    #ssm .aa {} /* painel dos links que colocam */
    #ssm .web {} /* cores e dimensões dos links colocados */




    Menu horizontal

    Menu debaixo do logo do fórum
    [ screencap ]
    Inserir o seguinte código em Gestão código HTML na homepage do fórum (se já houver outros códigos inseridos, pôr o do menu em primeiro lugar):
    HTML
    <table style="position: relative; z-index: 1; margin-top: -13px" class="header_width" cellpadding="0" cellspacing="0"><tr><td><table class="mainbg" style="text-align: center; width: 100%" cellpadding="4" cellspacing="1"><tr><td class="title" style="letter-spacing: 1px; border: 0">

    <a href="http://supporto.forumfree.net">Suporte</a> -
    <a href="http://skinlab.forumfree.net">Skin Lab</a>

    </table></table><br>

    Versão transparente do menu debaixo do logo
    [ screencap ]
    HTML
    <table style="position: relative; z-index: 1; margin-top: -13px; -moz-opacity: 0.70; -khtml-opacity: 0.70; filter:alpha(opacity=70); opacity: 0.70" class="header_width" cellpadding="0" cellspacing="0"><tr><td><table class="mainbg" style="text-align: center; width: 100%" cellpadding="4" cellspacing="1"><tr><td class="title" style="letter-spacing: 1px; border: 0">

    <a href="http://supporto.forumfree.net">Suporte</a> -
    <a href="http://skinlab.forumfree.net">Skin Lab</a>

    </table></table><br>

    Menu por cima do logo do fórum
    [ screencap ]
    O código deve ser inserido em cima e não na homepage. Menu aconselhado quando
    • se quer pôr em todas as páginas
    • o logo é posicionado a meio sendo inestético o menu por debaixo do banner
    • há código à esquerda em todas as páginas
    HTML
    <table class="header_width" cellpadding="0" cellspacing="0"><tr><td><table class="mainbg" style="text-align: center; width: 100%" cellpadding="4" cellspacing="1"><tr><td class="title" style="letter-spacing: 1px; border: 0">

    <a href="http://supporto.forumfree.net">Suporte</a> -
    <a href="http://skinlab.forumfree.net">Skin Lab</a>

    </table></table>

    Versão transparente do menu por cima do logo
    [ screencap ]
    HTML
    <table style="-moz-opacity: 0.70; -khtml-opacity: 0.70; filter:alpha(opacity=70); opacity: 0.70" class="header_width" cellpadding="0" cellspacing="0"><tr><td><table class="mainbg" style="text-align: center; width: 100%" cellpadding="4" cellspacing="1"><tr><td class="title" style="letter-spacing: 1px; border: 0">

    <a href="http://supporto.forumfree.net">Suporte</a> -
    <a href="http://skinlab.forumfree.net">Skin Lab</a>

    </table></table>

    Menu por cima do logo em forma de linguetas
    [ antevisão ]
    HTML
    <style type="text/css"><!--
    #menu {background: none; border: 0; margin: 0; padding: 20px 0 0 0}
    #menu a {background: url(http://skin.forumfree.net/menu/slide-left.gif) no-repeat; float: left; padding: 0 0 0 9px; text-decoration: none}
    #menu a b {color: #444; font-size: 7.5pt; font-family: Verdana; background: url(http://skin.forumfree.net/menu/slide-right.gif) no-repeat right top; display: block; padding: 2px 13px 2px 4px}
    #menu a:hover {background-position: 0% -40px}
    #menu a:hover b {color: #000; background-position: 100% -40px}
    //-->
    </style><table id="menu" class="header_width" cellpadding="0" cellspacing="0"><tr><td>

    <a href="http://supporto.forumfree.net"><b>Suporte</b></a>
    <a href="http://skinlab.forumfree.net"><b>Skin Lab</b></a>

    </table>

    Para centralizá-lo escrever #menu {width: auto; background: none; border: 0; margin: 0; padding: 20px 0 0 0}

    Menu por cima do logo em forma de linguetas rectangulares
    [ antevisão ]
    HTML
    <style type="text/css"><!--
    #menu {background: none; border: 0; margin: 0; padding: 20px 0 0 0}
    #menu div {background: #222; margin: 0 0 0 5px; padding: 3px 0 4px 0; float: left; position: relative; top: 1px}
    #menu a {background: #4379B9; color: #FFF; font: normal 11px Verdana; border: 1px solid #FFF; text-decoration: none; padding: 3px 5px 3px 5px; position: relative; right: 2px; bottom: 1px}
    #menu a:hover {background: #76ACD6; right: 1px; bottom: 0}
    //-->
    </style><table id="menu" class="header_width" cellpadding="0" cellspacing="0"><tr><td>

    <div><a href="http://supporto.forumfree.net">Suporte</a></div>
    <div><a href="http://skinlab.forumfree.net">Skin Lab</a></div>

    </table>

    Para centralizá-lo escrever #menu {width: auto; background: none; border: 0; margin: 0; padding: 20px 0 0 0}



    Em http://css.maxdesign.com.au/listamatic estão presentes outros tipos de menù.