https://github.com/hellsan631/logosdrilldown

A responsive javascript drill down menu system that focuses on great features without sacrificing performance
https://github.com/hellsan631/logosdrilldown

Last synced: 24 days ago
JSON representation

A responsive javascript drill down menu system that focuses on great features without sacrificing performance

• Host: GitHub
• URL: https://github.com/hellsan631/logosdrilldown
• Owner: hellsan631
• Created: 2014-10-04T03:12:14.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2014-10-05T06:33:07.000Z (over 10 years ago)
• Last Synced: 2024-11-08T11:06:28.523Z (3 months ago)
• Language: CSS
• Homepage:
• Size: 320 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
LogosDrillDown

==============

A responsive drill down menu system that focuses on great features without sacrificing performance

http://mathew-kleppin.com/storage/logosDrillDown/

## Getting Started

### Requirements

```

Requires jQuery

Requires Twitter Bootstrap CSS

```

#### Recommended

```

Recommended VelocityJS

http://julian.com/research/velocity/

```

### Installation

Just include the twitter bootstrap css in the header, along with the (recommended) base style sheet.

```html

  

  

```

Next, Add in your content in the body

```html

  


  

      


  

      

  

          


              
Home

              


                  About Us

                  


                      
About Us

                      
History

                  

              

              
Contact

          

      

  


```

Then add in your scripts

```html

    // Initialize menu

    $(document).ready(function() {

        'use strict';

        var $breadcrumbs = $(".nav-wrapper .menu-breadcrumbs"),

                $drillDown = $("#nav");

        $drillDown.logosDrillDown({

            onOpened: manageBreadcrumbs,

            onClosed: manageBreadcrumbs,

            expandableClass: "has-children",

            startName: "Home"

        });

        //If you want the menu to resize when you resize the window,

        //just call this function

        $(window).on('resize', function(){

            $drillDown.logosDrillDown("windowResizeEvent");

        });

        

        //functions to manage the breadcrumbs as you go deeper into the menu

        function manageBreadcrumbs() {

            $breadcrumbs.html($drillDown.logosDrillDown("getBreadcrumbsFormatted"));

        }

        manageBreadcrumbs();

    });

```

### Enjoy!

The menu was build using jQuery, with most of the animations using VelocityJS for maximum performance on desktop and mobile devices.

As there are a few scripts included in here, each script that isn't of my design is copyright its original authors.