Menu example
Click image to view Live Demo
The default code to show this menu is following:
$(document).ready(function() {
$.WwAdvMenu.Create({ location: "top", openDefault: true, innerHtml: TEST TEXT" });
});
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... |
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'); } ... |
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(); |
Buttons
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
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
Like this article?
Tweet
