CSS马铃薯

下载代码

html

css

分享到微信朋友圈

html

<div class="container">
  <nav>
    <ul class="main-menu">
      <li id="accessories" class="active">
        <span class="current-type">
          <div class="none"></div>
        </span>
        <span class="name">Accessories</span>
      </li>
      <li id="clothes">
        <span class="current-type">
          <div class="none"></div>
        </span>
        <span class="name">Clothes</span>
      </li>
      <li id="eyes">
        <span class="current-type">
          <div class='menu-wrapper eye-cute-wrapper'>
            <div class='eye-cute left'></div>
            <div class='eye-cute right'></div>
          </div>
        </span>
        <span class="name">Eyes</span>
      </li>
      <li id="mouth">
        <span class="current-type">
          <div class='happy-mouth'>
            <div class='extra'></div>
          </div>
        </span>
        <span class="name">Mouth</span>
      </li>
      <li id="skin">
        <span class="current-type">
          <div class='skin-tone regular'></div>
        </span>
        <span class="name">Skin Tone</span>
      </li>
    </ul>
    <section class="secondary-menu">
      <ul class="accessories">
        <li>
          <div class="menu-wrapper headphones"></div>
        </li>
        <li>
          <div class="menu-wrapper cat-stuff">
            <div class="cat-ear left"></div>
            <div class="cat-ear right"></div>
            <div class="cat-whiskas left"></div>
            <div class="cat-whiskas right"></div>
          </div>
        </li>
        <li>
          <div class="menu-wrapper sunglasses">
            <div class="lens left"></div>
            <div class="lens right"></div>
          </div>
        </li>
        <li>
          <div class="menu-wrapper tie">
            <div class="details"></div>
          </div>
        </li>
        <li class="active">
          <div class="menu-wrapper none"></div>
        </li>
      </ul>
    </section>
  </nav>
  <main>
    <div class="potato-wrapper">
      <div class="potato">
        <div class="headphones accessories-item hidden"></div>
        <div class="cat-stuff accessories-item hidden">
          <div class="cat-ear left"></div>
          <div class="cat-ear right"></div>
          <div class="cat-whiskas left"></div>
          <div class="cat-whiskas right"></div>
        </div>
        <div class="sunglasses accessories-item hidden">
          <div class="lens left"></div>
          <div class="lens right"></div>
        </div>
        <div class="tie accessories-item hidden">
          <div class="details"></div>
        </div>
        <div class="head">
          <div class="eyes">
            <div class="eye-cute-wrapper eyes-item">
              <div class="eye-cute left"></div>
              <div class="eye-cute right"></div>
            </div>
            <div class="eye-happy-wrapper eyes-item hidden">
              <div class="eye-happy left"></div>
              <div class="eye-happy right"></div>
            </div>
            <div class="eye-simple-wrapper eyes-item hidden">
              <div class="eye-simple left"></div>
              <div class="eye-simple right"></div>
            </div>
            <div class="eye-crazy-wrapper eyes-item hidden">
              <div class="eye-crazy left"></div>
              <div class="eye-crazy right"></div>
            </div>
            <div class="eye-afraid-wrapper eyes-item hidden">
              <div class="eye-afraid left"></div>
              <div class="eye-afraid right"></div>
            </div>
          </div>
          <div class="mouth">
            <div class="happy-mouth mouth-item">
              <div class="extra"></div>
            </div>
            <div class="ok-mouth mouth-item hidden"></div>
            <div class="sad-mouth mouth-item hidden"></div>
            <div class="smiling-mouth mouth-item hidden"></div>
          </div>
        </div>
        <div class="dress-white clothes-item hidden">
          <div class="botao topo"></div>
          <div class="botao meio"></div>
          <div class="botao bottom"></div>
        </div>
        <div class="dress-goth clothes-item hidden">
          <div class="botao topo"></div>
          <div class="botao meio"></div>
          <div class="botao bottom"></div>
        </div>
        <div class="dress-fancy clothes-item hidden">
          <div class="collar"></div>
        </div>
      </div>
      <div class="potato-skin">
        <div class="mancha-pequena m1"></div>
        <div class="mancha-pequena m2"></div>
        <div class="mancha-pequena m3"></div>
        <div class="mancha-pequena m4"></div>
        <div class="mancha-pequena m5"></div>
        <div class="mancha-pequena m6"></div>
        <div class="mancha-pequena m7"></div>
        <div class="mancha-pequena m8"></div>
        <div class="mancha-pequena m9"></div>
        <div class="mancha-pequena m10"></div>
        <div class="mancha-pequena m11"></div>
        <div class="mancha-pequena m12"></div>
      </div>
    </div>
  </main>
