Cara membuat Sidenav menu blogger murni CSS beranimasi

Ini trik yang cantik! membuat halaman blog menjadi minimalis namun eyecatching, dan terasa intuitif karena ia akan menjadi tampak lebih 'hidup' dengan efek animasi. Karena tidak melibatkan javascript menu ini juga ringan, simpel dan baiklah kita dapat menyimpulkannya:

1. Minimalis
2. Beranimasi
3. Murni CSS
4. Mudah di terapkan ke dalam template blogger terbaru.

DEMO

Cara memasang:

1. Masuk ke dasbor pengaturan blogger
2. Cari kode Tema
3. Pilih edit HTML

1. CSS

Tentu saja kode CSSnya panjang karena harus membentuk sedikit efek animasi terutama buat menu hamburgernya. Jadi copy seluruh kode CSS berikut di bawah ini.

Di halaman editor HTML template blogger cari kode </head> dan letakan kode CSS berikut di atasnya:

<style>

 .main p {

font-size: 24px;

text-align: center;

margin: 50px;

       z-index:999;

}

#container {

  position: relative;

  display: block;

  width: 100%;

  height: 100%;

       z-index:999;

}

.nav-menu-button {

  display: block;

  position: fixed;

  top: 0;

  left: 0;

  height: 0px;

  width: 0px;

  padding: 40px 20px 0px 20px;

  background: rgba(255, 255, 255, 0.75);

  float: left;margin-left:10px;

  margin-top: 40px;

  text-indent: -330px;

  overflow: hidden;

  -webkit-transition: 

    background 0.25s ease-in-out 0.5s,

    width 0.25s ease-in-out 0.25s,

    height 0.25s ease-in-out 0.25s,

    text-indent 0.25s ease-in-out 0.25s,

    padding-top 0.25s ease-in-out 0s;

  -moz-transition:

    background 0.25s ease-in-out 0.5s,

    width 0.25s ease-in-out 0.25s,

    height 0.25s ease-in-out 0.25s,

    text-indent 0.25s ease-in-out 0.25s,

    padding-top 0.25s ease-in-out 0s;

  transition: 

    background 0.25s ease-in-out 0.5s,

    width 0.25s ease-in-out 0.25s,

    height 0.25s ease-in-out 0.25s,

    text-indent 0.25s ease-in-out 0.25s,

    padding-top 0.25s ease-in-out 0s;

  cursor: pointer;

       z-index:999;

}

.nav-menu-button:hover,

.nav-menu-button:focus {

  background: rgba(255, 255, 255, 0.85);

  width: 60%;

  height: 230px;

  text-indent: 20px;

  -webkit-transition: 

    background 0.25s ease-in-out 0s,

    width 0.25s ease-in-out 0.25s,

    height 0.25s ease-in-out 0.25s,

    text-indent 0.25s ease-in-out 0s,

    padding-top 0.25s ease-in-out 0.5s;

  -moz-transition:

    background 0.25s ease-in-out 0s,

    width 0.25s ease-in-out 0.25s,

    height 0.25s ease-in-out 0.25s,

    text-indent 0.25s ease-in-out 0s,

    padding-top 0.25s ease-in-out 0.5s;

  transition: 

    background 0.25s ease-in-out 0s,

    width 0.25s ease-in-out 0.25s,

    height 0.25s ease-in-out 0.25s,

    text-indent 0.25s ease-in-out 0s,

    padding-top 0.25s ease-in-out 0.5s;

       z-index:999;

}

.nav-menu-button:hover a,

.nav-menu-button:focus a{

  cursor: pointer;

  -webkit-transition: 

    all 0.25s ease-in-out 0.25s,

    background 0.25s ease-in-out 0s;

  -moz-transition:

    all 0.25s ease-in-out 0.25s,

    background 0.25s ease-in-out 0s;

  transition:

    all 0.25s ease-in-out 0.25s,

    background 0.25s ease-in-out 0s;

       z-index:999;

}

