### Example Initialization Source: https://mmenujs.com/docs/addons/set-selected.html A basic example of initializing mmenu.js, demonstrating the setup for the setSelected add-on. ```javascript ``` -------------------------------- ### Basic usage with options Source: https://mmenujs.com/mburger/docs.html Example of how to use the mm-burger webcomponent with custom options for menu connection and animation. ```html ``` -------------------------------- ### Styling the hamburger icon Source: https://mmenujs.com/mburger/docs.html Example of how to style the mm-burger element using CSS. ```html ``` -------------------------------- ### Install with NPM Source: https://mmenujs.com/download.html Install the mmenu.js plugin using NPM. ```bash npm i mmenu-js ``` -------------------------------- ### HTML Before Source: https://mmenujs.com/tutorials/off-canvas Example of the HTML structure before any plugins are fired. ```html
``` -------------------------------- ### Searchfield Add-on Example Source: https://mmenujs.com/docs/addons This script demonstrates how to initialize mmenu.js with the searchfield add-on, including options and configuration. ```html ``` -------------------------------- ### Install mmenu.js Source: https://mmenujs.com/ Install mmenu.js using npm. ```bash npm install mmenu-js --save-dev ``` -------------------------------- ### Basic Icon Panels Setup Source: https://mmenujs.com/docs/addons/icon-panels.html This script demonstrates the basic setup for the iconPanels add-on in mmenujs, showing how to enable it with options and configuration. ```javascript document.addEventListener( "DOMContentLoaded", () => { new Mmenu( "#menu", { iconPanels: { // icon panels options } }, { iconPanels: { // icon panels configuration } }); } ); ``` -------------------------------- ### HTML and initial JavaScript setup Source: https://mmenujs.com/tutorials/dynamic-content.html Sets up the basic HTML structure for the menu and initializes the mmenu plugin. ```html ``` -------------------------------- ### HTML After firing mmenu Source: https://mmenujs.com/tutorials/off-canvas Example of the HTML structure after mmenu.js is fired, showing how it might wrap elements. ```html
``` -------------------------------- ### HTML structure Source: https://mmenujs.com/mburger/tutorial.html This is an example of an HTML file that includes the mburger component and the mmenu component. ```html My webpage

Page title

Some content.

``` -------------------------------- ### HTML After firing a lightbox Source: https://mmenujs.com/tutorials/off-canvas Example of the HTML structure after a lightbox is fired, potentially adding elements to the body. ```html
``` -------------------------------- ### mmenu.js Playground Example Source: https://mmenujs.com/examples.html This snippet shows a full HTML document with the mmenu.js plugin integrated, including basic configuration for an off-canvas menu. ```html mmenu.js playground

This is a demo.
Click the menu icon to open the menu.

``` -------------------------------- ### Invoke API methods Source: https://mmenujs.com/docs/core/api.html Example of how to get the API instance and invoke methods like openPanel. ```javascript document.addEventListener( "DOMContentLoaded", () => { // Fire the plugin const menu = new Mmenu( "#menu" ); // Get the API const api = menu.API; // Invoke a method const panel = document.querySelector( "#panel" ); api.openPanel( panel ); } ); ``` -------------------------------- ### Install with NPM Source: https://mmenujs.com/mburger Install the mburger webcomponent using NPM. ```bash npm i mburger-webcomponent ``` -------------------------------- ### Basic counters setup Source: https://mmenujs.com/docs/addons/counters.html This snippet shows how to initialize mmenu with the counters add-on, including options and configuration. ```javascript document.addEventListener( "DOMContentLoaded", () => { new Mmenu( "#menu", { counters: { // counters options } }, { counters: { // counters configuration } }); } ); ``` -------------------------------- ### Example with smooth scrolling enabled Source: https://mmenujs.com/docs/addons/page-scroll.html An example demonstrating how to enable smooth scrolling by setting 'scroll' and 'update' to true in the page scroll options. ```javascript ``` -------------------------------- ### Basic page scroll setup Source: https://mmenujs.com/docs/addons/page-scroll.html This snippet shows the basic setup for the page scroll add-on, including where to place the options and configuration. ```javascript ``` -------------------------------- ### Basic Navbar Setup Source: https://mmenujs.com/docs/addons/navbars.html This snippet shows the basic structure for initializing mmenu.js with the navbars add-on, including options for multiple navbars. ```javascript document.addEventListener( "DOMContentLoaded", () => { new Mmenu( "#menu", { navbars: [{ // first navbar options }, { // second navbar options }] }, { navbars: { // navbars configuration } }); } ); ``` -------------------------------- ### Configuration with page selector Source: https://mmenujs.com/tutorials/off-canvas Example of configuring mmenu.js to use a specific selector for the page element to prevent unnecessary wrapping. ```javascript document.addEventListener( "DOMContentLoaded", () => { new Mmenu( "#menu", { // options }, { // configuration offCanvas: { page: { selector: "#page" } } }); } ); ``` -------------------------------- ### Configuring offCanvas.page.nodetype Source: https://mmenujs.com/tutorials/off-canvas Example of how to specify a different node type for the 'page' wrapper if it's not a div. ```javascript document.addEventListener( "DOMContentLoaded", () => { new Mmenu( "#menu", { // options }, { // configuration offCanvas: { page: { nodetype: "section" } } }); } ); ``` -------------------------------- ### Custom Styling Source: https://mmenujs.com/mmenu-light/docs.html Example of overriding CSS variables and properties to customize the mmenu light plugin's appearance. ```css .mm { background: #ffe; color: #330; --mm-spn-item-height: 46px; --mm-ocd-max-width: 500px; } ``` -------------------------------- ### HTML markup for a contact list item Source: https://mmenujs.com/tutorials/contact-list.html Example of an HTML list item representing a single contact, including image and name. ```html ``` -------------------------------- ### Menu with span for submenu trigger Source: https://mmenujs.com/mmenu-light/tutorial.html Example of using a instead of an for a list item to make the entire list item clickable for opening a submenu. ```html ``` -------------------------------- ### Complete HTML structure Source: https://mmenujs.com/mmenu-light/tutorial.html A complete HTML file structure demonstrating the integration of mmenu.js. ```html My webpage

The title

Some content.

``` -------------------------------- ### Controlling the hamburger state via JavaScript Source: https://mmenujs.com/mburger/docs.html Example of how to control the state of the hamburger icon (e.g., to 'cross') using JavaScript. ```javascript const burger = document.querySelector("mm-burger"); burger.state = "cross"; ``` -------------------------------- ### Open the menu Source: https://mmenujs.com/mmenu-light/tutorial.html Adds an anchor and an event listener to open the menu when clicked. ```html
...
... ``` -------------------------------- ### Initialize mmenu light plugin Source: https://mmenujs.com/mmenu-light/tutorial.html JavaScript code to initialize the mmenu light plugin with a media query to enable it only on smaller screens. ```javascript const menu = new MmenuLight( document.querySelector( "#menu" ), "(max-width: 600px)" ); ``` -------------------------------- ### Basic HTML structure Source: https://mmenujs.com/mmenu-light/tutorial.html A basic HTML file structure with header and content markup. ```html My webpage

Page title

Some content.

``` -------------------------------- ### Including mmenu.js and mmenu.css Source: https://mmenujs.com/tutorials/off-canvas Demonstrates where to include the mmenu.js and mmenu.css files in the HTML structure. ```html ... ... ``` -------------------------------- ### Example: Append a counter to listitems Source: https://mmenujs.com/docs/addons/counters.html A simple example demonstrating how to initialize mmenu, which will append a counter to list items with submenus. ```javascript document.addEventListener( "DOMContentLoaded", () => { new Mmenu( "#menu" ); } ); ``` -------------------------------- ### Include mmenu JS and CSS files Source: https://mmenujs.com/mmenu-light/tutorial.html Including the mmenu light plugin's CSS in the head and JS before the closing body tag. ```html ... ... ``` -------------------------------- ### Menu markup Source: https://mmenujs.com/mmenu-light/tutorial.html HTML structure for the mmenu light plugin, including a basic navigation with a submenu. ```html
...
``` -------------------------------- ### Overriding default configuration options Source: https://mmenujs.com/docs/core/configuration.html Example of how to override default configuration options when initializing mmenujs. ```javascript ``` -------------------------------- ### Basic HTML structure with mmenu.js Source: https://mmenujs.com/mburger/tutorial.html This snippet shows the basic HTML structure for a webpage, including the necessary mmenu.js plugin and inline script for initialization. ```html My webpage

Page title

Some content.

``` -------------------------------- ### Basic Initialization Source: https://mmenujs.com/mmenu-light/docs.html This script initializes the mmenu light plugin and its navigation and offcanvas add-ons. ```javascript document.addEventListener( "DOMContentLoaded", () => { const menu = new MmenuLight( document.querySelector( "#menu" ), "(max-width: 600px)" ); const navigator = menu.navigation({ // options }); const drawer = menu.offcanvas({ // options }); } ); ``` -------------------------------- ### Activate navigation add-on Source: https://mmenujs.com/mmenu-light/tutorial.html JavaScript code to activate the navigation add-on for mmenu light. ```javascript const navigator = menu.navigation({ // options }); ``` -------------------------------- ### Scroll Bug Fix Initialization Source: https://mmenujs.com/docs/core/scroll-bug-fix.html Example of how to initialize mmenu with the scrollBugFix add-on, showing options and configuration. ```javascript ``` -------------------------------- ### Basic HTML structure for the page Source: https://mmenujs.com/tutorials/off-canvas Initial HTML markup for a page, including header and content divs. ```html My webpage

This is a demo.

Click the menu icon to open the menu.

``` -------------------------------- ### Basic initialization Source: https://mmenujs.com/mmenu-light This script initializes the mmenu light plugin, sets up navigation and off-canvas drawer, and adds a click listener to a hamburger icon to open the menu. ```html ``` -------------------------------- ### Hook into methods using the 'hooks' option Source: https://mmenujs.com/docs/core/api.html Example of using the 'hooks' option during initialization to bind a function to an API method. ```javascript document.addEventListener( "DOMContentLoaded", () => { new Mmenu( "#menu", { hooks: { "openPanel:before": ( panel ) => { console.log( "Started opening pane: " + panel.id ); } } }); } ); ``` -------------------------------- ### Basic Section Indexer Setup Source: https://mmenujs.com/docs/addons/section-indexer.html Appends a section indexer to the menu using the sectionIndexer options and configuration. ```javascript document.addEventListener( "DOMContentLoaded", () => { new Mmenu( "#menu", { sectionIndexer: { // section indexer options } }, { sectionIndexer: { // section indexer configuration } }); } ); ``` -------------------------------- ### Activate offcanvas add-on Source: https://mmenujs.com/mmenu-light/tutorial.html JavaScript code to activate the offcanvas add-on for mmenu light. ```javascript const drawer = menu.offcanvas({ // options }); ``` -------------------------------- ### Basic CSS tips Source: https://mmenujs.com/support.html Set a background color on the body. ```html ``` -------------------------------- ### Dynamic Content Example Source: https://mmenujs.com/tutorials/dynamic-content.html An HTML page demonstrating how to add new menu items and submenus to an mmenujs instance using JavaScript. ```html My webpage

This is a demo.
Add a new menu item
Add a new submenu

``` -------------------------------- ### HTML Before firing mmenu Source: https://mmenujs.com/tutorials/off-canvas The structure of the HTML body before the mmenu.js plugin is initialized. ```html
``` -------------------------------- ### Overriding CSS variables Source: https://mmenujs.com/docs/core/styling.html You can override default CSS variables to customize the menu's appearance. This example shows how to change the list item size. ```css ``` -------------------------------- ### Basic Initialization Source: https://mmenujs.com/docs/core/options.html This snippet shows the basic initialization of the mmenu.js plugin. ```html ``` -------------------------------- ### Hook into methods using the API 'bind' method Source: https://mmenujs.com/docs/core/api.html Example of using the API's bind method to attach a function to an API method after initialization. ```javascript document.addEventListener( "DOMContentLoaded", () => { const menu = new Mmenu( "#menu" ); const api = menu.API; api.bind( "openPanel:before", ( panel ) => { console.log( "Started opening panel: " + panel.id ); } ); } ); ``` -------------------------------- ### Sidebar with Collapsed and Expanded States Source: https://mmenujs.com/docs/addons/sidebar.html Example of initializing the mmenu.js sidebar add-on with specific collapsed and expanded states based on media queries. ```html ``` -------------------------------- ### Basic Initialization with Searchfield Options Source: https://mmenujs.com/docs/addons/searchfield.html This snippet shows how to initialize mmenu with searchfield options and configuration. ```javascript document.addEventListener( "DOMContentLoaded", () => { new Mmenu( "#menu", { searchfield: { // searchfield options } }, { searchfield: { // searchfield configuration } }); } ); ``` -------------------------------- ### Basic Sidebar Initialization Source: https://mmenujs.com/docs/addons/sidebar.html Initializes the mmenu.js with the sidebar add-on, showing where sidebar options and configurations would go. ```html ```