Skip to main content

Pie and awesome menus

Last year I’ve been experiment with coding a ‘pie menu’. Pie menus have some UX advantages and disadvantages, but mainly it’s cool. If you’d like to read more about the UX perspective, enter this link.

A year later, I’ve tried to see if what I coded works on iPhone 4. Surprisingly it worked quite smooth. So I decided to improve the code base, that had zero accessibility and relied on inline styling.

This time I decided to separate completely the styling, so it be made only with CSS. Something that allowed me to take it to other directions from ‘Pie menus’.

Also, I decided to release it because it would be useless if it only sits on my hard drive and I hope people make cool stuff with it. I wouldn’t call the code production ready, but for small experimental stuff, it should be fine.

Demos

Links: demo 1, demo 2, demo 3.

Pie menu demo:

Dropdown menu demo:

Untitled menu demo:

Using the code

The structure of a button in the DOM:

<div class="button {{is-has-menu}} {{is-menu-items-length-#}} {{is-open / is-close}}" aria-pressed="true">
  <div class="button-container">
    <button aria-labelledby="button-label-uid-####" class="button-button" data-title="{{title}}"></button>
    <span id="button-label-uid-####" aria-hidden="true" class="button-title">{{title}}</span>
  </div>
  <ul aria-labelledby="button-label-uid-####" class="button-menu {{is-menu-items-length-#}}" role="menu">
    <li role="menuitem" class="button-menu-item">{{sub menu button}}</li>
  </ul>
</div>

As you can see, I’ve tried to give common states a class. All state classes start with is prefix. In addition every DOM element in the button has its unique class name.

As you can see, “CSS super specificity” can happen easily, but I think it pays a small price comparing to coupling the javascript code with styling.

Example of using it:

new Btn("Menu") // creating `Btn` instance with the title "Menu"
  .addClass("skin-menu") // adding CSS class to `.button-container` for styling
  .append(
    // append child to "Menu"
    new Btn("Button") // creating `Btn` instance with the title "Button"
      .addClass("skin-link") // adding CSS class to `.button-container` for styling
      .on("click", function () {}), // adding `onclick` DOM event to "Button"
  )
  .appendTo("#wrapper"); // adding "Menu", to `#wrapper`

Important note: It may seems like jQuery style syntax, but the only connection is that both concatenate.

Right now the documentation is very poor, but I hope the demo files will be clear enough until I make a better documentation.

Browser supports

Chrome, Firefox, Safari, Android 4+, IE 10+.

  • or any browser that supports classList
  • of course if you want to use animation, at least CSS Transitions support is necessary

Tested on: Chrome, Firefox, IE 10+, Safari 6.1, iOS 6.1+, Android 4+ and IE Mobile 10.

It works smooth on Chrome, iOS Safari & IE (desktop). On IE, there is a bug with requestAnimationFrame, so I’ve cancelled the use of it specific on IE.

It’s buggy on Safari, Firefox & IE Mobile. I think it’s related to heavy use of CSS Transforms.

Also it’s laggy on cheap Android devices, IE Mobile (Nokia Lumia) & Opera Presto.

Roadmap

A bit bold word to such a tiny project. But…:

  1. improve documentation or shall I say making one ;)
  2. improve and adding functions to the interface
  3. improve performance
  4. improve accessibility (example: links will be converted from <button> to <a>)
  5. improve code quality
  6. changing CSS prefix, and be able to change it from a function
  7. adding the ability to reuse elements from the DOM instead of creating them

Of course, if you have ideas, I be glad to hear.

Fork it!

Do something cool! I would be happy to see what you’ll make. And of course, here the link to the project on Github