Compact navigation for mobile devices and responsive layouts.
JavaScript CSS HTML
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

jQuery MegaKrill

MegaKrill gif demo


Compact navigation for mobile devices and responsive layouts.


| Click or scan: | | :-: | :-: | | qr code | | 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


  1. Download as a zip.
  2. Clone it: $ git clone
  3. Fork it and clone: $ git clone
  4. Just grab the relevant JS (uglified) and CSS (see “Styling” notes below) files.
  5. Using Bower: $ bower install


Follow these steps …


See demo page HTML.


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.


Put jQuery on your page:

<script src="//"></script>

… and link to the plugin:

<script src="jquery.megakrill.min.js"></script>

Finally, instantiate the plugin:

	$(document).ready(function() {


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


Related repositories:

  1. jQuery MegaWhale
  2. jQuery Mega demos!

In the wild:

This code was originally developed for The Register-Guard.


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 install


Test the development build:

$ grunt
# … or:
$ grunt default
# … or:
$ npm run grunt

Visit the demo page:


Note: The above URL will depend upon your local development environment; for previewing my projects I use XAMPP.


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:


Bumping the version:

When a build is ready for a version bump ...

  1. Update version key value in source/package.json.
  2. Update version key value in bower.json.
  3. Build: $ grunt.
  4. Update the changelog and release history in the (if copy/pasting, don't forget to update the date and version numbers).
  5. Push changes to GitHub.
  6. Visit the releases page and click "Draft a new release".
  7. Type the new version number in the "Tag version" field (e.g., v1.2.1).
  8. Click "Publish release".

Note: MegaKrill uses Semantic Versioning.


When finished, push your changes back to GitHub and submit a pull request …


Please read the


Bugs? Constructive feedback? Questions?


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.


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:

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.