Menu setup and maintenance

Two Popup menu's are offered.

Version 1 from Dec 2007 is a traditional popup menu allowing only 1 level of menus
Version 2 from March 2008 allows the navigation of submenus in a tree format.

Setup and maintenance of menu's is done in the /files/home/webpage_layout.asp file.

Both menu styles can be used simultaneously.

Version 1: Simple menu

0. Edit webpage_layout.asp.

1. In the Public Function DrawWebPage() function initiate each menu's body to be drawn at the top of the HTML page

sOut = sOut & "<body>" & vbcrlf & "" IF IFrameView <> True Then 'draw menus if not viewing from iframe
sout = sout & drawPopupMenuBody("ministries", "mnupopup1")
sout = sout & DrawPopupMenuBody("RSS","RSS1") & vbcrlf
end if

2. In the public function DrawWebPageMasthead() function instationate the menu where it should appear:

sOut = sOut & "<div id=""mnufunctions"" class=""mnufunctions"">" sOut = sOut & drawPopupMenuLink("Ministries", "ministries", "mnupopup1") & " | ..." & "</div>"

3. In Function DrawPopupMenuLink() function, edit the case statment to respond to the menu name:

Select case lcase(linkset)

case "ministries"
DrawPopupMenuBody = "<div id=""" & id & """ class=""mnupopup"">" &_
"<a href="""& LocalURLRoot & "administration"">Administration</a>" &_
"<a href="""& LocalURLRoot & "home/support-services"">Support Services</a>" &_
"</div>"

4. Once menu's are built, repeat step 3. to manage links in each menu.

To change the visual style of the menu - edit /files/home/configuration/css/css.css .mnupopup{ } classes

Version 2: More advanced menu from brainjar.com

0. Edit webpage_layout.asp.

1. In the Public Function DrawWebPage() function initiate each menu's body to be drawn at the top of the HTML page

sOut = sOut & "<body>" & vbcrlf & "" IF IFrameView <> True Then 'draw menus if not viewing from iframe
sout = sout & drawPopupMenuBody("brainjar", "brainjar")
sout = sout & DrawPopupMenuBody("RSS","RSS1") & vbcrlf
end if

2. In the public function DrawWebPageMasthead() function instationate the menu where it should appear:

'BRAINJAR menu
sout = sout & "<div class=""menuBar"" style=""width:80%;"">"
sout = sout & "<a class=""menuButton"" href=""/test"" onmouseover=""buttonMouseover(event, 'fileMenu');""> File</a>"
sout = sout & "</div>"

optionally configure a menu title to NOT be a clickable link like:

'ignore onclick event for link name sout = sout & "<a class=""menuButton""href=""/test"" onclick=""return buttonClick(event, 'fileMenu');""onmouseover=""buttonMouseover(event, 'fileMenu');""> File</a>"

3. In Function DrawPopupMenuLink() function, edit the case statment to respond to the menu name:

Select case lcase(linkset)

case "brainjar"
DrawPopupMenuBody = "<div id=""fileMenu"" class=""menu""" &_
"onmouseover=""menuMouseover(event)"">" &_
"<a class=""menuItem"" href=""blank.html"">File Menu Item 1</a><a class=""menuItem"" href="""" onclick=""return false;"" onmouseover=""menuItemMouseover(event, 'fileMenu2');"">" &_
"<span class=""menuItemText"">File Menu Item 2</span><span class=""menuItemArrow"">▶</span></a>" &_
"<a class=""menuItem"" href=""blank.html"">File Menu Item 3</a>" &_
"<a class=""menuItem"" href=""blank.html"">File Menu Item 4</a>" &_
"<a class=""menuItem"" href=""blank.html"">File Menu Item 5</a>" &_
"<div class=""menuItemSep"">Sect Name</div>" &_
"</div>" &_
"<div id=""fileMenu2"" class=""menu"">" &_
"<a class=""menuItem"" href=""blank.html"">File Menu 2 Item 1</a>" &_
"<a class=""menuItem"" href=""blank.html"">File Menu 2 Item 2</a>" &_
"</div>"

notice how File Menu Item 2 calls fileMenu2 from the onmouseover event.

notice the last div ""fileMenu2"" and how it holds the nested menu. Nesting can continue to n-levels if desired.

notice the last item in the root menu class=""menuItemSep"" - this draws a seperation line that can OPTIONALLY be populated witha name (forming a sperating box), in this case "Sect Name"

4. Once menu's are built, repeat step 3. to manage links in each menu.

To change the visual style of the menu - edit /files/home/configuration/css/css.css div.menuBar{ } classes controlling the brainjar style menu's.

5. IF you wish to require a click to trigger the menu (instead of just a mouseover) edit /!nclude/tools/js/mnupopup.js file and comment out the brainjar '[MODIFIED]' through [END MODIFIED] sections of code.