Directory

Dock

A menu with fisheye / zoom functionality

View larger

Close

View larger

Close

This is a Add-On for creating a simple menu that has a desktop like fish eye effect.

Future plans

• Item separators
• Item bounce for notifying about changes (when Vaadin 7.1 comes out)
• Ability to hide/show dock when area is hovered upon

Sample code

CssLayout layout = new CssLayout();

Dock dock = new Dock();
dock.addStyleName("dock_bottom");
dock.setSize(50);
dock.setSizeMax(150);
dock.setAlignment(Alignment.BOTTOM);
dock.setLabelPosition(LabelPosition.TOP_CENTER);
dock.addClickListener(this);

DockItem item = new DockItem("Logout", new ThemeResource("logout.png"));

dock.addItem(item);

layout.addComponent(dock);

.dock_bottom {
	position: fixed;
	bottom: 0;
        display: block;
	left: 50%;
	right: 50%;
	margin-left: -25px;
}

Links

• Author Homepage
• Online Demo
• Discussion Forum

Compatibility