CSS font stacks, media style sheets & web standards
Put your text ad here 
WestNIC provides reliable web hosting services
Free software downloads and drivers download resources
25% off cpanel web hosting and reseller hosting deals. Promo: codestyle25off
This FAQ is part of the Code Style Help and FAQ section. Join our premium content service for full access all FAQs, or choose the single FAQ by email option for premium answers.
A: Believe it or not, the DOM1 visibility menus scripts couldn't be much simpler. It may help to ignore the menu and bullet object constructors and the for(...) loops that build the menus to start with. All the menu points are constructed the same way and do exactly the same thing except they have different link text and anchors.
The event handler functions are the more important part of this demonstration: menuOver(MenuID), stayOpen(MenuID), menuOut(MenuID) and hideNow(). You could hard code HTML with the same structure as one of the Javascript-built menus and it would work the same way. The menus are generated with Javascript to save non-Javascript browsers from displaying this markup.
Actions: Follow-up, clarify or correct this answer. Submit a new question.
A: Yes, the external style sheet and script references shown in this example can be repeated in any number of pages.
<link rel="stylesheet" type="text/css" href="/styles/javascript/dom/visibility-HorizontalMenus.css" title="Standard" /> <script type="text/javascript" src="/scripts/dom/css/visibility-HorizontalMenuWriter.js"> </script>
These are the key parts, and any number of pages can refer to these files. If you want to include the noscript content too, you could use the server side include mechanisms of your Web server.
Actions: Follow-up, clarify or correct this answer. Submit a new question.
A: It sounds like one or more of your file references may be incorrect. The import stylesheet must be attached to the standard stylesheet by an @import rule at the top of the file, not referenced directly from a document link element. If you have linked this stylesheet directly, put this line back in the visibility-HorizontalMenus.css stylesheet and remove the link element for the imported stylesheet:
@import(visibility-HorizontalMenusImport.css);
This arrangement effectively hides the more complex styles from Netscape because it cannot handle these style rules properly.
Actions: Follow-up, clarify or correct this answer. Submit a new question.
A: Yes, the menus are not supported by Netscape Communicator, they are not intended to work in this browser. The scripts should be safe in all browsers but only work with Mozilla, Netscape 6, Internet Explorer 5, Opera 4 and higher versions.
Actions: Follow-up, clarify or correct this answer. Submit a new question.
A: This demonstration is compatible with the XHTML 1.0 strict DTD, it was not designed to be compatible with XHTML 1.1 or tested with this DTD. However, there is little practical difference and the menus could readily be adapted to this format, see XHTML 1.1 technical changes.
Actions: Follow-up, clarify or correct this answer. Submit a new question.
A: Safari release 85 and 94 and onwards work with the Code Style DOM1 visibility menus.
Actions: Follow-up, clarify or correct this answer. Submit a new question.
A: This is a known limitation of many browsers' rendering of forms and so-called "replaced" elements such as applets and objects. In short, there is nothing that can be done about it and the only way to work around this problem is not to position these elements where dynamic content may overlay them. See Positioned Elements and OS Controls, Applets and Plug-ins from Web Reference for further background.
Actions: Follow-up, clarify or correct this answer. Submit a new question.
A: The problem you see is specific to the Opera Web browser, where the hidden, positioned div elements are effectively masking the body of the document. The body has a lower z-index value, so these layers are "above" it. This problem only seems to affect Opera and the only immediate solution is to ensure that no links are placed in this zone.
One solution is to move the absolute position of the menus outside the display area of the canvas when they are not visible. This should stop them from blocking other elements.
Actions: Follow-up, clarify or correct this answer. Submit a new question.
A: Yes, you may, provided you pay a small fee and publish your version of the menu system under the same Creative Commons attribution share-alike terms. Please use the help form below to notify your intention and make a £25.00 donation. We can also customise this menu system to your requirements for an agreed fee.
Actions: Follow-up, clarify or correct this answer. Submit a new question.
#LinkBar and individual #Link styles?
A: The #LinkBar and #MenuBar divisions are really just containers for the links that trigger the menus and the menus themselves. They are absolutely positioned so that all the links and all the menus can be aligned collectively, rather than positioning every link and menu individually.
… premium content omitted
Get full access to all FAQs, subscribe now for $40
What's the difference between the #LinkBar and individual #Link styles?
Actions: Follow-up, clarify or correct this answer. Submit a new question.
float declaration?
A: The explicit float: none; declaration on the menu lists should have no effect and could be removed from this stylesheet.
/*
Must override float on the menu divs.
*/
#Menu1 UL, #Menu2 UL, #Menu3 UL,
#Menu4 UL, #Menu5 UL{
float: none;
margin: 0em 0em 0em 1em;
padding: 0.2em 0em 0.5em 0em;
font-family: "times new roman",
serif;
}
During the development of the DOM1 visibility menus a new browser release (not noted, but perhaps an early build of Mozilla) would apparently inherit the float: left; property of the parent #MenuBar division, bunching the list elements tightly up to the left. This is incorrect behaviour, so the declaration is strictly redundant and could be removed.
Actions: Follow-up, clarify or correct this answer. Submit a new question.
@import styles override the primary stylesheet?
A: The imported stylesheet may be overridden by any style rules that follow the @import rule, not vice versa. The W3C CSS recommendations say that any @import rules must be placed before any other rules in a stylesheet. (Early versions of Internet Explorer did not hold to this recommendation, and render @import styles at the end of a stylesheet, by the way.)
… premium content omitted
Get full access to all FAQs, subscribe now for $40
How do @import styles override the primary stylesheet?
Actions: Follow-up, clarify or correct this answer. Submit a new question.
A: It is generally preferable that any link does have an a:hover selector associated with it, so that it does highlight when a user selects it. This mouseover effect is not necessarily a default mode of Web browsers, so it is not critical in usability terms. However, the use of this CSS selector gives direct visual feedback that should help distinguish active page elements from static content. For dynamic menus, the hover effect is less critical still, because the display of the sub-menus themselves is a very direct visual cue that active content is present.
… premium content omitted
Get full access to all FAQs, subscribe now for $40
How can I remove the mouseover highlight on the menu titles?
Actions: Follow-up, clarify or correct this answer. Submit a new question.
| Front-end FAQs | Back-end FAQs | Learning Java |
|---|---|---|
About us: site help, text ads, sponsored links and premium content FAQs.
