• Votre page d'accueil 2

    La page d'accueil que j'ai proposée a donné l'idée, à un visiteur, d'en imaginer une autre, selon ses choix et, pour m'amuser, je vais essayer d'en réaliser une, dans son modèle, c'est à dire avec des listes déroulantes selon des rubriques.

    Mon menu 2

    On peut, à partir de cette base, créer d'autres menus, les placer en dessous, en modifier taille, couleur et forme, ajouter autant de liens que voulus,...
    Code:
    <div style="width: 1360px; height: 877px; background: url('http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/septembre/10/DSCN4945f.JPG'); text-align: center;">
    <h1 style="color: white; text-shadow: 1px 1px black; width: 250px; margin: 10px 0 20px 450px;">Mon menu 2</h1>
    <div id="vert1">
    <p id="ml1"><span style="font-size: 14pt;">Menu1</span><br /><br /><a href="http://pourquoipas732.eklablog.com/10-aout-p1058442" target="blank;">10 aout</a><br /><a href="http://pourquoipas732.eklablog.com/11-aout-p1058448" target="blank;">11 aout</a><br /><a href="http://pourquoipas732.eklablog.com/12-aout-p1058452" target="blank;">12 aout</a><br />...</p>
    </div>
    <div id="vert2">
    <p id="ml2"><span style="font-size: 14pt;">Menu2</span><br /><br /><a href="http://pourquoipas732.eklablog.com/son-survol-2-p1075296 " target="blank;"> Son survol</a><br /> <a href="http://pourquoipas732.eklablog.com/textures-p1074642 " target="blank;"> Textures</a><br /> <a href="http://pourquoipas732.eklablog.com/page-d-accueil-p1074492 " target="blank;"> Page accueil 1</a><br />...</p>
    </div>
    autant de menus que souhaité </div>...
    <style><!--
    #vert1 { position:absolute; width:200px; height:30px; background: linear-gradient(to top, #fefcea 0%,#f1da36 100%); transform:translate(50px,0px); overflow:hidden; transition:1s; border-radius:20px;}
    #ml1{transition:all 0.5s linear; position:absolute; width:200px; height:30px; font-size:12pt; background: linear-gradient(to top, #cedce7 0%,#596a72 100%); transform:translate(0px,0px); text-align:center; }
    #vert1:hover { height:200px; z-index:5;}}
    #vert2 {position:absolute; width:200px; height:30px; background: linear-gradient(to top, #fefcea 0%,#f1da36 100%); transform:translate(300px,0px); overflow:hidden; transition:1s; border-radius:20px;}
    #ml2{transition:all 0.5s linear; position:absolute; width:200px; height:30px; font-size:12pt; background: linear-gradient(to top, #cedce7 0%,#596a72 100%); transform:translate(0px,0px); text-align:center; }
    #vert2:hover { height:200px; z-index:5;}}

     
    --></style>
    ...