Friday, November 18, 2011

Multilevel clickable menu (tablet enabled)

My first component like project in jQuery. Why? In our internal application we use YUI menu and it works fine, but it's driven by mouse ins and outs. Normally that would be OK (and most of the time it is OK) but if you want to access such menu from tablets where you don't have a mouse connected (which renders mouse hovering useless) you've got a problem. There several solutions to it one which involves writing a mobile version of our application or rewriting the menu itself. Writing a mobile version was out of the question for us as we didn't have time and resources so the quickest solution was to replace the menu with one supporting mouse clicks (on tables taps).
To our surprise between the hundreds of html menus of all styles, shapes, all singing all dancing we could not find a single usable menu driven by clicks. And then I thought - right, if there's really nothing out there lets build something.
So I spent some time trying to stitch something together with mostly no luck but slowly learning how to display and hide and style a menu. My original idea was to render the menu from within jQuery and use HTML only to define the menu structure but later I had to change my mind as rendering in jQuery seemed to be slow and hard to debug. My final option was to delegate bulk of the job to HTML/CSS and use only small jQuery script to animate menu clicks.
If you want to see the menu just visit my github page https://github.com/defectus/mainmenu.js.
Thinks to note:
  • Menu doesn't display properly in IE6. It's usable but visually just not right.
  • Menu looks somehow slow in IE. But what doesn't look slow in IE though.
  • Menu supports on three levels. Any subsequent level needs to be handled individually.
Hope that helps somebody.

No comments: