Menu spirale 1

Détaillons ce menu pour pouvoir le personnaliser.

Le créateur est: http://www.script-tutorials.com/whirling-dropdown-menu et un diffuseur est: http://papyrocktest.eklablog.com/menu-ccs-effet-spirale-a107116466

Revoyons ce menu et son code général, pour 5 menus et 8 sous-menus chacun; on pourra modifier ces 2 paramètres.

Je vais repérer les différents paragraphes du code pour les reprendre en page individuelle, afin de les personnaliser; ils seront différenciés par une couleur de fond.

<div style="width: 80vw; height: 80vh; border: 0.4vw double white; margin: 0.2vh auto; background: url('http://ekladata.com/zT_y5fdYKzh5pl1xYLhB71CeghM.jpg'); background-size: cover; box-sizing: border-box;">
<p id="cc">Menu Exemple</p>
<ul class="menu">
<li><a href="#s1">Menu 1</a>
<ul class="submenu">
<li><a href="http://ekladata.com/1OH3NHGpVN54M9guuLnS3huw3-o.jpg" target="blank">IMG 1</a></li>
<li><a href="http://ekladata.com/1-r6alRCCS9Vn8o4oryiR-RkHbw.jpg" target="blank">IMG 2</a></li>
<li><a href="http://ekladata.com/2X_31lOWPQksOMIrK8Zlj03Jr8c.jpg" target="blank">IMG 3</a></li>
<li><a href="http://ekladata.com/osv5x20ef7qqV3ZF3xTkcQTzsmA.jpg" target="blank">IMG 4</a></li>
<li><a href="#" target="blank">libre</a></li>
<li><a href="#" target="blank">libre</a></li>
<li><a href="#" target="blank">libre</a></li>
<li><a href="#" target="blank">libre</a></li>
</ul>
</li>
<li class="active"><a href="#s2">Menu 2</a>
<ul class="submenu">
<li><a href="#" target="blank">libre</a></li>
<li><a href="#" target="blank">libre</a></li>
<li><a href="#" target="blank">libre</a></li>
<li><a href="#" target="blank">libre</a></li>
<li><a href="#" target="blank">libre</a></li>
<li><a href="#" target="blank">libre</a></li>
<li><a href="#" target="blank">libre</a></li>
<li><a href="#" target="blank">libre</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul class="submenu">
<li><a href="#" target="blank">libre</a></li>
<li><a href="#" target="blank">libre</a></li>
<li><a href="#" target="blank">libre</a></li>
<li><a href="#" target="blank">libre</a></li>
<li><a href="#" target="blank">libre</a></li>
<li><a href="#" target="blank">libre</a></li>
<li><a href="#" target="blank">libre</a></li>
<li><a href="#" target="blank">libre</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a>
<ul class="submenu">
<li><a href="#" target="blank">libre</a></li>
<li><a href="#" target="blank">libre</a></li>
<li><a href="#" target="blank">libre</a></li>
<li><a href="#" target="blank">libre</a></li>
<li><a href="#" target="blank">libre</a></li>
<li><a href="#" target="blank">libre</a></li>
<li><a href="#" target="blank">libre</a></li>
<li><a href="#" target="blank">libre</a></li>
</ul>
</li>
<li><a href="#">Menu 5</a>
<ul class="submenu">
<li><a href="#" target="blank">libre</a></li>
<li><a href="#" target="blank">libre</a></li>
<li><a href="#" target="blank">libre</a></li>
<li><a href="#" target="blank">libre</a></li>
<li><a href="#" target="blank">libre</a></li>
<li><a href="#" target="blank">libre</a></li>
<li><a href="#" target="blank">libre</a></li>
<li><a href="#" target="blank">libre</a></li>
</ul>
</li>
</ul>
</div>
<style><!--
#cc{position:absolute; z-index:0; width:40vw; transform:translate(20vw,2vh); border:0.1vh solid black; text-align:center; font-size:4vh; color:white; text-shadow:0.1vw 0.1vh black; background: linear-gradient(to top, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%);}
#menu {display:none;}
.menu, .menu ul {list-style: none; padding: 0; margin: 0;}
.menu {position: relative; top: 5vw; left: 25vh; height: 6vh;}
.menu li {background: linear-gradient(to top, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%); box-sizing:border-box; border-bottom: 0.2vw solid #1B1B1B; border-top: 0.2vw solid #303030; min-width: 10vw;}
.menu > li {display: block; float: left; position: relative;}
.menu > li:first-child {border-radius: 0.1vw 0 0;}
.menu a {box-sizing:border-box; border-left:0.1vw solid rgba(0,0,0,1); color: #ffffff; display: block; font-family: 'Lucida Console'; font-size: 2vh; line-height: 6vh; text-align:center; text-decoration: none; text-transform: uppercase;}
.menu li:hover {background: linear-gradient(to bottom, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); border-bottom: 0.1vh solid #303030; border-top: 0.1vh solid #1B1B1B;}
.menu li:hover > a {color: #37C42B;}

.submenu {left: 0; max-height: 0; position: absolute; top: 100%; z-index: 0; perspective: 400px;}
.submenu li {opacity: 0; height:6vh; line-height:6vh; transform: rotateY(90deg); transition: opacity .4s, transform .5s;}
.menu .submenu li:hover a {border-left: 0.2vh solid #005700; border-right: 0.2vh solid #005700; border-bottom: 0.2vh solid #005700; color: #ffffff;line-height:6vh;}
.menu > li:hover .submenu, .menu > li:focus .submenu {max-height: 50vw; z-index: 10;}
.menu > li:hover .submenu li, .menu > li:focus .submenu li {opacity: 1; transform: none;}

.menu li:hover .submenu li:nth-child(1) {transition-delay: 0s;}
.menu li:hover .submenu li:nth-child(2) {transition-delay: 50ms;}
.menu li:hover .submenu li:nth-child(3) {transition-delay: 100ms;}
.menu li:hover .submenu li:nth-child(4) {transition-delay: 150ms;}
.menu li:hover .submenu li:nth-child(5) {transition-delay: 200ms;}
.menu li:hover .submenu li:nth-child(6) {transition-delay: 250ms;}
.menu li:hover .submenu li:nth-child(7) {transition-delay: 300ms;}
.menu li:hover .submenu li:nth-child(8) {transition-delay: 350ms;}

.submenu li:nth-child(1) {transition-delay: 350ms;}
.submenu li:nth-child(2) {transition-delay: 300ms;}
.submenu li:nth-child(3) {transition-delay: 250ms;}
.submenu li:nth-child(4) {transition-delay: 200ms;}
.submenu li:nth-child(5) {transition-delay: 150ms;}
.submenu li:nth-child(6) {transition-delay: 100ms;}
.submenu li:nth-child(7) {transition-delay: 50ms;}
.submenu li:nth-child(8) {transition-delay: 0ms;}
--></style>