Avoid listing before loading the nav-bar

Question

Avoid listing before loading the nav-bar

Navigation

#1 by (3 votes)
#2 by (2 votes)

1

I resort here as the last alternative, I have a menu that adds a class to expand when I press a button and executes a transition, but the list appears before time, here the code:

$(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>

I tried that the nav-header and nav-options (which are the texts with which I have a conflict) had display: none; at the beginning and when pressing the button this code is executed:

setTimeOut(function(){
    $('nav-header, nav-options').show();
    $('nav-header, nav-options').toggleClass('nav-open');
}, 750);

and "half" worked because, although the texts do not appear at the beginning, the transition does not start but is placed directly. Any suggestion is grateful.

jquery css

asked by Andy Samuel 22.01.2018 в 23:13

source

2 answers

2

One thing I can think of is to use a setTimeOut, which shows the ul after the animation passes.

In css, just modify a display none of the ul or .nav-options

and then in JS just add a settime that is activated when you click on the menu icon, and what the settime does after 1700 milliseconds is to show the ul.

As I say it is a possible solution.

$(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>

answered by 22.01.2018 в 23:32

Problems reading an sqlite database Error C, implicit declaration function

score 3 · Accepted Answer

Be sure to transition the property opacity to nav-side and that should be enough, since currently even if you set a transition for width y height , you do not do it with that property. Look for example:

$(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>

Well that was what I understood you well that you needed. The other thing I did was to order your transitions a bit, because in my opinion you repeated properties unnecessarily.

Also delete all the properties that you used with false , since this value is not valid in css, the same with those that you left empty.

Finally, there is a way to make all the attributes of an html element, have transition and is using: transition: all ease .35s; , but definitely: transition: 0.35s ease; is not valid, since the 2 values that make this property Functional are Property and Duration and as you write it you only set timing-function and Duration .

If this is not what you wanted to achieve, write me in the comments. Successes!