Background image doesn't load right away

Question

I'm trying to build a hamburger menu in the shape of...an actual hamburger. My only small problem has to do with the "sesame seed" background image on the expanded menu. I managed to find a snippet that uses a radial gradient image When you click on the menu icon and the menu drops down, the white polka dot background image doesn't show up until after the transition is done.

The code I'm specifically looking at is the background-image line on the #menuList selector.

body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
}

a {
  text-decoration: none; /* no underlines */
}

#menuToggle {
  display: block;
  position: absolute;
  height: 36px;
  width: 36px;
  top: 20px;
  right: 20px;
  z-index: 1;
  color: #e5cb7a;
  
  -webkit-user-select: none;
  user-select: none; /* don't let 'em select text */
}

/* Style the "checkbox" used to activate the hamburger menu */
#menuToggle input {
  display: block;
  position: absolute;
  height: 32px;
  width: 32px;
  top: -7px;
  right: -7px;
  cursor: pointer; /* make the burger pointy */
  opacity: 0; /* hide the checkbox */
  z-index: 2;
}

/* Make the menu look like a triangle shape by adding a thick border next to it. */
#menuToggle::before {
  content: '';
  position: absolute;
  top: -10px;
  right: -10px;
  border-color: #e5cb7a; /* Bun-color */
  border-style: solid;
  border-width: 22px;
  border-radius: 8px;
}

/* Style the three spans that make up the hamburger */
#menuToggle span {
  display: block;
  position: relative;
  height: 4px;
  width: 30px;
  margin: 0px 0px 6px 9px;
  border-radius: 3px;
  
  z-index: 1;
  
  transition: transform 0.5s,
              opacity 0.55s ease;
}

/* Color the top span a lettuce color */
#topBun {
  background: #32c704;
}

/* Color the middle span a burger color */
#meat {
  background: #450101;
}

/* Color the bottom span a ketchup color */
#bottomBun {
  background: #ec3521;
}

/* Move the top bun down 10px (its height), then turn it */
#menuToggle input:checked ~ #topBun {
  background: #450101;
  transform: translate(0px, 10px) rotate(45deg);
}

#menuToggle input:checked ~ #meat {
  opacity: 0;
  transform: rotate(0deg);
}

/* Move the bottom bun up 10px (its height), then turn it */
#menuToggle input:checked ~ #bottomBun {
  background: #450101;
  transform: translate(0px,-10px) rotate(-45deg);
}

#menuList {
  display: inline-block;
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100px;
  width: 100px;
  margin: -20px -20px 0 0;
  padding: 50px 90px 0 0;
  background: transparent;
  list-style-type: none; /* no bullets, weapon-free zone */
  /*-webkit-font-smoothing: antialiased;*/
  
  /* Sesame seeds for the top bun of the expanded menu */
  background-image: radial-gradient(white 20%, transparent 0);
  background-size: 15px 12px;
  background-position: 0 12px, 10px 10px;
  
  /* Shrink the actual menu list until the hamburger is opened */
  transform: translate(0px,-65px) scale(1,0.00001);
  transition: transform 1.5s, background 1.5s;
}

/* Make a larger burger bun shape around the expanded hamburger menu */
#menuList::before {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  border-style: solid;
  border-width: 90px;
  border-radius: 10px;
  z-index: -1;
}

#menuList li {
  padding: 3px 5px;
  font-size: 22px;
  text-align: center;
  width: 170px;
  color: #ffffff;
}

#menuList li:hover {
  font-weight: bold;
  letter-spacing: 2px;
}

/* Color the first menu option a lettuce color */
#about {
  background: #32c704;
}

/* Color the second menu option a burger color */
#info {
  background: #450101;
}

/* Color the third menu option a ketchup color */
#contact {
  background: #ec3521;
}

/* Transform the list back to its normal "visible" size when the input is checked */
#menuToggle input:checked ~ ul {
  transform: none;
}

<nav>
  <div id="menuToggle">
    <input type="checkbox" />
    <span id="topBun"></span>
    <span id="meat"></span>
    <span id="bottomBun"></span>
    
    <ul id="menuList">
      <a href="#"><li id="about">ABOUT</li></a>
      <a href="#"><li id="info">INFO</li></a>
      <a href="#"><li id="contact">CONTACT</li></a>
    </ul>
  </div>
