The fisheye bar shows an image whose size is inversely proportional to the distance between the cursor and the image's anchored position.
The fisheye menu images could enlarge with its edge anchored at the top, center or bottom (for vertical orientation: left, center or right).
A fisheye menu bar could be placed in either a vertical or horizontal orientation.

<div height="450px" apply="demo.menu.fisheye_menu.FisheyeMenuController">
	<style>
		.fisheyeDemo { 
			margin : 5px 40px; 
			position : relative;
		}
	</style>
	<fisheyebar id="fisheyebar" sclass="fisheyeDemo" 
		itemWidth="80" itemHeight="80" itemMaxHeight="160" itemMaxWidth="160">
		<fisheye label="Folder" image="/widgets/menu/fisheye_menu/img/FolderABlue-128x128.png" />
		<fisheye label="Reading Glasses" image="/widgets/menu/fisheye_menu/img/ReadingGlass-128x128.png" />
		<fisheye label="Project" image="/widgets/menu/fisheye_menu/img/Briefcase-128x128.png" />
		<fisheye label="Email" image="/widgets/menu/fisheye_menu/img/MailboxFlag-128x128.png" />
		<fisheye label="Globe" image="/widgets/menu/fisheye_menu/img/Globe-128x128.png" />
		<fisheye label="Spyglass" image="/widgets/menu/fisheye_menu/img/Spyglass-128x128.png" />
	</fisheyebar>
</div>

<vlayout apply="demo.menu.fisheye_menu.FisheyeMenuConfigController">
	Orientation:
	<radiogroup id="orientation" orient="vertical"/>
	<separator />
	Attach edge:
	<radiogroup id="attachEdge" orient="vertical"/>
</vlayout>

package demo.menu.fisheye_menu;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zk.ui.util.Clients;
import org.zkoss.zkex.zul.Fisheye;
import org.zkoss.zkex.zul.Fisheyebar;

public class FisheyeMenuController extends SelectorComposer<Component> {
	@Wire
	Fisheyebar fisheyebar;

	@Listen("onClick = fisheye")
	public void menuItemClicked(Event event) {
		Clients.showNotification(
				"Menuitem '" + ((Fisheye) event.getTarget()).getLabel() + "' clicked.", 
				"info", null, null, 1000);
	}
}

package demo.menu.fisheye_menu;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zkex.zul.Fisheyebar;
import org.zkoss.zul.Radio;
import org.zkoss.zul.Radiogroup;

public class FisheyeMenuConfigController extends SelectorComposer<Component> {
	
	private static final String HORIZONTAL = "horizontal";
	private static final String VERTICAL = "vertical";

	@Wire
	private Radiogroup orientation;
	
	@Wire
	private Radiogroup attachEdge;
	
	@Wire
	Fisheyebar fisheyebar;
	
	@Override
	public void doAfterCompose(Component comp) throws Exception {
		super.doAfterCompose(comp);
		orientation.appendChild(new Radio(HORIZONTAL));
		orientation.appendChild(new Radio(VERTICAL));
		orientation.setSelectedItem((Radio)orientation.getChildren().get(0));
		updateView();
	}
	
	
	@Listen("onCheck = #orientation") 
	public void orientationChanged() {
		updateView();
	}

	@Listen("onCheck = #attachEdge") 
	public void attachEdgeChanged() {
		updateAttachEdge();
	}

	private void updateView() {
		fisheyebar.setOrient((String)orientation.getSelectedItem().getLabel());
		int selectedIndex = attachEdge.getSelectedIndex();
		attachEdge.getChildren().clear();
		if(isHorizontal()) {
			attachEdge.appendChild(new Radio("top"));
			attachEdge.appendChild(new Radio("center"));
			attachEdge.appendChild(new Radio("bottom"));
		} else {
			attachEdge.appendChild(new Radio("left"));
			attachEdge.appendChild(new Radio("center"));
			attachEdge.appendChild(new Radio("right"));
		}
		attachEdge.setSelectedItem((Radio)attachEdge.getChildren().get(0));
		updateAttachEdge();
	}

	private void updateAttachEdge() {
		String edge = (String)attachEdge.getSelectedItem().getLabel();
		if(isHorizontal()) {
			if(edge.equals("top")) {
				fisheyebar.setStyle("");
			} else if(edge.equals("center")) {
				fisheyebar.setStyle("top: 200px");
			} if(edge.equals("bottom")) {
				fisheyebar.setStyle("top: 370px");
			}
		} else {
			if(edge.equals("left")) {
				fisheyebar.setStyle("");
			} else if(edge.equals("center")) {
				fisheyebar.setStyle("left: 200px");
			} if(edge.equals("right")) {
				fisheyebar.setStyle("left: 450px");
			}
		}
		fisheyebar.setAttachEdge(edge);
	}
	
	private boolean isHorizontal() {
		return HORIZONTAL.equals(orientation.getSelectedItem().getLabel());
	}
}