ShareCode menu góc màn hình cho anh em nghịch :3

**kaiser** · 15.08.2016 / 17:19

HTML5

<style>
/***************************
 *Variables
 **************************/
/***************************
 *Project Main Styles
 **************************/
*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
 
  .menu__body {
  position: absolute;
  width: 7em;
  height: 7em;
  margin: 0;
  padding: 0;
  background-color: #fcfcfc;
  border-bottom-right-radius: 100%;
  box-shadow: 3px 3px 7px rgba(40, 40, 40, 0.2);
  z-index: 10;
  -webkit-animation: checkboxUncheckedAnimation 0.35s both;
          animation: checkboxUncheckedAnimation 0.35s both;
}
 
 
 
 
 
 
body {
  font-family: "Open Sans", sans-serif;
  font-size: 1em;
  background-color: #e2e2e2;
}
 
/***************************
 *Application Main Styles
 **************************/
#menu--toggle[type="checkbox"]:not(:checked),
#menu--toggle[type="checkbox"]:checked {
  display: none;
}
 
.menu--toggle__trigger,
.menu--toggle__burger,
.menu--toggle__burger:before,
.menu--toggle__burger:after {
  position: absolute;
  top: 1.6em;
  left: 1.6em;
  width: 2em;
  height: 5px;
  background-color: #282828;
  border-radius: 2px;
  cursor: pointer;
  z-index: 100;
  -webkit-transition: 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}
 
.menu--toggle__trigger {
  height: 2em;
  background: none;
}
 
.menu--toggle__burger:before {
  content: "";
  top: 10px;
  left: 0;
}
.menu--toggle__burger:after {
  content: "";
  top: 20px;
  left: 0;
}
 
.menu__body {
  position: absolute;
  width: auto em;
  height: auto em;
  margin: 0;
  padding: 0;
  background-color: #fcfcfc;
  border-bottom-right-radius: 100%;
  box-shadow: 3px 3px 7px rgba(40, 40, 40, 0.2);
  z-index: 10;
  -webkit-animation: checkboxUncheckedAnimation 0.35s both;
          animation: checkboxUncheckedAnimation 0.35s both;
}
 
.menu__body-element,
.menu__body-link {
  display: none;
  margin: 4.4em 0 -3.3em -.1em;
  font-weight: normal;
  color: #282828;
  text-decoration: none;
  text-transform: none;
  list-style: none;
  outline: 0;
}
 
.menu__body-element {
  text-indent: 2em;
}
 
.menu__body-link:hover {
  display: block;
  width: 0;
  color: #282828;
  background-color: #e2e2e2;
  -webkit-animation: changeWidthOfElementAnimation 0.35s both;
          animation: changeWidthOfElementAnimation 0.35s both;
}
 
#menu--toggle:checked + .menu--toggle__trigger + .menu--toggle__burger {
  top: 35px;
  -webkit-transform: rotate(405deg);
          transform: rotate(405deg);
  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#menu--toggle:checked + .menu--toggle__trigger + .menu--toggle__burger:before {
  top: 0;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#menu--toggle:checked + .menu--toggle__trigger + .menu--toggle__burger:after {
  top: 0;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#menu--toggle:checked + .menu--toggle__trigger + .menu--toggle__burger + .menu__body {
  -webkit-animation: checkboxCheckedAnimation 1s cubic-bezier(0.25, 0.1, 0.25, 1) both;
          animation: checkboxCheckedAnimation 1s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
#menu--toggle:checked + .menu--toggle__trigger ~ .menu__body .menu__body-element, #menu--toggle:checked + .menu--toggle__trigger ~ .menu__body .menu__body-link {
  display: block;
}
 
 
 
/**
 *Animations
 */
@-webkit-keyframes checkboxCheckedAnimation {
  50%, 100% {
    width: 50vw;
    height: 50vh;
  }
  100% {
    border-radius: 0;
  }
}
@keyframes checkboxCheckedAnimation {
  50%, 100% {
    width: 50vw;
    height: 50vh;
  }
  100% {
    border-radius: 0;
  }
}
@-webkit-keyframes checkboxUncheckedAnimation {
  0% {
    width: 50vw;
    height: 50vh;
  }
}
@keyframes checkboxUncheckedAnimation {
  0% {
    width: 50vw;
    height: 50vh;
  }
}
@-webkit-keyframes changeWidthOfElementAnimation {
  50% {
    width: 0;
  }
  100% {
    width: auto;
  }
}
@keyframes changeWidthOfElementAnimation {
  50% {
    width: 0;
  }
  100% {
    width: auto;
  }
}
 
