-
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
Menu2
Son survol
Textures
Page accueil 1
...Menu3
Montage 2
Montage 1
Survol nom
...Menu4
Filtres divers
montage 4
montage 3
...Menu4
Filtres divers
montage 4
montage 3
...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>
...