Your Ad Here

26 May 2011

HTML 5 Page Menu Navigation helper




Menu example

Click image to view Live Demo

Code:


The default code to show this menu is following:
$(document).ready(function() {
$.WwAdvMenu.Create({ location: "top", openDefault: true, innerHtml: TEST TEXT" });
});

Back to top

Plugin options

Setting name Description Available values Default value Example
location location of menu on the page "top", "right", "bottom", "left" "top" $.WwAdvMenu.Create({ location: "bottom" ..
customOffset Custom offset that will be set to menu if default location is wrong or doesn't fit your site { top: "1px", right: "1px", bottom: "1px", left:"1px" } null $.WwAdvMenu.Create({ customOffset: {top: 0, right: 15} ..
buttons Array of buttons that will be shown on menu, Read about creating buttons null $.WwAdvMenu.Create({ buttons: [ { text: 'message', click:function() { alert('execute custom code here'); } }, ..
innerHtml HTML that will be shown instead of buttons any html code null $.WwAdvMenu.Create({ innerHtml: "<span style='padding:20px; display:block;'>TEST TEXT</span>" ..
imagePath Path of directory containing images Virtual directory path "" $.WwAdvMenu.Create({ imagePath: "../images/"...
dynamicContent Variable that forces menu to create another container for dynamic html, must be set to true when displaying something inside menu true/false false $.WwAdvMenu.Create({ dynamicContent: true...
maxHeight Maximum height of inner menu container size in pixels 460 $.WwAdvMenu.Create({ maxHeight: 500...
openDefault Setting to open menu by default true/false false $.WwAdvMenu.Create({ openDefault: true...
Back to top

Callbacks

Event name Description Example
onShowMenu Callback function that is called when inner menu is opened $.WwAdvMenu.Create({ onShowMenu: function() { alert('opened'); } ..
onHideMenu Callback function that is called when inner menu is closed $.WwAdvMenu.Create({ onHideMenu: function() { alert('closed'); } ...
Back to top

Public Methods

Method name Description Arguments Example
Create Method that creates menu options - ww menu options
var opt = { location: "top", openDefault: true, innerHtml: TEST TEXT" };

$.WwAdvMenu.Create(opt);
HideMenuContent Hide inner menu content null $.WwAdvMenu.HideMenuContent();
ToggleContent Hides or displays inner menu content show: true/false $.WwAdvMenu.ToggleContent(false);
UpdateContent Update inner content HTML (see last button in example) HTML $.WwAdvMenu.UpdateContent("<span style='padding:20px; display:block;'>Some loooong data here</span>");
Show Show entire menu
$.WwAdvMenu.Show();



Hide Hide entire menu
$.WwAdvMenu.Hide();



Back to top


Buttons

Code:


Every single button is an object with inner options. The list of available options is following:


var button1 = { id:null, imagePath: null, text: 'msg', className:'', href:null, click:null, dataProvider: function(callback) {}, externalUrl:null };


Button Options


Options Description Available values Default value Example
id Custom button id Custom ID null (will be auto generated) var button1 = { id:"myid" }
imagePath Image that will be displayed inside button Image path null var button1 = { imagePath:"/images/1.jpg" }
text Button's text, will be used if no image path is presented text "" var button1 = { text:"my button" }
className Custom button class class name "" var button1 = { className:"myClass" }
href Url for the button url null var button1 = { url:"http://www.webworld-develop.blogspot.com/" }
click Custom button click event function null var button1 = { click: function(e) { alert('my button was clicked'); }
dataProvider
Custom function that returns HTML that will be displayed in inner menu container. (Third button in example).


This function can load HTML dynamically and run callback with results.
function(callback){} null var button1 = { dataProvider: function(callback) { callback("Hmmm...<br />What can be here?<br /><strong>Maybe some long bold text?</strong>"); } }
externalUrl Page url that will be loaded in an IFrame (see second button for details). url null var button1 = { externalUrl: "http://www.webworld.lv/" }

Creating buttons

Code:


First you need to do is to create an array of buttons.

var myBtns = new Array();
myBtns.push({ text: 'button1', href:"http://www.webworld.lv" });
myBtns.push({ text: 'button2', href:"http://www.sobak.lv" });
myBtns.push({ text: 'button3', click:function() { alert('button 3 clicked'); } });
myBtns.push({ text: 'button4', externalUrl:"http://webworld-develop.blogspot.com/" });

Easier way to do this is following:

var myBtns = [{ text: 'button1', href:"http://www.webworld.lv" }, { text: 'button2', href:"http://www.sobak.lv" }];

Then pass created buttons as option when creating menu:

$.WwAdvMenu.Create({ buttons: myBtns });

Back to top


Download


Get HTML 5 navigation plugin now!

See index.html for more details.

Back to top


Like this article?