A
MenuBarPanel consits of several
Menus where each
Menu consist of
IMenuLinks.
A
MenuBarPanel can be constructed e.g. like this:
List<Menu> menus = new ArrayList<Menu>();
// The 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;
}