Membuat Menu Show Hide CSS Keren Ala Maringngerrang

Membuat Menu Show Hide CSS Keren Ala Maringngerrang

Menu adalah sebuah bagian yang hampir selalu ada pada sebuah blog. Menu merupakan bagian penting yang memungkinkan pengunjung untuk menelusuri secara lengkap isi dari blog tersebut. Selain itu menu juga berfungsi sebagai pendukung dari konten dalam blog.

Umumnya menu pada sebuah blog dibuat dengan semenarik dan semudah mungkin untuk digunakan oleh pengunjung. Baik itu menu dalam bentuk animasi atau menu yang mempunyai tampilan yang menarik.

Salah satunya adalah menu yang pernah saya gunakan di blog ini. Disebut dengan Menu CSS Ala Maringngerrang. Menu ini bagi saya sangat menarik, karena dapat digunakan pada semua jenis template hanya dengan memodifikasi kode CSS nya.

Menu Ala Maringngerrang ini adalah menu dengan tombol toggle. Artinya ketika sebuah tombol ditekan, maka sebuah menu akan muncul dari samping dan memberi pilihan kepada pengunjung tentang apa saja isi dari blog tersebut. Untuk mengetahui seperti apa menunya, kamu bisa melihatnya melalui halaman demo di bawah ini:


Menu seperti itu juga bisa kamu pasang di blog kamu dengan cara yang cukup mudah. Ikuti langkah-langkah berikut ini:
  1. Buka Blogger
  2. Pada bagian Tema klik Edit HTML
  3. Temukan tag <body> lalu tambahkan kode berikut di bawahnya
  4. <!-- MENU ALA MARINGNGERRANG -->
    <div id='menu-hadi'>
    <div class='sidenav' id='maringngerrangNav'>
    <a class='closebtn' href='javascript:void(0)' onclick='closeNav()'><i class='fa fa-arrow-left'></i></a>
    <h3 class='paling-atas'>Blog</h3>
    <a href='#'>About</a>
    <a href='#'>Sitemap</a>
    <a href='#'>Contact</a>
    <h3>Tools</h3>
    <a href='#'>HTML Editor</a>
    <a href='#'>CSS Minifier</a>
    <a href='#'>JS Converter</a>
    <a href='#'>Color Picker</a>
    <h3>Other</h3>
    <a href='#.html'>Recent Comments</a>
    <a class='paling-bawah' href='#'>How to Comment</a>
    </div>
    </div>
    <div id="menu-hadi-mask" onclick='closeNav()'></div>
    <script src="https://code.maringngerrang.com/menu-ala-maringngerrang.js"></script>
  5. Silakan ganti href='#' dengan alamat link yang kamu inginkan! Pastikan kamu tidak menghilangkan class='paling-atas' dan class='paling-bawah' dan letakkan sesuai posisi masing-masing.
  6. Temukan kode ]]></b:skin>, lalu tambahkan kode berikut di atasnya
  7. /* Menu Maringngerrang */
    .sidenav{position:fixed;height:100%;width:250px;z-index:999;top:0;left:-250px;overflow:auto;transition:all cubic-bezier(0.55,0.06,0.68,0.19) .3s;z-index:999996}
    .sidenav{background-color:#4d4d4d;}
    .sidenav h3{color:#7b7b7b;font-size:2.5rem;border-bottom:1px solid #7b7b7b;}
    .sidenav a{color:#aaa;}
  8. Terakhir, tempatkan tombol pembuka menu di tempat yang kamu inginkan. Misalnya disamping nama blog atau di bagian navbar. Gunakan kode berikut:
  9. <span class='menu-hadi' onclick='openNav()' title="maringngerrangNav"><i class='fa fa-navicon'></i></span>
  10. Tekan tombol Simpan dan lihat hasilnya di blog kamu

Font Awesome tidak tampil!

Apabila tombol pembuka menu hanya tampil dengan bentuk kotak saja, itu artinya di blog kamu belum terpasang Fontawesome. Untuk memasangnya, buka HTML blog kamu, temukan tag </head> lalu tempatkan kode berikut di atasnya!

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

Itulah cara yang bisa kamu lakukan untuk memasang menu blog yang muncul dari samping. Menu ini bisa dimodifikasi menggunakan kode CSS yang ada di atas. Jangan lupa sampaikan komentar terbaik kamu di bawah, baik itu berupa pertanyaan maupun pernyataan. Terima kasih dan sampai jumpa!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel