Recurro aquí como última alternativa, tengo un menu que agrega una class
para expandir al pulsar un botón y ejecuta una transición, pero me aparece la lista antes de tiempo, aquí el código:
$(document).ready(function(){
$('.nav-button').click(function(){
$('.nav-button, .side-nav, .nav-header, .nav-options').toggleClass('nav-open');
return false;
});
});
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: 0.35s ease;
transition: 0.35s ease;
}
.rela-block {
display: block;
position: relative;
margin: auto;
top: ;
left: ;
right: ;
bottom: ;
}
.rela-inline {
display: inline-block;
position: relative;
margin: auto;
top: ;
left: ;
right: ;
bottom: ;
}
.floated {
display: inline-block;
position: relative;
margin: false;
top: ;
left: ;
right: ;
bottom: ;
float: left;
}
.abs-center {
display: false;
position: absolute;
margin: false;
top: 50%;
left: 50%;
right: false;
bottom: false;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
width: 88%;
}
body {
font-family: 'Open Sans';
font-size: 18px;
letter-spacing: 0px;
font-weight: 400;
line-height: 26px;
color: #000;
}
p.light {
color: #727272;
}
h1 {
font-family: 'Raleway';
font-size: 54px;
letter-spacing: 10px;
font-weight: 200;
line-height: 60px;
text-transform: uppercase;
}
h2 {
font-family: 'Montserrat';
font-size: 24px;
letter-spacing: 6px;
font-weight: 200;
line-height: 30px;
text-transform: uppercase;
margin-bottom: 15px;
}
.spacer {
height: 400px;
}
.menu-container {
display: false;
position: fixed;
margin: false;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
opacity: 0;
background-color: rgba(0,0,0,0.7);
-webkit-transition: 0.2s ease;
transition: 0.2s ease;
}
.menu-container.displayed {
z-index: 200;
opacity: 1;
-webkit-transition: 0.35s ease, opacity 0.5s ease;
transition: 0.35s ease, opacity 0.5s ease;
}
.menu-container.displayed .menu-tab {
top: 50%;
}
.menu-container .close {
color: #fff;
margin: 30px;
cursor: pointer;
}
.side-nav {
display: false;
position: fixed;
margin: false;
top: 1px;
left: 0;
right: false;
bottom: false;
z-index: 100;
height: 80px;
width: 80px;
opacity: 0;
overflow: hidden;
-webkit-transition: 0.35s ease, height 0s 0.35s ease, width 0.35s ease;
transition: 0.35s ease, height 0s 0.35s ease, width 0.35s ease;
}
.side-nav.nav-open {
height: 400px;
width: 300px;
opacity: 1;
background-color: #f4f4f9;
-webkit-box-shadow: 2px 4px 26px 2px rgba(0,0,0,0.35);
box-shadow: 2px 4px 26px 2px rgba(0,0,0,0.35);
-webkit-transition: 0.35s ease, height 0.4s 0.35s cubic-bezier(0.85, 0, 0.15, 1), width 0.4s 0.75s cubic-bezier(0.85, 0, 0.15, 1);
transition: 0.35s ease, height 0.4s 0.35s cubic-bezier(0.85, 0, 0.15, 1), width 0.4s 0.75s cubic-bezier(0.85, 0, 0.15, 1);
}
.nav-header {
top: -20%;
left: 48.5%;
-webkit-transition: 0.35s ease, top 0s 0.2s ease;
transition: 0.35s ease, top 0s 0.2s ease;
}
.nav-header.nav-open {
top: 11%;
-webkit-transition: 0.35s ease, top 0.4s 1s cubic-bezier(0.85, 0, 0.15, 1);
transition: 0.35s ease, top 0.4s 1s cubic-bezier(0.85, 0, 0.15, 1);
}
.nav-options {
width: 100%;
height: auto;
top: calc(50% + 5px);
}
.nav-options li {
width: 70%;
padding: 12px 0px;
cursor: pointer;
left: -120%;
}
.nav-options li:hover {
color: #f67f74;
}
.nav-options.nav-open li {
left: -2%;
}
.nav-options.nav-open li:nth-child(1) {
-webkit-transition: 0.35s ease, left 0.35s 0.9s cubic-bezier(0, 0, 0.15, 1.3);
transition: 0.35s ease, left 0.35s 0.9s cubic-bezier(0, 0, 0.15, 1.3);
}
.nav-options.nav-open li:nth-child(2) {
-webkit-transition: 0.35s ease, left 0.35s 0.95s cubic-bezier(0, 0, 0.15, 1.3);
transition: 0.35s ease, left 0.35s 0.95s cubic-bezier(0, 0, 0.15, 1.3);
}
.nav-options.nav-open li:nth-child(3) {
-webkit-transition: 0.35s ease, left 0.35s 1s cubic-bezier(0, 0, 0.15, 1.3);
transition: 0.35s ease, left 0.35s 1s cubic-bezier(0, 0, 0.15, 1.3);
}
.nav-options.nav-open li:nth-child(4) {
-webkit-transition: 0.35s ease, left 0.35s 1.05s cubic-bezier(0, 0, 0.15, 1.3);
transition: 0.35s ease, left 0.35s 1.05s cubic-bezier(0, 0, 0.15, 1.3);
}
.nav-options.nav-open li:nth-child(5) {
-webkit-transition: 0.35s ease, left 0.35s 1.1s cubic-bezier(0, 0, 0.15, 1.3);
transition: 0.35s ease, left 0.35s 1.1s cubic-bezier(0, 0, 0.15, 1.3);
}
.nav-options.nav-open li:nth-child(6) {
-webkit-transition: 0.35s ease, left 0.35s 1.15s cubic-bezier(0, 0, 0.15, 1.3);
transition: 0.35s ease, left 0.35s 1.15s cubic-bezier(0, 0, 0.15, 1.3);
}
.nav-options.nav-open li:nth-child(7) {
-webkit-transition: 0.35s ease, left 0.35s 1.2s cubic-bezier(0, 0, 0.15, 1.3);
transition: 0.35s ease, left 0.35s 1.2s cubic-bezier(0, 0, 0.15, 1.3);
}
.nav-options.nav-open li:nth-child(8) {
-webkit-transition: 0.35s ease, left 0.35s 1.25s cubic-bezier(0, 0, 0.15, 1.3);
transition: 0.35s ease, left 0.35s 1.25s cubic-bezier(0, 0, 0.15, 1.3);
}
.nav-options.nav-open li:nth-child(9) {
-webkit-transition: 0.35s ease, left 0.35s 1.3s cubic-bezier(0, 0, 0.15, 1.3);
transition: 0.35s ease, left 0.35s 1.3s cubic-bezier(0, 0, 0.15, 1.3);
}
.nav-options.nav-open li:nth-child(10) {
-webkit-transition: 0.35s ease, left 0.35s 1.35s cubic-bezier(0, 0, 0.15, 1.3);
transition: 0.35s ease, left 0.35s 1.35s cubic-bezier(0, 0, 0.15, 1.3);
}
.top-section {
height: 640px;
color: #e0e5f5;
background-color: #272727;
overflow: hidden;
}
.header-container {
height: 400px;
width: 400px;
border: 4px solid;
top: 47%;
border-radius: 100%;
}
.header-container:before {
content: "";
display: false;
position: absolute;
margin: false;
top: -12px;
left: -12px;
right: -12px;
bottom: -12px;
border: 2px solid #e0e5f5;
border-radius: 100%;
}
.food-header {
background-color: #272727;
font-family: 'Mr Dafoe';
font-size: 90px;
letter-spacing: 0px;
font-weight: 400;
line-height: 106px;
width: 480px;
text-transform: none;
top: 60%;
left: 52%;
-webkit-transform: translate(-50%, -50%) rotate(-8deg);
transform: translate(-50%, -50%) rotate(-8deg);
}
.food-header:first-letter {
letter-spacing: -6px;
}
.food-header:before,
.food-header:after {
content: "";
display: false;
position: absolute;
margin: false;
top: false;
left: 0;
right: 0;
bottom: false;
height: 4px;
background-color: #e0e5f5;
left: 0;
}
.food-header:before {
top: 8px;
}
.food-header:after {
bottom: 8px;
}
.eye {
top: 18%;
height: 12px;
width: 12px;
background-color: #e0e5f5;
border-radius: 100%;
}
.eye.left {
left: 35%;
}
.eye.right {
left: 65%;
}
.mouth {
width: 140px;
height: 72px;
top: 31%;
border-radius: 10px 10px 700px 700px;
border: 3px solid #e0e5f5;
}
.extra-lines {
display: false;
position: absolute;
margin: false;
top: 46%;
left: 14%;
right: false;
bottom: false;
-webkit-transform: rotate(-8deg);
transform: rotate(-8deg);
width: 280px;
border-bottom: 2px solid;
}
.extra-lines.bottom {
top: 74%;
left: 18%;
-webkit-transform: rotate(-188deg);
transform: rotate(-188deg);
}
.nav-button,
.search-button {
z-index: 100;
display: false;
position: fixed;
margin: false;
top: 25px;
left: ;
right: ;
bottom: ;
height: 30px;
width: 30px;
cursor: pointer;
}
.nav-button {
left: 25px;
}
.nav-button:hover .nav-bars {
background-color: #fff;
}
.nav-button:hover .nav-bars:before,
.nav-button:hover .nav-bars:after {
background-color: #fff;
}
.nav-button.nav-open {
left: 245px;
-webkit-transition: 0.35s ease, left 0.4s 0.75s cubic-bezier(0.85, 0, 0.15, 1);
transition: 0.35s ease, left 0.4s 0.75s cubic-bezier(0.85, 0, 0.15, 1);
}
.nav-button.nav-open .nav-bars,
.nav-button.black .nav-bars {
background-color: #272727;
}
.nav-button.nav-open .nav-bars:before,
.nav-button.black .nav-bars:before,
.nav-button.nav-open .nav-bars:after,
.nav-button.black .nav-bars:after {
background-color: #272727;
}
.search-button {
right: 25px;
}
.search-button:hover .magnefying-glass:before {
border-color: #fff;
}
.search-button:hover .magnefying-glass:after {
background-color: #fff;
}
.search-button.black .magnefying-glass:before {
border-color: #272727;
}
.search-button.black .magnefying-glass:after {
background-color: #272727;
}
.nav-bars {
width: 19px;
height: 2px;
background-color: #bbb;
left: 40%;
}
.nav-bars:before,
.nav-bars:after {
content: "";
display: false;
position: absolute;
margin: false;
top: false;
left: 0;
right: false;
bottom: false;
width: 130%;
height: 100%;
background-color: #bbb;
-webkit-transition: 0.35s ease;
transition: 0.35s ease;
}
.nav-bars:before {
top: -7px;
}
.nav-bars:after {
top: 7px;
width: 70%;
}
.magnefying-glass {
height: 30px;
width: 30px;
}
.magnefying-glass:before {
content: "";
display: false;
position: absolute;
margin: false;
top: 3px;
left: ;
right: 3px;
bottom: ;
height: 15px;
width: 15px;
border: 2px solid #bbb;
border-radius: 100%;
-webkit-transition: 0.35s ease;
transition: 0.35s ease;
}
.magnefying-glass:after {
content: "";
display: false;
position: absolute;
margin: false;
top: 20px;
left: 3px;
right: false;
bottom: false;
height: 2px;
width: 9px;
background-color: #bbb;
-webkit-transform: rotate(-42deg);
transform: rotate(-42deg);
-webkit-transition: 0.35s ease;
transition: 0.35s ease;
}
.tab {
z-index: 10;
height: 180px;
width: 65%;
max-width: 1000px;
margin: -90px auto;
padding: 15px 30px;
background-color: #fff;
border-radius: 2px;
-webkit-box-shadow: 0px 3px 10px -1px rgba(0,0,0,0.5);
box-shadow: 0px 3px 10px -1px rgba(0,0,0,0.5);
text-align: center;
}
.tab.menu-tab {
min-height: 500px;
top: 65%;
height: auto;
margin: auto;
max-width: 800px;
z-index: 300;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="side-nav">
<h2 class="abs-center nav-header">Menu</h2>
<ul class="abs-center nav-options">
<li class="rela-block nav-link the-menu">Item 1</li>
<li class="rela-block nav-link">Item 2</li>
<li class="rela-block nav-link">Item 3</li>
<li class="rela-block nav-link">Item 4</li>
<li class="rela-block nav-link">Item 5</li>
</ul>
</div>
<div class="nav-button top">
<div class="abs-center nav-bars"></div>
</div>
</div>
Intenté que el nav-header
y nav-options
(que son los textos con los que tengo conflicto) tuvieran display: none;
al inicio y al apretar el botón se ejecute este código:
setTimeOut(function(){
$('nav-header, nav-options').show();
$('nav-header, nav-options').toggleClass('nav-open');
}, 750);
y funcionó "la mitad" porque, aunque ya no aparezcan los textos al inicio, al aparecer no se ejecuta la transición sino que se coloca directamente. Cualquier sugerencia es agradecida.