jQuery.drawer

jQuery.drawer is a jQuery-based, drawer style navigation.
Look at how the header navigation of this page works

Download

jQuery.drawer v1.00
Everyone can use it under the MIT-style license.

Settings

Load dependencies in the header element of HTML. 

<link href="drw/styles.css" rel="stylesheet" media="all" />
<script src="drw/jquery.js" type="text/javascript"></script>
<script src="drw/scripts.js" type="text/javascript"></script>

Set the code where you want to display jQuery.drawer's tabs.
A link tag with a rel="drw" attribute activates jQuery.drawer.
If you need more tabs, add a list item element.
JavaScript automatically make the width of each tab the equal.
See a Flexible Sample when you use it with a flexible layout. 

<ul id="drw_tabs">
	<li><a href="#the ID of HTML element" rel="drw">label of this tab</a></li>
	<li><a href="#the ID of HTML element" rel="drw">label of this tab</a></li>
	<li><a href="#the ID of HTML element" rel="drw">label of this tab</a></li>
	...
</ul>

Set the code where you want to display jQuery.drawer. 

<div id="drw"></div>

How to use

Set a "href" attribute of link tag in jQuery.drawer's tabs to the ID of HTML element.
The HTML element will display in jQuery.drawer.

For example:
In that case jQuery.drawer display the HTML element of ID "hello". 

<ul id="drw_tabs">
	<li><a href="#hello" rel="drw">Hello</a></li>
	...
</ul>

...

<div id="hello">
	<p>Hello jQuery.drawer!</p>
</div>

Icon & List View

jQuery.drawer provides 2 content styles in default.

"Icon View" is a item list with icon.
Use element <ul> with class name "drw_icon_view".
The format of Icon View: 

<ul class="drw_icon_view">
	<li>
		<div class="drw_img"><img src="item's icon" /></div>
		<div class="drw_info">
			<h6><a href="item's link">item's title</a></h6>
			<p>item's description</p>
		</div>
	</li>
	...
</ul>

"List View" is a simple item list.
Use element <ul> with class name "drw_list_view".
The format of List View: 

<ul class="drw_list_view">
	<li>
		<a href="item's link">
			<span class="drw_title">item's title</span>
			<span class="drw_desc">item's description</span>
			<span class="drw_date">item's date</span>
		</a>
	</li>
	...
</ul>

Ajax

jQuery.drawer can load source code of external file with Ajax.
Set a "href" attribute of link tag in jQuery.drawer's tabs to the URL of external file.
The source code of external file will display in jQuery.drawer.

For example:
In that case jQuery.drawer display source code of "sample_ajax.html". 

<ul id="drw_tabs">
	<li><a href="sample_ajax.html" rel="drw">Hello</a></li>
	...
</ul>

Author

inamorix@metatype.jp
Copyright © 2008 metatype, All rights reserved.

Hello jQuery.drawer!