Java Navigation Frames
Last month we touched on frame navigation and how to refresh multiple frames with a single mouse click. This month we're looking at one of the most common uses for such a technique: a classic left-frame navigation panel. Imagine a product catalogue Web site for a computer hardware company, with several layers of information. The first layer of navigation might have divisions like computers, printers and modems. The next layer could divide computers into servers, desktops and laptops, with a third layer containing the actual model descriptions. A similar tree structure might be repeated for the other main divisions of the catalogue. It's easy to see that a few top-level categories could lead into hundreds, if not thousands, of individual pages.
So how do you design a left-frame navigation system to look after that lot? First and most obvious is to have a series of static pages, each linked to another, so there would be a main menu page, a computers menu page, a servers menu page and so on. While this is probably the easiest scheme to visualise, it will also be the most complex to maintain.
<DIV ID="Out0"> <a ID="Out1" CLASS="Outline" STYLE="cursor: hand">Item 1</a><BR> <DIV ID="Out1display" STYLE="display:None"> <a ID="Out2" CLASS="Outline" STYLE="cursor: hand">Item 1.1</a><BR> <DIV ID="Out2display" STYLE="display:None"> <a href="dummy.html">Item 1.1.1</a><BR> <a href="dummy.html">Item 1.1.2</a><BR> </DIV> <a href="dummy.html">Item 1.2</a><BR> </DIV> <a href="dummy.html">Item 2</a><BR> </DIV>
The code to actually process the menu is extremely simple, something along the lines of:
arg = request.querystring('arg') if arg = '' then arg = '0' end if for menuitem = 0 to ubound(menu) level = len(arg) disp = menu(menuitem,1) do while level > 0 if (left(menu(menuitem,0),level) = left(arg,level)) AND (mid(menu(menuitem,0),level+2,1) = '0')then 'we're in this level if menu(menuitem,2) = '0' then 'no specified document if mid(menu(menuitem,0),3,1) = '0' and left(arg+'0000',3) = left(menu(menuitem,0),3) then 'toggle open sections response.write '<a href=''/left.asp?arg=0'' target=''leftframe''>'&disp&'</a><br>' else response.write '<a href=''/left.asp?arg='&left(menu (menuitem,0),instr(2,menu(menuitem,0),'0',1)-1)&''' target=''leftframe''>'&disp&'</a><br>' end if else 'a page in the main frame response.write '<a href='''&menu(menuitem,2)&''' target=''mainframe''>'&disp&'</a><br>' end if exit do end if level = level - 1 loop next
This all looks fairly boring, so maybe some graphics could cheer it up. Well, that's easy enough. Let's just examine the description field, and if the file is in GIF format then load it as a graphic rather than displaying it as text. So replace the existing line which sets 'disp' with the following code:
if right(menu(jj,1),4) = '.gif' then disp = '<img src='''&menu(jj,1)&''' border=0>' else disp = menu(jj,1) end if
All articles Copyright CST Group Limited © 1997-2021
…provided us with extremely dedicated support over the years, Very responsive & knowledgeable.
— Khyati Patel, Malibu-Kahlúa International