• Menu escamotable

    J'ai proposé, dernièrement, des montages avec un menu qui s'affiche au survol et qui comporte des boutons à cliquer.

    La seule astuce de ce montage est dans le fait que le survol de la case menu fait apparaitre les boutons qui restent affichés.

    Par principe, le survol d'un premier élément qui anime un second élément s'arrête dès qu'on ne survole plus ce premier élément; Le second élément doit donc, en animation, passer au dessus du premier élément et avoir une animation au survol, qui prolongera l'animation du premier élément.

    Ainsi, votre curseur étant placé sur le premier élément, va se retrouver, sans bouger, au dessus du second élément et l'animer selon les paramètres définis, dans un mouvement continu.

    Menu

    Code:

    <div id="mont">
    <p id="mn">Menu</p>
    <p id="mb"><a href="#lien1"><img id="tr1" src="http://ekladata.com/8SJZ0UOAGEeipUwjqCJxWeU8npA/img447.gif" alt="" /></a> <a href="#lien2"><img id="tr2" src="http://ekladata.com/wm69KAZb6zs0xMcAtgJe9kUTpHQ/img448.gif" alt="" /></a></p>
    </div>
    </div>

    <style type="text/css"><!--
    #mont{position:relative; width:400px; height:100px; border:4px ridge white; box-shadow:4px 4px 6px black; margin:10px auto; overflow:hidden;}
    #mn{position:absolute;transition:all 1s linear; z-index:10; width:60px; height:30px; text-align:center; font-size:14pt; color:white; text-shadow:1px 1px black; transform:translate(340px,0px); background-color:rgba(128,128,128,0.5);}
    #mb{position:absolute; transition:all 1s linear; width:200px; height:35px; border:1px solid black; background-color:rgba(128,128,128,0.5); transform:translate(405px,0px);}

    #tr1{position:absolute;z-index:10; transform:translate(20px,0px); width:30px;}
    #tr2{position:absolute;z-index:10;transform:translate(60px,0px); width:30px;}

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


    Pour ce principe, pas de lien sur les boutons, ni de lignes pour le clic, pour simplifier; comparez avec un code montage expliqué.
    Le montage (id="mont") est à ajuster à votre montage; la présentation et la position du bouton "Menu" est à adapter pour que le paragraphe des boutons (id="mb"), caché à l'extérieur du montage, vienne le survoler au survol, en passant au dessus (z-index:10;).
    Comme vous le trouverez dans mes autres exemples, les boutons peuvent apparaitre en vertical comme en horizontal et les boutons sont à votre choix.