</div>

css

.hidden {
  display: none !important;
}

body {
  background-color: #583d4f;
  color: #222;
  font-family: arial, sans-serif;
  font-size: 10pt;
  line-height: 1.6;
  margin: 0;
  text-align: center;
}

nav {
  background-color: #f8f8f8;
  display: table;
  height: 100vh;
  width: 30vw;
}
@media (max-width: 1024px) {
  nav {
    width: 50vw;
  }
}

main {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  position: absolute;
  right: 0;
  top: 0;
  width: 70vw;
}
@media (max-width: 1024px) {
  main {
    width: 50vw;
  }
}

.main-menu {
  display: table-cell;
  margin: 0;
  padding: 0;
  vertical-align: top;
  width: 50%;
}
.main-menu li {
  background-color: #806577;
  border-bottom: 1px solid #6c5163;
  color: #583d4f;
  font-size: 8pt;
  display: block;
  height: 20vh;
  list-type: none;
  min-height: 100px;
  position: relative;
}
.main-menu li.active {
  background-color: #8a6f81;
}
.main-menu li .name {
  bottom: 2.5px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
}
.main-menu li .current-type {
  bottom: 25px;
  height: calc(100% - 25px);
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 100%;
}
.main-menu li .current-type .menu-wrapper {
  bottom: 0;
  left: 0;
  margin: auto;
  right: 0;
  top: 0;
}
@media (only max-width: 768px) {
  .main-menu li .current-type {
    transform: scale(0.6);
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -ms-transform: scale(0.6);
  }
}

.secondary-menu {
  background-color: #6c5163;
  display: table-cell;
  width: 50%;
}
.secondary-menu ul {
  height: 100vh;
  margin: 0;
  overflow-y: scroll;
  padding: 0;
}
.secondary-menu ul.mouth li:first-child div {
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
}
.secondary-menu ul.mouth li div {
  transform: scale(1.25);
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -ms-transform: scale(1.25);
}
.secondary-menu ul li {
  border-bottom: 1px solid #583d4f;
  display: block;
  height: 15vh;
  list-style-type: none;
  min-height: 100px;
  min-width: 100px;
  position: relative;
}
.secondary-menu ul li.active {
  background-color: #624759;
}
.secondary-menu ul li .menu-wrapper {
  bottom: 0;
  left: 0;
  margin: auto;
  right: 0;
  top: 0;
}

.menu-wrapper.cat-stuff {
  height: 15vh;
  padding: 10px 0;
  width: 100px;
  transform: scale(0.75);
  -webkit-transform: scale(0.75);
  -moz-transform: scale(0.75);
  -ms-transform: scale(0.75);
}
.menu-wrapper.cat-stuff .cat-ear {
  top: 10px;
  z-index: 1;
}
.menu-wrapper.eye-cute-wrapper, .menu-wrapper.eye-crazy-wrapper, .menu-wrapper.eye-afraid-wrapper {
  left: 0;
  margin: auto;
  position: relative;
  right: 0;
  width: 30%;
}
.menu-wrapper.eye-cute-wrapper .left, .menu-wrapper.eye-crazy-wrapper .left, .menu-wrapper.eye-afraid-wrapper .left {
  left: 0;
}
.menu-wrapper.eye-cute-wrapper .right, .menu-wrapper.eye-crazy-wrapper .right, .menu-wrapper.eye-afraid-wrapper .right {
  right: 0;
}
.menu-wrapper.eye-simple-wrapper .left, .menu-wrapper.eye-happy-wrapper .left {
  left: -5px;
}
.menu-wrapper.eye-simple-wrapper .right, .menu-wrapper.eye-happy-wrapper .right {
  right: -5px;
}
.menu-wrapper.tie {
  transform: scale(1.5);
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
}

.skin-tone {
  height: 100%;
  opacity: 0.5;
  width: 100%;
}
.skin-tone.darker {
  background-color: #dea76c;
}
.skin-tone.lighter {
  background-color: #fcc58a;
}
.skin-tone.crazy {
  background-color: #c679ae;
}
.skin-tone.regular {
  background-color: #F2BB80;
}

