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 (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:

<link rel="stylesheet" type="text/css" href="glossymenus.css" />
<script type="text/javascript" src="glossymenus.js"></script>

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", "" );
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&#39;s Levels", "/blosics2/obd.html", "OBD&#39;s Blosics 2 levels" );
        var ch1 = obd.addLink( "Ch. 1: Inception", "/blosics2/obd.html#1" );
            ch1.addLink( "Goldberg vs. Heisenberg", "/blosics2/obd1.html#1" );

// cetera...

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

<script type="text/javascript">

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.

Copyright © Globalisk. All rights reserved.

VeriSign Verified