[Top]
More advice for the full screen mode.
   
Sivut toimivat riittävän hyvin MS IE 4.0+, Opera 5.x+, Netscape 6.0+/ vast. Mozilla ja Konqueror 3.x selaimilla. Yleisesti ottaen sivut toimivat parhaiten uusimmilla Opera selaimilla. Sivujen toimivuus vanhemmissa selaimissa on heikko, erityisesti Netscape 4.x kohdalla.

I list below all topic groups, which I have done according to subjects, which they handle. You can return to this topic group by using this menu and the link Table of topic groups on the top of the each page.
 
 
Search:
[Help]

Non-timered menus

As it has been obvious in my mind in the previous mentioned example "solution" which use timer functions has too much serious problems, which are related with the stability and closing of sub-menus. It is however possible to get rid of them. Following solutions work better:

  1. Menus have special closing links.

  2. Menus have hided closing links in necessary sides of the menus.

  3. Menus have closing link in the actual content of the page (in this solution dynamic menus should not be inside the actual content). The closing function should not have a timer because Opera 5.x-6.x works well only if the timer has not been used. Browsers might have small delay times before they close open menus. This is however quite harmless delay because browsers always close menus when the visitor moves his mouse.

In the previous list first and second spots are however unnecessary. For most browser the most reliable working system is the following:

A background box

Shadow boxes

If the purpose is that dynamic menus will be opened and closed automatic with onmouseover attributes they are the only possible ways, how menus work as reliable as possible in MS IE 5.x+ (Mac and Windows), Opera 5.x+ and Mozilla Gecko browsers. Especially my solution improve the performance of dynamic menus in Opera 5.x-6.x browsers if multi-level sub-menus have been used. I must however point out that menus work in all previous mentioned browsers as flawless as they can ever work. Also user of MS IE can be fully satisfied in my solution. In my mind (at least) three-level dynamic sub-menus work well if the menu system fulfil following requirements (my system fulfils all of them at least with some variations):

  1. All sub-menus are absolute stable in all circumstances. For example when the user is in some third-level menu the second-level menu, which works as the "parent menu" (the menu, which opens the next level menu) remains stable visible.

  2. Sub-menus will never close unexpected (all situations, when the menu will be closed, when the visitor is inside the menu block are unexpected situations; also situations where the visitor scroll menu items and the menu disappears is an unexpected situation).

  3. Sub-menus never will be close before the visitor has passed the whole menu block.

  4. The visited sub-menu will be closed when the visitor goes out of the whole menu block except situations, where the mouse is in a position, which opens a next level sub-menu.

  5. The parent menu is visible the whole time, when the visitor is in the last opened menu level.

  6. There are no situation, where a sub-menu could leave as "orphan" (for example a third-level menu is orphan in a situation, where the third-level menu is visible but the second-level parent menu is hidden).

  7. When the visitor has gone to any last level sub-menu he can go from that sub-menus to the same path back to the first-level main menu.

Special advances of my solution are following (many of them are impossible to solve with other kinds of solutions):

  1. In my solution is never serious problems, which timer delays might cause.

  2. Artificial spacer images are not needed at all.

  3. Special closing links are unnecessary.

  4. The quantity of event handler attributes can be minimized and onmouseout is not necessary needed at all in closing commands of sub-menus.

  5. Menus can be quite multi-level without remarkable problems. I have used four-level sub-menus and they have been worked as flawless as second-level sub-menus.

  6. This is extremely easy solution for Web-authors (authors must however know, which browsers support it).

  7. If the author leaves enough empty space around links (and/or menus have background boxes), the user of menus don't by accident close menus and fast closing menus feels quite comfortable to use.