/* css illustrations */
.potato-wrapper {
  position: relative;
}

.potato {
  background-color: #F2BB80;
  border-radius: 75% 70% 60% 60%;
  box-shadow: inset 10px 1px 7px #d49d62;
  height: 150px;
  position: relative;
  width: 100px;
}
.potato.darker {
  background-color: #dea76c;
  box-shadow: inset 10px 1px 7px #c0894e;
}
.potato.lighter {
  background-color: #fcc58a;
  box-shadow: inset 10px 1px 7px #dea76c;
}
.potato.crazy {
  background-color: #c679ae;
  box-shadow: inset 10px 1px 7px #b2659a;
}

.potato-skin {
  border-radius: 75% 70% 60% 60%;
  height: 150px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100px;
}
.potato-skin.crazy .mancha-pequena {
  background-color: #b76a9f;
}

.mancha-pequena {
  background-color: #c58e53;
  border-radius: 100%;
  height: 4px;
  position: absolute;
  width: 4px;
}
.mancha-pequena.m1 {
  left: 20px;
  top: 20px;
}
.mancha-pequena.m2 {
  left: 20px;
  top: 90px;
}
.mancha-pequena.m3 {
  left: 65px;
  top: 130px;
}
.mancha-pequena.m4 {
  left: 75px;
  top: 70px;
}
.mancha-pequena.m5 {
  left: 65px;
  top: 12px;
}
.mancha-pequena.m6 {
  left: 7px;
  top: 110px;
}
.mancha-pequena.m7 {
  left: 86px;
  top: 97px;
}
.mancha-pequena.m8 {
  left: 87px;
  top: 104px;
}
.mancha-pequena.m9 {
  left: 52px;
  top: 10px;
}
.mancha-pequena.m10 {
  left: 47px;
  top: 137px;
}
.mancha-pequena.m11 {
  left: 87px;
  top: 104px;
}
.mancha-pequena.m12 {
  left: 16px;
  top: 100px;
}

.headphones {
  border-top: 2px solid #e0e0e0;
  border-radius: 100%;
  height: 75px;
  left: 12px;
  position: absolute;
  width: 78px;
}
.headphones:after {
  background-color: #eee;
  border-radius: 100% 0% 60% 100%;
  content: '';
  height: 15px;
  left: -5px;
  position: absolute;
  top: 18px;
  width: 6px;
  transform: rotate(28deg);
  -webkit-transform: rotate(28deg);
  -moz-transform: rotate(28deg);
  -ms-transform: rotate(28deg);
}
.headphones:before {
  background-color: #eee;
  border-radius: 0 100% 100% 60%;
  content: '';
  height: 15px;
  left: 76px;
  position: absolute;
  top: 18px;
  width: 6px;
  transform: rotate(-23deg);
  -webkit-transform: rotate(-23deg);
  -moz-transform: rotate(-23deg);
  -ms-transform: rotate(-23deg);
}

.cat-stuff {
  position: relative;
}
.cat-stuff .cat-ear {
  border-bottom: 46px solid #e8b176;
  border-left: 21px solid transparent;
  border-right: 21px solid transparent;
  position: absolute;
  top: -12px;
  width: 0;
  z-index: -1;
}
.cat-stuff .cat-ear:after {
  border-bottom: 20px solid #ffedb2;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  content: '';
  left: -9px;
  position: absolute;
  top: 14px;
  width: 0;
}
.cat-stuff .cat-ear.left {
  left: -2px;
  transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
}
.cat-stuff .cat-ear.right {
  right: -1px;
  transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
}
.cat-stuff .cat-ear.right:after {
  left: -8px;
  top: 13px;
}
.cat-stuff .cat-whiskas {
  background-color: #222;
  height: 1px;
  position: absolute;
  top: 45px;
  width: 15px;
}
.cat-stuff .cat-whiskas:after, .cat-stuff .cat-whiskas:before {
  background-color: #222;
  content: '';
  height: 1px;
  left: 0;
  position: absolute;
  top: 5px;
  width: 15px;
}
.cat-stuff .cat-whiskas:before {
  top: -5px;
}
.cat-stuff .cat-whiskas.left {
  left: -5px;
}
.cat-stuff .cat-whiskas.left:after, .cat-stuff .left.cat-whiskas:before {
  transform: rotate(-15deg);
  -webkit-transform: rotate(-15deg);
  -moz-transform: rotate(-15deg);
  -ms-transform: rotate(-15deg);
}
.cat-stuff .cat-whiskas.left:before {
  transform: rotate(15deg);
  -webkit-transform: rotate(15deg);
  -moz-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
}
.cat-stuff .cat-whiskas.right {
  right: -5px;
}
.cat-stuff .cat-whiskas.right:after, .cat-stuff .right.cat-whiskas:before {
  transform: rotate(15deg);
  -webkit-transform: rotate(15deg);
  -moz-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
}
.cat-stuff .cat-whiskas.right:before {
  transform: rotate(-15deg);
  -webkit-transform: rotate(-15deg);
  -moz-transform: rotate(-15deg);
  -ms-transform: rotate(-15deg);
}