</style>
 
<section>
 
  <article>
 
 
 
 
 
 
 
         <div class="menu">
              <ul class="menu__body">
      <input id="menu--toggle"
             type="checkbox" />
 
    <!-- /#menu--toggle -->
      <label class="menu--toggle__trigger"
             for="menu--toggle"></label>
 
 
 
      <!-- /.menu--toggle__trigger -->
      <label class="menu--toggle__burger"
             for="menu--toggle"></label>
      <!-- /.menu--toggle__burger -->
 
 
      <ul class="menu__body">
 
 
        <li class="menu__body-element">
           <a class=""
             href="#"
             target="_blank">
            menu
 
          <!-- /.menu__body-link -->
        </li>
        <!-- /.menu__body-element -->
 
        <li class="menu__body-element">
          <a class=""
             href="#"
             target="_blank">
            menu
          </a>
          <!-- /.menu__body-link -->
        </li>
        <!-- /.menu__body-element -->
 
        <li class="menu__body-element">
          <a class=""
             href="#">
            menu
          </a>
          <!-- /.menu__body-link -->
        </li>
        <!-- /.menu__body-element -->
      </ul>
      <!-- /.menu__body -->
    </div>
 
 
 
  <article>
    <div class="promotion">
    </div>
    <!-- /.promotion -->
  </article>

Demo:

**Nhockutevy** · 15.08.2016 / 18:27

Tặng cho like du k biet co đẹp hay k nua

**Nhockutevy** · 15.08.2016 / 18:30

Lên cải thiện và thu nho lại siu ban ak

**ga_bong** · 15.08.2016 / 18:34

sửa lại cho nhỏ đi.

**facebook** · 15.08.2016 / 18:46

Đúng rồi đó sửa cho đẹp vô đi :troll:

**kaiser** · 15.08.2016 / 19:00

To nhỏ thế nào thì sửa ô 18 19 và 54 55 cho phù hợp nhé lười v~

HTML5

18. width: 7em;
19.  height: 7em;
 
54. top: 1.6em;
55.  left: 1.6em;

**ga_bong** · 15.08.2016 / 19:11

kaiser đã viết ↑

To nhỏ thế nào thì sửa ô 18 19 và 54 55 cho phù hợp nhé lười v~
HTML5
18. width: 7em;
 
19.  height: 7em;
 
 
 
54. top: 1.6em;
 
55.  left: 1.6em;

giờ mới biết káisẻr là Đb Ren

**kaiser** · 15.08.2016 / 19:16

Còn chỉnh cái bảng menu khi click vào thì sửa đoạn width

height ở mã khoảng dòng 163 164 rì đó

HTML5

*Animations
 */
@-webkit-keyframes checkboxCheckedAnimation {
  50%, 100% {
    width: 50vw;
    height: 50vh;
  }

**kaiser** · 15.08.2016 / 19:18

Đb gabong biết thừa còn giả ngố :24: quỷ sứ hà. . nhìn demo còn đ' nhận ra

**kaiser** · 15.08.2016 / 19:32

Thôi sửa luôn cho ai lười sửa

HTML5

<style>
/***************************
 *Variables
 **************************/
/***************************
 *Project Main Styles
 **************************/
*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
 
  .menu__body {
  position: absolute;
  width: 3.7em;
  height: 3.7em;
  margin: 0;
  padding: 0;
  background-color: #fcfcfc;
  border-bottom-right-radius: 100%;
  box-shadow: 3px 3px 7px rgba(40, 40, 40, 0.2);
  z-index: 10;
  -webkit-animation: checkboxUncheckedAnimation 0.35s both;
          animation: checkboxUncheckedAnimation 0.35s both;
}
 
 
 
 
 
 
body {
  font-family: "Open Sans", sans-serif;
  font-size: 1em;
  background-color: #e2e2e2;
}
 
/***************************
 *Application Main Styles
 **************************/
#menu--toggle[type="checkbox"]:not(:checked),
#menu--toggle[type="checkbox"]:checked {
  display: none;
}
 
.menu--toggle__trigger,
.menu--toggle__burger,
.menu--toggle__burger:before,
.menu--toggle__burger:after {
  position: absolute;
  top: 0.5em;
  left: 0.4em;
  width: 2em;
  height: 5px;
  background-color: #282828;
  border-radius: 2px;
  cursor: pointer;
  z-index: 100;
  -webkit-transition: 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}
 
