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