jQuery MegaKrill
About
Compact navigation for mobile devices and responsive layouts.
Demonstration
| Click or scan: | | :-: | :-: | | | | Build:
$ grunt or $ npm run grunt |
Resize the browser window to see the plugin(s) in action (Firefox 15+ users, check out Responsive Design View).
Source: jquery.megakrill.js | jquery.megakrill.min.js
Installation
- Download as a
zip. - Clone it:
$ git clone https://github.com/mhulse/jquery-megakrill.git. - Fork it and clone:
$ git clone [email protected]:USERNAME/jquery-megakrill.git. - Just grab the relevant JS (uglified) and CSS (see “Styling” notes below) files.
- Using Bower:
$ bower install https://github.com/mhulse/jquery-megakrill.git.
Usage
Follow these steps …
Markup:
See demo page HTML.
Styling:
DISCLAIMER: While I’ve done my best to make this code as plug-and-play as possible, you’ll most likely have to customize the CSS to suit your needs.
With that said, until I can resolve issue #26, you’ll want to combine/modify the packaged and demo page’s CSS files to get this working just right for you project.
Javascript:
Put jQuery on your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>… and link to the plugin:
<script src="jquery.megakrill.min.js"></script>Finally, instantiate the plugin:
<script> $(document).ready(function() { $('#megakrill').megakrill(); }); </script>Options:
| Option | Description | Default |
|---|---|---|
animIn | What animation object to use to show the submenus. | { height: 'toggle' } |
animOut | IBID, but for hiding. | { height: 'toggle' } |
clone | Set to false if you don't want to clone target object. | true |
cloneId | Auto clone id? One of <id>, true or false. | true |
easeIn | Easing function in. | swing |
easeOut | Easing function out. | swing |
cloneRemove | Element(s) for the clone to remove. | false |
speedIn | Animation speed in. | normal |
speedOut | Animation speed out. | normal |
onInit | Callback after plugin data initialized. | $.noop |
onAfterInit | After plugin initialization. | $.noop |
onBeforeShow | Before reveal animation begins. | $.noop |
onShow | After reveal animation ends. | $.noop |
onBeforeHide | Before hide animation begins. | $.noop |
onHide | After hide animation ends. | $.noop |
Links
Related repositories:
In the wild:
This code was originally developed for The Register-Guard.
Development
Assuming you already have Grunt.js installed …
Note: The Grunt command line interface gets installed locally, so you can skip $ npm install -g grunt-cli if you use the $ npm run commands.
Setup dependencies:
Navigate to the local repo’s build/ directory:
$ cd jquery-megakrill/build/Install Grunt tasks:
$ npm installPreview:
Test the development build:
$ grunt # … or: $ grunt default # … or: $ npm run gruntVisit the demo page:
http://localhost/grunt-html-boiler/dev/
Note: The above URL will depend upon your local development environment; for previewing my projects I use XAMPP.
Edit:
At this point, you can modify any of the files, especially the ones found in the build/files/ directory.
To make life easier while developing, run:
$ grunt watch # … or: $ npm run watch… the watch command will run a development build any time these directories/file(s) change:
build/Gruntfile.js build/files/jquery.megakrill.js build/files/jquery.megakrill.css Bumping the version:
When a build is ready for a version bump ...
- Update
versionkey value insource/package.json. - Update
versionkey value inbower.json. - Build:
$ grunt. - Update the changelog and release history in the README.md (if copy/pasting, don't forget to update the date and version numbers).
- Push changes to GitHub.
- Visit the releases page and click "Draft a new release".
- Type the new version number in the "Tag version" field (e.g.,
v1.2.1). - Click "Publish release".
Note: MegaKrill uses Semantic Versioning.
Update:
When finished, push your changes back to GitHub and submit a pull request …
Contributing
Please read the CONTRIBUTING.md.
Feedback
Bugs? Constructive feedback? Questions?
Changelog
Release history
- 2014-08-10 v1.2.0 2014 refresh.
- 2014-04-13 v1.1.0 Stable.
- 2013-02-15 v1.0.0 2013 stable.
- 2012-09-07 v0.1.1 Bug fixes.
- 2012-08-05 v0.1.0 Public release.
LEGAL
Copyright © 2013-2014 Micky Hulse
Licensed under the Apache License, Version 2.0 (the “License”); you may not use this work except in compliance with the License. You may obtain a copy of the License in the LICENSE file, or at:
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an “AS IS” BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
