Breadcrumber

by Reusablecode

HTML

<link rel="stylesheet" href="http://www.comparenetworks.com/developers/jqueryplugins/Styles/BreadCrumb.css">
<div class="breadCrumbHolder module"> 
    <div id="breadCrumb0" class="breadCrumb module"> 
        <ul> 
            <li> 
                <a href="#" class="ignore">Home</a> 
            </li> 
            <li> 
                <a href="#">Biocompare Home</a> 
            </li> 
            <li> 
                <a href="#">Product Discovery</a> 
            </li> 
            <li> 
                <a href="#">Life Science Products / Laboratory Supplies</a> 
            </li> 
            <li> 
                <a href="#">Kits and Assays</a> 
            </li> 
            <li> 
                <a href="#">Mutagenesis Kits</a> 
            </li> 
            <li> 
                Mutation Generation System&trade;
            </li> 
        </ul> 
    </div> 
</div>

JavaScript

// Author: Oskar Krawczyk ([email protected])

var BreadCrumbs = new Class({

    Implements: [Options, Events],

    options: {
        fxOptions: {
            transition: 'sine:out'
        },
        ignoreClass: 'ignore',
        breadcrumbSelector: '.breadCrumb',
        collapsedWidth: 10
    },

    initialize: function(options) {
        this.setOptions(options);

        this.elements = $$(this.options.breadcrumbSelector)[0].getElements('a[class!={ignoreClass}]'.substitute(this.options));

        this.setDefaults();
    },

    setDefaults: function() {
        this.elements.each(function(breadcrumb) {

            // insert non-breaking spaces
            breadcrumb.set('html', breadcrumb.get('html').replace(/ /g, '&nbsp;'));

            // store the original width
            breadcrumb.store('original:width', breadcrumb.getSize().x);

            // create the Fx
            var fx = new Fx.Tween(breadcrumb, $merge({
                link: 'cancel'
            }, this.options.fxOptions));

            // collapsed on start
            fx.start('width', this.options.collapsedWidth);

            this.createEvents(breadcrumb, fx);

        }, this);
    },

    createEvents: function(breadcrumb, fx) {
        breadcrumb.addEvents({
            mouseenter: function() {
                fx.start('width', this.retrieve('original:width'));
            },

            mouseleave: function() {
                fx.start('width', this.options.collapsedWidth);
            }.bind(this)
        });
    }

});

new BreadCrumbs({
    fxOptions: {
        duration: 500
    }
});