Thursday, March 9, 2017

Cara Membuat Menu Ala Maringngerrang Blog

Cara Membuat Menu Ala Maringngerrang Blog

Assalamu'alaikum warohmatullahi wabarokatuh. Dalam posting kali ini saya akan membahas tentang bagaimana cara membuat menu di blog ala Maringngerrang Blog. Berdasarkan pertanyaan dari pengunjung blog ini saya akan mencoba menuangkan jawabannya melalui posting ini.

Cara Membuat Menu Ala Maringngerrang Blog
Menu Maringngerrang Blog (closed)

Cara Membuat Menu Ala Maringngerrang Blog
Menu Maringngerrang Blog (opened)

Untuk membuat menu serupa pada dasarnya kita hanya memanfaatkan kode javascript untuk mengubah style suatu objek. Baiklah untuk membuatnya silakan ikuti langkah demi langkah berikut, pertama-tama tambahkan kode berikut ini pada pembuka tag body, biasanya <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>, letakkan kdoe berikut dibawahnya.

<div id='menu-hadi'>
  <div class='sidenav' id='mySidenav'>
    <a class='closebtn' href='javascript:void(0)' onclick='closeNav()'><i class='fa fa-close'/></a>
    <h3 class='paling-atas'>Blog</h3>
    <a href='/p/about.html'>About</a>
    <a href='/p/sitemap.html'>Sitemap</a>
    <a href='/p/contact.html'>Contact</a>
    <h3>Tools</h3>
    <a href='/p/html-editor.html'>HTML Editor</a>
    <a href='/p/recent-comments.html'>Recent Comments</a>
    <a href='/p/css-minifier.html'>CSS Minifier</a>
    <a href='/p/ad-converter.html'>Ads Converter</a>
    <a href='/p/color-picker.html'>Color Picker</a>
    <a href='/p/how-to-comment.html'>How to Comment</a>
    <h3>Other</h3>
    <a href='/p/quote.html'>Quote</a>
    <a class='paling-bawah' href='/2013/12/tetangga.html'>Tetangga</a>
  </div>
  <script>
    function openNav() {
      document.getElementById(&quot;mySidenav&quot;).style.left = &quot;0&quot;;
    }

    function closeNav() {
      document.getElementById(&quot;mySidenav&quot;).style.left = &quot;-250px&quot;;
    }
  </script>
</div>

Setelah itu tinggal letakkan tombol pembuka menu ditempat yang sobat inginkan, misalnya seperti pada blog ini saya letakkan tepat disamping judul blog. Kode untuk tombol pembuka menu adalah sebagai berikut:

<div class='menu-hadi' onclick='openNav()'><i class='fa fa-navicon'/></div>

Kemudian untuk memperbaiki tampilan menu yang telah dibuat silakan sobat tambahkan kode CSS berikut pada blog sobat, silakan simpan dalam tag <style>kodeCSS</style> atau diatas kode ]]></b:skin>.

/* Menu Maringngerrang Blog */
.sidenav a{display:block;position:relative;color:#aaa;margin:1px 10px 0 20px;padding:0;font-size:1rem}
.sidenav a:hover{color:#fff;padding-left:5px}
.sidenav{position:fixed;height:100%;width:250px;background:#4d4d4d;z-index:999;top:0;left:-250px;overflow:auto;transition:all cubic-bezier(0.55, 0.06, 0.68, 0.19) .3s}
.closebtn{position:absolute!important;top:10px;right:25px}
.sidenav a.closebtn:hover{transform:rotate(90deg);-webkit-transform:rotate(90deg);padding-left:0;font-size:1.5rem}
.menu-hadi{display:inline-block;cursor:pointer}
.sidenav h3{margin:2px 0 2px 10px;color:#7b7b7b;font-size:2.5rem;border-bottom:1px solid #7b7b7b;width:70%;font-weight:900;line-height:normal}
a.closebtn{margin:0;padding:0}
h3.paling-atas{margin-top:20px}
a.paling-bawah{margin-bottom:20px}

Mungkin cukup sekian dari saya, semoga bisa bermanfaat, kalau ada yang ingin sobat tanyakan silakan sampaikan pada kotak komentar yang ada dibawah atau bisa juga melalui halaman contact blog ini. Terima kasih, assalamu'alaikum warohmatullahi wabarokatuh.
Disqus Comment
Parse Tool