Adds .too-small class to menu containers based on their default styled widths


Keywords
responsive, DOM, menus
License
MIT
Install
npm install squishMenu@2.2.5

Documentation

squishMenu

squishMenu.js automagically squishes menus the minute they get too big for their boots

Actually it doesn't.

It just makes it easier for you to squish the menu when you need to by alerting you to the fact the container is .too-small. What you decide to do with that information is up to you.

The script measures the width of each menu item to create an itemsWidth value and compares it to the containerWidth. I've included some basic styles to illustrate the point.

User Manual

Target your menu container element with its ID and set a toggle classname

squishMenu({
  containerId: "menu-1",
  toggleClass: "menu-1-toggle",
});

The script looks for and measures the combined width of all .list-item elements inside the targetted container. This is a naming convention from WordPress that is as good as any.

It's important that the menu-items aren't stretched more than their minimum possible length in their default state. If they're usable measurement to compare to the container. We add a .squish-ready class once the measurements are taken so you can sprinkle extra magic then.

Optional Params

threshold

There are paramaters to set a minimum width for the function to run. Set in pixels, when the container is below that width it will always be .too-small and .below-threshold

itemClass

You can overide the default menu item class. The default is .menu-item

degug

debug:true will print the targeted container element and calculated lengths to the console.

squishMenu({
    containerId: "menu-2",
    itemClass: "item",
    toggleClass: "menu-2-toggle",
    threshold: 700,
    debug: true
});

Additional toggles

Because the menu toggle is defined by a class name, it's possible to create additional, external menu toggles.

Params

Param Type Default Required Description
containerId string undefined required The outer element of the menu that you want measurements to be based on
toggleClass string undefined optional A classname to attach menu toggle functionality to.
itemClass string menu-item optional The classname of the individual menu items to be measured.
threshold number undefined optional A lower threshold for the function to run. Set in pixels, when the container is below that width it will always be .too-small and .below-threshold.
debug bool false optional If true squishMenu will log the container DOM node and measurements to the console.