diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..0c0c19a --- /dev/null +++ b/.gitignore @@ -0,0 +1,13 @@ +# ignore .DS_Store files and some other stuff +.DS_Store + +.idea/ +.tmproj + +.sass-cache/ + +# ignore node_modules +node_modules/ + +# ignore bower_components +bower_components/ \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..4e99d57 --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,54 @@ +module.exports = function(grunt) { + + grunt.initConfig({ + watch: { + sass: { + files: 'src/sass/*.scss', + tasks: ['compass', 'cssmin'] + }, + scripts: { + files: 'src/js/*.js', + tasks: ['copy', 'uglify'] + } + }, + compass: { + dist: { + options: { + sassDir: 'src/sass', + cssDir: 'dist', + outputStyle: 'expanded', + noLineComments: true + } + } + }, + cssmin: { + dist: { + files: { + 'dist/jquery.fatNav.min.css': 'dist/jquery.fatNav.css' + } + } + }, + uglify: { + scripts: { + files: { + 'dist/jquery.fatNav.min.js': ['src/js/jquery.fatNav.js'] + } + } + }, + copy: { + scripts: { + src: 'src/js/jquery.fatNav.js', + dest: 'dist/jquery.fatNav.js', + } + } + }); + + grunt.loadNpmTasks('grunt-contrib-cssmin'); + grunt.loadNpmTasks('grunt-contrib-compass'); + grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-contrib-copy'); + grunt.loadNpmTasks('grunt-contrib-watch'); + + grunt.registerTask('default', ['uglify', 'copy', 'compass', 'cssmin', 'watch']); + +}; \ No newline at end of file diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..8a120f6 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2014 Adrien Glitchbone + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..7534051 --- /dev/null +++ b/README.md @@ -0,0 +1,36 @@ +#jQuery fatNav + +Chubby fullscreen menu with nice hamburger toggle + +##Installation + +Install via bower: + +```sh +bower install fatNav +``` + +Or you can add jquery.fatNav.css and jquery.fatNav.js manually to your project + +##Usage + +See [demo](http://glitchbone.github.io/jquery-fatNav) for usage example + +##Build + +```sh +git clone https://github.com/Glitchbone/jquery-fatNav.git my_project +npm install +grunt +``` + +##Author + +**Adrien Glitchbone** + ++ [https://twitter.com/glitchbone](https://twitter.com/glitchbone) ++ [http://github.com/Glitchbone](http://github.com/Glitchbone) + +##License + +jQuery fatNav is available under the MIT license. See the [LICENSE](LICENSE) file for more information. \ No newline at end of file diff --git a/css/normalize.css b/css/normalize.css new file mode 100644 index 0000000..458eea1 --- /dev/null +++ b/css/normalize.css @@ -0,0 +1,427 @@ +/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 + * and Firefox. + * Correct `block` display not defined for `main` in IE 11. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; +} + +/** + * 1. Correct `inline-block` display not defined in IE 8/9. + * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. + */ + +audio, +canvas, +progress, +video { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9/10. + */ + +img { + border: 0; +} + +/** + * Correct overflow not hidden in IE 9/10/11. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Grouping content + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari. + */ + +figure { + margin: 1em 40px; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Contain overflow in all browsers. + */ + +pre { + overflow: auto; +} + +/** + * Address odd `em`-unit font size rendering in all browsers. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +/* Forms + ========================================================================== */ + +/** + * Known limitation: by default, Chrome and Safari on OS X allow very limited + * styling of `select`, unless a `border` property is set. + */ + +/** + * 1. Correct color not being inherited. + * Known issue: affects color of disabled elements. + * 2. Correct font properties not being inherited. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. + */ + +button, +input, +optgroup, +select, +textarea { + color: inherit; /* 1 */ + font: inherit; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address `overflow` set to `hidden` in IE 8/9/10/11. + */ + +button { + overflow: visible; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. + * Correct `select` style inheritance in Firefox. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +input { + line-height: normal; +} + +/** + * It's recommended that you don't attempt to style these elements. + * Firefox's implementation doesn't respect box-sizing, padding, or width. + * + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Fix the cursor style for Chrome's increment/decrement buttons. For certain + * `font-size` values of the `input`, it causes the cursor style of the + * decrement button to change from `default` to `text`. + */ + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari and Chrome on OS X. + * Safari (but not Chrome) clips the cancel button when the search input has + * padding (and `textfield` appearance). + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9/10/11. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Remove default vertical scrollbar in IE 8/9/10/11. + */ + +textarea { + overflow: auto; +} + +/** + * Don't inherit the `font-weight` (applied by a rule above). + * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. + */ + +optgroup { + font-weight: bold; +} + +/* Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} diff --git a/dist/jquery.fatNav.css b/dist/jquery.fatNav.css new file mode 100644 index 0000000..49c2b53 --- /dev/null +++ b/dist/jquery.fatNav.css @@ -0,0 +1,120 @@ +.hamburger { + display: block; + width: 50px; + height: 50px; + position: fixed; + top: 0; + left: 0; + z-index: 10000; + padding: 12px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + -webkit-tap-highlight-color: transparent; + -webkit-tap-highlight-color: transparent; + -ms-touch-action: manipulation; + touch-action: manipulation; +} +.hamburger__icon { + position: relative; + margin-top: 7px; + margin-bottom: 7px; +} +.hamburger__icon, .hamburger__icon:before, .hamburger__icon:after { + display: block; + width: 25px; + height: 2px; + background-color: #222; + -moz-transition-property: background-color, -moz-transform; + -o-transition-property: background-color, -o-transform; + -webkit-transition-property: background-color, -webkit-transform; + transition-property: background-color, transform; + -moz-transition-duration: 0.4s; + -o-transition-duration: 0.4s; + -webkit-transition-duration: 0.4s; + transition-duration: 0.4s; +} +.hamburger__icon:before, .hamburger__icon:after { + position: absolute; + content: ""; +} +.hamburger__icon:before { + top: -7px; +} +.hamburger__icon:after { + top: 7px; +} +.active .hamburger__icon { + background-color: transparent; +} +.active .hamburger__icon:before, .active .hamburger__icon:after { + background-color: #fff; +} +.active .hamburger__icon:before { + -moz-transform: translateY(7px) rotate(45deg); + -ms-transform: translateY(7px) rotate(45deg); + -webkit-transform: translateY(7px) rotate(45deg); + transform: translateY(7px) rotate(45deg); +} +.active .hamburger__icon:after { + -moz-transform: translateY(-7px) rotate(-45deg); + -ms-transform: translateY(-7px) rotate(-45deg); + -webkit-transform: translateY(-7px) rotate(-45deg); + transform: translateY(-7px) rotate(-45deg); +} + +.fat-nav { + top: 0; + left: 0; + z-index: 9999; + position: fixed; + display: none; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.8); + -moz-transform: scale(1.4); + -ms-transform: scale(1.4); + -webkit-transform: scale(1.4); + transform: scale(1.4); + -moz-transition-property: -moz-transform; + -o-transition-property: -o-transform; + -webkit-transition-property: -webkit-transform; + transition-property: transform; + -moz-transition-duration: 0.4s; + -o-transition-duration: 0.4s; + -webkit-transition-duration: 0.4s; + transition-duration: 0.4s; + overflow-y: scroll; + overflow-x: hidden; + -webkit-overflow-scrolling: touch; +} +.fat-nav__wrapper { + width: 100%; + height: 100%; + display: table; + table-layout: fixed; +} +.fat-nav.active { + -moz-transform: scale(1); + -ms-transform: scale(1); + -webkit-transform: scale(1); + transform: scale(1); +} +.fat-nav ul { + display: table-cell; + vertical-align: middle; + margin: 0; + padding: 0; +} +.fat-nav li { + list-style-type: none; + text-align: center; + padding: 10px; + font-size: 2em; +} +.fat-nav li, .fat-nav li a { + color: #fff; +} +.fat-nav li a { + text-decoration: none; +} diff --git a/dist/jquery.fatNav.js b/dist/jquery.fatNav.js new file mode 100644 index 0000000..2a0e3de --- /dev/null +++ b/dist/jquery.fatNav.js @@ -0,0 +1,64 @@ +(function($, window, document) { + + var pluginName = 'fatNav', + defaults = {}; + + function Plugin(options) { + this.settings = $.extend({}, defaults, options); + this._defaults = defaults; + this._name = pluginName; + this.init(); + } + + $.extend(Plugin.prototype, { + + init: function() { + + var self = this; + var $nav = this.$nav = $('.fat-nav'); + var $hamburger = this.$hamburger = $('
'); + + this._bodyOverflow = $('body').css('overflow'); + + $('body').append($hamburger); + + $().add($hamburger).add($nav.find('a')).on('click', function(e) { + self.toggleNav(); + }); + + }, + + toggleNav: function() { + + var self = this; + + this.$nav.fadeToggle(400, function() { + self.toggleBodyOverflow(); + }); + + $().add(this.$hamburger).add(this.$nav).toggleClass('active'); + }, + + toggleBodyOverflow: function() { + + var self = this; + + $('body').toggleClass('no-scroll'); + + $('body').css({ + 'overflow': $('body').hasClass('no-scroll') ? 'hidden' : self._bodyOverflow + }); + + } + + }); + + if (typeof $[pluginName] === 'undefined') { + + $[pluginName] = function(options) { + return new Plugin(this, options); + }; + + } + +}(jQuery, window, document)); \ No newline at end of file diff --git a/dist/jquery.fatNav.min.css b/dist/jquery.fatNav.min.css new file mode 100644 index 0000000..21daebf --- /dev/null +++ b/dist/jquery.fatNav.min.css @@ -0,0 +1 @@ +.fat-nav,.hamburger__icon,.hamburger__icon:after,.hamburger__icon:before{-moz-transition-duration:.4s;-o-transition-duration:.4s;-webkit-transition-duration:.4s}.hamburger{display:block;width:50px;height:50px;position:fixed;top:0;left:0;z-index:10000;padding:12px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-ms-touch-action:manipulation;touch-action:manipulation}.hamburger__icon{position:relative;margin-top:7px;margin-bottom:7px}.hamburger__icon,.hamburger__icon:after,.hamburger__icon:before{display:block;width:25px;height:2px;background-color:#222;-moz-transition-property:background-color,-moz-transform;-o-transition-property:background-color,-o-transform;-webkit-transition-property:background-color,-webkit-transform;transition-property:background-color,transform;transition-duration:.4s}.hamburger__icon:after,.hamburger__icon:before{position:absolute;content:""}.hamburger__icon:before{top:-7px}.hamburger__icon:after{top:7px}.active .hamburger__icon{background-color:transparent}.active .hamburger__icon:after,.active .hamburger__icon:before{background-color:#fff}.active .hamburger__icon:before{-moz-transform:translateY(7px)rotate(45deg);-ms-transform:translateY(7px)rotate(45deg);-webkit-transform:translateY(7px)rotate(45deg);transform:translateY(7px)rotate(45deg)}.active .hamburger__icon:after{-moz-transform:translateY(-7px)rotate(-45deg);-ms-transform:translateY(-7px)rotate(-45deg);-webkit-transform:translateY(-7px)rotate(-45deg);transform:translateY(-7px)rotate(-45deg)}.fat-nav{top:0;left:0;z-index:9999;position:fixed;display:none;width:100%;height:100%;background:rgba(0,0,0,.8);-moz-transform:scale(1.4);-ms-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4);-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-webkit-transition-property:-webkit-transform;transition-property:transform;transition-duration:.4s;overflow-y:scroll;overflow-x:hidden;-webkit-overflow-scrolling:touch}.fat-nav__wrapper{width:100%;height:100%;display:table;table-layout:fixed}.fat-nav.active{-moz-transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);transform:scale(1)}.fat-nav ul{display:table-cell;vertical-align:middle;margin:0;padding:0}.fat-nav li{list-style-type:none;text-align:center;padding:10px;font-size:2em}.fat-nav li,.fat-nav li a{color:#fff}.fat-nav li a{text-decoration:none} \ No newline at end of file diff --git a/dist/jquery.fatNav.min.js b/dist/jquery.fatNav.min.js new file mode 100644 index 0000000..3ab82cc --- /dev/null +++ b/dist/jquery.fatNav.min.js @@ -0,0 +1 @@ +!function(a,b,c){function d(b){this.settings=a.extend({},f,b),this._defaults=f,this._name=e,this.init()}var e="fatNav",f={};a.extend(d.prototype,{init:function(){var b=this,c=this.$nav=a(".fat-nav"),d=this.$hamburger=a('
');this._bodyOverflow=a("body").css("overflow"),a("body").append(d),a().add(d).add(c.find("a")).on("click",function(a){b.toggleNav()})},toggleNav:function(){var b=this;this.$nav.fadeToggle(400,function(){b.toggleBodyOverflow()}),a().add(this.$hamburger).add(this.$nav).toggleClass("active")},toggleBodyOverflow:function(){var b=this;a("body").toggleClass("no-scroll"),a("body").css({overflow:a("body").hasClass("no-scroll")?"hidden":b._bodyOverflow})}}),"undefined"==typeof a[e]&&(a[e]=function(a){return new d(this,a)})}(jQuery,window,document); \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..ef110e7 --- /dev/null +++ b/index.html @@ -0,0 +1,37 @@ + + + + + + + + jQuery fatNav + + + + + + + + + + + +
+
+ +
+
+ + + + + + + + \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..9a9b7b1 --- /dev/null +++ b/js/main.js @@ -0,0 +1,5 @@ +(function() { + + $.fatNav(); + +}()); \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..daf3748 --- /dev/null +++ b/package.json @@ -0,0 +1,31 @@ +{ + "name": "jquery-fatNav", + "version": "0.5.0", + "description": "Chubby fullscreen menu with nice hamburger toggle", + "main": "dist/jquery.fatNav.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "https://github.com/Glitchbone/HumbleGS.git" + }, + "keywords": [ + "responsive", + "grid" + ], + "author": "Adrien Glitchbone", + "license": "MIT", + "bugs": { + "url": "https://github.com/Glitchbone/HumbleGS/issues" + }, + "homepage": "https://github.com/Glitchbone/HumbleGS", + "devDependencies": { + "grunt": "^0.4.5", + "grunt-contrib-compass": "^1.0.3", + "grunt-contrib-copy": "^0.8.0", + "grunt-contrib-cssmin": "^0.12.2", + "grunt-contrib-uglify": "^0.9.1", + "grunt-contrib-watch": "^0.6.1" + } +} diff --git a/src/js/jquery.fatNav.js b/src/js/jquery.fatNav.js new file mode 100644 index 0000000..2a0e3de --- /dev/null +++ b/src/js/jquery.fatNav.js @@ -0,0 +1,64 @@ +(function($, window, document) { + + var pluginName = 'fatNav', + defaults = {}; + + function Plugin(options) { + this.settings = $.extend({}, defaults, options); + this._defaults = defaults; + this._name = pluginName; + this.init(); + } + + $.extend(Plugin.prototype, { + + init: function() { + + var self = this; + var $nav = this.$nav = $('.fat-nav'); + var $hamburger = this.$hamburger = $('
'); + + this._bodyOverflow = $('body').css('overflow'); + + $('body').append($hamburger); + + $().add($hamburger).add($nav.find('a')).on('click', function(e) { + self.toggleNav(); + }); + + }, + + toggleNav: function() { + + var self = this; + + this.$nav.fadeToggle(400, function() { + self.toggleBodyOverflow(); + }); + + $().add(this.$hamburger).add(this.$nav).toggleClass('active'); + }, + + toggleBodyOverflow: function() { + + var self = this; + + $('body').toggleClass('no-scroll'); + + $('body').css({ + 'overflow': $('body').hasClass('no-scroll') ? 'hidden' : self._bodyOverflow + }); + + } + + }); + + if (typeof $[pluginName] === 'undefined') { + + $[pluginName] = function(options) { + return new Plugin(this, options); + }; + + } + +}(jQuery, window, document)); \ No newline at end of file diff --git a/src/sass/_fat-nav.scss b/src/sass/_fat-nav.scss new file mode 100644 index 0000000..0df3137 --- /dev/null +++ b/src/sass/_fat-nav.scss @@ -0,0 +1,59 @@ +$module: ".fat-nav"; + +#{$module} { + + top: 0; + left: 0; + z-index: 9999; + position: fixed; + display: none; + width: 100%; + height: 100%; + background: $fat-nav-bg-color; + @include transform(scale(1.4)); + @include transition-property(transform); + @include transition-duration($fat-nav-trans-duration); + overflow-y: scroll; + overflow-x: hidden; + -webkit-overflow-scrolling: touch; + + &__wrapper { + + width: 100%; + height: 100%; + display: table; + table-layout: fixed; + + } + + &.active { + @include transform(scale(1)); + } + + ul { + + display: table-cell; + vertical-align: middle; + margin: 0; + padding: 0; + + } + + li { + + list-style-type: none; + text-align: center; + padding: 10px; + font-size: 2em; + + &, a { + color: $fat-nav-text-color; + } + + a { + text-decoration: none; + } + + } + +} \ No newline at end of file diff --git a/src/sass/_hamburger.scss b/src/sass/_hamburger.scss new file mode 100644 index 0000000..8fe8357 --- /dev/null +++ b/src/sass/_hamburger.scss @@ -0,0 +1,77 @@ +$module: ".hamburger"; + +#{$module} { + + display: block; + width: 50px; + height: 50px; + position: fixed; + top: 0; + left: 0; + z-index: 10000; + padding: 12px; + @include box-sizing(border-box); + + -webkit-tap-highlight-color: rgba(0,0,0,0); + -webkit-tap-highlight-color: transparent; + + -ms-touch-action: manipulation; + touch-action: manipulation; + + &__icon { + + position: relative; + margin-top: $hamburger-height + $hamburger-gutter; + margin-bottom: $hamburger-height + $hamburger-gutter; + + &, &:before, &:after { + + display: block; + width: $hamburger-width; + height: $hamburger-height; + background-color: $hamburger-color; + @include transition-property(background-color, transform); + @include transition-duration($fat-nav-trans-duration); + + } + + &:before, &:after { + + position: absolute; + content: ""; + + } + + $offset-positive: $hamburger-height + $hamburger-gutter; + $offset-negative: -($hamburger-height + $hamburger-gutter); + + &:before { + top: $offset-negative; + } + + &:after { + top: $offset-positive; + } + + .active & { + + & { + background-color: transparent; + } + + &:before, &:after { + background-color: $hamburger-color-active; + } + + &:before { + @include transform(translateY($offset-positive) rotate(45deg)); + } + + &:after { + @include transform(translateY($offset-negative) rotate(-45deg)); + } + + } + } + +} \ No newline at end of file diff --git a/src/sass/jquery.fatNav.scss b/src/sass/jquery.fatNav.scss new file mode 100644 index 0000000..327c7e1 --- /dev/null +++ b/src/sass/jquery.fatNav.scss @@ -0,0 +1,13 @@ +@import "compass/css3"; + +$hamburger-color: #222; +$hamburger-color-active: #fff; +$hamburger-width: 25px; +$hamburger-height: 2px; +$hamburger-gutter: 5px; +$fat-nav-bg-color: rgba(0, 0, 0, 0.8); +$fat-nav-text-color: $hamburger-color-active; +$fat-nav-trans-duration: .4s; + +@import "hamburger"; +@import "fat-nav"; \ No newline at end of file