Center Menu dengan Drop Down List dan Tersorot ketika Aktif

Selasa, 07 April 2015

Setiap orang punya selera berbeda dalam hal  tampilan menu blog, misalnya saya lebih suka menu yang letaknya di tengah (center) halaman dengan drop down list sebagai sub-menu. Saya juga ingin ketika menu dan atau sub-menu yg sedang aktif (di-klik) tersorot dengan warna berbeda dari menu sebelum ter-klik. Berikut ini saya paparkan bagaimana cara melakukan semua itu.

Sejak awal, blog ini menggunakan tampilan menu di tengah (rata kanan-kiri) seperti yg pernah sedikit saya tulis di sini. Namun karena kurang puas, kemudian saya ubah. Karena belum banyak pengalaman saya ikuti contoh di sini dengan beberapa penyesuaian.

Jika Anda minat mencoba untuk diterapkan di blog sendiri, jangan lupa backup template anda untuk mencegah jika terjadi kesalahan Anda dapat mengembalikan template sebelum diubah.

Pastikan dalam template blog anda terdapat tulisan seperti di bawah ini, jika belum ada boleh ditambahkan kode-nya, dan letakkan dalam head. Untuk mencarinya gunakan CTRL+F ketika berada di template editor.
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
Jika sudah ada tapi beda versi dicoba saja tidak perlu ditambah, kalau bermasalah baru ditamah kode tadi. Seperti template blog ini terdapat versi sebelumnya (libs jquery 1.10.1) dan masih kompatibel.

Lanjut...!
Pertama, saya salin kode jquery berikut saya ambil dari sini dan saya letakan dalam bagian tepat di atas kode </b:skin>.
<script type='text/javascript'>
//<![CDATA[
 (function ($, window, undefined) {
 
  var app = {
   init: function () {
    app.menuState.init();
   },
   menuState: (function () {
    var $menu,
     $links;
     
    /// init app - setup variables and call functions
    function init() {
     $menu = $('#cssmenu');
     $links = $menu.find('a');
     setState(window.location.pathname + window.location.hash);
    }
 
    /// Set Active State - adds active class to anchor and all ancestors when matches URL parameter
    function setState(url) {
     var $link = $links.filter('[href="' + url + '"]');
     if($link.length) {
      $link.addClass('active');
      $link.parents('li').each(function() {
       var $level = $(this);
       $level.children('a').addClass('active');
      });
     }
    }
    return { init: init };
   })()
  };
 
  $(document).ready(app.init);
 
 })(jQuery, window)
//]]>
</script>

Kedua, saya salin kode CSS berikut (seperti yang dicontohkan di http://jsfiddle.net/y4vDC/12/) dan saya letakan sebeluan kode ]]></b:skin>.
<style type="text/css">
#cssmenu {text-align:center;}
#cssmenu ul { margin: 0 auto ;display:inline-block; padding: 0;}
#cssmenu li { margin: 0; padding: 0;}
#cssmenu a { margin: 0; padding: 0;}
#cssmenu ul {list-style: none;}
#cssmenu a {text-decoration: none;}
#cssmenu a.active {
 background: #000 none repeat scroll bottom ;  /*Warna latar menu ketika terpilih (ter-klik)*/
box-shadow: 0px 2px 3px rgba(0,0,0,.4);
 color: #FFF; /*Warna tulisan ketika menu terpilih (ter-klik)*/
}
#cssmenu {
 height: 40px;   /* Ini tinggi menu*/
 width: 100%;   /* Ini adalah lebar layar berapapun ukurannya akan menyesuaikan */
 line-height: normal;
 text-align: center;
 background-color: #2E8B57; 
 box-shadow: 0px 2px 3px rgba(0,0,0,.4);
 vertical-align: middle;
position: fixed;
z-index: 9999;
}
#cssmenu > ul > li {
    float: left;
    margin-left: 0px;       /* Ini ketika kotak drop down muncul */
    position: relative;
}

