ForumFree

Wiki - Menù

    Aggiungere un menù laterale



    screen
    Inserire uno dei seguenti codici in Codice HTML in cima al forum.

    Questo per inserirlo a sinistra:
    HTML
    <style>#leftdiv {padding: 5px} #centerdiv {max-width: inherit; width: auto !important; width: 98%; margin: auto 0 auto 21%}</style>
    <div id="leftdiv">

    <!-- Codice Portal System Tool -->

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


    Questo per inserirlo a destra:
    HTML
    <style>#rightdiv {padding: 5px} #centerdiv {max-width: inherit; width: auto !important; width: 98%; margin: auto 21% auto 0}</style>
    <div id="rightdiv">

    <!-- Codice Portal System Tool -->

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


    In entrambi i casi è opportuno inserire in Codice HTML in fondo al forum la chiusura del tag <div> precedentemente aperto, con:
    HTML
    </div>


    Al codice sopra riportato va aggiunto il proprio menù personalizzato, che può essere creato a questo indirizzo: Portal System Installer.
    Il codice ottenuto a procedura finita va inserito dopo:
    HTML
    <!-- Codice Portal System Tool -->


    NB: È importante che non si usi tale codice se si ha intenzione di implementare, o si usa attualmente il blog, infatti quest'ultimo è dotato di default dei box a destra e a sinistra del blog presenti in Gestione codice HTML.



    Menù laterale a scomparsa


    Inserire il codice seguente in Codice HTML in fondo al forum.
    HTML
    <script type="text/javascript"><!--
    var moving, menuRows=1, htmlItems='';
    function move(b){clearTimeout(moving); if(b<0&&parseInt(Menu.left)>-Width||b>0&&parseInt(Menu.left)<0){moving=setTimeout('move('+b+')',slideSpeed); theleft+=b; Menu.left=theleft+'px'}}
    function startMenu(menu,barText){document.write('<div id=ssm style="width:'+(Width+30)+'px; left:-'+(Width)+'px; top:'+Yoffset+'px; '+(isStatic?'':'top:expression('+Yoffset+'+(y=document.body.scrollTop)+\'px\'); position:fixed!important; ')+'position:absolute; z-index:9" 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='+menuRows+' style="width:20px;padding:4px;font-size:10pt;font-weight:bold" align=center valign=middle>'+barText); Menu=document.getElementById("ssm").style; theleft=-Width}
    function addItem(text,link){menuRows++; htmlItems+='<tr><td class=aa><span class=web><a HREF='+link+'>'+text+'<\/a><\/span>'}
    function endMenu(){document.write(htmlItems+'<\/table><\/div>')}
    if(document.getElementById){

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

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

    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");

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


    - Aggiunta e modifica di voci e titoli
    Per aggiungere voci al menù basta inserire dopo waitTime=VALORE; tanti

    quanti sono gli elementi desiderati, dove TITOLO è il testo che verrà visualizzato per ogni voce e http:// l'indirizzo della pagina web a cui linkerà. Nel codice proposto sono presenti a titolo di esempio i link al forum di Supporto e allo Skin Lab.

    Modificando questa riga è possibile invece personalizzare il titolo orizzontale visibile in cima alle voci all'apertura del menù (Menù), e quello verticale, sempre visibile (Menù laterale, dove ogni lettera è separata dal tag accapo):


    - Personalizzazione del codice
    isStatic=false; Per bloccare il menù in alto e non farlo scorrere, sostituire false con true.
    Yoffset=100; Modificare questo valore per cambiare la distanza tra il menu e il margine superiore dello schermo.
    Width=130; Stabilisce la larghezza del menù.
    slideSpeed=20; È la velocità di apertura e chiusura del menù.
    waitTime=500; Corrisponde al tempo di attesa e di "reazione" dello slide in millisecondi.

    - Grafica e stili del menù
    Il menù ha gli stessi colori della skin del forum, ma si possono modificare in Grafica > Colori e stili aggiungendo i seguenti selettori con le proprietà desiderate (potete aiutarvi nella modifica con questa guida).
    CODICE
    #ssm .mainbg {} /* bordo tra le varie barre */
    #ssm .title {} /* titolo orizzontale */
    #ssm .ww {} /* titolo verticale */
    #ssm .aa {} /* sfondo dei link che aggiungete */
    #ssm .web {} /* colore e dimensione dei link da voi messi */




    Menù orizzontali


    jpgMenù sotto il logo del forum
    [ anteprima ]
    Inserire il codice seguente in Codice HTML sotto il logo (se ci sono gia altri codici inseriti, mettere quello del menù per primo):
    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.it">Supporto</a> -
    <a href="http://skinlab.forumfree.it">Skin Lab</a>

    </table></table><br>


    Versione trasparente del menù sotto il logo
    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.it">Supporto</a> -
    <a href="http://skinlab.forumfree.it">Skin Lab</a>

    </table></table><br>


    Menù sopra il logo del forum
    Il codice va inserito in cima e non nella homepage.
    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.it">Supporto</a> -
    <a href="http://skinlab.forumfree.it">Skin Lab</a>

    </table></table>


    Versione trasparente del menù sopra il logo
    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.it">Supporto</a> -
    <a href="http://skinlab.forumfree.it">Skin Lab</a>

    </table></table>


    jpgMenù sopra il logo a linguette
    [ 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.it"><b>Supporto</b></a>
    <a href="http://skinlab.forumfree.it"><b>Skin Lab</b></a>

    </table>

    Per centrarlo occorre modificare la prima riga dipo <!-- in questo modo:
    HTML
    #menu {width: auto; background: none; border: 0; margin: 0 auto; padding: 20px 0 0 0}


    jpgMenù sopra il logo a linguette rettangolari
    [ 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.it">Supporto</a></div>
    <div><a href="http://skinlab.forumfree.it">Skin Lab</a></div>

    </table>

    Per centrarlo vedi la modifica suggerita sopra.



    Tools utili


    Per generare comodamente i propri menù è possibile utilizzare i seguenti tools:

    1. Menù laterale a destra/sinistra

    2. Menù orizzontali


    In questa guida sono illustrate diverse tipologie di menù per il vostro forum, mentre altri potete trovarli su questo sito.