YUI Widget: imSliderMenu

I created a YUI widget that is based on my imAnimTabber JQuery Plugin. The imSliderMenu displays content by animating the height or the width of the contents container. I use the imSliderMenu widget on my marketing site, http://1st-steps-to-success.com. The slider menu is handy in that I am able hide content on a page until it is needed and still maintain the look and feel of my website design. As with the imAnimTabber JQuery plugin, The imSliderMenu dynamically creates the menu items based on CSS and a few lines of code.

Setting up the imSliderMenu widget is fairly easy. First, we set up the CSS for the menu items.

.pages {
	float:left;
	width:400px;
	height:18px;
	margin-bottom:21px;
	background-color:#B4A766;
}
.pages ul {
	margin-top:2px;
	margin-left:60px;
}
.pages li, .pages a {
	display:inline;
	margin-right:20px;
	margin-top:0;
	text-decoration:none;
	font-weight:bold;
}
.pages a.selected {
	color:red;
}

Very simple – nothing extraordinary. The ‘.pages’ class selector is a horizontal menu container. The ‘display:inline’ attribute (.pages li) creates a horizontal list.

Next we style the content container:

.pDetail {
	float:left;
	width:400px;
	margin-bottom:21px;
	background-color:#D59E5C;
	overflow:hidden;
	padding:0;
}
.pDetail p {
	color:#000;
	margin-left:10px;
	width:390px;
}

Now we add the html to the page.

< div id='pages' class="pages" >< /div >
 
< div id="about" class="pDetail" >About Content< /div >
< div id="link" class="pDetail" >Link Content< /div >
< div id="freeStuff" class="pDetail" >FreeStuff Content< /div >

The most important item in the html above is the ‘id’ that is set on each content container. This id will be used in setting up the imSliderMenu widget.

Setting up the Widget

To set up the widget, I am going to use the YUI Loader Utility. I discussed the use of the YUI Loader Utility in a previous post.

?View Code JAVASCRIPT
(function(){
	var loader = new YAHOO.util.YUILoader();
	loader.addModule ({
		name: 'INTRIG.imSliderMenu',
		type: 'js',
		fullpath: 'lib/intrig/slidermenu/slidermenu.js',
		varName: 'imSliderMenu'
	});
	loader.require("yahoo","yahoo-dom-event","animation", "element", "selector", "fonts", "yuiloader", "INTRIG.imSliderMenu");
	filter: "MIN";
	loader.insert({
		base: "",
		loadOptional: true,
		onSuccess: function() {
			var Event = YAHOO.util.Event,
			Selector = YAHOO.util.Selector,
			Dom = YAHOO.util.Dom;
			Event.onDOMReady(function(){
				var imSliderMenu = new YAHOO.INTRIG.imSliderMenu({
				menu_container: 'pages',
				active_menu_class: 'selected',
				labels: [{
					caption: "About",
					id: "about"
				}, {
					caption: "Links",
					id: "links"
				}, {
					caption: "Free Stuff",
					id: "freeStuff"
				}],
				anim_options: {
					attributes: 'height',
					duration: 1,
					outMethod: YAHOO.util.Easing.backOut,
					inMethod: YAHOO.util.Easing.backIn
				}
			});
		});
          }
     });
})();

The YUI widget is called onSuccess of the YUI Loader Utility. If you are not using the Loader Utility, you can still wrap the call in an anonymous function.

?View Code JAVASCRIPT
(function(){
     var Event = YAHOO.util.Event,
     var Selector = YAHOO.util.Selector,
     Dom = YAHOO.util.Dom;
     Event.onDOMReady(function(){
     var imSliderMenu = new YAHOO.INTRIG.imSliderMenu({
          menu_container: 'pages',
	  active_menu_class: 'selected',
	  labels: [{
	        caption: "About",
	        id: "about"
	  }, {
		caption: "Links",
		id: "links"
	  }, {
		caption: "Free Stuff",
		id: "freeStuff"
	  }],
	  anim_options: {
		attributes: 'height',
		duration: 1,
		outMethod: YAHOO.util.Easing.backOut,
		inMethod: YAHOO.util.Easing.backIn
	}
     });
})();

The first option is menu_container. This container holds the dynamically created menu items. Next we have the active_menu_class.  This is how the menu item will appear when selected ( the active tab). In this instance, we are only turning the font color to red:

.pages a.selected {
	color:red;
}

The labels option There will be a label for every menu item that you want to display. In the example above, The caption option is the text that is displayed on each button. The id option is the id for the content container that is to open (or close) when the menu item is clicked.

Next comes the animation option (anim_options). These options control how your content will be displayed.

attribute: Can be ‘height’ or ‘width’. The default is ‘height.

duration: the duration of the animation (defaults to 1 second).

outMethod: Content is hidden by default. This is the method in which the content will appear. It must be an YUI Easing Method.

inMethod: The method in which the content will be hidden from the page.

That’s about it. I think it is easy enough to use. Click to view a demo of the imSliderMenu widget. The widget can be downloaded from Google Code.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks