CSS font stacks, developer FAQs & web standards

Your banner ad here

WestNIC provides reliable web hosting services

Top Canadian Hotels no booking fees from Victoria BC to Nova Scotia

Site navigation below

This FAQ is part of the Code Style Help and FAQ section. Join our premium content service for full access all FAQ answers.

Expanding the menus

Q: How do I add more menus?

A: The width of the menus in the published example is set for 5 items. You can add more menus by adjusting the width of the menus and links as appropriate. The rule below specifies the width, allowing for the horizontal padding, margin and border used in the example. Calculate a suitable value based on your styling and add #Menu6, #Link6, etc to the grouped selector.

#Menu1, #Menu2, #Menu3, #Menu4, #Menu5,
#Link1, #Link2, #Link3, #Link4, #Link5{
  float:            left;
  width:            17.9%;
...
}
          

This value is also set in the base style sheet for older browsers and should be updated in both.

Actions: Follow-up, clarify or correct this answer. Submit a new question.

Q: How can I add another level to my dynamic menus?

A: It would technically be possible to add a further level of links, but it would technically be pretty tricky too! The main problem would be to devise a way of positioning the secondary menus next to a the first while keeping a flexible, proportional layout.

This is also a usability question though; the more choices you give the user, the more difficult they may find it to decide which option they should take. It might be better to reduce the choices and layer the options through a set of section index pages.

Actions: Follow-up, clarify or correct this answer. Submit a new question.

Menu style and decoration

Q: How can I make the links mixed case?

A: To change the menu text to regular mixed case, look for the rule text-transform: lowercase in the main imported style sheet and remove that line.

Actions: Follow-up, clarify or correct this answer. Submit a new question.

Q: How can I add images to your dynamic menus?

A: Perhaps one's first thought should be, "How would extra images improve the usability of this menu?" Additional images will make pages slower to download and the menus slower to respond. Most users will come for the content of your site, not your menus, however attractive they might be.

premium content omitted

Sign up for premium content now Access all premium content for $50: sign-up now.
How can I add images to your dynamic menus?

Actions: Follow-up, clarify or correct this answer. Submit a new question.

Different layouts

Q: How can I centre the menus on the page?

A: The stylesheets for the menus are set up to adjust proportionally to the size of the browser window, so you should find that they expand to fill the width of the page with whatever resolution is set. If you want the menu bar to be indented on either side to give it a centred effect, reduce the overall width of the menu bar and increase the left and right margins. You may need to adjust the width of the individual menu elements too.

The total width of all menu elements plus their left and right padding, margins and borders must be less than 100% or you will get horizontal scrolling.

Actions: Follow-up, clarify or correct this answer. Submit a new question.

Q: Can I put the menus in a table layout?

A: Your question misses a subtle aspect of this menu set and a great strength of CSS positioning. The menus could be placed wherever you like on the screen and you don't have to use tables to do so. The Javascript functions also operate independently of the CSS positioning, so you don't have to change the script to achieve this either.

premium content omitted

Sign up for premium content now Access all premium content for $50: sign-up now.
Can I put the menus in a table layout?

Actions: Follow-up, clarify or correct this answer. Submit a new question.

Q: How can I create vertical menus?

A: The DOM1 visibility menus could appear wherever you want if you give them absolute position properties rather than contain them in the #MenuBar and #LinkBar divisions. For instance, a grouped selector could position the top left corners of all menus in the same place ...

premium content omitted

Sign up for premium content now Access all premium content for $50: sign-up now.
How can I create vertical menus?

Actions: Follow-up, clarify or correct this answer. Submit a new question.

Q: How can I use drop down menus in a frame based site?

A: The frame border is the absolute limit of the current document and none of the content of one document can overlap into another. To ensure that all the menus are displayed without cropping, your menu frame document would have to be large enough to enclose the longest menu list.

premium content omitted

Sign up for premium content now Access all premium content for $50: sign-up now.
How can I use drop down menus in a frame based site?

Actions: Follow-up, clarify or correct this answer. Submit a new question.

Add this page to your chosen social bookmarking service

Style warning, please read

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