</nav>

I've slowed the transition down in this pen to better illustrate the problem.

How can I get the background to always show up instead of only when the menu is fully expanded?

CodePen

Answer 1

Your expanded menu “bun” was a border, not a background, and you had the background on the collapsed hamburger bun instead.

body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
}

a {
  text-decoration: none;
  /* no underlines */
}

#menuToggle {
  display: block;
  position: absolute;
  height: 36px;
  width: 36px;
  top: 20px;
  right: 20px;
  z-index: 1;
  color: #e5cb7a;
  -webkit-user-select: none;
  user-select: none;
  /* don't let 'em select text */
}


/* Style the "checkbox" used to activate the hamburger menu */

#menuToggle input {
  display: block;
  position: absolute;
  height: 32px;
  width: 32px;
  top: -7px;
  right: -7px;
  cursor: pointer;
  /* make the burger pointy */
  opacity: 0;
  /* hide the checkbox */
  z-index: 2;
}


/* Make the menu look like a triangle shape by adding a thick border next to it. */

#menuToggle::before {
  content: '';
  position: absolute;
  top: -10px;
  right: -10px;
  border-color: #e5cb7a;
  /* Bun-color */
  border-style: solid;
  border-width: 22px;
  border-radius: 8px;
}


/* Style the three spans that make up the hamburger */

#menuToggle span {
  display: block;
  position: relative;
  height: 4px;
  width: 30px;
  margin: 0px 0px 6px 9px;
  border-radius: 3px;
  z-index: 1;
  transition: transform 0.5s, opacity 0.55s ease;
}


/* Color the top span a lettuce color */

#topBun {
  background: #32c704;
}


/* Color the middle span a burger color */

#meat {
  background: #450101;
}


/* Color the bottom span a ketchup color */

#bottomBun {
  background: #ec3521;
}


/* Move the top bun down 10px (its height), then turn it */

#menuToggle input:checked~#topBun {
  background: #450101;
  transform: translate(0px, 10px) rotate(45deg);
}

#menuToggle input:checked~#meat {
  opacity: 0;
  transform: rotate(0deg);
}


/* Move the bottom bun up 10px (its height), then turn it */

#menuToggle input:checked~#bottomBun {
  background: #450101;
  transform: translate(0px, -10px) rotate(-45deg);
}

#menuList {
  display: inline-block;
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100px;
  width: 100px;
  margin: -20px -20px 0 0;
  padding: 50px 90px 0 0;
  background: transparent;
  list-style-type: none;
  /* no bullets, weapon-free zone */
  /*-webkit-font-smoothing: antialiased;*/
  
  /* Shrink the actual menu list until the hamburger is opened */
  transform: translate(0px, -65px) scale(1, 0.00001);
  transition: transform 1.5s;
}


/* Make a larger burger bun shape around the expanded hamburger menu */

#menuList::before {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: -30px;
  left: 0;
  border-radius: 10px;
  z-index: -1;
  /* Sesame seeds for the top bun of the expanded menu */
  background-color: #e5cb7a;
  background-image: radial-gradient(white 20%, transparent 0);
  background-size: 15px 12px;
  background-position: 0 12px, 10px 10px;
}

#menuList li {
  padding: 3px 5px;
  font-size: 22px;
  text-align: center;
  width: 170px;
  color: #ffffff;
}

#menuList li:hover {
  font-weight: bold;
  letter-spacing: 2px;
}


/* Color the first menu option a lettuce color */

#about {
  background: #32c704;
}


/* Color the second menu option a burger color */

#info {
  background: #450101;
}


/* Color the third menu option a ketchup color */

#contact {
  background: #ec3521;
}


/* Transform the list back to its normal "visible" size when the input is checked */

#menuToggle input:checked~ul {
  transform: translate3d(0,0,0);
}

<nav>
  <div id="menuToggle">
    <input type="checkbox" />
    <span id="topBun"></span>
    <span id="meat"></span>
    <span id="bottomBun"></span>

    <ul id="menuList">
      <a href="#">
        <li id="about">ABOUT</li>
      </a>
      <a href="#">
        <li id="info">INFO</li>
      </a>
      <a href="#">
        <li id="contact">CONTACT</li>
      </a>
    </ul>
  </div>
</nav>