jQuery.uiPod = [jQuery, UI Themeroller] + iPod Lightweight Menu
What is it?
I sweet little lightweight menu that works with jQuery & jQuery UI Themeroller. It's pretty neat, honestly :).
Why?
jQuery & iPods are cool and easy to use.
How easy is it to use?
You need to have both jQuery and jQuery UI Themeroller initiated on your webpage. Then just download the itty-bitty javascript file, (no css) and initiate it after. It relys on ul-li menus to build it's structure.
OK, OK where can I see it? - HERE
Current Release is v1
Here is a sample of html to use with uiPod:
<ul id="boxMoreInfo">
<li>
<div>Customer Service</div>
<ul>
<li><a href="t-contact.aspx">Contact Us</a></li>
<li><a href="t-faq.aspx">FAQs</a></li>
<li><a href="t-hoursholidays.aspx">Hours and Holidays</a></li>
<li><a href="t-paymentoptions.aspx">Payment Options</a></li>
<li>
<div>Policies</div>
<ul>
<li><a href="t-backorder.aspx">Backorder Policy</a></li>
<li><a href="t-gov.aspx">Our Government Identification Codes</a></li>
<li><a href="t-privacy.aspx">Privacy Policy</a></li>
<li><a href="t-returns.aspx">Returns Policy</a></li>
</ul>
</li>
<li><a href="t-shipping.aspx">Shipping Info</a></li>
</ul>
</li>
<li>
<div>Guides</div>
<ul>
<li><a href="e-page.connectorguide.aspx">Connector Guide</a></li>
<li><a href="e-page.hdmiqa.aspx">HDMI Question and Answer</a></li>
<li><a href="e-page.hdtypes.aspx">Hi-Def Video Types Guide</a></li>
<li><a href="t-about.aspx">How So Inexpensive???</a></li>
<li><a href="e-page.staff.aspx">Meet the Staff</a></li>
<li><a href="e-page.usbcameras.aspx">USB Camera Guide</a></li>
<li><a href="e-page.videocompatibility.aspx">Video Compatibility Guide</a></li>
</ul>
</li>
<li>
<div>My Account</div>
<ul>
<li><a href="account.aspx">Account Info</a></li>
<li><a href="account.aspx#imgAddressbook">Address Book</a></li>
<li><a href="shoppingcart.aspx">Cart</a></li>
<li><a href="account.aspx#OrderHistory">Orders</a></li>
<li><a href="wishlist.aspx">Wishlist</a></li>
</ul>
</li>
<li><a href="t-paymentoptions.aspx">Payment Options</a></li>
<li><a href="e-page.ordertrack.aspx">Order Tracking</a></li>
<li><a href="t-testimonials.aspx">Testimonials</a></li>
</ul>
I sweet little lightweight menu that works with jQuery & jQuery UI Themeroller. It's pretty neat, honestly :).
Why?
jQuery & iPods are cool and easy to use.
How easy is it to use?
You need to have both jQuery and jQuery UI Themeroller initiated on your webpage. Then just download the itty-bitty javascript file, (no css) and initiate it after. It relys on ul-li menus to build it's structure.
OK, OK where can I see it? - HERE
Current Release is v1
Here is a sample of html to use with uiPod:
<ul id="boxMoreInfo">
<li>
<div>Customer Service</div>
<ul>
<li><a href="t-contact.aspx">Contact Us</a></li>
<li><a href="t-faq.aspx">FAQs</a></li>
<li><a href="t-hoursholidays.aspx">Hours and Holidays</a></li>
<li><a href="t-paymentoptions.aspx">Payment Options</a></li>
<li>
<div>Policies</div>
<ul>
<li><a href="t-backorder.aspx">Backorder Policy</a></li>
<li><a href="t-gov.aspx">Our Government Identification Codes</a></li>
<li><a href="t-privacy.aspx">Privacy Policy</a></li>
<li><a href="t-returns.aspx">Returns Policy</a></li>
</ul>
</li>
<li><a href="t-shipping.aspx">Shipping Info</a></li>
</ul>
</li>
<li>
<div>Guides</div>
<ul>
<li><a href="e-page.connectorguide.aspx">Connector Guide</a></li>
<li><a href="e-page.hdmiqa.aspx">HDMI Question and Answer</a></li>
<li><a href="e-page.hdtypes.aspx">Hi-Def Video Types Guide</a></li>
<li><a href="t-about.aspx">How So Inexpensive???</a></li>
<li><a href="e-page.staff.aspx">Meet the Staff</a></li>
<li><a href="e-page.usbcameras.aspx">USB Camera Guide</a></li>
<li><a href="e-page.videocompatibility.aspx">Video Compatibility Guide</a></li>
</ul>
</li>
<li>
<div>My Account</div>
<ul>
<li><a href="account.aspx">Account Info</a></li>
<li><a href="account.aspx#imgAddressbook">Address Book</a></li>
<li><a href="shoppingcart.aspx">Cart</a></li>
<li><a href="account.aspx#OrderHistory">Orders</a></li>
<li><a href="wishlist.aspx">Wishlist</a></li>
</ul>
</li>
<li><a href="t-paymentoptions.aspx">Payment Options</a></li>
<li><a href="e-page.ordertrack.aspx">Order Tracking</a></li>
<li><a href="t-testimonials.aspx">Testimonials</a></li>
</ul>
Standard Initialization:
$('jQuerySelector').uiPod();
Initialization with Options:
$('jQuerySelector').uiPod({
rootTitle: 'Menu',
duration: 500,
direction: 'east',
height: 'auto',
useSideScroller: true
});
Advanced Initialization with Options:
$('jQuerySelector').uiPod({
rootTitle: 'Menu',
initial: null,
separator: '|',
scrollSpeed: 20,
duration: 500,
inDuration: null,
outDuration: null,
easing: 'swing',
inEasing: null,
outEasing: null,
direction: 'east',
inDirection: null,
outDirection: null,
height: '200px',
trueHeight: 0,
width: '',
useSideScroller: false,
fnTitleClick: function(o) {
jQuery(o).click(function() {}).addClass('deadTitle').hide();
drillDown();
drillUp();
},
fnPanelAnimateIn: function(o, l, t, skip, fn) {
var duration = (skip ? 0 : (options.inDuration ? options.inDuration : options.duration));
var effect = (skip ? "" : (options.inEasing ? options.inEasing : options.easing));
o.animate({left: l, top: t, opacity: 1}, duration, effect, fn);
},
fnPanelAnimateOut: function(o, l, t, skip, fn) {
var duration = (skip ? 0 : (options.outDuration ? options.outDuration : options.duration));
var effect = (skip ? "" : (options.outEasing ? options.outEasing : options.easing));
o.animate({left: l, top: t, opacity: .30}, duration, effect, fn);
},
fnAfter: function() {
}
});
$('jQuerySelector').uiPod();
Initialization with Options:
$('jQuerySelector').uiPod({
rootTitle: 'Menu',
duration: 500,
direction: 'east',
height: 'auto',
useSideScroller: true
});
Advanced Initialization with Options:
$('jQuerySelector').uiPod({
rootTitle: 'Menu',
initial: null,
separator: '|',
scrollSpeed: 20,
duration: 500,
inDuration: null,
outDuration: null,
easing: 'swing',
inEasing: null,
outEasing: null,
direction: 'east',
inDirection: null,
outDirection: null,
height: '200px',
trueHeight: 0,
width: '',
useSideScroller: false,
fnTitleClick: function(o) {
jQuery(o).click(function() {}).addClass('deadTitle').hide();
drillDown();
drillUp();
},
fnPanelAnimateIn: function(o, l, t, skip, fn) {
var duration = (skip ? 0 : (options.inDuration ? options.inDuration : options.duration));
var effect = (skip ? "" : (options.inEasing ? options.inEasing : options.easing));
o.animate({left: l, top: t, opacity: 1}, duration, effect, fn);
},
fnPanelAnimateOut: function(o, l, t, skip, fn) {
var duration = (skip ? 0 : (options.outDuration ? options.outDuration : options.duration));
var effect = (skip ? "" : (options.outEasing ? options.outEasing : options.easing));
o.animate({left: l, top: t, opacity: .30}, duration, effect, fn);
},
fnAfter: function() {
}
});