Navegación desplegable de volteo 3D con CSS3 puro

Vista prévia

Descripción

Un menú de navegación desplegable horizontal con animaciones de volteo 3D de fantasía al abrir los submenús, basados en transiciones y transformaciones CSS3. Construido por < a href = "https://codepen.io/waddington/" target = "_ blank" rel = "noopener" > Waddington .

Funcionamiento

Cree un menú de navegación multinivel con listas HTML anidadas siguiendo la estructura HTML como esta:

<nav class="wrapper">

<ul class="main">


<li class="front"><a href="#">Item</a></li>


<li class="front"><a href="#">Item</a></li>


<li class="front"><a href="#">Hover</a>



<ul class="sub">




<li class="bottom"><a href="#">Sub Item</a></li>




<li class="bottom"><a href="#">Sub Item</a></li>




<li class="bottom"><a href="#">Sub Item</a></li>



</ul>


</li>


<li class="front"><a href="#">Item</a></li>


<li class="front"><a href="#">Item</a></li>

</ul>
</nav>

El CSS/CSS3 requerido para darle estilo a la navegación y animar los subelementos con efectos de volteo 3D.

nav {

color: #1d1d1d;

margin: 0 auto;

width: 541px;
}

a {

text-decoration: none;

color: inherit;
}

nav ul ul {

-webkit-transition: all 500ms ease-in-out 500ms;

-moz-transition: all 500ms ease-in-out 500ms;

-ms-transition: all 500ms ease-in-out 500ms;

-o-transition: all 500ms ease-in-out 500ms;

transition: all 500ms ease-in-out 500ms;

-webkit-transform: rotateX(-90deg);

-moz-transform: rotateX(-90deg);

-ms-transform: rotateX(-90deg);

-o-transform: rotateX(-90deg);

transform: rotateX(-90deg);

-webkit-transform-origin: 0% 0%;

-moz-transform-origin: 0% 0%;

-ms-transform-origin: 0% 0%;

-o-transform-origin: 0% 0%;

transform-origin: 0% 0%;

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

-ms-backface-visibility: hidden;

-o-backface-visibility: hidden;

backface-visibility: hidden;

-webkit-box-shadow: 0px -100px 500px rgba(0,0,0,0);

box-shadow: 0px -100px 500px rgba(0,0,0,0);
}

nav ul li:hover > ul {

-webkit-transition: all 500ms ease-in-out 0ms;

-moz-transition: all 500ms ease-in-out 0ms;

-ms-transition: all 500ms ease-in-out 0ms;

-o-transition: all 500ms ease-in-out 0ms;

transition: all 500ms ease-in-out 0ms;

-webkit-transform: rotateX(0deg);

-moz-transform: rotateX(0deg);

-ms-transform: rotateX(0deg);

-o-transform: rotateX(0deg);

transform: rotateX(0deg);

-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.1);

box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
}

nav ul {

background-image: -webkit-linear-gradient(top, #ff7000 70%, #ff560f 100%);

background-image: linear-gradient(to bottom, #ff7000 70%, #ff560f 100%);

padding: 0;

list-style: none;

position: relative;

display: inline-table;

border-radius: 5px;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-perspective: 200px;

-ms-perspective: 200px;

perspective: 200px;
}

nav ul:after {

content: "";

clear: both;

display: block;
}

nav ul li {

float: left;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-perspective: 200px;

-ms-perspective: 200px;

perspective: 200px;

border-right: 1px solid #890456;
}

nav ul > li:last-of-type {

border-right: none;

border-radius: 0 5px 5px 0;
}

nav ul span li { border-right: 1px solid #890456; }

nav ul li:first-of-type { border-radius: 5px 0 0 5px; }

nav ul li:hover {

background-image: -webkit-linear-gradient(top, #ff8931, #ff5012);

background-image: linear-gradient(to bottom, #ff8931, #ff5012);
}

nav ul li:hover > a { color: #fff; }

nav ul li a {

display: block;

padding: 10px 31px 10px 32px;
}

nav ul ul {

position: absolute;

top: 100%;

padding: 0;

border-radius: 0 0 5px 5px;

background: #ff560f;
}

nav ul ul li {

float: none;

position: relative;

border: none;
}

nav ul ul li:last-of-type { border-radius: 0 0 5px 5px; }

nav ul ul li a { padding: 8px 21px; }