MenuItems for the first Menu List<MenuItem> menu1Items = new ArrayList<MenuItem>(); menu1Items.add(new MenuItem(new Model<String>("Visible menu item 1.1"), new LinkToPage(Page1.class))); menu1Items.add(new MenuItem(new Model<String>("Visible but disabled menu item 1.2"), new LinkToPage(Page2.class)).setEnabled(false)); menu1Items.add(new MenuItem(new Model<String>("Invisible menu item 1.3"), new LinkToPage(Page3.class)).setVisible(false)); menu1Items.add(new MenuItem(new Model<String>("visible menu item 1.4"), new LinkToPage(Page4.class))); menus.add(new Menu(new Model<String>("First menu"), menu1Items)); // The MenuItems for the second Menu List<MenuItem> menu2Items = new ArrayList<MenuItem>(); menu2Items.add(new MenuItem(new Model<String>("Visible menu item 2.1"), "http://www.wicketframework.org")); menu2Items.add(new MenuItem(new Model<String>("Visible but disabled menu item 2.2"), new LinkToPage(Page1.class)).setEnabled(false)); menu2Items.add(new MenuItem(new Model<String>("Invisible menu item 2.3"), new LinkToPage(null, Page2.class)).setVisible(false)); menu2Items.add(new MenuItem(new Model<String>("visible menu item 2.4"), new LinkToPage(Page3.class))); menus.add(new Menu(new Model<String>("Second menu"), menu2Items)); add(new MenuBarPanel("menuBar", menus); ... private class LinkToPage implements IPageLink { private Class<? extends Page> pageClass; public LinkToPage(Class<? extends Page> pageClass) { this.pageClass = pageClass; } public Page getPage() { return pageClass.newInstance(); } The HTML markup for this example looks like this:
<div wicket:id="menuBar">[[The menu bar goes here]]</div>
You need the following css code to get this example to work with IE:
.menubar h1 { text-align: center; padding: 0 0 0.25em 0; margin: 0; z-index: 999; } .menubar ul { list-style: none; padding: 0; margin: 0; z-index: 999; } #nav a { font-weight: bold; color: rgb(15,15,15); text-align: left; text-decoration: none; text-align: left; } #nav li li a { font-weight: bold; text-align: left; display: block; color: rgb(41,41,41); padding : 0.2em 10px; white-space : nowrap; z-index: 999; } #nav li li.disabled { font-weight: bold; text-align: left; display: block; padding : 0.2em 10px; white-space : nowrap; z-index: 999; } #nav li li a:hover { padding: 0.2em 5px; border: 1px solid rgb(34,69,104); border-width: 0 5px; text-align: left; } .menubar li { float: left; position: relative; text-align: center; cursor: default; background-color: rgb(152,186,225); border: 1px solid rgb(34,69,104); border-width: 1px 0; text-align: left; z-index: 999; } .menubar li#singleMenu { padding-left: 1em; padding-right: 1em; border-left-width: 2px; border-right-width: 2px; margin-right: 2px; white-space : nowrap; } .menubar li#firstMenu { padding-left: 1em; padding-right: 1em; border-left-width: 2px; border-right-width: 2px; margin-right: 2px; white-space : nowrap; } .menubar li#middleMenu { padding-left: 1em; padding-right: 1em; border-left-width: 2px; border-right-width: 2px; margin-right: 2px; white-space : nowrap; } .menubar li#lastMenu { padding-left: 1em; padding-right: 1em; border-left-width: 2px; border-right-width: 2px; white-space : nowrap; } .menubar li ul { display: none; position: absolute; top: 100%; left: 0; font-weight: normal; background-color: rgb(152,186,225); padding: 0.5em 0; border-right: ridge 1px rgb(125,125,125); border-left: ridge 1px rgb(125,125,125); border-bottom: ridge 1px rgb(125,125,125); text-align: left; z-index:99999; } .menubar li>ul { top: auto; left: auto; } .menubar li li { display: block; float: none; background-color: rgb(152,186,225); border: 0; color: rgb(41,41,41); } .menubar li li.disabled { display: block; float: none; background-color: rgb(152,186,225); border: 0; color: rgb(123,123,123); } .menubar li:hover ul, li.over ul { display: block; } .menubar hr { display: none; } .menubar p { clear: left; background: url(images/remora.gif) center left no-repeat; padding: 1em 1em 0 1em; margin: 0; } .menubar p.image { float: right; font-size: 0.8em; text-align: center; color: #7d6340; padding: 1.25em 1.25em 0.25em 0.25em; } .menubar p.image img { display: block; border: 1px solid #7d6340; }
@author Stefan Lindner (lindner@visionet.de)