.nav-menu-button a {

  color: #888;

  background: rgba(0, 0, 0, 0.0);

  text-decoration: none;

  width: 60%;

  display: block;

  padding-top: 10px;

  padding-bottom: 10px;

  margin-left: -25px;

  -webkit-transition: all 0.2s ease-out 0s;

  -moz-transition: all 0.2s ease-out 0s;

  transition: all 0.2s ease-out 0s;

       z-index:999;

}

.nav-menu-button a:hover,

.nav-menu-button a:focus {

  color: #333;

  text-indent: 25px;

  width: 120%;

  background: rgba(0, 0, 0, 0.15);

  -webkit-transition: all 0.25s ease-in 0s;

  -moz-transition: all 0.25s ease-in 0s;

  transition: all 0.25s ease-in 0s;

       z-index:999;

}

.nav-menu-button a.active {

  color: #333;

  width: 120%;

  text-indent: 20px;

  background: rgba(0, 0, 0, 0.05);

  -webkit-transition: all 0.25s ease-out 0.25s;

  -moz-transition: all 0.25s ease-out 0.25s;

  transition: all 0.25s ease-out 0.25s;

       z-index:999;

}

.nav-menu-button:hover .icon,

.nav-menu-button:hover .icon:before,

.nav-menu-button:hover .icon:after{

  background: #888;

  -webkit-transition: all 0.25s ease-out 0.5s;

  -moz-transition: all 0.25s ease-out 0.5s;

  transition: all 0.25s ease-out 0.5s;

       z-index:999;

}

.nav-menu-button .icon,

.nav-menu-button .icon:before,

.nav-menu-button .icon:after {

  background: #000;

  width: 22px;

  height: 4px;

  position: absolute;

  display: block;

  content: &quot;&quot;;

  cursor: pointer;

  right: 0;

  top: 20px;

  margin-top: -2px;

  margin-left: -11px;

  -webkit-border-radius: 2px;

  -moz-border-radius: 2px;

  border-radius: 2px;

  -webkit-perspective: 1000;

  -webkit-transform: translateZ(0);

  -webkit-backface-visibility: hidden;

  -webkit-transition: all 0.25s ease-out 0.5s;

  -moz-transition: all 0.25s ease-out 0.5s;

  transition: all 0.25s ease-out 0.5s;

  -webkit-transform-style: preserve-3d;

  transform-style: preserve-3d;

       z-index:999;

}

.nav-menu-button .icon {

  right: 10px;

       z-index:999;

}

.nav-menu-button .icon:before {

  top: -6px;

  margin-top: 0;

       z-index:999;

}

.nav-menu-button .icon:after {

  top: 6px;

  margin-top: 0;

       z-index:999;

}

.nav-menu-button:hover .icon {

  width: 0;

       z-index:999;

}

.nav-menu-button:hover .icon:before {

  /*top: -9px;*/

  top: -3px;

  width: 16px;

  right: 6px;

  -ms-transform: rotate(-28deg);

  -webkit-transform: rotate(-28deg);

  transform: rotate(-28deg);

       z-index:999;

}

.nav-menu-button:hover .icon:after {

  /*top: 9px;*/

  top: 3px;

  width: 16px;

  right: 6px;

  -ms-transform: rotate(28deg);

  -webkit-transform: rotate(28deg);

  transform: rotate(28deg);

       z-index:999;

}

    </style>

2. HTML

Masih di halaman editor HTML template blogger cari kode <body> lalu letakan kode berikut di bawahnya:

<div id='container'>

    <div class='nav-menu-button' id='menu-button'>

        <span class='icon'/>

        <a href='#'>MENU Link 1</a>

        <a href='#'>MENU Link 2</a>

        <a href='#'>MENU Link 3</a>

        <a href='#'>MENU Link 4</a>

    </div>

</div>

Save template. Selesai.

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