1

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.

2 respuestas 2

3

Asegurate de darle una transición a la propiedad opacity al nav-side y con eso debería bastar, ya que actualmente aunque estableces una transición para width y height, no lo haces con esa propiedad. Mira por ejemplo:

$(document).ready(function(){
$('.nav-button').click(function(){ 
        $('.nav-button, .side-nav, .nav-header, .nav-options').toggleClass('nav-open'); 
        return false;
    });
});
* {
  box-sizing: border-box;
  transition: all 0.35s ease;
}
.rela-block,
.rela-inline,
.floated {
  display: inline-block;
  position: relative;
  margin: 0;
}
.abs-center {
  position: absolute;
  top: 50%;
  left: 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;
}
.side-nav {
  position: fixed;
  margin: 0;
  top: 1px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  height: 80px;
  width: 80px;
  opacity: 0;
  background-color: #f4f4f9;
  overflow: hidden;
  box-shadow: 2px 4px 26px 2px rgba(0,0,0,0.35);
  transition-property: height, width, opacity;
  transition-duration: 0.35s;
  transition-timing-function: ease;
  transition-delay: 0;
}
.side-nav.nav-open {
  height: 400px;
  width: 300px;
  opacity: 1;
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.85, 0, 0.15);
  transition-delay: 0;
}
.nav-header {
  top: -20%;
  left: 48.5%;
  transition: 0.35s ease, top 0s 0.2s ease;
}
.nav-header.nav-open {
  top: 11%;
  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%;
  transition: left 0.35s cubic-bezier(0, 0, 0.15, 1.3);
}
.nav-options.nav-open li:nth-child(1) {
  transition-delay: 0.9s;
}
.nav-options.nav-open li:nth-child(2) {
  transition-delay: 0.95s; 
}
.nav-options.nav-open li:nth-child(3) {
  transition-delay: 1s;
}
.nav-options.nav-open li:nth-child(4) {
  transition-delay: 1.05s;
}
.nav-options.nav-open li:nth-child(5) {
  transition-delay: 1.1s;
}
.nav-options.nav-open li:nth-child(6) {
  transition-delay: 1.15s;
}
.nav-options.nav-open li:nth-child(7) {
  transition-delay: 1.2s;
}
.nav-options.nav-open li:nth-child(8) {
  transition-delay: 1.25s;
}
.nav-options.nav-open li:nth-child(9) {
  transition-delay: 1.3s;
}
.nav-options.nav-open li:nth-child(10) {
  transition-delay: 1.35s;
}
.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%;
  transform: translate(-50%, -50%) rotate(-8deg);
}
.food-header:first-letter {
  letter-spacing: -6px;
}
.food-header:before,
.food-header:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: none;
  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 {
  position: absolute;
  top: 46%;
  left: 14%;
  -webkit-transform: rotate(-8deg);
          transform: rotate(-8deg);
  width: 280px;
  border-bottom: 2px solid;
}
.extra-lines.bottom {
  top: 74%;
  left: 18%;
  transform: rotate(-188deg);
}
.nav-button,
.search-button {
  z-index: 100;
  display: false;
  position: fixed;
  margin: false;
  top: 25px;
  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;
  transition: 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;
  transition: all 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: "";
  position: absolute;
  top: 3px;
  left: ;
  right: 3px;
  bottom: ;
  height: 15px;
  width: 15px;
  border: 2px solid #bbb;
  border-radius: 100%;  
}
.magnefying-glass:after {
  content: "";
  position: absolute;
  top: 20px;
  left: 3px;
  height: 2px;
  width: 9px;
  background-color: #bbb;
  transform: rotate(-42deg);
}
.tab {
  z-index: 10;
  height: 180px;
  width: 65%;
  max-width: 1000px;
  margin: -90px auto;
  padding: 15px 30px;
  background-color: #fff;
  border-radius: 2px;
  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>

Bueno eso fue lo que te entendi bien que necesitabas. Lo otro que hice fue ordenar un poco tus transitions, porque a mi parecer repetías propiedades innecesariamente.

También borre, todas las propiedades que usabas con false, ya que este valor no es válido en css, lo mismo con las que dejabas vacias.

Por ultimo, hay una forma de hacer que todos los atributos de un elemento html, tengan transition y es usando: transition: all ease .35s;, pero definitivamente: transition: 0.35s ease; no es valido, ya que los 2 valores que hacen que esta propiedad sea funcional son Property y Duration y como lo escribes solo estableces timing-function y Duration.

Si no es esto, lo que querias lograr, escribeme en los comentarios. Éxitos!

2
  • Perfectísimo, y gracias también por corregir los errores del css. Es justamente lo que quería, se agradece muchísimo la ayuda el 22 ene. 2018 a las 23:16
  • De nada ;) para eso estamos en la comunidad. Feliz día! el 22 ene. 2018 a las 23:17
2

Algo que se me ocurre es usar un setTimeOut, que muestre los ul despues de que pasa la animacion.

En css solo modifique un display none de los ul o .nav-options

y despues en JS solo agregue un settime que se activa al dar click en el icono del menu, y lo que hace el settime despues de 1700 milisegundos es mostrar los ul.

Como digo es una posible solucion.

$(document).ready(function() {
  $('.nav-button').click(function() {
    $('.nav-button, .side-nav, .nav-header, .nav-options').toggleClass('nav-open');

setTimeout(mostrar, 1700);

    return false;
  });
  
  function mostrar(){
   $('ul').css("display" , "block");
}

});
* {
  -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;
}

.nav-options{
display:none;
}
<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>

2
  • Eso mismo hice yo, pero no se ve el desplazamiento de los items de izquierda a derecha. Lo que quiero es que no aparezca el texto al inicio cuando se pulsa el botón y además se vea la animación de los textos el 22 ene. 2018 a las 22:37
  • Perfecto, no habia notado eso.
    – Alvarez
    el 22 ene. 2018 a las 22:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.