.menu--toggle__trigger {
  height: 20em;
  background: none;
}
 
.menu--toggle__burger:before {
  content: "";
  top: 10px;
  left: 0;
}
.menu--toggle__burger:after {
  content: "";
  top: 20px;
  left: 0;
}
 
.menu__body {
  position: absolute;
  width: auto em;
  height: auto em;
  margin: 0;
  padding: 0;
  background-color: #fcfcfc;
  border-bottom-right-radius: 100%;
  box-shadow: 3px 3px 7px rgba(40, 40, 40, 0.2);
  z-index: 10;
  -webkit-animation: checkboxUncheckedAnimation 0.35s both;
          animation: checkboxUncheckedAnimation 0.35s both;
}
 
.menu__body-element,
.menu__body-link {
  display: none;
  margin: 4.4em 0 -3.3em -.1em;
  font-weight: normal;
  color: #282828;
  text-decoration: none;
  text-transform: none;
  list-style: none;
  outline: 0;
}
 
.menu__body-element {
  text-indent: 2em;
}
 
.menu__body-link:hover {
  display: block;
  width: 0;
  color: #282828;
  background-color: #e2e2e2;
  -webkit-animation: changeWidthOfElementAnimation 0.35s both;
          animation: changeWidthOfElementAnimation 0.35s both;
}
 
#menu--toggle:checked + .menu--toggle__trigger + .menu--toggle__burger {
  top: 35px;
  -webkit-transform: rotate(405deg);
          transform: rotate(405deg);
  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#menu--toggle:checked + .menu--toggle__trigger + .menu--toggle__burger:before {
  top: 0;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#menu--toggle:checked + .menu--toggle__trigger + .menu--toggle__burger:after {
  top: 0;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#menu--toggle:checked + .menu--toggle__trigger + .menu--toggle__burger + .menu__body {
  -webkit-animation: checkboxCheckedAnimation 1s cubic-bezier(0.25, 0.1, 0.25, 1) both;
          animation: checkboxCheckedAnimation 1s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
#menu--toggle:checked + .menu--toggle__trigger ~ .menu__body .menu__body-element, #menu--toggle:checked + .menu--toggle__trigger ~ .menu__body .menu__body-link {
  display: block;
}
 
 
 
/**
 *Animations
 */
@-webkit-keyframes checkboxCheckedAnimation {
  50%, 100% {
    width: 27vw;
    height: 30vh;
  }
  100% {
    border-radius: 0;
  }
}
@keyframes checkboxCheckedAnimation {
  50%, 100% {
    width: 50vw;
    height: 50vh;
  }
  100% {
    border-radius: 0;
  }
}
@-webkit-keyframes checkboxUncheckedAnimation {
  0% {
    width: 50vw;
    height: 50vh;
  }
}
@keyframes checkboxUncheckedAnimation {
  0% {
    width: 50vw;
    height: 50vh;
  }
}
@-webkit-keyframes changeWidthOfElementAnimation {
  50% {
    width: 0;
  }
  100% {
    width: auto;
  }
}
@keyframes changeWidthOfElementAnimation {
  50% {
    width: 0;
  }
  100% {
    width: auto;
  }
}
 
</style>
 
<section>
 
  <article>
 
 
 
 
 
 
 
         <div class="menu">
              <ul class="menu__body">
      <input id="menu--toggle"
             type="checkbox" />
 
    <!-- /#menu--toggle -->
      <label class="menu--toggle__trigger"
             for="menu--toggle"></label>
 
 
 
      <!-- /.menu--toggle__trigger -->
      <label class="menu--toggle__burger"
             for="menu--toggle"></label>
      <!-- /.menu--toggle__burger -->
 
 
      <ul class="menu__body">
 
 
        <li class="menu__body-element">
           <a class=""
             href="#"
             target="_blank">
            menu
 
          <!-- /.menu__body-link -->
        </li>
        <!-- /.menu__body-element -->
 
        <li class="menu__body-element">
          <a class=""
             href="#"
             target="_blank">
            menu
          </a>
          <!-- /.menu__body-link -->
        </li>
        <!-- /.menu__body-element -->
 
        <li class="menu__body-element">
          <a class=""
             href="#">
            menu
          </a>
          <!-- /.menu__body-link -->
        </li>
        <!-- /.menu__body-element -->
      </ul>
      <!-- /.menu__body -->
    </div>
 
 
 
  <article>
    <div class="promotion">
    </div>
    <!-- /.promotion -->
  </article>

demo

Còn muốn bé nữa thì tự sửa nhé