• F
    User •

    creare menu con sottomenu css3

    Buongiorno,
    devo creare una cosa tipo:

    Francia
    Via pinco pallo 13
    tel. 0234843922
    Italia
    Milano
    Via Napoleone 23
    Tel. 0213934857

    Napoli
    Via Marconi 32
    Tel. 013497676

    quello che voglio è Francia e Italia cliccabili. Quando clicco su Italia mi appaiono Milano e Napoli a loro volta cliccabili e mi appaiono gli indirizzi.
    Il codice che ho scritto è:

    CSS
    .transition, p, ul li i:before, ul li i:after {
    transition: all 0.25s ease-in-out;
    }

    .flipIn, h5, ul li {
    animation: flipdown 0.5s ease both;
    }

    .transition, p, ul li ul li i:before, ul li ul li i:after {
  transition: all 0.25s ease-in-out;
}

.flipIn, h6, ul li ul li {
  animation: flipdown1 0.5s ease both;
}

    .no-select, h5 {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }

    .no-select, h6 {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }

    h5 {
    font-size: 20px;
    color: #ff6873;
    line-height: 10px;
    font-weight: 300;
    letter-spacing: 1px;
    display: block;
    background-color: transparent;
    margin: 0;
    cursor: pointer;
    }

    h6 {
    font-size: 20px;
    color: #00FF00;
    line-height: 10px;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    background-color: transparent;
    margin: 0;
    cursor: pointer;
    opacity: 1;
    transform: translate(0, 0);
    margin-top: 14px;
    z-index: 2;
    }

    p {
    color: #ff0000;
    font-size: 17px;
    line-height: 26px;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    max-height: 800px;
    opacity: 1;
    transform: translate(0, 0);
    margin-top: 14px;
    z-index: 2;
    }

    ul li p {
    color:;
    font-size: 17px;
    line-height: 26px;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    max-height: 800px;
    opacity: 1;
    transform: translate(0, 0);
    margin-top: 14px;
    z-index: 3;
    }

    ul {
    list-style: none;
    perspective: 900;
    padding: 0;
    margin: 0;
    }

    ul li ul {
  list-style: none;
  perspective: 900;
  padding: 0;
  margin: 0;
}

    ul li {
    position: relative;
    padding: 0;
    margin: 0;
    padding-bottom: 4px;
    padding-top: 18px;
    border-top: 1px dotted #dce7eb;
    }
    ul li:nth-of-type(1) {
    animation-delay: 0.5s;
    }
    ul li:nth-of-type(2) {
    animation-delay: 0.75s;
    }
    ul li:nth-of-type(3) {
    animation-delay: 1s;
    }
    ul li:last-of-type {
    padding-bottom: 0;
    }

    ul li ul li {
  position: relative;
  padding: 0;
  margin: 0;
  padding-bottom: 4px;
  padding-top: 18px;
  border-top: 1px dotted;
}
ul li ul li:nth-of-type(1) {
  animation-delay: 0.5s;
}
ul li ul li:nth-of-type(2) {
  animation-delay: 0.75s;
}
ul li ul li:nth-of-type(3) {
  animation-delay: 1s;
}
ul li ul li:last-of-type {
  padding-bottom: 0;
}

    ul li i {
    position: absolute;
    transform: translate(-6px, 0);
    margin-top: 16px;
    right: 0;
    }
    ul li i:before, ul li i:after {
    content: "";
    position: absolute;
    background-color:;
    width: 3px;
    height: 9px;
    }
    ul li i:before {
    transform: translate(-2px, 0) rotate(45deg);
    }
    ul li i:after {
    transform: translate(2px, 0) rotate(-45deg);
    }

    ul li ul li i {
  position: absolute;
  transform: translate(-6px, 0);
  margin-top: 16px;
  right: 0;
}
ul li ul li i:before, ul li ul li i:after {
  content: "";
  position: absolute;
  background-color:;
  width: 3px;
  height: 9px;
}
ul li ul li i:before {
  transform: translate(-2px, 0) rotate(45deg);
}
ul li ul li i:after {
  transform: translate(2px, 0) rotate(-45deg);
}

    ul li input[type=checkbox] {
    position: absolute;
    cursor: pointer;
    width: 100%;
    height: 80%;
    z-index: 1;
    opacity: 0;
    }
    ul li input[type=checkbox]:checked ~ p {
    margin-top: 0;
    max-height: 0;
    opacity: 0;
    transform: translate(0, 50%);
    }
    ul li input[type=checkbox]:checked ~ i:before {
    transform: translate(2px, 0) rotate(45deg);
    }
    ul li input[type=checkbox]:checked ~ i:after {
    transform: translate(-2px, 0) rotate(-45deg);
    }

    ul li ul li input[type=checkbox] {
    position: absolute;
    cursor: pointer;
    width: 100%;
    height: 80%;
    z-index: 1;
    opacity: 0;
}
ul li ul li input[type=checkbox]:checked ~ p {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  transform: translate(0, 50%);
}
ul li ul li input[type=checkbox]:checked ~ i:before {
  transform: translate(2px, 0) rotate(45deg);
}
ul li ul li input[type=checkbox]:checked ~ i:after {
  transform: translate(-2px, 0) rotate(-45deg);
}

    @keyframes flipdown {
    0% {
    opacity: 0;
    transform-origin: top center;
    transform: rotateX(-90deg);
    }
    5% {
    opacity: 1;
    }
    80% {
    transform: rotateX(8deg);
    }
    83% {
    transform: rotateX(6deg);
    }
    92% {
    transform: rotateX(-3deg);
    }
    100% {
    transform-origin: top center;
    transform: rotateX(0deg);
    }
    }

    @keyframes flipdown1 {
    0% {
    opacity: 0;
    transform-origin: top center;
    transform: rotateX(-90deg);
    }
    5% {
    opacity: 1;
    }
    80% {
    transform: rotateX(8deg);
    }
    83% {
    transform: rotateX(6deg);
    }
    92% {
    transform: rotateX(-3deg);
    }
    100% {
    transform-origin: top center;
    transform: rotateX(0deg);
    }
    }

    HTML
    <div style="width: 150px; border-right: #868686 solid medium;">
    <ul>
    <li>
    <input type="checkbox" checked>
    <i></i>
    <h5>FRANCIA</h5>
    <p>VIA PINCO PALLO 13<BR>43212 Paris<BR>Tel. 00012344955<BR></p>
    </li>
    <li>
    <input type="checkbox" checked>
    <i></i>
    <h5>ITALIA</h5>
    <ul>
    <li>
    <input type="checkbox" checked>
    <i></i>
    <h6>MILANO</h6>
    <p>Via Napoleone 13<BR> Tel. 024345324</p>
    </li>
    <li>
    <input type="checkbox" checked>
    <i></i>
    <h6>NAPOLI</h6>
    <p> Via Marconi 93<BR>Tel. 09871234</p>
    </li>
    </ul>
    </li>
    </ul>
    </div>

    Vorrei fare il tutto con i css3 e html, ma qualcosa non funziona, i sottomenu sono sempre visibili, gli indirizzi di Milano e Napoli non appaiono.
    sapreste aiutarmi?:?
    Grazie!

    0
  • M
    Moderatore •

    Ciao famarinu,

    non puoi intercettare l'evento click solo tramite CSS3 ed HTML. Ti serve Javascript/jQuery.

    0
  • F
    User •

    Posso fare anche senza javascript perché fino a due livelli funziona, poi sono andata ad aggiungere il terzo livello e non ha più funzionato. C'è qualcosa di sbagliato nella parte dei css quando chiamo il sottomenu, ma non riesco a capire dove.
    Scusa MiWebDesig, posso chiederti un'altra cosa...
    Ho due div, quello di sinistra e quello di destra, in quello di sinistra ci sono dei link ad immagini, io vorrei che queste immagini si aprissero nel div di destra, come devo fare?
    Sono giorni, ma ci sto lavorando ma non sono molto pratica, grazie!

    0
Effettua l'accesso per rispondere