www.codestyle.org

Drop-down menus FAQ

This FAQ is part of the Code Style Help and FAQ section. Use the help request form below if your question is not answered here, but make sure you are asking the right question first.

Subscribe to this FAQ:

DOM menu introduction

Q: The menu source code is so complex!

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.

Q: Can this script be used across multiple pages?

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.

Q: Netscape 4.7 stacks the menu links on top of one another!

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.

Q: Your script doesn't work in Netscape Communicator 4.7!

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.

Q: Is this menu compatible with XHTML 1.1?

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.

Q: Which versions of Safari work with this menu system?

A: Safari release 85 and 94 and onwards work with the Code Style DOM1 visibility menus.

Known issues

Q: Some elements show through my dynamic menus!

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.

Q: Some links seem to be blocked by the menus!

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.

Commercial use

Q: Can I use the drop-down menus on commercial sites?

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.

CSS properties

Q: What's the difference between the #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.

More details available to subscribers:
What's the difference between the #LinkBar and individual #Link styles?

Q: Why the redundant 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.

Q: How do @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.)

More details available to subscribers:
How do @import styles override the primary stylesheet?

Q: How can I remove the mouseover highlight on the menu titles?

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.

More details available to subscribers:
How can I remove the mouseover highlight on the menu titles?

Help request

Use the form below to submit a help request or general enquiry about the Code Style Web site. Before you write read the guidelines on asking the right questions, and check this page for periodic updates.

Name:
Email*:
Comments:
Join mailing list:	Yes, join the mailing list No
* Required fields

Your email address will not be mis-used. If you include your address you may be sent a personal reply, you will not be added to any mailing list unless you request it. Read the site privacy statement for details.

Navigation

• Home page
• CSS style guide
  • Font sampler
  • Media monitor
• Java & servlets
• Javascript & DOM
• HTML & XHTML
• Help and FAQs
• Site log

Site search

Home · CSS · Java · Javascript · HTML · Help · Log

Copyright © 2000-2008 Philip Shaw, all rights reserved, terms and conditions apply.
Valid XHTML and correct CSS. Last updated 03 May 2008 at 20:17:40 PM BST.
URI: http://www.codestyle.org/javascript/dom/css/FAQ.shtml Metadata: RDF RSS 1.0