.sunglasses {
  position: relative;
  width: 100px;
}
.sunglasses:after {
  background-color: #222;
  content: '';
  height: 3px;
  left: 3px;
  margin: auto;
  position: absolute;
  right: 0;
  top: 30px;
  width: 14px;
}
.sunglasses .lens {
  background-color: #3b3b3b;
  border: 2px solid #222;
  border-radius: 70% 70% 100% 100%;
  border-width: 2px 1px 1px 1px;
  height: 13px;
  position: absolute;
  top: 29px;
  width: 17px;
  z-index: 2;
}
.sunglasses .lens.left {
  left: 29px;
}
.sunglasses .lens.left:after, .sunglasses .lens.left:before {
  left: -3px;
}
.sunglasses .lens.right {
  right: 26px;
}
.sunglasses .lens.right:before, .sunglasses .lens.right:after {
  right: -3px;
}
.sunglasses .lens:after {
  background-color: #222;
  content: '';
  height: 4px;
  position: absolute;
  top: -2px;
  width: 3.6px;
  z-index: -1;
}
.sunglasses .lens:before {
  background-color: #222;
  content: '';
  height: 2px;
  position: absolute;
  top: -2px;
  width: 7px;
  z-index: -1;
}

.tie {
  border-left: 10px solid #9E5186;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
  border-radius: 30%;
  height: 5px;
  position: absolute;
  right: 25px;
  top: 5px;
  width: 10px;
  z-index: 1;
  transform: rotate(15deg);
  -webkit-transform: rotate(15deg);
  -moz-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
}
.tie .details {
  background-color: #ad6095;
  border-radius: 100%;
  content: '';
  position: absolute;
  height: 9px;
  left: -2px;
  top: -2px;
  width: 9px;
  z-index: 1;
}
.tie:before {
  border-bottom: 5px solid transparent;
  border-right: 10px solid #9E5186;
  border-top: 5px solid transparent;
  border-radius: 30%;
  content: '';
  height: 5px;
  left: -5px;
  position: absolute;
  top: -4px;
  width: 10px;
}

/* eyes */
.eye-cute, .eye-crazy, .eye-afraid {
  background-color: #222;
  border-radius: 100%;
  display: inline-block;
  height: 14px;
  position: absolute;
  top: 30px;
  width: 12px;
}
.eye-cute:after, .eye-crazy:after, .eye-afraid:after {
  background-color: #f9f9f9;
  border-radius: 100%;
  content: '';
  height: 4px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 2.5px;
  width: 4px;
}
.eye-cute.left, .left.eye-crazy, .left.eye-afraid {
  left: 35px;
}
.eye-cute.right, .right.eye-crazy, .right.eye-afraid {
  right: 34px;
}

.eye-happy {
  border-top: 2px solid #222;
  border-radius: 100%;
  display: inline-block;
  height: 14px;
  position: relative;
  top: 32px;
  width: 13px;
}
.eye-happy .left {
  left: -5px;
}
.eye-happy .right {
  left: inherit;
  right: -5px;
}

.eye-simple {
  background-color: #222;
  border-radius: 100%;
  display: inline-block;
  height: 10px;
  position: relative;
  top: 25px;
  width: 8px;
}
.eye-simple .left {
  left: -5px;
}
.eye-simple .right {
  left: inherit;
  right: -5px;
}

.eye-crazy:after {
  left: 4px;
}
.eye-crazy.right:after {
  left: -4px;
  top: 7.5px;
}

.eye-afraid:after {
  left: 4px;
  top: 7.5px;
}
.eye-afraid.right:after {
  left: -4px;
}

