Putting everything together, you get a BEE Portal Action Model site. Below is a working example:
// Level 2
MenuOpen[2] = '\
<DIV id=@Address_Menu onmouseover="MenuOn(\\'@Address\\',1)" onmouseout="MenuOff(\\'@Address\\',1)"\
style="Z-INDEX: 1; LEFT: @ItemAttributepx; WIDTH: 120px; POSITION: absolute; TOP: 20px; HEIGHT: 85px">\
<TABLE cellSpacing=0 cellPadding=0 width="100%" align=center border=0><TR><TD>\
';
MenuClose[2] = '\
</TABLE>\
</DIV>\
';
ItemWhole[2] = '\
<TR><TD height=22 bgcolor=#ccccff> \
<A class=menuitem title="@Description" href="${pt%Subpath}@Page">@Name</A>\
</TD></TR>\
@ItemAttribute\
';
function ItemAttribute(menu, lvl, pos, ppos, tp, job)
{
switch (lvl) {
case 2:
switch (tp) {
case 'MenuOpen':
// Positioning
return 2 + ppos * 100 - 100;
}
}
return '';
}
function MenuOn(menu, lvl, page, param, prnt)
{
if (document.all[menu + "_Menu"]) {
document.all[menu + "_Menu"].style.visibility = "";
}
}
function MenuOff(menu, lvl, page, param, prnt)
{
if (document.all[menu + "_Menu"]) {
document.all[menu + "_Menu"].style.visibility = "hidden";
}
}
function goItem(itm)
{
do_DirectItem(itm);
}
</script>
<table width=100% bgcolor=#ccccff cellspacing=0 cellpadding=0>
<tr valign="top">
<script language="JavaScript">
buildMenuItemsAtLevel(1);
MenuOn('', 1);
</script>
<td>
<table width=100%>
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
<table width=100%>
<tr valign="top">
<td width=25%>
<h3>
${pt%PageInfo:Name}<br>
<font size=3>${pt%PageInfo:Description}</font>
</h3>
<form action="${SiteURL}search.htm">
<input class=field type=text name=key size=12>
<input class=button type=submit value=Search>
</form>
<form method=post action="${SiteURL}index.htm">
<beeaccess>
Logged in as ${sys%auth:loginname}<br>
<input class="button" type=submit name=Submit value=Logout>
<beeelse>
Username:<input class="field" type=text name=username size=10><br>
Password:<input class="field" type=password name=password size=10><br>
<input class="button" type=submit name=Submit value=Login>
</beeaccess>
</form>
<beeif if="'{pt%AuthStatus}'">
${pt%AuthMessage} (Error ${pt%AuthStatus})
</beeif>
<br>
<beeaccess "admin">
<a class="pagebaritem" href="javascript:showMenuEditPage()"
title="Add, Modify or Delete Menu">Menu Edit</a><br>
<a class="pagebaritem" href="javascript:showOrganizer()"
title="Add, Copy or Delete Pages or Files">Organizer</a><br>
<a class="pagebaritem" target="${MainTarget}"
href="${SiteURL}admin/"
title="Administer the web site">Admin Site</a><br>
</beeaccess>
</td>
<td width=75% bgcolor=#ffffcc>
<script language="bee">
access (lt {pt%PageInfo:AccessLevel}) {
display '<span class="error">Please login first</span> ';
} else {
switch ('{pt%PP}') {
case '{pt%Subpath}/menuedit.htm':
include "portal/menuedit.htm";
break;
case '{pt%Subpath}/organizer.htm':
include "portal/organizer.htm";
break;
case '{pt%Subpath}/search.htm':
include "portal/search.htm";
break;
default:
text {pt%SP}&{pt%PageHeadingName}
leadpath="{pt%Subpath}"
default="Under construction"
editprompt="Please click this sentence 3 times to enter the Sub-heading.";
}
}
</script>
</td>
</tr>
<tr>
<td colspan=2 width=100%>
<hr>
<table width=100%>
<tr>
<td width=50%>
${pt%PathMenu}
</td>
<td width=50% align=right>
${pt%PageBar}
</td>
</tr>
</table>
</td>
</tr>
</table>
<script language="JavaScript">
buildMenuItemsAtLevel(2);
MenuOff('', 2);
</script>
</body>
</html>
Please note that this example is aiming at illustrating the idea and therefore is too much simplified to look attractive. More artwork design is required if you want your site to look more professional.