Vertical Navigation Bar

Navigation bar or most often people said it Navbar is one of tools that is use to explore something. I use it to help a visitor to explore my blog. Almost template use it in horizontal style like this.



But i was used two type in my another blog.... tipsandcara, horizontal type and vertical type. My navigation bar in vertical type have appearance like this one:



When my visitor want to explore my blog, just click and list of my blog will appear.... like this one:


To use that style, there is a couple things to do.
1. click this link to download package that contain the script and image that used in this trick.

Upload all of in contain to your favorite web hosting (ripway, photobucket, hotlinkfiles, or something else). Write the URL, it will be use in next step.

2.Copy and paste this code to your template before </head>. Before you insert the code, you must change "your Script URL" with yours.

<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 and paste this code after ]]></b:skin> and before </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>

there are several word that you must change. There is plus.gif, minus.gif, glossyback.gif, glossyback2.gif with yours URL of that image.

4.Go to layout template in blogger account, click "Page Element" and then click add a gadget. Click "HTML/Javascript" option. Inside that option, add this code.

<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://all-iknow.blogspot.com">One-4-All</a> </div>

Change that code with your own links. Save your template and see the result.

Enjoy it.
One-4-All