Visualizzazione dei risultati da 1 a 3 su 3
  1. #1

    Voce del men¨ che compare prima delle altre

    Ciao Ragazzi,
    http://www.la-maglia-rosanero.com/prova/

    se vedete e aprite il men¨ a sinistra, la voce CONTATTAMI (l'ultima) appare prima delle altre che appaiono in scala dalla prima alla penultima.
    Non capisco come mai l'ultima voce CONTATTAM non segua l'ordine delle voci di sopra.

    Ecco il codice CSS
    codice:
    .nav {
        /*  largezza libera, potrai sperimentare */
        width: 320px;
        min-width: 320px;
        /* fissiamo e indichiamo l'altezz massimale  */
        height: 100%;
        position: fixed;
        top: 0;
        bottom: 0;
        margin: 0;
        /* spostiamo(nscondiamo)il pannello rispetto bordo sinistro della pagina  */
        left: -320px;
        /* spazi interni */
        padding: 15px 20px;
        /* regoliamo la uscita del panello  */
        -webkit-transition: left 0.3s;
        -moz-transition: left 0.3s;
        transition: left 0.3s;
        /* indichiamo il colore dello sfondo del panello */
        background: #c5ad39;
     background-image: url(logopalermomenu.png);
        /* indichiamo che sara sopra tutti gli altri elementi della pagina  */
        z-index: 2000;
    }
     
    /**
     * Bottone interruttore del pannello 
     * tag <label>
     */
     
    .nav-toggle {
        /* posizionamento assoluto*/
        position: absolute;
        /*  spazio rispetto bordo sinistro del pannello  */
        left: 320px;
        /* rispetto bordo superiore  */
        top: 1em;
        /* spazzi interni  */
        padding: 0.5em;
        /* indichiamo il colore dello sfondo del interruttore
         * di solito corrisponde al colore del pannello 
        */
        background: inherit;
        /* colore del testo */
        color: #040404;
        /* tipo del cursore */
        cursor: pointer;
        /* altezza del font */
        font-size: 1.1em;
        line-height: 1;
        /* sempre in prima vista rispetto altri elementi della pagina  */
        z-index: 2001;
        /* animazione del colore del testo al hover */
        -webkit-transition: color .25s ease-in-out;
        -moz-transition: color .25s ease-in-out;
        transition: color .25s ease-in-out;
    }
     
    /* identifichiamo l'aspetto del bottone interruttore 
     * simbolo Unicode (TRIGRAM FOR HEAVEN)
    */
     
    .nav-toggle:after {
        content: '\2630';
        text-decoration: none;
    }
     
    /* colore del testo al hover  */
     
    .nav-toggle:hover {
        color: #f7e1e4;
    }
    /**
     * Checkbox nascosto
     * invisibile e inaccessibile 
     * nome del selettore del attributo del checkbox
     */
     
    [id='nav-toggle'] {
        position: absolute;
        display: none;
    }
     
    /**
     * cambiamento della posizione del interutore  
     * in caso di dispositivi mobili
     * quando panello aperto si trova al interno del panello */
     
    [id='nav-toggle']:checked ~ .nav > .nav-toggle {
        left: auto;
        right: 2px;
        top: 1em;
    }
     
    /**
     * Quando checkbox selezionato, aprire panello 
     * usiamo pseudo-classe :checked
     */
     
    [id='nav-toggle']:checked ~ .nav {
        left: 0;
        box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
        -moz-box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
        -webkit-box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5);
        overflow-y: auto;
    }
     
    /* 
     * spostamento del contenuto della pagina 
     * per largezza del panelo ,
     * non e obbligatorio il trucco, ma puoi sempre usarlo
    */
     
    [id='nav-toggle']:checked ~ main > article {
        -webkit-transform: translateX(320px);
        -moz-transform: translateX(320px);
        transform: translateX(320px);
    }
     
    /*
     * cambio simbolo del bottone interruttore ,
     * solita croce  (MULTIPLICATION X), 
     * potrai utilizare qualsiasi altro simbolo
    */
     
    [id='nav-toggle']:checked ~ .nav > .nav-toggle:after {
        content: '\2715';
    }
     
    /**
     * prefissi per Android <= 4.1.2
     * 
     */
     
    body {
        -webkit-animation: bugfix infinite 1s;
    }
     
    @-webkit-keyframes bugfix {
        to {
          padding: 0;
        }
    }
     
    /**
     * per dispositivi medie e piccoli
     */
     
    @media screen and (min-width: 320px) {
        html,
        body {
          margin: 0;
          overflow-x: hidden;
        }
    }
     
    @media screen and (max-width: 320px) {
        html,
        body {
          margin: 0;
          overflow-x: hidden;
        }
        .nav {
          width: 100%;
          box-shadow: none
        }
    }
     
    /**
     * Decoriamo il menu 
     * usando la lista non numerata per le voci
     * aggiungiamo passaggi e trasformazioni 
     */
     
    .nav > ul {
        display: block;
        margin: 0;
        padding: 0;
        list-style: none;
    }
     
    .nav > ul > li {
        line-height: 2.5;
        opacity: 0;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s;
        -moz-transition: opacity .5s .1s, -moz-transform .5s .1s;
        -ms-transition: opacity .5s .1s, -ms-transform .5s .1s;
        transition: opacity .5s .1s, transform .5s .1s;
     
    }
     
    [id='nav-toggle']:checked ~ .nav > ul > li {
        opacity: 1;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
     
    /* impostiamo intervalli di apparizone dei voci del menu  */
     
    .nav > ul > li:nth-child(2) {
        -webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s;
        transition: opacity .5s .2s, transform .5s .2s;
    }
     
    .nav > ul > li:nth-child(3) {
        -webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s;
        transition: opacity .5s .3s, transform .5s .3s;
    }
     
    .nav > ul > li:nth-child(4) {
        -webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s;
        transition: opacity .5s .4s, transform .5s .4s;
    }
     
    .nav > ul > li:nth-child(5) {
        -webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s;
        transition: opacity .5s .5s, transform .5s .5s;
    }
     
    .nav > ul > li:nth-child(6) {
        -webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s;
        transition: opacity .5s .6s, transform .5s .6s;
    }
     
    .nav > ul > li:nth-child(7) {
        -webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s;
        transition: opacity .5s .7s, transform .5s .7s;
    }
     
     
    /**
     * decoriamo voci del menu 
     */
     
    .nav > ul > li > a {
        display: inline-block;
        position: relative;
        padding: 0;
        font-family: verdana, sans-serif;
        font-weight: bold;
        font-size: 0.9em;
        color: #040404;
        width: 100%;
        text-decoration: none;
        /* passagio morbido */
        -webkit-transition: color .5s ease, padding .5s ease;
        -moz-transition: color .5s ease, padding .5s ease;
        transition: color .5s ease, padding .5s ease;
    }
     
    /**
     * stato dei link al passaggio del mouse
     */
     
    .nav > ul > li > a:hover,
    .nav > ul > li > a:focus {
        color: #f7e1e4;
        padding-left: 50px;
    }
     
    /**
     * sottolineatura dei link del menu
     */
     
    .nav > ul > li > a:before {
        content: '';
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        height: 1px;
        width: 100%;
        -webkit-transition: width 0s ease;
        transition: width 0s ease;
    }
     
    .nav > ul > li > a:after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        height: 1px;
        width: 100%;
        background: #f7e1e4;
        -webkit-transition: width .5s ease;
        transition: width .5s ease;
    }
     
    /**
     * animazione delle linea di sottolineatura al hover 
     */
     
    .nav > ul > li > a:hover:before {
        width: 0%;
        background: #040404;
        -webkit-transition: width .5s ease;
        transition: width .5s ease;
    }
     
    .nav > ul > li > a:hover:after {
        width: 0%;
        background: #040404;
        -webkit-transition: width 0s ease;
        transition: width 0s ease;
    }
     
    /* lo sfondo oscurante della pagina  
     * in questo caso ellementi vengono blocati */
     
    .mask-content {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        visibility: hidden;
        opacity: 0;
    }
     
    [id='nav-toggle']:checked ~ .mask-content {
        visibility: visible;
        opacity: 1;
        -webkit-transition: opacity .5s, visibility .5s;
        transition: opacity .5s, visibility .5s;
    }
    Aiutatemi please

  2. #2
    Utente di HTML.it L'avatar di yyzyyz
    Registrato dal
    Oct 2001
    Messaggi
    1,653
    Ciao, allora la prima correzione riguarda i prefix :

    codice:
    
    body {
    -webkit-animation: bugfix infinite1s;
    animation: bugfix infinite1s;
    }
    
    @-webkit-keyframesbugfix {
        to {
    padding: 0;
        }
    }
    
    @keyframesbugfix {
        to {
    padding: 0;
        }
    }
    
    
    
    la secoda la parte delle transition navbar :

    codice:
    /* impostiamo intervalli di apparizone dei voci del menu  */
    
    .nav>ul>li:nth-child(1) {
    transition: opacity .5s.2s, transform .5s.1s;
    }
    
    .nav>ul>li:nth-child(2) {
    transition: opacity .5s.2s, transform .5s.2s;
    }
    
    .nav>ul>li:nth-child(3) {
    transition: opacity .5s.3s, transform .5s.3s;
    }
    
    .nav>ul>li:nth-child(4) {
    transition: opacity .5s.4s, transform .5s.4s;
    }
    
    .nav>ul>li:nth-child(5) {
    transition: opacity .5s.5s, transform .5s.5s;
    }
    
    .nav>ul>li:nth-child(6) {
    transition: opacity .5s.6s, transform .5s.6s;
    }
    
    .nav>ul>li:nth-child(7) {
    transition: opacity .5s.7s, transform .5s.7s;
    }
    
    .nav>ul>li:nth-child(8) {
    transition: opacity .5s.8s, transform .5s.8s;
    }
    
    
    
    

  3. #3
    Utente di HTML.it L'avatar di yyzyyz
    Registrato dal
    Oct 2001
    Messaggi
    1,653
    Ciao, allora la prima correzione riguarda i prefix :

    codice:
    body {
    -webkit-animation: bugfix infinite1s;
    animation: bugfix infinite1s;
    }
    
    @-webkit-keyframesbugfix {
        to {
    padding: 0;
        }
    }
    
    @keyframesbugfix {
        to {
    padding: 0;
        }
    }
    la secoda la parte delle transition navbar :

    codice:
    /* impostiamo intervalli di apparizone dei voci del menu  */
    
    .nav>ul>li:nth-child(1) {
    transition: opacity .5s.2s, transform .5s.1s;
    }
    
    .nav>ul>li:nth-child(2) {
    transition: opacity .5s.2s, transform .5s.2s;
    }
    
    .nav>ul>li:nth-child(3) {
    transition: opacity .5s.3s, transform .5s.3s;
    }
    
    .nav>ul>li:nth-child(4) {
    transition: opacity .5s.4s, transform .5s.4s;
    }
    
    .nav>ul>li:nth-child(5) {
    transition: opacity .5s.5s, transform .5s.5s;
    }
    
    .nav>ul>li:nth-child(6) {
    transition: opacity .5s.6s, transform .5s.6s;
    }
    
    .nav>ul>li:nth-child(7) {
    transition: opacity .5s.7s, transform .5s.7s;
    }
    
    .nav>ul>li:nth-child(8) {
    transition: opacity .5s.8s, transform .5s.8s;
    }

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.