Thursday, June 19, 2008

Sidebar Navigation Widget



So, I just finished up a little sidebar navigation widget that helps de-clutter the ole blog.

Here's the code:

<!-- Sidebar Nav Widget By Benfinnigan.com /-->
<style type="text/css">
.sidebarnavbutton {
cursor: pointer;
cursor: hand;
margin: 1px;
padding: 2px;
background-color: #ffffff;
color: #000000;
border-style: solid;
border-width: 1px 2px 2px 1px;
border-color: #C0C0C0 #000000 #000000 #C0C0C0;
}
.sidebarnavbutton:hover
{
cursor: pointer;
cursor: hand;
margin: 1px;
padding: 2px;
background-color: #dddddd;
color: #000000;
border-style: solid;
border-width: 2px 1px 1px 2px;
border-color: #000000 #C0C0C0 #C0C0C0 #000000;
}
</style>
<script type="text/javascript">
//<!--
var sidebarid = 'sidebar';
var widgetClassPrefix = 'widget ';
var widgetClassDisqualifier = 'draggable-widget';
var blnsidebaraccordion = true;
// /-->
</script>
<script src="http://benfinnigan.com/js/sidebarnav.js" type="text/javascript"></script>
<!-- End Sidebar Nav Widget By Benfinnigan.com /-->

To add the sidebar navigation widget to your blog follow these steps:

video

If you play with it, please give me a link on your blog somewhere. If you find errors, please feel free to post a comment.

8 comments:

LVCHEN said...

Good Job! I see you use on your sidebar and it's amazing. But I have a question, can I close certain section by clicking on the button? or maybe auto close that widget section when mouse does not focus on it?
Thank you for your extreme effort. ^^

Ben said...

I went ahead and updated the accordion so that if you click the button again it will go ahead and close the section. Try it out!

রাশেদ said...

Hi Ben,

I'm a newbee. How can I use this script for archive and categories? Plz help.

Luxon Alex said...

Good..its work..
i use o my Blog..Thank you very much Ben..Thank you

Luxon Alex said...

Good..its work..
i use on my Blog..Thank you very much Ben..Thank you

Benoît Cicchelero said...

Very nice work Ben. It works like a charm on the default templates, but not so much with other creations, I'm afraid. Any thoughts on what code might me be missing to trigger it to work there as well?

It would also be handy if you could set a start and end widget. Perhaps something to keep in mind for further releases ?!

.:sanDORA:. said...

nice bro!!.. i just put this code on my blog!! TQ

Tim said...

How would I modify the code so it just does this for the labels and the archive?