/* mouths */
.happy-mouth {
  background-color: #222;
  border-radius: 100%;
  height: 2px;
  left: 1px;
  margin: auto;
  position: absolute;
  right: 0;
  top: 50px;
  width: 1px;
}
.happy-mouth:before, .happy-mouth:after {
  border-bottom: 2px solid #222;
  border-radius: 100%;
  content: '';
  height: 11px;
  margin: auto;
  position: absolute;
  top: -8px;
  width: 10px;
}
.happy-mouth:after {
  left: -9px;
}
.happy-mouth .extra, .happy-mouth .extra:after {
  background-color: #D43B66;
  border-radius: 100%;
  height: 10px;
  left: -30px;
  opacity: 0.5;
  position: absolute;
  top: -7.5px;
  width: 10px;
}
.happy-mouth .extra:after {
  content: '';
  left: 50px;
  opacity: 1;
  top: 0;
}

.ok-mouth {
  background-color: #222;
  height: 2px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 52px;
  width: 10px;
}

.sad-mouth {
  border-top: 2px solid #222;
  border-radius: 100%;
  height: 7px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 52px;
  width: 13px;
}

.smiling-mouth {
  background-color: #222;
  border-radius: 20% 20% 100% 100%;
  height: 6px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 50px;
  width: 12px;
}
.smiling-mouth:after {
  background-color: #C44B57;
  border-radius: 100% 100% 50% 50%;
  bottom: 1px;
  content: '';
  height: 2px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 7px;
}

/* clothes */
.dress-white {
  background-color: #f9f9f9;
  border-radius: 2% 2% 60% 60%;
  height: 70px;
  position: absolute;
  top: 67px;
  width: 100px;
  z-index: 1;
}
.dress-white .botao {
  left: 47px;
  position: absolute;
}
.dress-white .botao.topo {
  top: 13px;
}
.dress-white .botao.meio {
  top: 32px;
}
.dress-white .botao.bottom {
  top: 51px;
}
.dress-white .botao:after {
  background-color: #222;
  border-radius: 100% 100% 0 0;
  content: '';
  height: 6px;
  left: 2px;
  position: absolute;
  width: 4px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}
.dress-white .botao:before {
  background-color: #222;
  border-radius: 100% 100% 0 0;
  content: '';
  height: 6px;
  position: absolute;
  width: 4px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
}

.dress-goth {
  background-color: #363636;
  border-radius: 2% 2% 90% 90%;
  height: 80px;
  position: absolute;
  top: 67px;
  width: 100px;
  z-index: 1;
}
.dress-goth:after {
  background-color: #2c2c2c;
  border-radius: 2%;
  content: '';
  height: 7px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
}
.dress-goth .botao {
  left: 48px;
  position: absolute;
}
.dress-goth .botao.topo {
  top: 17px;
}
.dress-goth .botao.meio {
  top: 38px;
}
.dress-goth .botao.bottom {
  top: 59px;
}
.dress-goth .botao:after {
  background-color: #222;
  content: '';
  height: 4px;
  position: absolute;
  width: 4px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}

.dress-fancy {
  background-color: #363636;
  border-radius: 2% 2% 80% 80%;
  height: 70px;
  position: absolute;
  top: 67px;
  width: 100px;
  z-index: 1;
}
.dress-fancy .collar {
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 35px solid #efefef;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 0px;
}
.dress-fancy .collar:after, .dress-fancy .collar:before {
  background-color: #222;
  border-radius: 100%;
  content: '';
  height: 4px;
  left: -2.5px;
  margin: auto;
  position: absolute;
  right: 0;
  top: -30px;
  width: 4px;
}
.dress-fancy .collar:before {
  top: -20px;
  z-index: 1;
}

JavaScript

