30 | 
33 |
34 | LazeeMenu
31 |Multi-level sidebar menu - JQuery plugin
32 |
33 | 
23 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/site/bower_components/highlightjs/styles/sunburst.css:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | Sunburst-like style (c) Vasily Polovnyov
12 |
26 | {% endmacro %}
27 | {% block content %}
28 |
13 |
17 |
14 | {% include "partials/" + name + ".html" %}
15 |
16 |
18 |
19 |
21 | {{ htmlsource | escape }}
22 |
23 |
25 | {{ sourcjs | escape }}
29 |
35 |
36 |
37 |
79 |
80 |
81 |
82 |
83 | {% include "partials/demo1.js.html" %}
84 | {% include "partials/demo2.js.html" %}
85 |
94 | {% endblock %}
95 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var gulp = require('gulp');
4 | var sass = require('gulp-sass');
5 | var cssmin = require('gulp-cssmin');
6 | var rename = require('gulp-rename');
7 | var uglify = require('gulp-uglify');
8 | var jshint = require('gulp-jshint');
9 | var nunjucksRender = require('gulp-nunjucks-render');
10 | var ghPages = require('gulp-gh-pages');
11 | var markdown = require('gulp-markdown');
12 | var bump = require('gulp-bump');
13 | var del = require('del');
14 | var runSequence = require('run-sequence');
15 | var release = require('gulp-github-release');
16 | var zip = require('gulp-zip');
17 |
18 | gulp.task('clean', function() {
19 | return del(['dist', '.sitedist', '.package']);
20 | });
21 |
22 | gulp.task('deepclean', function() {
23 | return del(['dist', '.sitedist', '.package', 'node_modules']);
24 | });
25 |
26 | gulp.task('sass', function() {
27 | return gulp.src('./src/sass/**/*.scss')
28 | .pipe(sass().on('error', sass.logError))
29 | .pipe(gulp.dest('./dist'));
30 | });
31 |
32 | gulp.task('minify-css', function() {
33 | gulp.src('./dist/*.css')
34 | .pipe(cssmin())
35 | .pipe(rename({
36 | suffix: '.min'
37 | }))
38 | .pipe(gulp.dest('./dist'));
39 | });
40 |
41 | gulp.task('package', function() {
42 | gulp.src(['./LICENSE']).pipe(gulp.dest('./.package/lazeemenu'));
43 | gulp.src(['./README.md']).pipe(gulp.dest('./.package/lazeemenu'));
44 | gulp.src(['./package.json']).pipe(gulp.dest('./.package/lazeemenu'));
45 | gulp.src(['./dist/*.js']).pipe(gulp.dest('./.package/lazeemenu'));
46 | gulp.src(['./dist/*.css']).pipe(gulp.dest('./.package/lazeemenu'));
47 | });
48 |
49 | gulp.task('compress', function() {
50 | return gulp.src('./src/*.js')
51 | .pipe(uglify())
52 | .pipe(rename({
53 | suffix: '.min'
54 | }))
55 | .pipe(gulp.dest('./dist'));
56 | });
57 |
58 | gulp.task('lint', function() {
59 | return gulp.src('./src/*.js')
60 | .pipe(jshint())
61 | .pipe(jshint.reporter('cool-reporter'));
62 | });
63 |
64 | gulp.task('sass:watch', function() {
65 | gulp.watch('./src/sass/**/*.scss', ['sass']);
66 | });
67 |
68 | gulp.task('pages', function() {
69 | gulp.src(['./site/stylesheets/*.css']).pipe(gulp.dest('./.sitedist/stylesheets'));
70 | gulp.src(['./site/javascripts/*.js']).pipe(gulp.dest('./.sitedist/javascripts'));
71 | gulp.src(['./dist/*.css']).pipe(gulp.dest('./.sitedist/stylesheets'));
72 | gulp.src(['./site/images/**']).pipe(gulp.dest('./.sitedist/images'));
73 | gulp.src(['./dist/*.js']).pipe(gulp.dest('./.sitedist/javascripts'));
74 | gulp.src(['./site/bower_components/highlightjs/**']).pipe(gulp.dest('./.sitedist/javascripts/highlight.js'));
75 | gulp.src(['./node_modules/jquery/dist/jquery.min.js']).pipe(gulp.dest('./.sitedist/javascripts'));
76 | gulp.src(['./node_modules/bootstrap/dist/js/bootstrap.min.js']).pipe(gulp.dest('./.sitedist/javascripts'));
77 | gulp.src(['./node_modules/bootstrap/dist/css/bootstrap.min.css']).pipe(gulp.dest('./.sitedist/stylesheets'));
78 | return gulp.src('site/pages/*.html')
79 | .pipe(nunjucksRender({
80 | path: ['site/templates/', 'dist/md/']
81 | }))
82 | .pipe(gulp.dest('.sitedist'));
83 | });
84 |
85 | gulp.task('pages-deploy', function() {
86 | return gulp.src('./.sitedist/**/*')
87 | .pipe(ghPages());
88 | });
89 |
90 |
91 | //gulp.task('md', function () {
92 | // return gulp.src('README.md')
93 | // .pipe(markdown())
94 | // .pipe(gulp.dest('dist/md/'));
95 | //});
96 |
97 | gulp.task('bump', function(){
98 | gulp.src(['./bower.json', './package.json'])
99 | .pipe(bump({type:'patch'}))
100 | .pipe(gulp.dest('./'));
101 | });
102 |
103 | gulp.task('release', function() {
104 | gulp.src('./dist/lazeemenu.zip')
105 | .pipe(release({
106 | draft: false,
107 | prerelease: false,
108 | manifest: require('./package.json')
109 | }));
110 | });
111 |
112 | gulp.task('zip', function() {
113 | return gulp.src('./.package/**')
114 | .pipe(zip('lazeemenu.zip'))
115 | .pipe(gulp.dest('dist'));
116 | });
117 |
118 | gulp.task('default', function(callback) {
119 | runSequence('clean', 'sass', 'minify-css', 'lint', 'compress', 'pages', 'package');
120 | });
121 |
--------------------------------------------------------------------------------
/src/sass/lazeemenu.scss:
--------------------------------------------------------------------------------
1 |
2 | /*-- VARIABLES ---*/
3 |
4 | $font-family: 'Helvetica Neue', arial, freesans, clean, sans-serif !default;
5 | $font-size: 14px;
6 |
7 | $border-main: 1px solid #ddd !default;
8 | $border-bottom-level1: 1px solid #eee !default;
9 | $border-bottom-level2: $border-bottom-level1 !default;
10 | $border-active-link: 3px solid #d8d8d8 !default;
11 |
12 | $color-level1: #666 !default;
13 | $color-level2: $color-level1 !default;
14 | $color-level3: $color-level2 !default;
15 |
16 | $background-color-level1: white !default;
17 | $background-color-level2: #f9f9f9 !default;
18 | $background-color-level3: #fff !default;
19 |
20 | $link-color-level1: #555 !default;
21 | $link-color-level2: #327fc7 !default;
22 | $link-color-level3: $link-color-level2 !default;
23 |
24 | $hover-color-level1: #327fc7 !default;
25 | $hover-color-level2: $hover-color-level1 !default;
26 | $hover-color-level3: $hover-color-level1 !default;
27 |
28 | $hover-background-color-level1: transparent;
29 | $hover-background-color-level2: #f2f2f2 !default;
30 | $hover-background-color-level3: $hover-background-color-level2 !default;
31 |
32 | $arrow-color-level1: #9a9a9a !default;
33 | $arrow-color-level2: #ccc !default;
34 |
35 | /*--- MIXINS ---*/
36 |
37 | @mixin lzhover($background, $foreground) {
38 | text-decoration: none;
39 | background-color: $background;
40 | color: $foreground;
41 | }
42 |
43 | @mixin arrow-button($color) {
44 | width: 0;
45 | height: 0;
46 | float: left;
47 | padding: 0;
48 | margin: 10px 9px 9px;
49 | text-decoration: none;
50 | border-top: 5px solid transparent;
51 | border-bottom: 5px solid transparent;
52 | border-left: 8px solid $color;
53 | border-right: 0;
54 | }
55 |
56 | @mixin expanded($color) {
57 | border-left: 5px solid transparent;
58 | border-right: 5px solid transparent;
59 | border-top: 8px solid $color;
60 | border-bottom: 0;
61 | }
62 |
63 | /*--- STYLE ---*/
64 |
65 | ul.lz-menu {
66 | padding: 0;
67 | margin: 20px 0 0;
68 | width: 100%;
69 | line-height: 1.4em;
70 | border-radius: 4px;
71 | overflow: hidden;
72 | margin-bottom: 20px;
73 | border: $border-main;
74 |
75 | color: $color-level1;
76 | background-color: $background-color-level1;
77 | position: relative;
78 |
79 | font-family: $font-family;
80 | font-style: normal;
81 | font-variant: normal;
82 | font-weight: normal;
83 | font-size: $font-size;
84 |
85 | a,
86 | span {
87 | display: block;
88 | color: $link-color-level1;
89 | text-decoration: none;
90 | }
91 |
92 | ul, li, h3 {
93 | margin: 0;
94 | font-size: $font-size;
95 | color: $color-level1;
96 | }
97 |
98 | li {
99 | border: 0;
100 | margin: 0;
101 | padding: 0;
102 | display: list-item;
103 | text-align: -webkit-match-parent;
104 | list-style-type: none;
105 | .active > a {
106 | color: #333;
107 | border-left: $border-active-link;
108 | padding-left: 29px;
109 | }
110 | h3 {
111 | margin: 0;
112 | border-bottom: $border-bottom-level1;
113 | position: relative;
114 | display: block;
115 | a+a,
116 | a+span {
117 | padding: 8px 10px;
118 | font-weight: 700;
119 | cursor: pointer;
120 | }
121 | .arrow-btn {
122 | @include arrow-button($arrow-color-level1);
123 | }
124 | .expanded {
125 | margin: 12px 8px 8px;
126 | @include expanded($arrow-color-level1);
127 | }
128 | :hover {
129 | @include lzhover($hover-background-color-level1, $hover-color-level1);
130 | }
131 | }
132 | ul {
133 | padding: 0;
134 | li {
135 | border-bottom: $border-bottom-level2;
136 | color: $color-level2;
137 | background-color: $background-color-level2;
138 | h3 {
139 | border-bottom: 0;
140 | a+a,
141 | a+span {
142 | padding-left: 31px;
143 | }
144 | .arrow-btn {
145 | @include arrow-button($arrow-color-level2);
146 | }
147 | .expanded {
148 | @include expanded($arrow-color-level2);
149 | }
150 | }
151 | a {
152 | padding: 6px 0 6px 31px;
153 | font-weight: 400;
154 | color: $link-color-level2;
155 | }
156 |
157 | :hover {
158 | @include lzhover($hover-background-color-level2, $hover-color-level2);
159 | }
160 |
161 | ul {
162 | .active > a {
163 | padding-left: 53px;
164 | }
165 | li {
166 | border-bottom: 0;
167 | color: $color-level3;
168 | background-color: $background-color-level3;
169 | a {
170 | padding-left: 56px;
171 | }
172 |
173 | :hover {
174 | @include lzhover($hover-background-color-level3, $hover-color-level3);
175 | }
176 | }
177 | }
178 | }
179 | }
180 | }
181 | }
182 | ul.lz-menu:first-of-type > li:last-child {
183 | h3.collapsed {
184 | border-bottom: none;
185 | }
186 | :last-child {
187 | border-bottom: none;
188 | }
189 | }
190 |
--------------------------------------------------------------------------------
/src/lazeemenu-jquery.js:
--------------------------------------------------------------------------------
1 | /* global jQuery */
2 | (function($) {
3 | "use strict";
4 |
5 | var Plugin = function(el, options) {
6 | this.el = el;
7 | this.$el = $(el);
8 | this.options = options;
9 | this.init();
10 | return this;
11 | };
12 |
13 | Plugin.prototype.init = function() {
14 | var self = this;
15 | var activeIndex = -1;
16 | var activeSubIndex = -1;
17 |
18 | self.$el.addClass('lz-menu');
19 | self.$el.find('> li').each(function(idx) {
20 | console.log('foo', $(this));
21 | var sub = $(this);
22 |
23 | // Append arrows
24 | sub.find('> h3').each(function() {
25 | $(this).prepend(self._arrowBtn());
26 | $(this).addClass('collapsed');
27 | });
28 | sub.find('> ul > li > h3').prepend(self._arrowBtn());
29 |
30 | // Add indexes and collapse all
31 | sub.attr('data-lz-index', idx);
32 | sub.find('> ul > li').each(function(subidx) {
33 | $(this).find('> h3').parent().attr('data-lz-index', idx + '-' + subidx);
34 | $(this).attr('style', 'display: none');
35 | $(this).find('> ul > li').each(function() {
36 | $(this).attr('style', 'display: none');
37 | });
38 | });
39 |
40 | // Find active link (only one allowed, and first selected)
41 | sub.find('> ul > li').each(function(subidx) {
42 | var item = $(this);
43 | if (item.hasClass(self.options.activeClass)) {
44 | activeIndex = idx;
45 | }
46 | item.find('> ul > li').each(function() {
47 | if ($(this).hasClass(self.options.activeClass)) {
48 | activeIndex = idx;
49 | activeSubIndex = subidx;
50 | }
51 |
52 | });
53 | // Also add click event while we are in the loop
54 | self._addClickEvents(item, idx + '-' + subidx);
55 | });
56 | self._addClickEvents(sub, idx);
57 | });
58 |
59 | if (self.options.initialState === 'expand') {
60 | self.expandAll();
61 | } else if (self.options.initialState === 'collapse') {
62 | // Already collapsed
63 | } else {
64 | if (activeIndex > -1 && activeSubIndex > -1) {
65 | self._toggle(activeIndex, 'expand');
66 | self._toggle(activeIndex + '-' + activeSubIndex, 'expand');
67 | } else if (activeIndex > -1) {
68 | self._toggle(activeIndex, 'expand');
69 | }
70 | }
71 | };
72 |
73 | Plugin.prototype._addClickEvents = function(sub, idx) {
74 | var self = this;
75 | sub.find('> h3 > a.arrow-btn').on('click', function(event) {
76 | event.stopPropagation();
77 | event.preventDefault();
78 | self._toggle(idx, 'toggle');
79 | });
80 | sub.find('> h3 > span').on('click', function(event) {
81 | event.stopPropagation();
82 | event.preventDefault();
83 | self._toggle(idx, 'toggle');
84 | });
85 | };
86 |
87 | Plugin.prototype._arrowBtn = function() {
88 | return '';
89 | };
90 |
91 | Plugin.prototype._toggle = function(index, action) {
92 | var self = this;
93 | self.$el.find('li[data-lz-index=\'' + index + '\'] > h3 > a.arrow-btn').each(function() {
94 | if (action === 'toggle') {
95 | if ($(this).hasClass('expanded')) {
96 | $(this).parent().removeClass('expanded');
97 | $(this).parent().addClass('collapsed');
98 | $(this).removeClass('expanded');
99 | $(this).addClass('collapsed');
100 | $(this).parent().parent().find('> ul > li').each(function() {
101 | var elem = $(this);
102 | elem.slideUp(100, function() {
103 | elem.attr('style', 'display: none');
104 | });
105 | });
106 | } else {
107 | $(this).parent().removeClass('collapsed');
108 | $(this).parent().addClass('expanded');
109 | $(this).removeClass('collapsed');
110 | $(this).addClass('expanded');
111 | $(this).parent().parent().find('> ul > li').each(function() {
112 | var elem = $(this);
113 | elem.slideDown(100, function() {
114 | elem.attr('style', 'display: block');
115 | });
116 | });
117 | }
118 | } else if (action === 'expand') {
119 | if (!$(this).hasClass('expanded')) {
120 | $(this).parent().addClass('expanded');
121 | $(this).parent().removeClass('collapsed');
122 | $(this).addClass('expanded');
123 | $(this).removeClass('collapsed');
124 | $(this).parent().parent().find('> ul > li').attr('style', 'display: block');
125 | }
126 | } else {
127 | if ($(this).hasClass('expanded')) {
128 | $(this).parent().removeClass('expanded');
129 | $(this).parent().addClass('collapsed');
130 | $(this).removeClass('expanded');
131 | $(this).addClass('collapsed');
132 | $(this).parent().parent().find('> ul > li').attr('style', 'display: none');
133 | }
134 | }
135 | });
136 | };
137 |
138 | Plugin.prototype.expandAll = function() {
139 | var self = this;
140 | self.$el.find('li[data-lz-index]').each(function() {
141 | self._toggle($(this).attr('data-lz-index'), 'expand');
142 | });
143 | };
144 |
145 | Plugin.prototype.collapseAll = function() {
146 | var self = this;
147 | self.$el.find('li[data-lz-index]').each(function() {
148 | self._toggle($(this).attr('data-lz-index'), 'collapse');
149 | });
150 | };
151 |
152 | Plugin.prototype.destroy = function() {
153 | $.removeData(this.$el);
154 | this.$el.find("> ul > li > h3 > a").unbind('click');
155 | this.$el.find("> ul > li > h3 > span").unbind('click');
156 | };
157 |
158 | $.fn.lazeemenu = function(options) {
159 | if (typeof options === 'string' && options.charAt(0) !== '_' && options !== 'init') {
160 | var callback = true,
161 | args = Array.prototype.slice.call(arguments, 1);
162 | } else {
163 | options = $.extend({}, $.fn.lazeemenu.defaults, options || {});
164 | }
165 | return this.each(function(idx) {
166 | var $this = $(this),
167 | obj = $this.data('lazeemenu');
168 |
169 | if (!obj) {
170 | obj = new Plugin(this, callback ? $.fn.lazeemenu.defaults : options, idx);
171 | $this.data('lazeemenu', obj);
172 | }
173 | if (callback) {
174 | obj[options].apply(obj, args);
175 | }
176 | });
177 | };
178 |
179 | $.fn.lazeemenu.defaults = {
180 | activeClass: 'active',
181 | initialState: 'default'
182 | };
183 |
184 | })(jQuery);
185 |
--------------------------------------------------------------------------------
38 |
39 |
71 |
72 |
73 |
74 |
75 |
76 | 77 |
78 | Introduction
40 |41 | LazeeMenu is a JQuery plugin that turns a nested unordered list of links into a vertical multi-level 42 | navigation menu. It is visually inspired by the similar menu used by Github on its reference pages, but 43 | with support for an additional level. It support both links and standard text in the expandable menu items. 44 |
45 | 46 |Usage and Instructions
47 |48 | Please read the README file in the 49 | GitHib repo for instructions on how to use and contribute. 50 |
51 | 52 |Demos
53 | 54 |Default style without links on expandable headers
55 |In this example we haven't added any links on the expandable items. This allows you to click on the entire 56 | item in order to expand it.
57 | 58 | {% set sourc %}{% include "partials/demo2.html" %}{% endset %} 59 | {% set sourcjs %}{% include "partials/demo2.js.html" %}{% endset %} 60 | {{ demo('demo2', sourc, sourcjs) }} 61 | 62 |GitHub style with linked first level headers
63 |In this example all the expandable headers are also links in themselves. In order to expand the item you 64 | have to click on the arrow beside the link. Clicking elsewhere inside the expandable item will take you to 65 | the link source.
66 | {% set sourc %}{% include "partials/demo1.html" %}{% endset %} 67 | {% set sourcjs %}{% include "partials/demo1.js.html" %}{% endset %} 68 | {{ demo('demo1', sourc, sourcjs) }} 69 | 70 |71 |
72 |
73 |
74 |
75 |
76 | 77 |