Welcome to The Infinite Menus Core!

The infinite menus core is a 100% Pure CSS menu which does not require JavaScript to function. The included JavaScript is optional and allows for extra features such as non CSS2 browser sub menu support and delayed sub timing for added user control. To begin make sure you have extracted the 'IM core component' folder in entirety from the download.

This download consists of two separate template folders (located in the templates directory of the zip). There is a Beginner folder for basic implementations that do not have many add ons enabled and will validate without any problems. The second folder is called Feature Enhanced* because it has examples with add ons enabled, such as animations, or rounded corners. There is also a Separate CSS Folder which is included inside of the Beginner folder. This example shows the user how to store a majority of the menu data inside of a separate CSS file.

To get started, open one of the included template folders, and load the template.html file inside of your text or HTML editor. You can load the template.html file inside of your browser to first preview it before deciding to use it as the basis for implementation.

The look and feel of the menu is controlled by the menu styles. This portion of the menu data is controlled via Cascading Style Sheets, and is stored in the head of the document for proper validation. This section is proceeded with the comment (Infinite Menu Styles: Keep this section in the document head for full validation.) You may manipulate the appearance of your menu using standard CSS. We have commented the styles for easier editing. For a definition of each of the terms inside of the CSS of the menu, please refer to the glossary.

The actual structure of the menu is under the commented section (****** Infinite Menus Structure & Links *****). You will notice the menu is constructed of unordered lists with listed elements. We have pre-filled the menu data with example content. To customize the menu simply replace the example text with content for your site. The links have been set to "#" which prevents them from linking anywhere. You may simply replace the # with the page you would like to link to.

*The Feature Enchanced examples may not validate properly due to the add ons in place. If validation is a requirement, please use a template from the Beginner directory.

Key Menu Features & Advantages

Search Engine Friendly.
Pure CSS with script control for IE compatibility and other essential features.
Works with or without JavaScript.
Tab key navigable and 508 Compliant.
Add 1,000's of items without slowing it down.
Loads instantaneously as pure CSS, before the optional scripts.
Inline script loading with no onload event requirement.
block level Inline positioning, similar to placing a div in a page.
Full cross browser without the separate file loading overhead typically found with these menus.
Functions and looks identical in IE 5.x up, FireFox (All), Netscape 5.x up, Mozilla, Safari, and Opera.
No-holds barred customization, use any standard CSS syntax.
Customize individual items by adding inline CSS directly to the exposed A tags.
Add custom function calls to the exposed structure.
IM loads direct inline and is self contained at the point of insertion, meaning its compatible with any HTML environment.
Use with Dreamweaver, FrontPage, ASP, PHP, Cold fusion, Google Pages, you name it.
Select tag work-around, subs stay on top.
Custom delay timing for error free navigation.
Absolute positioned expand icons indicate additional sub menu levels.
Horizontal or vertical main menus.

FAQ

Q: How do I add one menu to multiple pages with a single separate file for easy maintenance?
A: Add the entire structure, settings, and source code to a server side include of your choosing, you can also split the sections up so long as they appear in the same order within the source... 1: structure - 2:settings - 3:source code. A JavaScript include option is included with the visual studio.

Q: Can the menu scripts be made to load after the page loads vs. at the point of insertion?
A: Yes, to do this simply move the source code section to the end of the document, directly before the closing <body> tag. This will change the load sequence to occur after the page is first displayed. ***IMPORTANT: The source code must be located after the menus structure and settings, and before the documents closing body tag for the menu to work.

Q: I added the HTML for a new sub menu in the structure but it did not appear?
A: This is usually a syntax error, double check that you have nested the new sub menu within its parent items <LI> tag. Double check that the list items closing tag (</LI>) is located at the end of the sub menu HTML you added and is not doubled up.

Q: How do I position the menu in my document?
A: The menu positions itself as an inline block level element at the point of insertion within your HTML source code (similar to positioning a table or div within your page). To move the menu, move the entire menu structure (including comment tags witch identify the menu structure and links section) to an insertion point of your choosing within your HTML source code.

Q: What is the difference between the active and hover states?
A: The hover state applies when the mouse is hovered over a menu item, the active state applies when an items child sub menu appears.

Q: Can I add a custom bullet or icon to each of my menu items?
A: Yes, simply add an <IMG> tag within the <A HREF> tag for the item you wish to apply your custom image to. You can add any custom HTML to each menu item, keep all HTML nested within the items <A HREF> tag.

Q: Can the main menu be Vertically oriented instead of Horizontal?
A: Yes, to do this change the width of each main menu items LI tag to 100% (style="width:100%"). Set the width of the items by adjusting the container width of the menu in the structures opening DIV

Q: How do I add more than one menu to a single page?
A: Yes... To do this you will need to change 4 different ids which end by default with index number 0 to index number 1. In your source HTML, search and replace

imouter0 with imouter1
imenus0 with imenus1 (multiple instances)
ssimenus0 with ssimenus1
imenus_data0 with imenus_data1

After changing the id's add the second menu to the page, the second menu will be indexed with id0 and the original menu will have the new index 1.

OpenCube Forums

For additional help try searching the OpenCube Forums at http://www.opencube.com/forum