#cssmenu > ul > li > a {
    color: yellow;
    font-family: 'Roboto Condensed', Verdana, 'Lucida Grande';
    font-size: 14px;
    line-height: 40px;  
    padding: 12px 8px;  /* Ini adalah padding antar menu */
 -webkit-transition: color .15s;
 -moz-transition: color .15s;
     -o-transition: color .15s;
        transition: color .15s;
}

#cssmenu > ul > li > a:hover {color: #FFF; background:#000}
#cssmenu > ul > li > ul {
    opacity: 0;
    visibility: hidden;
    padding: 16px 0 20px 0;
    background-color: #2E8B57;
    text-align: left;  /* This is for the text when box is dropped down, centered isnt always totally in the middle so best to have on the left */
    position: absolute;
    top: 55px;   /* Ini untuk animasi drop down */
    left: 50%;
    margin-left: -90px;
    width: 180px;
-webkit-transition: all .3s .1s;
   -moz-transition: all .3s .1s;
     -o-transition: all .3s .1s;
        transition: all .3s .1s;
-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
        border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
   -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
        box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}

#cssmenu > ul > li:hover > ul {
    opacity: 1;
    top: 52px;   /* This is how far from the top the drop down annimation will go  */
    visibility: visible;
}
#cssmenu > ul > li > ul:before{
    content: '';
    display: block;
    border-color: transparent transparent #2E8B57 transparent;
    border-style: solid;
    border-width: 10px;  /* Border untuk kotak drop down box  */ 
    position: absolute;
    top: -20px;
    left: 50%;
    margin-left: -10px;
}

#cssmenu > ul ul > li { position: relative;}
#cssmenu ul ul a{     /* Ini adalah menu drop down, boleh diubah-ubah warna dan ukuran fontnnya */
    color: #000;
    font-family: Verdana, 'Lucida Grande';
    font-size: 13px;   
    background-color: #D6FFD6;
    padding: 5px 8px 7px 16px;
    display: block;
-webkit-transition: background-color .1s;
   -moz-transition: background-color .1s;
     -o-transition: background-color .1s;
       transition: background-color .1s;
}

#cssmenu ul ul a:hover {background-color: rgb(240,240,240);}

#cssmenu ul ul ul {   
   visibility: hidden;
    opacity: 0;
   position: absolute;
    top: -16px;
    left: 206px;  /* Ini untuk a sub sub menu */
    padding: 16px 0 20px 0;
    background-color: rgb(250,250,250);
    text-align: left;
    width: 160px;
-webkit-transition: all .3s;
   -moz-transition: all .3s;
     -o-transition: all .3s;
        transition: all .3s;
-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
        border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
   -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
        box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}

#cssmenu ul ul > li:hover > ul { 
 opacity: 1; 
  left: 196px;  
 visibility: visible;}
#cssmenu ul ul a:hover{
    background-color: #000;
    color: #FFF;
}
#wrapper #page #page-bgtop #page-bgbtm #content .post .entry table tr td {
 text-align: center;
}

</style>
Ketiga, saya salin kode html berikut dan lakukan penyesuaian struktur menu serta sub-menu blog/web sendiri. Agar memudahkan saya gunakan pengaturan tata letak untuk menempatkan sebuah gadget/widget yang akan diisi menu tepat di atas navbar.

<div id='cssmenu'>
<ul>
<li><a href='/'><span>Top</span></a></li>

<li><a href='/search/label/Tutorial'><span>Tutorial</span></a>
 <ul>
 <li><a href='/Tutorial%20Blogger'><span>Tutorial Blogger</span></a></li>
 <li><a href='/search/label/Software%20Kimia'><span>Software Kimia</span></a></li>
        <li><a href='/search/label/Animasi%20Kimia'><span>Animasi Kimia</span></a></li>
        <li><a href='/search/label/Simulasi%20Kimia' ><span>Simulasi Kimia</span></a></li>
        </ul>
