• Ex menu


    Lien 1,
    par ex

     


    Lien 2,
    par ex

     


    Lien 3,
    par ex

     


    Lien 4,
    par ex

     


    Un exemple pour utiliser les vignettes hébergées sur Ekla ! Survolez les vignettes.

    <div style="height: 120px;">
    <div style="position: absolute; transform: translate(50px,20px); width: 110px; height: 110px; overflow: hidden;">
    <p id="men1"><br />Lien 1,<br /> par ex</p>
    <p id="men2">&nbsp;</p>
    </div>
    <div style="position: absolute; transform: translate(200px,20px); width: 110px; height: 110px; overflow: hidden;">
    <p id="men1a"><br />Lien 2,<br /> par ex</p>
    <p id="men2a">&nbsp;</p>
    </div>
    <div style="position: absolute; transform: translate(350px,20px); width: 110px; height: 110px; overflow: hidden;">
    <p id="men1b"><br />Lien 3,<br /> par ex</p>
    <p id="men2b">&nbsp;</p>
    </div>
    <div style="position: absolute; transform: translate(500px,20px); width: 110px; height: 110px; overflow: hidden;">
    <p id="men1c"><br />Lien 4,<br /> par ex</p>
    <p id="men2c">&nbsp;</p>
    </div>
    </div>

    <style><!--
    #men1{position:absolute; transform:translate(5px,5px);width:100px; height:100px; border-radius:50%; background: linear-gradient(to bottom, #cedce7 0%,#596a72 100%); text-align:center; font-size:15pt;}
    #men2{position:absolute; transform:translate(5px,5px); transition:all 1s linear; width:100px; height:100px; border-radius:50%; background:url('http://ekladata.com/EFvy3Xd3i0sPYOrSj8R6zh5ofHw/f6.jpg'); background-size:cover; box-shadow:1px 1px 3px 1px black;}
    #men2:hover{transform:translate(0px,-110px);}
    #men1:hover ~ #men2{transform:translate(0px,-110px);}
    #men1a{position:absolute; transform:translate(5px,5px);width:100px; height:100px; border-radius:50%; background: linear-gradient(to bottom, #cedce7 0%,#596a72 100%); text-align:center; font-size:15pt;}
    #men2a{position:absolute; transform:translate(5px,5px); transition:all 1s linear; width:100px; height:100px; border-radius:50%; background:url('http://ekladata.com/DviKdaov-zkxttiU_S_rCPzGQWA/f7.jpg'); background-size:cover;box-shadow:1px 1px 3px 1px black;}
    #men2a:hover{transform:translate(0px,-110px);}
    #men1a:hover ~ #men2a{transform:translate(0px,-110px);}
    #men1b{position:absolute; transform:translate(5px,5px);width:100px; height:100px; border-radius:50%; background: linear-gradient(to bottom, #cedce7 0%,#596a72 100%); text-align:center; font-size:15pt;}
    #men2b{position:absolute; transform:translate(5px,5px); transition:all 1s linear; width:100px; height:100px; border-radius:50%; background:url('http://ekladata.com/wOplJg9ayLKF7c9HeDQJP8WHXGA/f8.jpg'); background-size:cover; box-shadow:1px 1px 3px 1px black;}
    #men2b:hover{transform:translate(0px,-110px);}
    #men1b:hover ~ #men2b{transform:translate(0px,-110px);}
    #men1c{position:absolute; transform:translate(5px,5px);width:100px; height:100px; border-radius:50%; background: linear-gradient(to bottom, #cedce7 0%,#596a72 100%); text-align:center; font-size:15pt;}
    #men2c{position:absolute; transform:translate(5px,5px); transition:all 1s linear; width:100px; height:100px; border-radius:50%; background:url('http://ekladata.com/lcWDyZgk9XX89IFbl4Ib5i02HJ0/f9.jpg'); background-size:cover; box-shadow:1px 1px 3px 1px black;}
    #men2c:hover{transform:translate(0px,-110px);}
    #men1c:hover ~ #men2c{transform:translate(0px,-110px);}
    --></style>
    ...
    ...
    ...
    ...