Menu 5

Une autre présentation pour un menu sommaire: clic sur le rond central puis clic sur le lien désiré.

En cliquant sur le lien, vous faites revenir le menu en position de départ, ce qui ne semble pas bien grave.

Le nombre de liens est à votre convenance, de même que leur apparence; ici, le rond est central mais vous pouvez le placer où vous le voulez.

<div style="position: relative; width: 60vw; height: 33.75vw; margin: 2vh auto; border: 0.4vh ridge white; background: url('http://ekladata.com/9QRtHaLSGAwyGbV7-0ji4-eB_yg.jpg'); background-size: cover; overflow: hidden;"><input id="rond" type="text" value="Clic menu" />
<p id="ele1" class="ele"><a href="#">Lien 1</a></p>
<p id="ele2" class="ele"><a href="#">Lien 2</a></p>
<p id="ele3" class="ele"><a href="#">Lien 3</a></p>
<p id="ele4" class="ele"><a href="#">Lien 4</a></p>
<p id="ele5" class="ele"><a href="#">Lien 5</a></p>
<p id="ele6" class="ele"><a href="#">Lien 6</a></p>
</div>

<style><!--
#rond{position:absolute; z-index:3;width:12vw; height:8vw; box-shadow:inset 0.5vh 0.5vh 1vh black, inset -0.5vh -0.5vh 1vh white; border-radius:50%; text-align:center; transform:translate(25vw,12vw); font-size:2vw; color:coral; text-shadow:0.2vh 0.2vh black;line-height:10vw; background:#FAEBD7;}
#tt1{position:absolute; z-index:1; width:50vw; height:2vw; transform:translate(55vw,5vw); transition:all 1s linear;}
.ele{position:absolute;box-sizing:border-box; width:8vw; height:3vw; border:0.1vh solid black; background:#FAEBD7; text-align:center; font-size:1vw; line-height:3vw; text-shadow:0.1vh 0.1vh black;}
#ele1,#ele2,#ele3,#ele4,#ele5,#ele6{z-index:1; transform:translate(26vw,15vw); transition:all 1s linear;}
#rond:focus ~ #ele1{transform:translate(27vw,2vw);}
#rond:focus ~ #ele2{transform:translate(27vw,28vw);}
#rond:focus ~ #ele3{transform:translate(10vw,5vw);}
#rond:focus ~ #ele4{transform:translate(10vw,25vw);}
#rond:focus ~ #ele5{transform:translate(45vw,5vw);}
#rond:focus ~ #ele6{transform:translate(45vw,25vw);}
--></style>