</li>
<li><a href='/search/label/Kimia-1'><span>Kimia-1</span></a>
 <ul>
        <li><a href='/search/label/Struktur%20Atom'><span>Struktur Atom</span></a></li>
        <li><a href='/search/label/Sistem%20Periodik%20Unsur'><span>Sistem Periodik Unsur</span></a></li>
        <li><a href='/search/label/Ikatan%20Kimia'><span>Ikatan Kimia</span></a></li>
        <li><a href='/search/label/Tata%20Nama'><span>Tata Nama Sederhana</span></a></li>
 </ul>
</li>
 
<li><a href='/search/label/Kimia-2'><span>Kimia-2</span></a>
 <ul>
        <li><a href='/search/label/Struktur%20Atom'><span>Struktur Atom</span></a></li>
        <li><a href='/search/label/Ikatan%20Kimia'><span>Ikatan Kimia</span></a></li>           
        <li><a href='/search/label/Bentuk%20Molekul'><span>Bentuk Molekul</span></a></li> 
        <li><a href='/search/label/Termokimia'><span>Termokimia</span></a> </li>
        </ul>
</li>

<li><a href='/search/label/Kimia-3'><span>Kimia-3</span></a>
 <ul>
        <li><a href='/search/label/Sifat%20Koligatif'><span>Sifat Koligatif</span></a></li> 
        <li><a href='/search/label/Reaksi%20Redoks'><span>Redoks &amp Elektrokimia</span></a></li>  
        <li><a href='/search/label/Kimia%20Unsur'><span>Kimia Unsur</span></a></li>     
        <li><a href='/search/label/Kimia%20Inti'><span>Kimia Inti</span></a></li>           
        </ul>
</li>

<li><a href='/search/label/Ragam'><span>Ragam</span></a>
 <ul>
 <li><a href='/p/daftar-tulisan.html'><span>Daftar Isi</span></a></li>
        <li><a href='/p/tentang-blog.html'><span>Tentang Blog ini</span></a></li>
        <li><a href='/p/penulis.html'><span>Penulis</span></a></li>
        <li><a href='/search/label/KSM%20Kimia'><span>KSM Kimia</span></a></li>
        <li><a href='/search/label/OSN%20Kimia'><span>OSN Kimia</span></a></li>
        </ul>
</li>
</ul>
</div>

Jika tidak tersedia ruang untuk gadget dapat dibuat agar di atas navbar itu bisa ditambahi ruang gadget/widget lagi. Caranya adalah sebagai berikut.
>> Masuk ke edit template.
>> Cari posisi dimana gadget ingin kita tambahi. Saya contohkan akan ditambah di atas navbar. Kebetulan pada template yang saya jadikan contoh ini letaknya persis dibawah kode <body>
>>Ubah "showaddelement" menjadi yes, max=2 artinya agar kita dapat menambah gadget lagi maksimal sebanyak 2.
>>Simpan template dengan klik simpan template. Periksa hasil ubahan tadi dengan klik menu tata letak. Jika yang kita lakukan benar hasilnya seperti ini.

Jika Anda akan menggunakan kode jquery tadi cukup sesuaikan id menu yang Anda pakai sehingga menu aktif bisa terhighlight (tersorot) secara otomatis. Perhatikan script jquery di bagian berwarna merah. Inilah id untuk menu yang saya pakai. Lakukan penyesuaian di sini.

/// init app - setup variables and call functions
    function init() {
     $menu = $('#cssmenu');
     $links = $menu.find('a');
     setState(window.location.pathname + window.location.hash);
    }

Id-nya harus sama dengan kode id html untuk menu yg dibuat. Jika benar hasilnya kurang lebih akan mirip dengan blog urip dot info ini.

Sekian dan semoga bermanfaat.
Bagikan di

Tidak ada komentar:

Poskan Komentar

 
Copyright © 2015-2016 Urip dot Info | Disain Template Oleh Herdiansyah Hamzah Dimodivikasi Urip.Info