Welcome to the jQWaffle wiki!

A jQuery implementation of the Waffle navigation in Office 365.

Features:-

• Bootstrap Top navigation included. ( Bootstrap v3.3.7 (http://getbootstrap.com) ).
• Responsive.
• User Account dropdown menu included on right side.
• Lightweight, no dependencies
• Cross-browser and platform
• Customizable look and feel.

Examples

https://niteshpatare.github.io/jQWaffle/

Where is it being tested?

• Microsoft Internet Explorer 10+ (Standards Mode)
• Google Chrome
• Mozilla FireFox
• Apple Safari
• Opera
• iOS
• Android

Download source code

Download Link - https://github.com/niteshpatare/jQWaffle/archive/master.zip

Install via bower

jQWaffle.js can be installed using bower.

$ bower install jqwaffle

---

Download Dist Folder

Included in HTML

The navbar HTML markup for topbar navigation, admin slide and waffle menu slide.

Included in CSS

<!-- included the core styles -->

<link rel="stylesheet" href="PATH_TO_FILE/waffle.css" />

Included in JS

<!-- included the core styles -->

<link rel="stylesheet" href="PATH_TO_FILE/waffle.js" />

For source code and customization refer the src folder

---

Default Usage In Js:-

Initiaization- $('body').jQWaffle();

Initiate Default Functions:-

Open Waffle Menu

$('body').jQWaffle({ 'waffleMenuAction': 'open', });

Close Waffle Menu

$('body').jQWaffle({ 'waffleMenuAction': 'close', });

Toggle (Show/Hide) Waffle Menu

$('body').jQWaffle({ 'waffleMenuAction': 'toggle', });

Open Account Menu

$('body').jQWaffle({ 'accountMenuAction': 'open', });

Close Account Menu

$('body').jQWaffle({ 'accountMenuAction': 'close', });

Toggle (Show/Hide) Account Menu

$('body').jQWaffle({ 'accountMenuAction': 'toggle', });