├── .gitignore ├── README.md ├── bower.js ├── css ├── footerMenu.css ├── footerMenu.less └── footerMenu.sass ├── demo └── footerMenu.gif ├── footerMenu.html ├── footerMenu.jquery.json └── js └── jquery.footerMenu.js /.gitignore: -------------------------------------------------------------------------------- 1 | *.bat 2 | *.DS_Store 3 | *.idea -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | What is footerMenu: 2 | ========= 3 | Simple and easy jQuery plugin. Nice slide up toggle footer menu when scroll down. 4 | 5 | Demo: 6 | ========= 7 | 8 | http://htmlpreview.github.io/?https://raw.githubusercontent.com/fpmweb/footerMenu/master/footerMenu.html 9 | 10 | ![Alt text](/demo/footerMenu.gif?raw=true "footerMenu in action") 11 | 12 | 13 | Bower installation: 14 | ========= 15 | 16 | To add a new Bower package to your project you use the install command. This should be passed the name of the package you wish to install. 17 | 18 | ```js 19 | bower install footerMenu 20 | ``` 21 | 22 | Author: 23 | ========= 24 | 25 | | [![twitter/fpmweb](http://2.gravatar.com/avatar/1fffcab4361ad5fafe1a9ab1a161536f)](https://twitter.com/fpmweb "Follow @fpmweb on Twitter") | 26 | |---| 27 | 28 | 29 | -------------------------------------------------------------------------------- /bower.js: -------------------------------------------------------------------------------- 1 | { 2 | name: "footerMenu", 3 | homepage: "https://github.com/fpmweb/footerMenu", 4 | authors: [ 5 | "Francesc Puig " 6 | ], 7 | description: "Simple and easy jQuery plugin. Nice slide up toggle footer menu when scroll down.", 8 | main: "footerMenu.html", 9 | moduleType: [ ], 10 | keywords: [ 11 | "footerMenu", 12 | "menu", 13 | "footer", 14 | "message", 15 | "fpmweb", 16 | "css3", 17 | "javascript", 18 | "css", 19 | "simple", 20 | "jquery", 21 | "plugin", 22 | "nice", 23 | "animation" 24 | ], 25 | license: "MIT" 26 | } -------------------------------------------------------------------------------- /css/footerMenu.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 13px Helvetica, arial, freesans, clean, sans-serif; 3 | height: 1500px; 4 | } 5 | 6 | h1 { 7 | font-size: 40px; 8 | font-weight: bold; 9 | color: #191919; 10 | -webkit-font-smoothing: antialiased; 11 | } 12 | 13 | h2 { 14 | font-weight: normal; 15 | font-size: 20px; 16 | color: #888; 17 | } 18 | 19 | .arrow-down { 20 | margin-top: 150px; 21 | width: 0; 22 | height: 0; 23 | border-left: 40px solid transparent; 24 | border-right: 40px solid transparent; 25 | border-top: 40px solid #7CA1CA; 26 | } 27 | 28 | #container { 29 | width: 100%; 30 | text-align: center; 31 | } 32 | 33 | #footerMenu { 34 | background: #7CA1CA; 35 | color: #FFF; 36 | width: 100%; 37 | height: 0px; 38 | position: fixed; 39 | z-index: 300; 40 | bottom: 0; 41 | overflow: none; 42 | left: 0; 43 | -moz-transition: all 0.4s ease-in-out; 44 | -o-transition: all 0.4s ease-in-out; 45 | transition: all 0.4s ease-in-out; 46 | -webkit-transition: all 0.4s ease-in-out; 47 | -webkit-box-shadow: 0px -4px 38px rgba(50, 50, 50, 0.50); 48 | -moz-box-shadow: 0px -4px 38px rgba(50, 50, 50, 0.50); 49 | box-shadow: 0px -4px 38px rgba(50, 50, 50, 0.50); 50 | } 51 | 52 | #footerMenu.show { 53 | height: 65px; 54 | -moz-transition: all 0.4s ease-in-out; 55 | -o-transition: all 0.4s ease-in-out; 56 | transition: all 0.4s ease-in-out; 57 | -webkit-transition: all 0.4s ease-in-out; 58 | } 59 | 60 | #footerMenu ul.navigation li { 61 | margin-top: 10px; 62 | float: left; 63 | margin-right: 16px; 64 | display: block; 65 | } 66 | 67 | #footerMenu ul.navigation li a:hover { 68 | background-color: #99AABD; 69 | color: white; 70 | } 71 | 72 | #footerMenu ul.navigation li a { 73 | text-decoration: none; 74 | padding: .2em 1em; 75 | color: #fff; 76 | background-color: #172E48; 77 | border-radius: 3px; 78 | } -------------------------------------------------------------------------------- /css/footerMenu.less: -------------------------------------------------------------------------------- 1 | // Color variables (appears count calculates by raw css) 2 | @color0: #ffffff; // Appears 2 times 3 | 4 | 5 | 6 | body { 7 | font: 13px Helvetica, arial, freesans, clean, sans-serif; 8 | height: 900px; 9 | } 10 | h1 { 11 | -webkit-font-smoothing: antialiased; 12 | color: #191919; 13 | font-size: 40px; 14 | font-weight: bold; 15 | } 16 | h2 { 17 | color: #888888; 18 | font-size: 20px; 19 | font-weight: normal; 20 | } 21 | #footerMenu { 22 | -moz-transition: all 0.4s ease-in-out; 23 | -o-transition: all 0.4s ease-in-out; 24 | -webkit-transition: all 0.4s ease-in-out; 25 | background: #7CA1CA; 26 | bottom: 0; 27 | color: @color0; 28 | height: 0px; 29 | left: 0; 30 | overflow: none; 31 | position: fixed; 32 | transition: all 0.4s ease-in-out; 33 | width: 100%; 34 | z-index: 300; 35 | ul.navigation { 36 | li { 37 | display: block; 38 | float: left; 39 | margin-right: 16px; 40 | a { 41 | background-color: #172E48; 42 | border-radius: 3px; 43 | color: @color0; 44 | padding: .2em 1em; 45 | text-decoration: none; 46 | &:hover { 47 | background-color: #99AABD; 48 | color: white; 49 | } 50 | } 51 | } 52 | } 53 | } 54 | #footerMenu.show { 55 | -moz-transition: all 0.4s ease-in-out; 56 | -o-transition: all 0.4s ease-in-out; 57 | -webkit-transition: all 0.4s ease-in-out; 58 | height: 65px; 59 | transition: all 0.4s ease-in-out; 60 | } -------------------------------------------------------------------------------- /css/footerMenu.sass: -------------------------------------------------------------------------------- 1 | body 2 | font: 13px Helvetica, arial, freesans, clean, sans-serif 3 | height: 900px 4 | 5 | h1 6 | font-size: 40px 7 | font-weight: bold 8 | color: #191919 9 | -webkit-font-smoothing: antialiased 10 | 11 | h2 12 | font-weight: normal 13 | font-size: 20px 14 | color: #888 15 | 16 | #footerMenu 17 | background: #7CA1CA 18 | color: #FFF 19 | width: 100% 20 | height: 0px 21 | position: fixed 22 | z-index: 300 23 | bottom: 0 24 | overflow: none 25 | left: 0 26 | -moz-transition: all 0.4s ease-in-out 27 | -o-transition: all 0.4s ease-in-out 28 | transition: all 0.4s ease-in-out 29 | -webkit-transition: all 0.4s ease-in-out 30 | &.show 31 | height: 65px 32 | -moz-transition: all 0.4s ease-in-out 33 | -o-transition: all 0.4s ease-in-out 34 | transition: all 0.4s ease-in-out 35 | -webkit-transition: all 0.4s ease-in-out 36 | ul.navigation li 37 | float: left 38 | margin-right: 16px 39 | display: block 40 | a 41 | &:hover 42 | background-color: #99AABD 43 | color: white 44 | text-decoration: none 45 | padding: .2em 1em 46 | color: #fff 47 | background-color: #172E48 48 | border-radius: 3px -------------------------------------------------------------------------------- /demo/footerMenu.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fpmweb/footerMenu/c37f40cc78116968a9211257000cab74c738971c/demo/footerMenu.gif -------------------------------------------------------------------------------- /footerMenu.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |

