• Menu spirale 1

    On me demande le code du menu spirale, qui me sert de sommaire: cela va me permettre de faire quelques pages sur des menus.

    Au départ, ce genre de menu est destiné à être placé dans l'entête d'un blog; vous pouvez en trouver un exemple et le code:

    http://papyrocktest.eklablog.com/menu-ccs-effet-spirale-a107116466

    Lui-même a trouvé ce code sur un site américain, je crois.

    Sur Ekla, nous pouvons réaliser ce genre de menu déroulant, sans spirale, par les outils fournis, ce qui est tout de même plus simple.

    Je l'ai adapté à mon besoin, en le transformant en sommaire, vers mes pages, articles ou sites favoris.

    Lorsqu'un sommaire est plein, j'en crée un autre; je fais cela dans la rubrique "Accueil" et j'ai créé, à côté, une rubrique "Articles", vers laquelle je dirige les visiteurs: un lien sur chacune permet de passer de l'une à l'autre.

    Je commence par le plus compliqué et qui n'est, à l'origine, pas de moi, pour répondre à la demande mais les autres pages seront plus simples !

    <p style="text-align: center;"><span style="font-size: 14pt; background-color: #ffff00;"><strong><a style="background-color: #ffff00;" href="http://pourquoipas732.eklablog.com/articles-c28709748" target="_blank">Commentaires activ&eacute;s: ICI</a></strong></span></p>
    <div style="width: 80vw; height: 80vh; border: 1px solid black; margin: 0.2vh auto; background: url('http://ekladata.com/zT_y5fdYKzh5pl1xYLhB71CeghM.jpg'); background-size: cover;">
    <p id="cc">Janvier 2017</p>
    <ul class="mens">
    <li><a href="#s1">Menu 1</a>
    <ul class="submens">
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    </ul>
    </li>
    <li class="active"><a href="#s2">Menu 2</a>
    <ul class="submens">
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    </ul>
    </li>
    <li><a href="#">Menu 3</a>
    <ul class="submens">
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    </ul>
    </li>
    <li><a href="#">Menu 4</a>
    <ul class="submens">
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    </ul>
    </li>
    <li><a href="#">Menu 5</a>
    <ul class="submens">
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    </ul>
    </li>
    <li><a href="#">Menu 6</a>
    <ul class="submens">
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    </ul>
    </li>
    <li><a href="#">Menu 7</a>
    <ul class="submens">
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    <li><a href="#" target="_blank">libre</a></li>
    </ul>
    </li>
    </ul>
    </div>
    <style><!--
    #cc{position:absolute; z-index:0; width:40vw; transform:translate(20vw,2vh); border:0.1vh solid black; text-align:center; font-size:25pt; color:white; text-shadow:0.1vw 0.1vh black; background: linear-gradient(to top, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%);}
    #mens {display:none;}
    .mens, .mens ul {
    list-style: none;
    padding: 0;
    margin: 0;
    }
    .mens {
    position: relative;
    top: 5vw;
    left: 10vh;
    height: 2vh;
    }
    .mens li {
    background: linear-gradient(to top, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%);
    box-sizing:border-box;
    border-bottom: 0.2vw solid #1B1B1B;
    border-top: 0.2vw solid #303030;
    min-width: 10vw;
    }
    .mens > li {
    display: block;
    float: left;
    position: relative;
    }
    .mens > li:first-child {
    border-radius: 0.1vw 0 0;
    }
    .mens a {
    box-sizing:border-box;
    border-left:0.1vw solid rgba(0,0,0,1);
    color: #ffffff;
    display: block;
    font-family: 'Lucida Console';
    font-size: 2vh;
    line-height: 4vh;
    text-align:center;
    text-decoration: none;
    text-transform: uppercase;
    }
    .mens li:hover {
    background: linear-gradient(to top, #b4ddb4 0%,#83c783 8%,#52b152 19%,#008a00 41%,#005700 67%,#002400 100%);
    border-bottom: 0.1vh solid #303030;
    border-top: 0.1vh solid #1B1B1B;
    }
    .mens li:hover > a {
    color: #37C42B;
    }
    /* submenu styles */
    .submens {
    left: 0;
    max-height: 0;
    position: absolute;
    top: 100%;
    z-index: 0;
    perspective: 400px;
    }
    .submens li {
    opacity: 0;
    height:4vh;
    transform: rotateY(90deg);
    transition: opacity .4s, transform .5s;
    }
    .mens .submens li:hover a {
    border-left: 0.2vh solid #005700;
    border-right: 0.2vh solid #005700;
    border-bottom: 0.2vh solid #005700;
    color: #ffffff;
    }
    .mens > li:hover .submens, .mens > li:focus .submens {
    max-height: 50vw;
    z-index: 10;
    }
    .mens > li:hover .submens li, .mens > li:focus .submens li {
    opacity: 1;
    transform: none;
    }
    /* CSS3 delays for transition effects */
    .mens li:hover .submens li:nth-child(1) {
    transition-delay: 0s;
    }
    .mens li:hover .submens li:nth-child(2) {
    transition-delay: 50ms;
    }
    .mens li:hover .submens li:nth-child(3) {
    transition-delay: 100ms;
    }
    .mens li:hover .submens li:nth-child(4) {
    transition-delay: 150ms;
    }
    .mens li:hover .submens li:nth-child(5) {
    transition-delay: 200ms;
    }
    .mens li:hover .submens li:nth-child(6) {
    transition-delay: 250ms;
    }
    .mens li:hover .submens li:nth-child(7) {
    transition-delay: 300ms;
    }
    .mens li:hover .submens li:nth-child(8) {
    transition-delay: 350ms;
    }
    .mens li:hover .submens li:nth-child(9) {
    transition-delay: 400ms;
    }
    .mens li:hover .submens li:nth-child(10) {
    transition-delay: 450ms;
    }
    .mens li:hover .submens li:nth-child(11) {
    transition-delay: 500ms;
    }
    .mens li:hover .submens li:nth-child(12) {
    transition-delay: 550ms;
    }
    .submens li:nth-child(1) {
    transition-delay: 550ms;
    }
    .submens li:nth-child(2) {
    transition-delay: 500ms;
    }
    .submens li:nth-child(3) {
    transition-delay: 450ms;
    }
    .submens li:nth-child(4) {
    transition-delay: 400ms;
    }
    .submens li:nth-child(5) {
    transition-delay: 350ms;
    }
    .submens li:nth-child(6) {
    transition-delay: 300ms;
    }
    .submens li:nth-child(7) {
    transition-delay: 250ms;
    }
    .submens li:nth-child(8) {
    transition-delay: 200ms;
    }
    .submens li:nth-child(9) {
    transition-delay: 150ms;
    }
    .submens li:nth-child(10) {
    transition-delay: 100ms;
    }
    .submens li:nth-child(11) {
    transition-delay: 50ms;
    }
    .submens li:nth-child(12) {
    transition-delay: 0s;
    }
    --></style>


    Le code peut vous sembler bien complexe mais il est très répétitif.

    Chaque élément rotatif a une ligne pour l'ouverture et une pour la fermeture.

    J'ai ajouté des éléments mais on fait ce que l'on veut.