Home > javascript, jquery > Stylish yet simple Javascript / JQuery navigation/control panel

Stylish yet simple Javascript / JQuery navigation/control panel


Please note: A follow up post has been made here.

I’m currently working on a project which requires a “hideable” (for lack of a better word) control panel. Somewhere I can place links, forms etc for a user to access once they’ve logged into the site.

After having a look around I found the following jquery plugin : JKPanel. It works pretty well, but I needed additional functionality, such as loading new content inside the panel when clicking on a menu item or opening the panel from a separate button on the site.

It’s a quick hack, but someone out there may find it useful.

First, you need to get jquery here. Version 1.2.6 is recommended.

Next, you’ll need the panel button :

Now, include the following code inside your <head> tags (license notice left intact by request of original author) :

<script type="text/javascript" src="jkpanel.js">

/***********************************************
* Drop Down Panel script- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/

</script>

Include the following styles, whether inside your head tags or inside an external css file :

#dropdownpanel{ /*Outermost Panel DIV*/
position: absolute;
width: 100%;
left: 0;
top: 0;
visibility:hidden;
}

#jkcontentdiv{ /*Div containing Ajax content*/
background: black;
color: white;
padding: 10px;
}

#jkcontrol{ /*Div containing panel button*/
border-top: 5px solid black;
color: white;
font-weight: bold;
text-align: center;
background: transparent url( "../images/panel.gif" ) center center no-repeat; /*change panel.gif to your own if desired*/
padding-bottom: 3px; /* 21px + 3px should equal height of "panel.gif" */
height: 21px; /* 21px + 3 px should equal height of "panel.gif" */
line-height: 21px; /* 21px + 3px should equal height of "panel.gif" */
}

These styles remain largely untouched except for the classnames : I just felt that they needed to be a little more unique, since I’ve seen quite a few templates using .control and .contentdiv. The only thing to look out for here is the panel.gif image used in the #jkcontrol style definition.

Now for the contents of the jkpanel.js file :

//Drop Down Panel script (March 29th, 08'): By JavaScript Kit: http://www.javascriptkit.com
// Modified August 14'th, 08' By Barry Roodt : https://calisza.wordpress.com
var jkpanel={
	controltext: 'Close Panel',
	$mainpanel: null, contentdivheight: 0,
	$contentdiv: null, $controldiv: null,

	openclose:function($, speed){
		this.$mainpanel.stop() //stop any animation
		if (this.$mainpanel.attr('openstate')=='closed'){
			this.$mainpanel.animate({top: 0}, speed).attr({openstate: 'open'});
			this.$controldiv.show();
		} else {
			this.$mainpanel.animate({top: -this.contentdivheight+'px'}, speed).attr({openstate: 'closed'});
// comment out the following line if you want the "control" button to remain visible
			this.$controldiv.hide();
		}
	},

	loadfile:function($, file, height, speed){
		jkpanel.$contentdiv.load(file, '', function($){
					var heightattr=isNaN(parseInt(height))? 'auto' : parseInt(height)+'px';
					jkpanel.$contentdiv.css({height: heightattr});
					jkpanel.contentdivheight=parseInt(jkpanel.$contentdiv.get(0).offsetHeight);
					jkpanel.$mainpanel.css({top:-jkpanel.contentdivheight+'px', visibility:'visible'});
					jkpanel.$controldiv.css({cursor:'hand', cursor:'pointer'});
		})
	},

	init:function(file, height, speed){
		jQuery(document).ready(function($){
			jkpanel.$mainpanel=$('<div id="dropdownpanel"><div id="jkcontentdiv"></div><div id="jkcontrol">'+jkpanel.controltext+'</div></div>').prependTo('body');
			jkpanel.$contentdiv=jkpanel.$mainpanel.find('#jkcontentdiv');
			jkpanel.$controldiv=jkpanel.$mainpanel.find('#jkcontrol').css({cursor: 'wait', display: 'none'});
			jkpanel.loadfile($,file, height, speed);
			jkpanel.$mainpanel.attr('openstate', 'closed');
			$('#jkcontrol, .panelbutton').click(function(){jkpanel.openclose($, speed)});

		})
	}
}

All that’s left to do now is create your menu link :

<a href="#" class="panelbutton" onclick="javascript:javascript:jkpanel.loadfile($, 'path/to/content.php', '200px', 500, true);">Example Link</a>

Note the class=”panelbutton” – This is just to tell our script to open the panel when this link has been clicked.

And Bob’s your Aunty, you’re done.

The next step for me is to add a method to load new content inside the panel from within the panel itself (submitting a contact form and displaying the result for example). The applications are pretty endless to say the least – and it all looks pretty stylish.

Have fun and give me a shout if you’ve used it so that I can check it out.

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: