•  

ForumCommunity

Wiki - Menu

    Side menus

    Side menu
    image
    Enter one of the following codes in Manage HTML code on top of the forum.

    This is to insert it on the left:
    Manage HTML code - on top of the forum
    HTML
    <style>#leftdiv {padding:5px;} #centerdiv {max-width:inherit; width:auto !important ; width:98%; margin: auto 0 auto 20%; }</style>
    <div id="leftdiv">

    <!-- Codice Portal System Tool -->

    </div><div id="centerdiv">


    This is to insert it on the right:
    Manage HTML code - on top of the forum
    HTML
    <style>#rightdiv {padding:5px;} #centerdiv {max-width:inherit; width:auto !important ; width:98%; margin: auto 20% auto 0; }</style>
    <div id="rightdiv">

    <!-- Codice Portal System Tool -->

    </div><div id="centerdiv">


    In both cases, should be included in Manage HTML code at the bottom of the forum, the closing of the previously open tag <div>, with
    HTML
    </div>

    NB: It is important not to use this code if you plan to implement, or you are currently using the blog.

    Side menu disappearing
    [ screencap ]
    Insert the following code in Manage HTML code at the bottom of the forum.
    HTML
    <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("Support forum","http://supporto.forumfree.net");
    addItem("Skin Lab","http://skinlab.forumfree.net");

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

    To lock the top menu and not make it flow, replace
    CODICE
    isStatic=false;
    with
    CODICE
    isStatic=true;

    The menu has the same color of the skin of the forum, but you can also change it in Edit colors and styles by adding the following switches with the desired properties.
    CITAZIONE
    #ssm .mainbg {} /* border between the bars */
    #ssm .title {} /* Horizontal title */
    #ssm .ww {} /* Vertical title */
    #ssm .aa {} /* background of the links that you add */
    #ssm .web {} /* color and size of the links you put */




    Horizontal menu

    Menu below the forum's logo
    [ screencap ]
    Insert the folowing code in Manage HTML code in the homepage of the forum (if there are other codes already entered, put the menu first):
    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">Support forum</a> -
    <a href="http://skinlab.forumfree.net">Skin Lab</a>

    </table></table><br>

    Transparent version of the menu below the 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">Support forum</a> -
    <a href="http://skinlab.forumfree.net">Skin Lab</a>

    </table></table><br>

    Menu above the forum's logo
    [ screencap ]
    The code must be entered on top and not in the homepage. Recommended menu when
    • you want to put it in all pages
    • the logo is in the center of the page and is unsightly insert the menu below the banner
    • there is some code to the left of all pages
    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">Support forum</a> -
    <a href="http://skinlab.forumfree.net">Skin Lab</a>

    </table></table>

    Transparent version of the menu above the 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">Support forum</a> -
    <a href="http://skinlab.forumfree.net">Skin Lab</a>

    </table></table>

    Menu above the tabs logo
    [ anteprima ]
    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>Support forum</b></a>
    <a href="http://skinlab.forumfree.net"><b>Skin Lab</b></a>

    </table>

    To center it, write #menu {width: auto; background: none; border: 0; margin: 0; padding: 20px 0 0 0}

    Menu above the rectangular tabs logo
    [ anteprima ]
    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">Support forum</a></div>
    <div><a href="http://skinlab.forumfree.net">Skin Lab</a></div>

    </table>

    To center it write #menu {width: auto; background: none; border: 0; margin: 0; padding: 20px 0 0 0}



    On http://css.maxdesign.com.au/listamatic you can find other types of menus.