Glossy Menus

Free Code > Glossy Scripts > Glossy Menus

Glossy Menus is a JavaScript+CSS solution for creating hierarchical "tree menus" on your site. The example menu shown below is taken straight from the site navigation code for Globalisk.com (those links over there —>).

How to use

Place the JavaScript and CSS code somewhere on your site, and then reference them in the header of your documents as follows:

In your own site navigation JavaScript file (which you should reference after the Glossy code in the header of your documents), you can declare your site menu(s) as such:

var m0 = new GlossyMenu();
m0.addLink( "Home", "/" );
m0.addLink( "Blog", "http://globalisk.com/blog" );
var b2 = m0.addLink( "Blosics 2", "", "Addictive physics based game" );
    b2.addLink( "Play the game", "/blosics2/", "Play Blosics 2" );
    b2.addLink( "Play user Level Pack", "/blosics2/levelpack.html", "Play Blosics 2 Level Pack (levels created by Blosics users)" );
    var obd = b2.addLink( "OBD's Levels", "/blosics2/obd.html", "OBD's Blosics 2 levels" );
        var ch1 = obd.addLink( "Ch. 1: Inception", "/blosics2/obd.html#1" );
            ch1.addLink( "Goldberg vs. Heisenberg", "/blosics2/obd1.html#1" );
// ...et cetera...

In your site pages, place the menu rendering code wherever you want your menus to appear:

Customizing your menus

You can redefine any/all styles as defined in the CSS file (it is recommended that you override them with your own stylesheets rather than alter the default styles in the source).

You can also assign your own values to several JavaScript variables:

Variable (prefix with glossyMenus.)	Default	Description
localSiteBase	""	Set to something like "file:///C:/Users/Ryan/Desktop/Globalisk/" for testing locally
bulletHoverColor	undefined	Optional different color for bullets when mouse hovers over them
bulletBackgroundHoverColor	undefined	Optional different background color for bullets when mouse hovers over them
singlePathAtOneTime	true	Should only one path per level be shown (i.e. auto-collapse upon expanding a parent/sibling item)?
useGlossySearch	true	The default behavior automatically populates a Glossy Search index with page titles and their links when a Glossy Search has been instantiated.
useGlossySearchTooltip	true	When adding terms to the Glossy Search, should tooltips be included?
bulletExpandHTML	'+'	Set your own code for the toggle expand bullets
bulletCollapseHTML	'-'	Set your own code for the toggle collapse bullets

If you find this code useful, please consider making a donation.