A very visual menu, looking like a puzzle to show all items in a minimal space.
Tetris menu works with two-level menus, i.e. menus with items sorted in categories, but no subcategories. It allocates categories and items on a grid, recalling the famous puzzle video game Tetris.
- All menu items are visible, so user don't have to move the mouse to get menu items.
- Items are displayed in categories ; each category is depicted with a connected, coloured area.
- Categories are nested within each other, like puzzle pieces, to optimize space.
Get the demo html page, save it as a html file and open it with your favorite browser.
Include Tetris plugin after the jQuery library:
<script src="/path/to/jquery.tetris.js"></script>Then describe your menu in a JSON object (let's call that object menu),
define Tetris global parameters in a hashtable (let's call it params),
choose an html element to display the menu in (assume its jQuery selector is $("div#menu") ),
and call $("div#menu").tetris(menu, params)
Note that you can display several tetris menus on a single web page, with different menus and parameters: they won't conflict.
All parameters are optional. But a category title or an item may not be displayed if there is nothing to display.
id or catid: category id
color, bdcolor or border-color: if not defined, it is read in a default color set (see parameter defcolors in global parameters)
bgcolor or background-color: if not defined, it is defined by enlightening the category's border-color (see parameter colorfactor in global parameters)
name or catname: category title that will be displayed
logo or catlogo: category title logo
desc or catdesc: category title tooltip
(if neither name nor logo are defined, category title is not displayed)
name or appname: item name that will be displayed
logo or applogo: item logo
desc or appdesc: item tooltip
href or url or uri or appuri: item link target
(if neither name nor logo are defined, item is not displayed)
All parameters are optional since they have default values. For pixel-length parameters, just set the number of pixel, don't suffix it with the unit "px".
width: columns' width (default value: 100px)
height: rows' height (default value: 100px)
side: if width and height are equal, you can define side instead
logowidth: logos' width (default value: 40px)
logoheight: logos' height (default value: 40px)
logoside: if logowidth and logoheight are equal, you can define logoside instead
margin: category area's margin (default value 2px)
padding: category area's padding (default value 4px)
border or border-width: category area's border-width (default value 2px)
logodir: if all categories and item logos are in a common directory or prefixed by the same url, you can define it in this parameter
hrtitles: if you want category titles to be highlighted with <hr/> above and below, set this parameter to true
targetblank: if you want html links to be opened in a new tab, set this parameter to true
colorfactor: if you don't define a category's background-color, it will be defined by enlightening the category's border-color colorfactor times (default value is 5)
defcolors: if you don't define a category's border-color, it will be read in this array (default value is a six-color array ['#48C', '#F80', '#8C4', '#22F', '#F44', '#EA0'])