The restrictions and disadvantes of this solution are following:

  1. The only remarkable restriction is that smooth "comfortable" delay times are not used. Users of Windows XP might have used them (personally I don't like slow and smoothly opening drop-down menus). Browsers must however work in the Internet in much more unstable environment that ordinary application under stable platform. It not reasonable to ask for a Web-page the same "comfort" as for example MS Word. Indeed delay times are more harmful for some browser than for some other browser. If author (like many author in fact do) don't care more or less impaired functionality in some browsers, timer functions can be used.

  2. Menus can't be designed so that when the visitor goes outside the last level sub-menu only the last level sub-menu disappears but previous level sub-menus remains always visible. In generally visitors don't want this kind behavior because if the last level menu would leave always previous level menus visible, the visitor should always especially close previous level menus. It would cause extra work for the visitor, which is in generally regarded as an unpleasant feature. In my system it is always the possibility to go back along the same path to the main menu but "slipping" from the path closes all opened sub-menus. Indeed as needed it is possible to avoid slipping by using background boxes.

  3. As a small disadvantage of my solution is the fact that the best possible solution for MS IE 4.x for Windows Web browser needs defining much shadow boxes. Shadow boxes have however some advances also for other browsers but doing them only because of MS IE for Windows is questionable. MS IE 4.x for Windows has become quite little used browser and the meaning of this disadvantage lessens day by day.

Browser-specific notes:

  1. If the structures of the dynamic menus are very heavy I have found that going from third-level menu to second-level menu MS IE 6.0 for Windows (concerns presumably also the 5.x series) might close menus unexpected if the whole content close the menu by the onmouseover or onmousemove attributes in situations. I found that I didn't have defined the z-index property for the base element of the dynamic menus and the main content. When I set the functionality improved but the problem didn't disappeared totally.

    I got that problem solved only by defining an active background box behind the entire menu. It is reasonable to set for the background box either the onmouseover or the onmousedown attribute because onmouseout attribute close menus when the visitor goes first out of the whole menu and then tries to return back to a sub-menu, which is inside the background box. If the background box has a background color there is no problems between the closing commands of the background box and the actual content. A transparent background box worked worse. In my tests onmousedown for the colored background box and onmouseover for the content worked ok. If the background box used onmouseover the content should have either onmousedown or onclick attributes. In problematic situations it is reasonable not to use at all closing menus through the actual content or closing menus trough the content has been designed so that it doesn't concern MS IE 6.0 for Windows. If sub-menus have shadow boxes closing through the content doesn't cause problems.

  2. MS IE 4.x for Windows closing menus with onmouseover or onmousemove or attributes from elements, which are directly below the menu cause the problem, that sub-menus don't always stay open and menus are extremely unstable. I tried onmousedown but links were difficult to open and it doesn't work as it should. Only the onclick attribute can be used in this purpose. If this browser is intended to support, closing sub-menus through the content should be implement conditional by using the document.write() method of JavaScript so that the closing dynamic menus from the content by using certain event handler attributes doesn't concern MS IE 4.x for Windows. Sub-menus might remain open but this is much better situation than the situation, where it is not possible to select some menu items in the desired sub-menus.

    In the example code below the task of the function hideAllGroups() is to close all opened sub-menus through the actual content of the Web-page. Adding the following code before the actual content of the document force all dynamic menus supporting browser at least with some event handler to close all opened sub-menus (all of these even handler are not necessary to set):

    
    <script language="JavaScript" type="text/javascript">
    <!--
    if (document.getElementById)
    {document.write('\<di'+'v\
     onmousedown=\"hideAllGroups();\"\
     onmousemove=\"hideAllGroups();\"\
     onmouseover=\"hideAllGroups(); \"\>');}
    
    else if (document.layers)
    {document.write('\<layer\ z-index=\"0\"\ 
     onmouseover=\"hideAllGroups();\"\>');}
    
    else if (document.all)
    {document.write('\<di'+'v\
     onclick=\"hideAllGroups();\"\>');}
    
    else {}
    //-->
    </script>
    The actual content starts here...

    If behind the menu have been set a background element and/or each sub-menus have their own shadow boxes, which don't have event handler attributes, which concerns the previous mentioned browser, menus can be closed from the actual content with any supported event handle attribute because the content is not directly below the menu. The background element and/or shadow boxes work then as an "insulations" between the menu and the main content.

  3. If shadows are positioned on the base of the absolute positioned element, Opera 5.x might not position them correctly. Use browser-specific CSS for Opera 5.x or don't use nested postioning.

  4. As I have earlier explained all structural solutions don't work in MS IE 5.0 for Mac browsers, why it would be reasonable to use as simple solutions as possible (you can go through a test case[S] MS IE 5.0 for Mac browsers).

  5. Closing menus from the content needs in Netscape 4.x browsers that the whole actual content is inside LAYER or ILAYER elements.

If you want more advice, I recommend to visit in other sites. You can find good hints also from the site of TechsOfTheWeb.

TecsOfTheWeb.Com: Using and Manipulating Dropdown Windows.

[Top]