Vertical Navigation Bar

Navbar atau kepanjangan dari navigation bar merupakan suatu alat yang berguna untuk mengarahkan sesuatu. Dalam dunia blog/web, alat ini berfungsi untuk mengeksplorasi isi dari suatu blog. Pertanyaan yang terlintas didalam benak saya pertama kali mendengar istilah tersebut yaitu mengapa perlu alat tersebut? Ternyata alat tersebut memiliki efek yang cukup untuk diperhitungkan.  Blog yang memiliki banyak content atau isi pasti tidak memungkinkan untuk ditampilkan keseluruhannya dalam halaman utama atau kalau pun dipaksakan hasilnya.......web kita akan memiliki loading time yang significant cukup lama. Biasanya orang banyak menggunakan navigation bar (navbar) dalam style horizontal atau mendatar, seperti dibawah ini:


Ketika saya jalan-jalan untuk mencari sumber inspirasi dalam mempercantik blog-ku, kutemukan script untuk membuat navbar (navigation bar) dalam bentuk yang berbeda. Orang menyebutnya drop down. Saya gunakan dalam blog ini. Sobat bisa melihatnya di sidebar, seperti ini:

Ketika ada pengunjung yang ingin mengeksplor lebih jauh, hanya dengan sentuhan satu jari lentiknya maka akan terurai tabir blog ini. Selain itu juga style ini saya gunakan untuk menyembunyikan widget atau asesoris yang tidak terlalu penting. Mengapa saya sembunyikan????? bukannya untuk mempercantik blog....??? Widget memang salah satunya berfungsi untuk mempercantik blog. Namun kalau kebanyakan & layout template kita terbatas, hasilnya blog kita akan memiliki struktur yang tidak karuan.

Untuk menggunakan trick ini, ada beberapa langkah yang harus dikerjakan.
1. Download link disamoing. "package". Didalamnya terdapat script dan gambar yang akan digunakan dalam mengaplikasikan trick ini.

Kemudian upload script dan gambar tersebut.

2. Copy and paste kode berikut kedalam template sebelum kode </head>. Pastikan untuk mengganti kata-kata "your Script URL" dengan alamat script yang telah diupload.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" src="your Script URL"> </script>

3.Copy dan paste kode dibawah ke dalam template sesudah kode ]]></b:skin> dan sebelum kode </head>.

<script type="text/javascript"> ddaccordion.init({ headerclass: "submenuheader", //Shared CSS class name of headers group contentclass: "submenu", //Shared CSS class name of contents group revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover" mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover collapseprev: true, //Collapse previous content (so only one open at any time)? true/false defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed) animatedefault: false, //Should contents open by default be animated into view? persiststate: true, //persist state of opened contents within browser session? toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"] togglehtml: ["suffix", "<img src='plus.gif' class='statusicon' />", "<img src='minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs) animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow" oninit:function(headers, expandedindices){ //custom code to run when headers have initalized myiframe=window.frames["myiframe"] if (expandedindices.length>0) //if there are 1 or more expanded headers myiframe.location.replace(headers[expandedindices.pop()].getAttribute('href')) //Get "href" attribute of final expanded header to load into IFRAME }, onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed if (state=="block" && isuseractivated==true){ //if header is expanded and as the result of the user initiated action myiframe.location.replace(header.getAttribute('href')) } } }) </script> <style type="text/css"> .glossymenu{ margin: 5px 0; padding: 0; width: 170px; /*width of menu*/ border: 1px solid #9A9A9A; border-bottom-width: 0; } .glossymenu a.menuitem{ background: black url(glossyback.gif) repeat-x bottom left; font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif; color: white; display: block; position: relative; /*To help in the anchoring of the ".statusicon" icon image*/ width: auto; padding: 4px 0; padding-left: 10px; text-decoration: none; } .glossymenu a.menuitem:visited, .glossymenu .menuitem:active{ color: white; } .glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/ position: absolute; top: 5px; right: 5px; border: none; } .glossymenu a.menuitem:hover{ background-image: url(glossyback2.gif); } .glossymenu div.submenu{ /*DIV that contains each sub menu*/ background: white; } .glossymenu div.submenu ul{ /*UL of each sub menu*/ list-style-type: none; margin: 0; padding: 0; } .glossymenu div.submenu ul li{ border-bottom: 1px solid blue; } .glossymenu div.submenu ul li a{ display: block; font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif; color: black; text-decoration: none; padding: 2px 0; padding-left: 10px; } .glossymenu div.submenu ul li a:hover{ background: #DFDCCB; color: white; } </style>

Ada beberapa kata yang harus diganti sebelumnya. Kata-kata tersebut yaitu: plus.gif, minus.gif, glossyback.gif, dan glossyback2.gif. Ganti dengan url dari gambar yang telah diupload, dan SAVE.


4.Masuk kedalam layout template dalam blogger account, click "Page Element" dan kemudian click add a gadget. Click "HTML/Javascript" option. copy dan paste kode dibawah ini.

<div class="glossymenu"> <a class="menuitem" href="your link">your title</a> <a class="menuitem submenuheader" href="">CSS Examples</a> <div class="submenu"> <ul> <li><a href='your link'>your title</a></li> <li><a href='your link'>your title</a></li> </ul> </div> <a class="menuitem" href="http://tipsandcara-ngeblog.blogspot.com">tipsandcara</a> </div>

Ganti dan sesuaikan dengan keinginan dan maksud sobat. Jangan lupa untuk  untuk menyimpan hasil edit-nya.
Kemudian lihat hasilnya.
Salam

tipsandcara

Print this post

Bookmark this post: