Skinning School: 4 Lezione - Menů contestuale e menů laterale

Menů contestuale e menů laterale

« Older   Newer »
 
  Share  
.
  1.     +2   Like  
     
    .
    Avatar

    Advanced Member

    Group
    WA Special
    Posts
    7,689
    Location
    Roma

    Status
    Offline

    1644236logo

    Menů contestuale e menů laterale




    Quarta lezione incentrata sui menů. Andiamo a chiudere il discorso del menů utente completando e codificando i selettori del menů contestuale, ovvero dei sottomenů che ci compaiono al momento in cui andiamo a passare il mouse sopra i link del menuwrap.
    Come secondo argomento affronteremo il menů laterale. In realtŕ non č un menů poi cosě usato nella pratica, ma per pubblicare una skin su forumfree, anch'esso deve essere modificato.

    Menů Contestuale

    Riguardo ai selettori del menů contestuale, dobbiamo fare riferimento a questa parte di codice presente nei CSS.



    CODICE
    /* MENU contestuale(dropdown) */
    .menu > a:hover, .menu:hover > a {color: #FFF; background: url('http://img.forumfree.net/style_images/52/arrow.gif') no-repeat bottom}
    .menu ul {width: 15em; background: #525252; border: 1px solid #080808; border-top: 0; box-shadow: 0 1px 5px rgba(0, 0, 0, .5)}
    .right .menu ul {margin-left: -2em}
    .menu li {padding: 3px 4px; line-height: 1.4em; text-shadow: none; border-top: 1px solid #636363}
    .menu li:first-child {padding-top: 0; border-top: 5px solid #484848}
    .menu li strong {padding: 3px 8px; color: #000}
    .menu li a {padding: 3px 8px !important; font-size: 12px; color: #BDBDBD !important}
    .menu li a:hover, .menu li:hover > a {text-shadow: -1px -1px 0 #272727; background: #373737; border-radius: 5px}


    Prendiamo in considerazione i selettori che ci interessano ed eliminiamo quelli “in piů”. In primis cancelliamo tutto il selettore “.menu > a:hover, .menu:hover > a” e le relative dichiarazioni in quanto questo stringa ci va ad aggiungere l’immagine presente sopra al menů contestuale (il trinagolino):



    1090086triangolo

    Il selettore piů importante, che ci permette una modifica quasi completa del sotto menů č .menu ul; .right .menu ul ci modifica il menů che troviamo alla destra (quando abbiamo due sottomenů affiancati); .menu li č il selettore dei singoli spazi in cui sono presenti i link; .menu li a e .menu li a:hover i link stessi.
    .menu li strong va a modificare quei link che possiamo vedere nell’immagine:



    1570641strong

    Sistemiamo la prima parte di menu (menu ul) cancellando il border e il box-shadow presente; aggiungiamo il border-top: 3px solid #37A1D2 e il background di colore #0e0e0e. Salviamo e aggiorniamo.
    Rientrando nel CSS modifichiamo i menu ul:
    Da “.menu li {padding: 3px 4px; line-height: 1.4em; text-shadow: none; border-top: 1px solid #636363}”
    a “.menu li {padding: 3px 4px; line-height: 1.4em; text-shadow: none}”. In questo modo andremo ad eliminare la linea chiara che divide un link dall’altro.
    Da “.menu li:first-child {padding-top: 0; border-top: 5px solid #484848}” a ”.menu li:first-child {margin-top: 10px}” aumentando cosi la distanza del primo link rispetto al top del menu e togliamo il border che crea volume (ne abbiamo messo un altro in .menu ul).
    Per concludere il nostro sottomenů sistemiamo colori e font dei link:
    .menu li strong {padding: 3px 3px; color: #37A1D2}
    .menu li a {padding: 3px 3px !important; font-size: 12px; color: #FFF !important}
    .menu li a:hover, .menu li:hover > a {color: #37A1D2; background: #1a1a1a; border-radius: 5px}
    Quest’ultima modifica al background in “.menu li a:hover, .menu li:hover > a” ci permette di creare uno sfondo al link quando passeremo il mouse sopra.
    Salviamo e aggiorniamo.



    Menů laterale



    A meno che non abbiate creato il dominio “.skin” (per pubblicare la vostra skin una volta completata), nei forum di base non sarŕ presente il menů laterale. Andiamo quindi ad installarlo attraverso un semplice script che andrŕ inserito all’interno della homepage HTML. Lo script in questione č:



    CODICE
    <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");
    addItem("Supporto","http://supporto.forumfree.it");
    addItem("Skin Lab","http://skinlab.forumfree.it");
    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>


    Questo codice andrŕ inserito in AMMINISTRAZIONE > COLORI E STILI > CODICI HTML > homepage
    N.B.: potete cambiare il nome del menů andando a modificare il testo all’interno delle parentesi di “startMenu” e inserire link rapidi al menů aggiungendo altri addItem sotto o sopra quelli giŕ presenti [addItem("Supporto","http://supporto.forumfree.it");
    addItem("Skin Lab","http://skinlab.forumfree.it"); ]
    Una volta inserito il codice, salviamo e aggiorniamo (se non compare il menů vi consiglio di ricontrollare il codice e cercare eventuali errori). Sistemiamo la parte CSS con riferimento a questo insieme di selettori e dichiarazioni:


    CODICE
    /* MENU laterale a comparsa */
    #ssm .mainbg {background: #525252}
    #ssm .ww {font: 11px verdana, tahoma, arial, sans-serif; font-weight: normal !important; color: #AAA; text-shadow: -1px -1px 0 #111; background: #333; background: linear-gradient(left,#404040,#1A1A1A)}
    #ssm .title {border-top: 5px solid #484848; padding: 4px; line-height: 1.4em; font: 12px verdana, tahoma, arial, sans-serif; font-weight: bold; color: #000; background: #525252 !important}
    #ssm .aa {padding: 3px 4px; line-height: 1.4em; background: #525252; border-top: 1px solid #636363}
    #ssm a {display: block; margin: 0; padding: 3px 8px; font: 12px verdana, tahoma, arial, sans-serif; color: #BDBDBD !important; text-shadow: none}
    #ssm a:hover {color: #FFF; text-shadow: -1px -1px 0 #272727; background: #373737; border: 0; border-radius: 5px}

    Nella skin di base di forumfree sarŕ presente questo codice che, perň, puň variare a seconda del modello di base che utilizzate (inserite sempre i crediti dell’autore). L’importante č tenere d’occhio il selettore del menů laterale, ovvero: #ssm.
    Giunti alla quarta lezione, dovremo avere capito abbastanza bene l’utilizzo dei vari selettori e dichiarazioni. Andiamo, rapidamente, a dettare al nostro codice le informazioni che renderanno il menů laterale come quello presente nell’anteprima.
    Solitamente vado a dividere il menů laterale in due aree di lavoro: parte visibile e parte non visibile (che corrisponde a quella che poi comparirŕ). Iniziamo a sistemare la parte visibile prendendo in considerazione il selettore “#ssm .ww” e andiamo a modificare lo sfondo aggiungendo “#0e0e0e” a background e eliminando la sfumatura lineare presente a fine selettore “background: linear-gradient(left,#404040,#1A1A1A)”. Il font primario sarŕ il segoe ui in grassetto (bold) di 10px con il relativo colore dell’anteprima “#37a1d2” a padding 10px. Arrotondiamo i bordi tramite il border-radius che sarŕ “ 0px 5px 5px 0px”. Eliminiamo il “text-shadow: -1px -1px 0 #111” che ci va ad “affondare” il testo nello sfondo, e infine aggiungiamo il bordo colorato presente sopra la nostra parte visibile “border-top: 3px solid # 37a1d2”. Salviamo e aggiorniamo il nostro nuovo codice, che sarŕ:
    #ssm .ww {font: 10px segoe ui, tahoma, arial, sans-serif; padding:15px;font-weight: bold!important;color:#37a1d2;background: #0e0e0e;border-radius:0px 5px 0px 5px;border-top: 3px solid #37a1d2}
    Diamo riguardo al background e alla parte interna del nostro menu. #ssm .mainbg andrŕ modificata inserendo un colore di bg come quello usato per il #ssm .ww, ovvero “#0e0e0e” (nell’anteprima non č presente la parte interna del menů, ma ho deciso comunque di trattarla in quanto il menů rimarrebbe incompleto) e inserendo la dichiarazione usata precedentemente per il border-radius: 0px 5px 5px 0px. Il #ssm .mainbg ci modificherŕ lo sfondo interno del menů.
    #ssm .title riguarda l’elemento interno dove troviamo scritto “Menů”. Eliminiamo il border-top, aggiungiamo come font primario il “segoe ui” e coloriamo di bianco la scritta attraverso color: #fff.
    #ssm .aa, #ssm a e #ssm a:hover riguardano il riquadro dei link e i link presenti nel menů. Vi riporto rapidamente le modifiche effettuate, anche perché le dichiarazioni, soprattutto dei link, sono simili a quelle viste precedentemente:
    #ssm .aa {padding: 3px 4px; line-height: 1.4em; background: #0E0E0E; }
    #ssm a {display: block; margin: 0; padding: 3px 8px; font: 12px verdana, tahoma, arial, sans-serif; color: #37A1D2; text-shadow: none}
    #ssm a:hover {color: #FFF; border: 0; border-radius: 5px}

    Anche questa lezione č giunta al termine, qualsiasi dubbio o commento potete lasciarlo qua sotto, vi risponderň appena possibile! Per la prossima lezione avevo intenzione di iniziare con il blocco sezione. Probabilmente la lezione si incentrerŕ sul mback (la barra del blocco). Che dire, alla prossima! :)







    @World Archive | RIPRODUZIONE RISERVATA ©
    ~Pif

     
    .
0 replies since 26/3/2015, 21:01   229 views
  Share  
.