Lanjutan cara membuat sidenav blog murni CSS dengan hamburger menu beranimasi

Satu lagi cara memasang menu hamburger untuk blog dengan efek animasi namun murni css. Keren? Ya keren dong. Lagipula responsif, animatif (benar gak istilah ini ya), intuitif dan ringan. Hanya buat alternatif bagi yang menginginkan tampilan blog pada header tampak lebih baik. Klik gambar di bawah 2x untuk melihat DEMOnya.

Speks:

1. Murni CSS
2. Ringan
3. Hamburger
4. Animasi

Cara memasang: 

1. Masuk ke pengaturan atau dasbor blogger
2. Pilih tema
3. Pilih edit HTML:

1. CSS

Di dalam halaman editor HTML cari kode </head> dan letakan kode CSS berikut ke atasnya:

   <style>body

{

  margin: 0;

  padding: 0;

  background: #333;

  color: #fff;

  font-family: &quot;Avenir Next&quot;, &quot;Avenir&quot;, sans-serif;

    overflow-x: hidden; 

}

a

{

  text-decoration: none;

  color: #fff;

    transition: color 0.3s ease;

}

a:hover

{

  color: tomato;

}

#menuToggle

{

  display: block;

  position: absolute;

  top: 50px;

  right: 50px;

    z-index: 1;

    -webkit-user-select: none;

  user-select: none;

}

#menuToggle input

{

  display: block;

  width: 40px;

  height: 32px;

  position: absolute;

  top: -7px;

  left: -5px;

    cursor: pointer;

    opacity: 0; 

  z-index: 2; 

    -webkit-touch-callout: none;

}

#menuToggle span

{

  display: block;

  width: 33px;

  height: 4px;

  margin-bottom: 5px;

  position: relative;

    background: #fff;

  border-radius: 3px;

    z-index: 1;

    transform-origin: 4px 0px;

  

  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),

              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),

              opacity 0.55s ease;

}

#menuToggle span:first-child

{

  transform-origin: 0% 0%;

}

#menuToggle span:nth-last-child(2)

{

  transform-origin: 0% 100%;

}

#menuToggle input:checked ~ span

{

  opacity: 1;

  transform: rotate(45deg) translate(-2px, -1px);

  background: #fff;

}

#menuToggle input:checked ~ span:nth-last-child(3)

{

  opacity: 0;

  transform: rotate(0deg) scale(0.2, 0.2);

}

#menuToggle input:checked ~ span:nth-last-child(2)

{

  opacity: 1;

  transform: rotate(-45deg) translate(0, -1px);

}

#menu

{

  position: absolute;

  width: 300px;

  margin: -100px 0 0 0;

  padding: 50px;

  padding-top: 125px;

  right: -100px;

  font-color:white;

  background: #6600FF;

  list-style-type: none;

  -webkit-font-smoothing: antialiased;

  /* to stop flickering of text in safari */

    transform-origin: 0% 0%;

  transform: translate(100%, 0);

  

  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);

}

#menu li

{

  padding: 10px 0;

  font-size: 22px;

}

#menuToggle input:checked ~ ul

{

  transform: none;

  opacity: 1;

}

@media screen and (max-width: 768px) {

  #menu {

    transform: none;

    opacity: 0;

    transition: opacity 0.5s cubic-bezier(0.77,0.2,0.05,1.0);

  }

}

</style>

2. HTML

Masih di dalam halaman editor HTML cari kode </header> dan letakan kode HTML/XML berikut di atasnya:

<nav role='navigation'>

  <div id='menuToggle'>

    <input type='checkbox'/>

        <span/>

    <span/>

    <span/>

       <ul id='menu'>

      <a href='/'><li>Beranda</li></a>

      <a href='#'><li>Perihal</li></a>

      <a href='#'><li>Blog</li></a>

      <a href='#'><li>Hubungi</li></a>

      <a href='https://www.editblogtema.com/' target='_blank'><li>Lebih banyak</li></a>

    </ul>

  </div>

</nav>

Jika sudah selesai Save template.

Catatan: Kami mencobakannya ke template template versi terbaru blogger.

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share: