• Diapo 23

    Cette page était destinée à proposer un "menu escamotable" mais le présenter seul me paraissait peu clair; alors, le voilà sur un montage avec affichage des boutons au survol du Menu et changement d'image au clic sur les boutons.

    Je voulais aussi montrer la possibilité d'utiliser les boutons créés, dans la page "boutons"; cependant, pour mettre un numéro différent sur chaque bouton, j'ai dû créer autant d'images, (800x600px), hébergées sur Ekla, avec adresses récupérées et placées dans le montage.

    Menu

    Code:

    <div id="mont">

    <div id="ancres"><a id="lien1" class="ancre"></a> <a id="lien2" class="ancre"></a> <a id="lien3" class="ancre"></a> <a id="lien4" class="ancre"></a>

    <p id="mn">Menu</p>

    <p id="mb"><a href="#lien1"><img id="tr1" src="http://ekladata.com/FS5mY8n_T7rDAr5vM1aq7JuWrbI/bt2a.png" alt="" /></a><a href="#lien2"><img id="tr2" src="http://ekladata.com/Y0XXevsRF8lYeqb42FC_mk1EWBE/bt22.png" alt="" /></a><a href="#lien3"><img id="tr3" src="http://ekladata.com/jIdnmTuDyRSMvkKJ5nqAjyZqRfI/bt23.png" alt="" /></a><a href="#lien4"><img id="tr4" src="http://ekladata.com/WCiv2JVHtqVgLCO7UtG5gBJMB0Y/bt24.png" alt="" /></a></p>

    <p id="img1"><img src="http://ekladata.com/Bgq49MtMiwqrvyFyX2bk-g_KbLw/DSCN6180f.jpg" alt="" /></p>

    <p id="img2"><img src="http://ekladata.com/ZwJviNbV98JaMbiaWu_R46-Klh8/DSCN6184f.jpg" alt="" /></p>

    <p id="img3"><img src="http://ekladata.com/p_B1tOWBwGrjIec3CsUKS8TpU1w/DSCN6190.jpg" alt="" /></p>

    <p id="img4"><img src="http://ekladata.com/eqag60iIsKAkljuj1iqXmIuBmXk/DSCN6194f.jpg" alt="" /></p>

    </div>

    </div>

    <style type="text/css"><!--

    #mont{position:relative; width:800px; height:600px; border:4px ridge white; box-shadow:4px 4px 6px black; margin:10px auto; overflow:hidden;} 

    #ancres a.ancre{display: none;}

    #mn{position:absolute;transition:all 1s linear; z-index:10; width:60px; height:30px; text-align:center; font-size:12pt; transform:translate(0px,0px); background-color:rgba(128,128,128,0.5);}

    #mb{position:absolute; transition:all 1s linear; width:60px; height:200px; border:1px solid black; background-color:rgba(128,128,128,0.5); transform:translate(-60px,0px); text-align:center;} 

    #tr1{transform:translate(-20px,30px);position:absolute;z-index:15; font-size: 25px; font-weight: bold;}

    #img1{width:800px;height:600px;position:absolute;transform:translate(0px,0px);}

    #tr2{position:absolute;z-index:10;transform:translate(-20px,70px); font-size:20pt;}

    #img2{position:absolute;z-index:2;width:800px;height:600px;transform:translate(0px,0px);transition: all 1s ease; opacity:0;}

    #tr3{position:absolute;z-index:10;transform:translate(-20px,110px); font-size:20pt;}

    #img3{position:absolute;z-index:2;width:800px;height:600px;transform:translate(0px,0px);transition: all 1s ease; opacity:0;}

    #tr4{position:absolute;z-index:10;transform:translate(-20px,150px); font-size:20pt;}

    #img4{position:absolute;z-index:2;width:800px;height:600px;transform:translate(0px,0px);transition: all 1s ease; opacity:0;}

    #mn:hover{transform:translate(60px,0px);} 

    #mn:hover ~ #mb{transform:translate(0px,0px); z-index:10;}

    #mb:hover{transform:translate(0px,0px);z-index:10;} 

    #ancres a#lien2:target ~ #img2{opacity:1;}

    #ancres a#lien3:target ~ #img3{opacity:1;}

    #ancres a#lien4:target ~ #img4{opacity:1;}

    --></style>

    Le survol du cadre Menu (id="mn") fait se déplacer le cadre des boutons (id="mb"); l'astuce pour que le cadre des boutons reste affiché alors qu'on sort de dessus le cadre Menu, est de lui donner la même animation au survol et de les placer côte à côte; ainsi, on sort de sur l'un pour être aussitôt sur l'autre, sans arrêt de l'animation.
    Chaque élément est positionné en absolute, selon le code CSS3 onclick que nous avons déjà vu.