squishMenu.js

Automagically squishes menus the minute they get too big for their boots

containerWidth: 
itemsWidth: 

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.

You can also have a second toggle button...

User Manual

  1. Target your menu container element ID and toggle class name
    squishMenu(
      { 
        containerId: "menu-1", 
        toggleClass: ".menu-1-toggle" 
      }
    );
    
  2. 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.
  3. It's important that the menu-items are display:inline-block; in their default state. Anything fancypants like flexbox wont give you a usable measurement to compare to the container.