• Menu accueil

    Pour Alain, qui se lançait dans un menu/page d'accueil.
    Ceci est un exemple, sur un bloc, comprenant 4 vignettes apparentes et + non afichées; exemple avec deux blocs: ICI.
    Les vignettes affichées et non affichées apparaissent en plus grand, en cliquant sur le bloc.
    La fermeture de la page qui apparaît se fait en cliquant sur la croix, en haut/droit
    Pour réaliser un tel menu, il faut créer autant de bloc et de vignettes que nécessaire et mettre les liens sur les vignettes des fenêtres qui apparaissent.
    Ce type de menu est fortement inspiré de la page d'accueil du navigateur Opera, dont j'ai déjà parlé.

    Bloc 1

    Fleurs
    1

    Fleur
    2

    Paysages
    1

    Paysages
    2

    Villages
    1

    Villages
    2

    Bloc 1

    Fleurs 1

    Fleurs 2

    Paysages 1

    Paysages 2

    Villages1

    Villages 2

    X

     

    Code:
    <div id="mont">
    <div id="ancres"><a id="lien1" class="ancre"></a>
    <div id="tr1"><a href="#lien1"><img style="width: 250px; height: 250px;" src="http://ekladata.com/omkHvdI_dFfTblNPmCdbri94EL8/1px-par-1px.png" alt="" /></a></div>
    <div id="tr2">
    <p style="text-align: center; width: 250px; height: 20px; font-size: 20pt;">Bloc 1</p>
    <p id="bc"><span style="font-size: 20pt;">Fleurs<br />1</span></p>
    <p id="bc"><span style="font-size: 20pt;">Fleur<br />2</span></p>
    <p id="bc"><span style="font-size: 15pt;">Paysages<br />1</span></p>
    <p id="bc"><span style="font-size: 15pt;">Paysages<br />2</span></p>
    <p id="bc"><span style="font-size: 15pt;">Villages<br />1</span></p>
    <p id="bc"><span style="font-size: 15pt;">Villages<br />2</span></p>
    </div>
    <div id="tr3">
    <p style="text-align: center; width: 1000px; height: 20px; font-size: 25pt; color: white; text-shadow: 1px 1px black;">Bloc 1</p>
    <p id="bd">Fleurs 1<a href="http://pourquoipas732.eklablog.com/photos-fleurs-p1040844" target="blank"><img style="width: 150px;" src="http://ekladata.com/3TIUW9cEBRAYvthDf67nU_GBOdk.gif" alt="" /></a></p>
    <p id="bd">Fleurs 2<a href="http://pourquoipas732.eklablog.com/fleurs2-p1040904" target="blank"><img src="http://ekladata.com/dWW-1gbpEcCHTIXzCd1w7Q1gmMA.gif" alt="" /></a></p>
    <p id="bd">Paysages 1<br /><br /><a href="http://pourquoipas732.eklablog.com/paysages1-p1040864" target="blank"><img src="http://ekladata.com/5TBu9md0fm4kRuu7q3nivhxnbsw.gif" alt="" /></a></p>
    <p id="bd">Paysages 2<br /><br /><a href="http://pourquoipas732.eklablog.com/paysages2-p1041550" target="blank"><img src="http://ekladata.com/OCNZ_3AAqbJPxqOu8_ZXK1ccuXY.gif" alt="" /></a></p>
    <p id="bd">Villages1<br /><br /><a href="http://pourquoipas732.eklablog.com/villages-p1040946" target="blank"><img src="http://ekladata.com/kNnmry4NO3yY1xoFbndNWNb9uNI.gif" alt="" /></a></p>
    <p id="bd">Villages 2<br /><br /><a href="http://pourquoipas732.eklablog.com/villages-2-p1041594" target="blank"><img src="http://ekladata.com/ixfhjXwpXB0A3nRaQNM6MpQ3nQc.gif" alt="" /></a></p>
    <p id="ferm"><a href="#lien"><span style="color: yellow; font-size: 25pt;">X</span></a></p>
    </div>
    </div>
    </div>
    <p>&nbsp;</p>

    <style type="text/css"><!--
    #mont{position:relative; width:1000px; height:600px; margin:10px auto ;}
    #ancres a.ancre{display: none;}
    #tr1{transform:translate(50px,50px);position:absolute; z-index:10; width:250px; height:250px; border:1px solid black; }
    #tr2{transform:translate(50px,50px);position:absolute; z-index:1; overflow:hidden; width:250px; height:250px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/textures/g56.jpg'); background-size:cover; }
    #tr3{transform:translate(50px,50px);position:absolute; z-index:2; width:1000px; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/textures/dogplane.jpg'); background-size:contain; opacity:0; }
    #bc{ width: 100px; height:90px; text-align:center; font-size:11pt; border:1px solid black; box-shadow:1px 1px black; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/textures/silver4.jpg');; background-size:cover; float: left; margin: 10px;}
    #bd{ width: 200px; height: 200px; text-align:center; font-size:14pt;border:1px solid black; box-shadow:1px 1px black; background:url('http://ekladata.com/pourquoipas732.eklablog.com/perso/textures/silver4.jpg');; background-size:cover; float: left; margin: 10px;}
    #ferm{position:absolute; z-index:10; transform:translate(950px,10px);}

    #ancres a#lien1:target ~ #tr3{opacity:1; z-index:15;}
    --></style>
    ...
    Le fait de cacher les vignettes en trop, dans le module affiché permet de modifier l'ordre des 4 visibles (ou + si vous diminuez les tailles)