var stuff = {
    'accessories': {
      0: {
        element: 'headphones',
        template: "<div class='menu-wrapper headphones'></div>"
      },
      1: {
        element: 'cat-stuff',
        template: "<div class='menu-wrapper cat-stuff'><div class='cat-ear left'></div><div class='cat-ear right'></div><div class='cat-whiskas left'></div><div class='cat-whiskas right'></div></div>"
      },
      2: {
        element: 'sunglasses',
        template: "<div class='menu-wrapper sunglasses'><div class='lens left'></div><div class='lens right'></div></div>"
      },
      3: {
        element: 'tie',
        template: "<div class='menu-wrapper tie'><div class='details'></div></div>"
      },
      4: {
        element: 'none-accessories',
        template: "<div class='menu-wrapper none'></div></div>"
      }
    },
    'eyes': {
      0: {
        element: 'eye-cute-wrapper',
        template: "<div class='menu-wrapper eye-cute-wrapper'><div class='eye-cute left'></div><div class='eye-cute right'></div></div>"
      },
      1: {
        element: 'eye-happy-wrapper',
        template: "<div class='menu-wrapper eye-happy-wrapper'><div class='eye-happy left'></div><div class='eye-happy right'></div></div>"
      },
      2: {
        element: 'eye-simple-wrapper',
        template: "<div class='menu-wrapper eye-simple-wrapper'><div class='eye-simple left'></div><div class='eye-simple right'></div></div>"
      },
      3: {
        element: 'eye-crazy-wrapper',
        template: "<div class='menu-wrapper eye-crazy-wrapper'><div class='eye-crazy left'></div><div class='eye-crazy right'></div></div>"
      },
      4: {
        element: 'eye-afraid-wrapper',
        template: "<div class='menu-wrapper eye-afraid-wrapper'><div class='eye-afraid left'></div><div class='eye-afraid right'></div></div>"
      },
    },
    'mouth': {
      0: {
        element: 'happy-mouth',
        template: "<div class='happy-mouth'><div class='extra'></div></div>"
      },
      1: {
        element: 'ok-mouth',
        template: "<div class='ok-mouth'></div>"
      },
      2: {
        element: 'sad-mouth',
        template: "<div class='sad-mouth'></div>"
      },
      3: {
        element: 'smiling-mouth',
        template: "<div class='smiling-mouth'></div>"
      },
    },
    'clothes': {
      0: {
        element: 'dress-white',
        template: "<div class='dress-white menu-wrapper'><div class='botao topo'></div><div class='botao meio'></div><div class='botao bottom'></div></div>"
      },
      1: {
        element: 'dress-goth',
        template: "<div class='dress-goth menu-wrapper'><div class='botao topo'></div><div class='botao meio'></div><div class='botao bottom'></div></div>"
      },
      2: {
        element: 'dress-fancy',
        template: "<div class='dress-fancy menu-wrapper'><div class='collar'></div></div>"
      },
      3: {
        element: 'none-dress',
        template: "<div class='menu-wrapper none'></div></div>"
      }
    },
    'skin': {
      0: {
        element: 'lighter',
        template: "<div class='skin-tone lighter'></div>"
      },
      1: {
        element: 'regular',
        template: "<div class='skin-tone regular'></div>"
      },
      2: {
        element: 'darker',
        template: "<div class='skin-tone darker'></div>"
      },
      3: {
        element: 'crazy',
        template: "<div class='skin-tone crazy'></div>"
      },
    }
  },
  current = 'accessories';

var createSecondaryMenu = function createSecondaryStuff(id) {
  var i = 0;

$('.secondary-menu ul').removeClass(current).addClass(id);
  current = id;

$('.secondary-menu ul').empty();

for (i = 0; i < Object.keys(stuff[id]).length; i++) {
    $('.secondary-menu ul').append('<li>' + stuff[id][i].template + '</li>');
  }

};

var putOnPotato = function putOnPotato(num) {
  var type;

type = $('.secondary-menu ul')[0].className;
  if (type === 'skin') {
    $('.potato').removeClass('crazy lighter darker regular').addClass(stuff[type][num].element);
    if (stuff[type][num].element === 'crazy')
      $('.potato-skin').addClass('crazy');
    else
      $('.potato-skin').removeClass('crazy');
  } else {
    $('.' + type + '-item').addClass('hidden');
    $('.' + stuff[type][num].element).removeClass('hidden');
  }
};

var changeMainMenu = function changeMainMenu(num) {
  var type = $('.main-menu li.active').attr('id');
  $('.main-menu li.active .current-type').empty().append(stuff[type][num].template);
};

$(function() {
  $('.main-menu li').on('click', function() {
    $('.main-menu li').removeClass('active');
    $(this).addClass('active');
    createSecondaryMenu($(this).attr('id'));
  });

$('.secondary-menu ul').on('click', 'li', function() {
    $('.secondary-menu li').removeClass('active');
    $(this).addClass('active');
    putOnPotato($('li').index(this) - 5);
    changeMainMenu($('li').index(this) - 5);
  });
});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg