QuickMenu
The breadcrumb add-on includes a host of features for highlighting menu items and presenting a text based path which
corresponds to the current document. The text based path may be added anywhere in the document, it's contents and links are automatically generated by the add-on.
This add-on has 3 sections which should be added to your menu. The menu highlighting and
separate text path is all CSS styled. Additional script based add-on settings specify functionality and the text based path's home document, typically your home page.
Section 1: JavaScript Reference and Settings - This section sits under the JavaScript call to the main QuickMenu code file (qm.js). In this example we have placed the settings in a
separate file called 'qm_breadcrumbs.js'. To modify the breadcrumb functionality for all documents in the sample, change the settings in the file.
<!--%%%%%%%%%%%% QuickMenu JavaScript %%%%%%%%%%%*-->
<!-- Core Menu Code -->
<script type="text/JavaScript" src="qm.js"></script>
<!-- Add-On Core Code (Remove when not using any add-on's) -->
<style type="text/css">.qmfv{visibility:visible !important;}</style><script type="text/JavaScript">var qmad = new Object();qmad.bvis="";qmad.bhide="";</script>
<!-- Optional Add-On's (Must appear after core menu code) -->
<script type="text/JavaScript" src="qm_crumb_settings.js"></script>
<script type="text/JavaScript" src="qm_breadcrumbs.js"></script>
<!-- Core Menu Code -->
<script type="text/JavaScript" src="qm.js"></script>
<!-- Add-On Core Code (Remove when not using any add-on's) -->
<style type="text/css">.qmfv{visibility:visible !important;}</style><script type="text/JavaScript">var qmad = new Object();qmad.bvis="";qmad.bhide="";</script>
<!-- Optional Add-On's (Must appear after core menu code) -->
<script type="text/JavaScript" src="qm_crumb_settings.js"></script>
<script type="text/JavaScript" src="qm_breadcrumbs.js"></script>
Section 2: Breadcrumb CSS Styles - CSS styles for the breadcrumb templates reside in a
separate file. The settings in this file serve all the documents and speed up load time while making updates less labor intensive. Open and modify the setting in the qm_styles.css file to customize both the menu and crumbs.
The reference to the CSS styles resides in the head of the document.
The reference to the CSS styles resides in the head of the document.
<!--%%%%%%%%%%%% QuickMenu Styles [Keep in head for
full validation!] %%%%%%%%%%%-->
<link rel="stylesheet" href="qm_styles.css" type="text/css">
<link rel="stylesheet" href="qm_styles.css" type="text/css">
Section 3: Separate Breadcrumb Text Path Container - The text path container may be placed anywhere in your HTML page, the container may also be any valid HTML element which is allowed to contain spans and anchor tags. In the sample template we use a DIV and then position the DIV with CSS so the path sits in the actual menu bar.
To turn an element into a text path container add the id and class name show below...
To turn an element into a text path container add the id and class name show below...
<div id="qmcrumbs" class="qm-crumbs-container"></div>
Note: The use of the text paths is optional. Any content in an element which is to behave as a text path container will be replaced with the path built by the add-on. You can position and style the text path container in any way you see fit, for a first hand example of how we added ours to the menu bar, see the
CSS styles for the menu template.
The breadcrumb add-on compares the URL in the address bar of the browser with the URL links in your menu. When a match is found a path from that point is created and
dynamically added to the document and menu. All code is client side and
independent of file locations.
If your menus parent items do not have URL links associated with them, the text based path will still display, however the items will not link anywhere.
If your menus parent items do not have URL links associated with them, the text based path will still display, however the items will not link anywhere.