• Menu 6

    Ma série des menus me fait terminer par un modèle, dont je vais conserver le code, pour changer un peu ma présentation, pour mes menus à venir.

    Les dimensions sont en unités adaptatives, en 80% de la largeur de l'écran de lecture; cette valeur est sans doute trop grande pour beaucoup de blog mais il est relativement simple de la modifier.

    Dans ce modèle, j'ai placé 28 cadres-lien, soit 4 séries de 7 mais vous pouvez en ajouter ou en supprimer.

    Tous les cadres-lien sont placés, au départ, sous le bouton d'animation; au clic, chacun se déplace vers sa position déterminée, avec un retard sur l'animation de 0.1 seconde, par rapport au précédent, pour donner un effet.

    Le code peut paraître long mais, me semble-t-il, assez compréhensible pour être personnalisé.

    Remplacez les <a href="#" target="_blank"> par votre adresse en lien: exemple:<a href="http://pourquoipas732.eklablog.com" target="_blank">lien</a>

    <div style="width: 80vw; height: 45vw; margin: 2vh auto; border: 0.4vh ridge white; background: url('http://ekladata.com/a_FH3UYfX7W9gXf-U2xwaNqPtSo.jpg'); background-size: cover;"><input id="mm1" type="text" value="clic menu" />
    <p id="pp1" class="pp"><a href="#" target="_blank">Lien 1</a></p>
    <p id="pp2" class="pp"><a href="#" target="_blank">Lien 2</a></p>
    <p id="pp3" class="pp"><a href="#" target="_blank">Lien 3</a></p>
    <p id="pp4" class="pp"><a href="#" target="_blank">Lien 4</a></p>
    <p id="pp5" class="pp"><a href="#" target="_blank">Lien 5</a></p>
    <p id="pp6" class="pp"><a href="#" target="_blank">Lien 6</a></p>
    <p id="pp7" class="pp"><a href="#" target="_blank">Lien 7</a></p>
    <p id="pp8" class="pp"><a href="#" target="_blank">Lien 8</a></p>
    <p id="pp9" class="pp"><a href="#" target="_blank">Lien 9</a></p>
    <p id="pp10" class="pp"><a href="#" target="_blank">Lien 10</a></p>
    <p id="pp11" class="pp"><a href="#" target="_blank">Lien 11</a></p>
    <p id="pp12" class="pp"><a href="#" target="_blank">Lien 12</a></p>
    <p id="pp13" class="pp"><a href="#" target="_blank">Lien 13</a></p>
    <p id="pp14" class="pp"><a href="#" target="_blank">Lien 14</a></p>
    <p id="pp15" class="pp"><a href="#" target="_blank">Lien 15</a></p>
    <p id="pp16" class="pp"><a href="#" target="_blank">Lien 16</a></p>
    <p id="pp17" class="pp"><a href="#" target="_blank">Lien 17</a></p>
    <p id="pp18" class="pp"><a href="#" target="_blank">Lien 18</a></p>
    <p id="pp19" class="pp"><a href="#" target="_blank">Lien 19</a></p>
    <p id="pp20" class="pp"><a href="#" target="_blank">Lien 20</a></p>
    <p id="pp21" class="pp"><a href="#" target="_blank">Lien 21</a></p>
    <p id="pp22" class="pp"><a href="#" target="_blank">Lien 22</a></p>
    <p id="pp23" class="pp"><a href="#" target="_blank">Lien 23</a></p>
    <p id="pp24" class="pp"><a href="#" target="_blank">Lien 24</a></p>
    <p id="pp25" class="pp"><a href="#" target="_blank">Lien 25</a></p>
    <p id="pp26" class="pp"><a href="#" target="_blank">Lien 26</a></p>
    <p id="pp27" class="pp"><a href="#" target="_blank">Lien 27</a></p>
    <p id="pp28" class="pp"><a href="#" target="_blank">Lien 28</a></p>
    </div>
    <style><!--
    #mm1{position:absolute; z-index:5; width:10vw; height:3vw; border:0.4vh ridge grey; border-radius:1vw; box-shadow:0.3vh 0.3vh 0.5vh black, inset 0.3vh 0.3vh 0.5vh white, inset -0.3vh -0.3vh 0.5vh black; background:#FAEBD7; text-align:center; line-height:3vw; font-size:2vw; color:coral!important; text-shadow:0.2vh 0.2vh black; transform:translate(35vw,2vw);}
    .pp{position:absolute; z-index:1; width:8vw; height:2vw; border:0.4vh ridge grey; background:#FAEBD7;text-align:center; line-height:2vw; font-size:1vw; transform:translate(35vw,2vw); }
    #pp1{transition:all 1s linear 0s;}
    #pp2{transition:all 1s linear 0.1s;}
    #pp3{transition:all 1s linear 0.2s;}
    #pp4{transition:all 1s linear 0.3s;}
    #pp5{transition:all 1s linear 0.4s;}
    #pp6{transition:all 1s linear 0.5s;}
    #pp7{transition:all 1s linear 0.6s;}
    #pp8{transition:all 1s linear 0s;}
    #pp9{transition:all 1s linear 0.1s;}
    #pp10{transition:all 1s linear 0.2s;}
    #pp11{transition:all 1s linear 0.3s;}
    #pp12{transition:all 1s linear 0.4s;}
    #pp13{transition:all 1s linear 0.5s;}
    #pp14{transition:all 1s linear 0.6s;}
    #pp15{transition:all 1s linear 0s;}
    #pp16{transition:all 1s linear 0.1s;}
    #pp17{transition:all 1s linear 0.2s;}
    #pp18{transition:all 1s linear 0.3s;}
    #pp19{transition:all 1s linear 0.4s;}
    #pp20{transition:all 1s linear 0.5s;}
    #pp21{transition:all 1s linear 0.6s;}
    #pp22{transition:all 1s linear 0s;}
    #pp23{transition:all 1s linear 0.1s;}
    #pp24{transition:all 1s linear 0.2s;}
    #pp25{transition:all 1s linear 0.3s;}
    #pp26{transition:all 1s linear 0.4s;}
    #pp27{transition:all 1s linear 0.5s;}
    #pp28{transition:all 1s linear 0.6s;}
    #mm1:focus ~ #pp1{width:12vw; transform:translate(5vw,10vw);}
    #mm1:focus ~ #pp2{width:12vw; transform:translate(5vw,15vw);}
    #mm1:focus ~ #pp3{width:12vw; transform:translate(5vw,20vw);}
    #mm1:focus ~ #pp4{width:12vw; transform:translate(5vw,25vw);}
    #mm1:focus ~ #pp5{width:12vw; transform:translate(5vw,30vw);}
    #mm1:focus ~ #pp6{width:12vw; transform:translate(5vw,35vw);}
    #mm1:focus ~ #pp7{width:12vw; transform:translate(5vw,40vw);}
    #mm1:focus ~ #pp8{width:12vw; transform:translate(25vw,10vw);}
    #mm1:focus ~ #pp9{width:12vw; transform:translate(25vw,15vw);}
    #mm1:focus ~ #pp10{width:12vw; transform:translate(25vw,20vw);}
    #mm1:focus ~ #pp11{width:12vw; transform:translate(25vw,25vw);}
    #mm1:focus ~ #pp12{width:12vw; transform:translate(25vw,30vw);}
    #mm1:focus ~ #pp13{width:12vw; transform:translate(25vw,35vw);}
    #mm1:focus ~ #pp14{width:12vw; transform:translate(25vw,40vw);}
    #mm1:focus ~ #pp15{width:12vw; transform:translate(45vw,10vw);}
    #mm1:focus ~ #pp16{width:12vw; transform:translate(45vw,15vw);}
    #mm1:focus ~ #pp17{width:12vw; transform:translate(45vw,20vw);}
    #mm1:focus ~ #pp18{width:12vw; transform:translate(45vw,25vw);}
    #mm1:focus ~ #pp19{width:12vw; transform:translate(45vw,30vw);}
    #mm1:focus ~ #pp20{width:12vw; transform:translate(45vw,35vw);}
    #mm1:focus ~ #pp21{width:12vw; transform:translate(45vw,40vw);}
    #mm1:focus ~ #pp22{width:12vw; transform:translate(65vw,10vw);}
    #mm1:focus ~ #pp23{width:12vw; transform:translate(65vw,15vw);}
    #mm1:focus ~ #pp24{width:12vw; transform:translate(65vw,20vw);}
    #mm1:focus ~ #pp25{width:12vw; transform:translate(65vw,25vw);}
    #mm1:focus ~ #pp26{width:12vw; transform:translate(65vw,30vw);}
    #mm1:focus ~ #pp27{width:12vw; transform:translate(65vw,35vw);}
    #mm1:focus ~ #pp28{width:12vw; transform:translate(65vw,40vw);}
    --></style>