10 | Simple and easy jQuery plugin. 11 |
12 | Nice slide up toggle footer menu when scroll down. 13 |

14 |

Scroll Down to see the Footer Menu in action.

15 | 16 |
17 | 18 |
19 |
20 | 28 |
29 |
30 | 31 | 32 | 33 | 34 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /footerMenu.jquery.json: -------------------------------------------------------------------------------- 1 | { 2 | "name" : "footerMenu", 3 | "version" : "1.0", 4 | "title" : "jQuery footerMenu", 5 | "description" : "Simple and easy jQuery plugin. Nice slide up toggle footer menu when scroll down.", 6 | "author" : { 7 | "name" : "Francesc Puig", 8 | "url" : "https://github.com/fpmweb" 9 | }, 10 | "dependencies" : { 11 | "jquery" : ">=1.2" 12 | }, 13 | "bugs" : "https://github.com/fpmweb/footerMenu/issues", 14 | "homepage" : "https://github.com/fpmweb/footerMenu", 15 | "docs" : "https://github.com/fpmweb/footerMenu#readme" 16 | } -------------------------------------------------------------------------------- /js/jquery.footerMenu.js: -------------------------------------------------------------------------------- 1 | (function( $ ){ 2 | $.fn.footerMenu = function() { 3 | $(window).scroll(function() { 4 | if ($(document).scrollTop() > 100) { 5 | $('#footerMenu').addClass("show"); 6 | } else { 7 | $('#footerMenu').removeClass("show"); 8 | } 9 | }); 10 | }; 11 | })( jQuery ); --------------------------------------------------------------------------------