HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<html>
<head>
<title>Navigation menus</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/navigation.css">
<link rel="stylesheet" href="styles/slicknav.css">
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="js/jquery.slicknav.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#nav_menu').slicknav({prependTo:"#mobilemenu"});
});
</script>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 96%;
background-color: white;
margin: 15px auto;
padding: 20px;
/* border: 1px solid black*/
}
#nav_menu ul {
list-style: none;
position: relative; /* So the first submenu can be positioned within the main menu */
}
#nav_menu ul li {
float: left;
}
#nav_menu ul ul {
display: none; /* Don't display submenu until hover of the li element */
position: absolute;
top: 100%; /* Position the submenu at the bottom of the main menu */
}
#nav_menu ul ul li {
float: none; /* Display the submenus vertically */
position: relative; /* So the second submenu can be positioned within the first submenu */
}
#nav_menu ul ul li ul {
position: absolute;
left: -100%; /* Position the second submenu at the left side of the li element */
top: 0; /* Position the second submenu at the top of the li element */
}
#nav_menu ul li:hover > ul {
display: block; /* Display the submenu on hover of the li element */
}
#nav_menu ul::after {
content: "";
clear: both;
display: block;
}
/* The styles for the formatting of the multi-tier navigation menu */
#nav_menu ul {
width: 100%;
margin: 0;
padding: 0;
}
#nav_menu ul li {
width: 25%;
}
#nav_menu ul li a {
text-align: center;
display: block;
padding: 1em 0;
text-decoration: none;
background-color: blue;
color: white;
font-weight: bold;
}
#nav_menu ul li a.current {
color: yellow;
}
#nav_menu ul li a:hover, #nav_menu ul li a:focus {
background-color: gray;
}
#nav_menu ul li:hover ul {
width: 100%;
}
#nav_menu ul li:hover ul li a {
display: block;
width: 178px;
text-align: center;
}
.slicknav_menu {
display: none;
}
@media only screen and (max-width: 959px) {
#nav_menu ul li a {
font-size: .875em; /* 14 / 16 */
}
@media only screen and (max-width: 767px) {
#nav_menu {
display: none;
}
.slicknav_menu {
display: block;
}
</style>
</head>
<body>
<nav id="mobilemenu"></nav>
<nav id="nav_menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="tickets.html">Get Tickets</a></li>
<li><a href="members.html" class="current">Become a Member</a></li>
<li><a href="aboutus.html" class="lastitem">About Us</a>
<ul>
<li><a href="#">Our History</a></li>
<li><a href="#">Board of Directors</a></li>
<li><a href="#">Past Speakers</a></li>
<li><a href="#">Contact Information</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
/*!
* SlickNav Responsive Mobile Menu v1.0.10
* (c) 2016 Josh Cope
* licensed under MIT
*/
.slicknav_btn {
position: relative;
display: block;
vertical-align: middle;
float: right;
padding: 0.438em 0.625em 0.438em 0.625em;
line-height: 1.125em;
cursor: pointer; }
.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar {
margin-top: 0.188em; }
.slicknav_menu {
*zoom: 1; }
.slicknav_menu .slicknav_menutxt {
display: block;
line-height: 1.188em;
float: left; }
.slicknav_menu .slicknav_icon {
float: left;
width: 1.125em;
height: 0.875em;
margin: 0.188em 0 0 0.438em; }
.slicknav_menu .slicknav_icon:before {
background: transparent;
width: 1.125em;
height: 0.875em;
display: block;
content: "";
position: absolute; }
.slicknav_menu .slicknav_no-text {
margin: 0; }
.slicknav_menu .slicknav_icon-bar {
display: block;
width: 1.125em;
height: 0.125em;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
.slicknav_menu:before {
content: " ";
display: table; }
.slicknav_menu:after {
content: " ";
display: table;
clear: both; }
.slicknav_nav {
clear: both; }
.slicknav_nav ul {
display: block; }
.slicknav_nav li {
display: block; }
.slicknav_nav .slicknav_arrow {
font-size: 0.8em;
margin: 0 0 0 0.4em; }
.slicknav_nav .slicknav_item {
cursor: pointer; }
.slicknav_nav .slicknav_item a {
display: inline; }
.slicknav_nav .slicknav_row {
display: block; }
.slicknav_nav a {
display: block; }
.slicknav_nav .slicknav_parent-link a {
display: inline; }
.slicknav_brand {
float: left; }
.slicknav_menu {
font-size: 16px;
box-sizing: border-box;
background: #4c4c4c;
padding: 5px; }
.slicknav_menu * {
box-sizing: border-box; }
.slicknav_menu .slicknav_menutxt {
color: #fff;
font-weight: bold;
text-shadow: 0 1px 3px #000; }
.slicknav_menu .slicknav_icon-bar {
background-color: #fff; }
.slicknav_btn {
margin: 5px 5px 6px;
text-decoration: none;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #222; }
.slicknav_nav {
color: #fff;
margin: 0;
padding: 0;
font-size: 0.875em;
list-style: none;
overflow: hidden; }
.slicknav_nav ul {
list-style: none;
overflow: hidden;
padding: 0;
margin: 0 0 0 20px; }
.slicknav_nav .slicknav_row {
padding: 5px 10px;
margin: 2px 5px; }
.slicknav_nav .slicknav_row:hover {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background: #ccc;
color: #fff; }
.slicknav_nav a {
padding: 5px 10px;
margin: 2px 5px;
text-decoration: none;
color: #fff; }
.slicknav_nav a:hover {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background: #ccc;
color: #222; }
.slicknav_nav .slicknav_txtnode {
margin-left: 15px; }
.slicknav_nav .slicknav_item a {
padding: 0;
margin: 0; }
.slicknav_nav .slicknav_parent-link a {
padding: 0;
margin: 0; }
.slicknav_brand {
color: #fff;
font-size: 18px;
line-height: 30px;
padding: 7px 12px;
height: 44px; }
/*!
* SlickNav Responsive Mobile Menu v1.0.10
* (c) 2016 Josh Cope
* licensed under MIT
*/
;(function ($, document, window) {
var
// default settings object.
defaults = {
label: 'MENU',
duplicate: true,
duration: 200,
easingOpen: 'swing',
easingClose: 'swing',
closedSymbol: '►',
openedSymbol: '▼',
prependTo: 'body',
appendTo: '',
parentTag: 'a',
closeOnClick: false,
allowParentLinks: false,
nestedParentLinks: true,
showChildren: false,
removeIds: true,
removeClasses: false,
removeStyles: false,
brand: '',
animations: 'jquery',
init: function () {},
beforeOpen: function () {},
beforeClose: function () {},
afterOpen: function () {},
afterClose: function () {}
},
mobileMenu = 'slicknav',
prefix = 'slicknav',
Keyboard = {
DOWN: 40,
ENTER: 13,
ESCAPE: 27,
LEFT: 37,
RIGHT: 39,
SPACE: 32,
TAB: 9,
UP: 38,
};
function Plugin(element, options) {
this.element = element;
// jQuery has an extend method which merges the contents of two or
// more objects, storing the result in the first object. The first object
// is generally empty as we don't want to alter the default options for
// future instances of the plugin
this.settings = $.extend({}, defaults, options);
// Don't remove IDs by default if duplicate is false
if (!this.settings.duplicate && !options.hasOwnProperty("removeIds")) {
this.settings.removeIds = false;
}
this._defaults = defaults;
this._name = mobileMenu;
this.init();
}
Plugin.prototype.init = function () {
var $this = this,
menu = $(this.element),
settings = this.settings,
iconClass,
menuBar;
// clone menu if needed
if (settings.duplicate) {
$this.mobileNav = menu.clone();
} else {
$this.mobileNav = menu;
}
// remove IDs if set
if (settings.removeIds) {
$this.mobileNav.removeAttr('id');
$this.mobileNav.find('*').each(function (i, e) {
$(e).removeAttr('id');
});
}
// remove classes if set
if (settings.removeClasses) {
$this.mobileNav.removeAttr('class');
$this.mobileNav.find('*').each(function (i, e) {
$(e).removeAttr('class');
});
}
// remove styles if set
if (settings.removeStyles) {
$this.mobileNav.removeAttr('style');
$this.mobileNav.find('*').each(function (i, e) {
$(e).removeAttr('style');
});
}
// styling class for the button
iconClass = prefix + '_icon';
if (settings.label === '') {
iconClass += ' ' + prefix + '_no-text';
}
if (settings.parentTag == 'a') {
settings.parentTag = 'a href="#"';
}
// create menu bar
$this.mobileNav.attr('class', prefix + '_nav');
menuBar = $('<div class="' + prefix + '_menu"></div>');
if (settings.brand !== '') {
var brand = $('<div class="' + prefix + '_brand">'+settings.brand+'</div>');
$(menuBar).append(brand);
}
$this.btn = $(
['<' + settings.parentTag + ' aria-haspopup="true" role="button" tabindex="0" class="' + prefix + '_btn ' + prefix + '_collapsed">',
'<span class="' + prefix + '_menutxt">' + settings.label + '</span>',
'<span class="' + iconClass + '">',
'<span class="' + prefix + '_icon-bar"></span>',
'<span class="' + prefix + '_icon-bar"></span>',
'<span class="' + prefix + '_icon-bar"></span>',
'</span>',
'</' + settings.parentTag + '>'
].join('')
);
$(menuBar).append($this.btn);
if(settings.appendTo !== '') {
$(settings.appendTo).append(menuBar);
} else {
$(settings.prependTo).prepend(menuBar);
}
menuBar.append($this.mobileNav);
// iterate over structure adding additional structure
var items = $this.mobileNav.find('li');
$(items).each(function () {
var item = $(this),
data = {};
data.children = item.children('ul').attr('role', 'menu');
item.data('menu', data);
// if a list item has a nested menu
if (data.children.length > 0) {
// select all text before the child menu
// check for anchors
var a = item.contents(),
containsAnchor = false,
nodes = [];
$(a).each(function () {
if (!$(this).is('ul')) {
nodes.push(this);
} else {
return false;
}
if($(this).is("a")) {
containsAnchor = true;
}
});
var wrapElement = $(
'<' + settings.parentTag + ' role="menuitem" aria-haspopup="true" tabindex="-1" class="' + prefix + '_item"/>'
);
// wrap item text with tag and add classes unless we are separating parent links
if ((!settings.allowParentLinks || settings.nestedParentLinks) || !containsAnchor) {
var $wrap = $(nodes).wrapAll(wrapElement).parent();
$wrap.addClass(prefix+'_row');
} else
$(nodes).wrapAll('<span class="'+prefix+'_parent-link '+prefix+'_row"/>').parent();
if (!settings.showChildren) {
item.addClass(prefix+'_collapsed');
} else {
item.addClass(prefix+'_open');
}
item.addClass(prefix+'_parent');
// create parent arrow. wrap with link if parent links and separating
var arrowElement = $('<span class="'+prefix+'_arrow">'+(settings.showChildren?settings.openedSymbol:settings.closedSymbol)+'</span>');
if (settings.allowParentLinks && !settings.nestedParentLinks && containsAnchor)
arrowElement = arrowElement.wrap(wrapElement).parent();
//append arrow
$(nodes).last().after(arrowElement);
} else if ( item.children().length === 0) {
item.addClass(prefix+'_txtnode');
}
// accessibility for links
item.children('a').attr('role', 'menuitem').click(function(event){
//Ensure that it's not a parent
if (settings.closeOnClick && !$(event.target).parent().closest('li').hasClass(prefix+'_parent')) {
//Emulate menu close if set
$($this.btn).click();
}
});
//also close on click if parent links are set
if (settings.closeOnClick && settings.allowParentLinks) {
item.children('a').children('a').click(function (event) {
//Emulate menu close
$($this.btn).click();
});
item.find('.'+prefix+'_parent-link a:not(.'+prefix+'_item)').click(function(event){
//Emulate menu close
$($this.btn).click();
});
}
});
// structure is in place, now hide appropriate items
$(items).each(function () {
var data = $(this).data('menu');
if (!settings.showChildren){
$this._visibilityToggle(data.children, null, false, null, true);
}
});
// finally toggle entire menu
$this._visibilityToggle($this.mobileNav, null, false, 'init', true);
// accessibility for menu button
$this.mobileNav.attr('role','menu');
// outline prevention when using mouse
$(document).mousedown(function(){
$this._outlines(false);
});
$(document).keyup(function(){
$this._outlines(true);
});
// menu button click
$($this.btn).click(function (e) {
e.preventDefault();
$this._menuToggle();
});
// click on menu parent
$this.mobileNav.on('click', '.' + prefix + '_item', function (e) {
e.preventDefault();
$this._itemClick($(this));
});
// check for keyboard events on menu button and menu parents
$($this.btn).keydown(function (e) {
var ev = e || event;
switch(ev.keyCode) {
case Keyboard.ENTER:
case Keyboard.SPACE:
case Keyboard.DOWN:
e.preventDefault();
if (ev.keyCode !== Keyboard.DOWN || !$($this.btn).hasClass(prefix+'_open')){
$this._menuToggle();
}
$($this.btn).next().find('[role="menuitem"]').first().focus();
break;
}
});
$this.mobileNav.on('keydown', '.'+prefix+'_item', function(e) {
var ev = e || event;
switch(ev.keyCode) {
case Keyboard.ENTER:
e.preventDefault();
$this._itemClick($(e.target));
break;
case Keyboard.RIGHT:
e.preventDefault();
if ($(e.target).parent().hasClass(prefix+'_collapsed')) {
$this._itemClick($(e.target));
}
$(e.target).next().find('[role="menuitem"]').first().focus();
break;
}
});
$this.mobileNav.on('keydown', '[role="menuitem"]', function(e) {
var ev = e || event;
switch(ev.keyCode){
case Keyboard.DOWN:
e.preventDefault();
var allItems = $(e.target).parent().parent().children().children('[role="menuitem"]:visible');
var idx = allItems.index( e.target );
var nextIdx = idx + 1;
if (allItems.length <= nextIdx) {
nextIdx = 0;
}
var next = allItems.eq( nextIdx );
next.focus();
break;
case Keyboard.UP:
e.preventDefault();
var allItems = $(e.target).parent().parent().children().children('[role="menuitem"]:visible');
var idx = allItems.index( e.target );
var next = allItems.eq( idx - 1 );
next.focus();
break;
case Keyboard.LEFT:
e.preventDefault();
if ($(e.target).parent().parent().parent().hasClass(prefix+'_open')) {
var parent = $(e.target).parent().parent().prev();
parent.focus();
$this._itemClick(parent);
} else if ($(e.target).parent().parent().hasClass(prefix+'_nav')){
$this._menuToggle();
$($this.btn).focus();
}
break;
case Keyboard.ESCAPE:
e.preventDefault();
$this._menuToggle();
$($this.btn).focus();
break;
}
});
// allow links clickable within parent tags if set
if (settings.allowParentLinks && settings.nestedParentLinks) {
$('.'+prefix+'_item a').click(function(e){
e.stopImmediatePropagation();
});
}
};
//toggle menu
Plugin.prototype._menuToggle = function (el) {
var $this = this;
var btn = $this.btn;
var mobileNav = $this.mobileNav;
if (btn.hasClass(prefix+'_collapsed')) {
btn.removeClass(prefix+'_collapsed');
btn.addClass(prefix+'_open');
} else {
btn.removeClass(prefix+'_open');
btn.addClass(prefix+'_collapsed');
}
btn.addClass(prefix+'_animating');
$this._visibilityToggle(mobileNav, btn.parent(), true, btn);
};
// toggle clicked items
Plugin.prototype._itemClick = function (el) {
var $this = this;
var settings = $this.settings;
var data = el.data('menu');
if (!data) {
data = {};
data.arrow = el.children('.'+prefix+'_arrow');
data.ul = el.next('ul');
data.parent = el.parent();
//Separated parent link structure
if (data.parent.hasClass(prefix+'_parent-link')) {
data.parent = el.parent().parent();
data.ul = el.parent().next('ul');
}
el.data('menu', data);
}
if (data.parent.hasClass(prefix+'_collapsed')) {
data.arrow.html(settings.openedSymbol);
data.parent.removeClass(prefix+'_collapsed');
data.parent.addClass(prefix+'_open');
data.parent.addClass(prefix+'_animating');
$this._visibilityToggle(data.ul, data.parent, true, el);
} else {
data.arrow.html(settings.closedSymbol);
data.parent.addClass(prefix+'_collapsed');
data.parent.removeClass(prefix+'_open');
data.parent.addClass(prefix+'_animating');
$this._visibilityToggle(data.ul, data.parent, true, el);
}
};
// toggle actual visibility and accessibility tags
Plugin.prototype._visibilityToggle = function(el, parent, animate, trigger, init) {
var $this = this;
var settings = $this.settings;
var items = $this._getActionItems(el);
var duration = 0;
if (animate) {
duration = settings.duration;
}
function afterOpen(trigger, parent) {
$(trigger).removeClass(prefix+'_animating');
$(parent).removeClass(prefix+'_animating');
//Fire afterOpen callback
if (!init) {
settings.afterOpen(trigger);
}
}
function afterClose(trigger, parent) {
el.attr('aria-hidden','true');
items.attr('tabindex', '-1');
$this._setVisAttr(el, true);
el.hide(); //jQuery 1.7 bug fix
$(trigger).removeClass(prefix+'_animating');
$(parent).removeClass(prefix+'_animating');
//Fire init or afterClose callback
if (!init){
settings.afterClose(trigger);
} else if (trigger == 'init'){
settings.init();
}
}
if (el.hasClass(prefix+'_hidden')) {
el.removeClass(prefix+'_hidden');
//Fire beforeOpen callback
if (!init) {
settings.beforeOpen(trigger);
}
if (settings.animations === 'jquery') {
el.stop(true,true).slideDown(duration, settings.easingOpen, function(){
afterOpen(trigger, parent);
});
} else if(settings.animations === 'velocity') {
el.velocity("finish").velocity("slideDown", {
duration: duration,
easing: settings.easingOpen,
complete: function() {
afterOpen(trigger, parent);
}
});
}
el.attr('aria-hidden','false');
items.attr('tabindex', '0');
$this._setVisAttr(el, false);
} else {
el.addClass(prefix+'_hidden');
//Fire init or beforeClose callback
if (!init){
settings.beforeClose(trigger);
}
if (settings.animations === 'jquery') {
el.stop(true,true).slideUp(duration, this.settings.easingClose, function() {
afterClose(trigger, parent)
});
} else if (settings.animations === 'velocity') {
el.velocity("finish").velocity("slideUp", {
duration: duration,
easing: settings.easingClose,
complete: function() {
afterClose(trigger, parent);
}
});
}
}
};
// set attributes of element and children based on visibility
Plugin.prototype._setVisAttr = function(el, hidden) {
var $this = this;
// select all parents that aren't hidden
var nonHidden = el.children('li').children('ul').not('.'+prefix+'_hidden');
// iterate over all items setting appropriate tags
if (!hidden) {
nonHidden.each(function(){
var ul = $(this);
ul.attr('aria-hidden','false');
var items = $this._getActionItems(ul);
items.attr('tabindex', '0');
$this._setVisAttr(ul, hidden);
});
} else {
nonHidden.each(function(){
var ul = $(this);
ul.attr('aria-hidden','true');
var items = $this._getActionItems(ul);
items.attr('tabindex', '-1');
$this._setVisAttr(ul, hidden);
});
}
};
// get all 1st level items that are clickable
Plugin.prototype._getActionItems = function(el) {
var data = el.data("menu");
if (!data) {
data = {};
var items = el.children('li');
var anchors = items.find('a');
data.links = anchors.add(items.find('.'+prefix+'_item'));
el.data('menu', data);
}
return data.links;
};
Plugin.prototype._outlines = function(state) {
if (!state) {
$('.'+prefix+'_item, .'+prefix+'_btn').css('outline','none');
} else {
$('.'+prefix+'_item, .'+prefix+'_btn').css('outline','');
}
};
Plugin.prototype.toggle = function(){
var $this = this;
$this._menuToggle();
};
Plugin.prototype.open = function(){
var $this = this;
if ($this.btn.hasClass(prefix+'_collapsed')) {
$this._menuToggle();
}
};
Plugin.prototype.close = function(){
var $this = this;
if ($this.btn.hasClass(prefix+'_open')) {
$this._menuToggle();
}
};
$.fn[mobileMenu] = function ( options ) {
var args = arguments;
// Is the first parameter an object (options), or was omitted, instantiate a new instance
if (options === undefined || typeof options === 'object') {
return this.each(function () {
// Only allow the plugin to be instantiated once due to methods
if (!$.data(this, 'plugin_' + mobileMenu)) {
// if it has no instance, create a new one, pass options to our plugin constructor,
// and store the plugin instance in the elements jQuery data object.
$.data(this, 'plugin_' + mobileMenu, new Plugin( this, options ));
}
});
// If is a string and doesn't start with an underscore or 'init' function, treat this as a call to a public method.
} else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
// Cache the method call to make it possible to return a value
var returns;
this.each(function () {
var instance = $.data(this, 'plugin_' + mobileMenu);
// Tests that there's already a plugin-instance and checks that the requested public method exists
if (instance instanceof Plugin && typeof instance[options] === 'function') {
// Call the method of our plugin instance, and pass it the supplied arguments.
returns = instance[options].apply( instance, Array.prototype.slice.call( args, 1 ) );
}
});
// If the earlier cached method gives a value back return the value, otherwise return this to preserve chainability.
return returns !== undefined ? returns : this;
}
};
}(jQuery, document, window));
Also see: Tab Triggers