├── templates ├── md-blank.html ├── md-basic.html └── README.html ├── demo ├── css │ ├── menu-btn.png │ ├── styles.css │ ├── responsive-menu.min.css │ └── responsive-menu.css ├── images │ └── cloud.jpg ├── js │ └── responsive-menu.min.js └── lib │ ├── html5shiv │ └── html5shiv.js │ └── modernizr │ └── modernizr-custom.js ├── dist ├── css │ ├── menu-btn.png │ ├── styles.css │ ├── responsive-menu.min.css │ └── responsive-menu.css ├── js │ └── responsive-menu.min.js ├── demo.html ├── responsive-menu.html └── lib │ ├── html5shiv │ └── html5shiv.js │ └── modernizr │ └── modernizr-custom.js ├── src ├── css │ ├── menu-btn.png │ ├── styles.css │ └── responsive-menu.css ├── images │ └── cloud.jpg ├── demo.html └── lib │ └── html5shiv │ └── html5shiv.js ├── .gitignore ├── bower.json ├── package.json ├── README.md ├── README.html └── lib ├── html5shiv └── html5shiv.js └── modernizr └── modernizr-custom.js /templates/md-blank.html: -------------------------------------------------------------------------------- 1 | <%=content%> -------------------------------------------------------------------------------- /demo/css/menu-btn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jbowyers/responsive-menu/HEAD/demo/css/menu-btn.png -------------------------------------------------------------------------------- /demo/images/cloud.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jbowyers/responsive-menu/HEAD/demo/images/cloud.jpg -------------------------------------------------------------------------------- /dist/css/menu-btn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jbowyers/responsive-menu/HEAD/dist/css/menu-btn.png -------------------------------------------------------------------------------- /src/css/menu-btn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jbowyers/responsive-menu/HEAD/src/css/menu-btn.png -------------------------------------------------------------------------------- /src/images/cloud.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jbowyers/responsive-menu/HEAD/src/images/cloud.jpg -------------------------------------------------------------------------------- /templates/md-basic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Responsive Menu 5 | 6 | 7 | <%=content%> 8 | 9 | 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Node -------------------------------------- 2 | # Logs 3 | logs 4 | *.log 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 18 | .grunt 19 | 20 | # Compiled binary addons (http://nodejs.org/api/addons.html) 21 | build/Release 22 | 23 | # Dependency directory 24 | # Commenting this out is preferred by some people, see 25 | # https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git 26 | node_modules 27 | 28 | # Users Environment Variables 29 | .lock-wscript 30 | 31 | # Bower ------------------------------------------------- 32 | bower_components 33 | 34 | # Other ------------------------------------------------- 35 | .tmp -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery-responsive-menu", 3 | "version": "0.2.1", 4 | "authors": [ 5 | "jbowyers" 6 | ], 7 | "description": "A jQuery plugin for responsive drop-down navigation menus", 8 | "main": [ 9 | "dist/js/responsive-menu.js", 10 | "dist/css/responsive-menu.css", 11 | "dist/js/responsive-menu.min.js", 12 | "dist/css/responsive-menu.min.css", 13 | "dist/css/menu-btn.png" 14 | ], 15 | "keywords": [ 16 | "jQuery", 17 | "plugin", 18 | "responsive", 19 | "menu", 20 | "navigation", 21 | "list" 22 | ], 23 | "license": "MIT", 24 | "ignore": [ 25 | "**/.*", 26 | "_notes", 27 | "node_modules", 28 | "bower_components", 29 | "test", 30 | "tests", 31 | "_references", 32 | "demo", 33 | "doc", 34 | "src", 35 | "templates", 36 | ".bowerrc", 37 | ".gitignore", 38 | ".jshintignore", 39 | ".jshintrc", 40 | "Gruntfile.js", 41 | "LICENCE.txt", 42 | "package.json" 43 | ], 44 | "dependencies": { 45 | "jquery-legacy": "jquery#1.11" 46 | }, 47 | "devDependencies": { 48 | "html5shiv": "~3.7.2" 49 | }, 50 | "private": false 51 | } 52 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery-responsive-menu", 3 | "title": "jQuery Responsive Menu", 4 | "version": "0.2.1", 5 | "description": "A jQuery plugin for making navigation menus responsive", 6 | "main": "dist/responsive-menu.js", 7 | "homepage": "", 8 | "author": "John Bowyer-Smyth", 9 | "scripts": { 10 | "build": "npm install && grunt", 11 | "start": "grunt watch", 12 | "test": "grunt" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "" 17 | }, 18 | "keywords": [ 19 | "jQuery", 20 | "plugin", 21 | "responsive", 22 | "menu", 23 | "navigation", 24 | "list" 25 | ], 26 | "licenses": [ 27 | { 28 | "type": "", 29 | "url": "", 30 | "files": "" 31 | } 32 | ], 33 | "bugs": { 34 | "url": "" 35 | }, 36 | "directories": { 37 | "src": { 38 | "root": "./src", 39 | "js": "./src/js", 40 | "css": "./src/css", 41 | "lib": "./src/lib", 42 | "images": "./src/images", 43 | "html": "./src" 44 | }, 45 | "dist": { 46 | "root": "./dist", 47 | "js": "./dist/js", 48 | "css": "./dist/css", 49 | "images": "./dist/images", 50 | "lib": "./dist/lib", 51 | "html": "./dist" 52 | }, 53 | "deploy": { 54 | "root": "./../", 55 | "css": "./../lib/responsive-menu", 56 | "js": "./../lib/responsive-menu", 57 | "images": "./../lib/responsive-menu", 58 | "lib": "./../lib", 59 | "html": "./" 60 | }, 61 | "demo": { 62 | "root": "./demo", 63 | "js": "./demo/js", 64 | "css": "./demo/css", 65 | "images": "./demo/images", 66 | "lib": "./demo/lib", 67 | "html": "./demo" 68 | }, 69 | "doc": "./doc", 70 | "lib": "./lib", 71 | "templates": "./templates", 72 | "test": "./test" 73 | }, 74 | "fileNames": { 75 | "js": "responsive-menu", 76 | "css": "responsive-menu", 77 | "demo": "demo" 78 | }, 79 | "dependencies": {}, 80 | "devDependencies": { 81 | "grunt": "~0.4.5", 82 | "grunt-bower-installer": "~0.3.6", 83 | "grunt-browser-sync": "^2.1.2", 84 | "grunt-bump": "~0.0.14", 85 | "grunt-contrib-concat": "~0.4.0", 86 | "grunt-contrib-copy": "~0.5.0", 87 | "grunt-contrib-csslint": "~0.2.0", 88 | "grunt-contrib-cssmin": "~0.10.0", 89 | "grunt-contrib-jscs": "~0.1.8", 90 | "grunt-contrib-jshint": "~0.8.0", 91 | "grunt-contrib-uglify": "~0.3.2", 92 | "grunt-contrib-watch": "~0.5.3", 93 | "grunt-htmlhint": "~0.4.0", 94 | "grunt-includes": "~0.4.4", 95 | "grunt-jsonlint": "~1.0.4", 96 | "grunt-markdown": "~0.6.1", 97 | "grunt-modernizr": "^0.5.2", 98 | "grunt-shell-spawn": "~0.3.0", 99 | "load-grunt-tasks": "~0.3.0" 100 | }, 101 | "private": true 102 | } 103 | -------------------------------------------------------------------------------- /src/css/styles.css: -------------------------------------------------------------------------------- 1 | /* Unessential CSS - Just here to make this sample page prettier */ 2 | 3 | html, body { 4 | height: 100%; 5 | } 6 | body { 7 | margin: 0; 8 | font-size: 16px; 9 | font-family: 'Roboto', sans-serif; 10 | line-height: 1.5; 11 | background-color: #3c79b0; 12 | } 13 | .wrapper { 14 | margin: 0 auto; 15 | max-width: 1060px; 16 | padding: 1px 3em; 17 | height: 100%; 18 | } 19 | header { 20 | background-color: #000; 21 | } 22 | header:after { 23 | content: " "; 24 | display: table; 25 | clear: both; 26 | } 27 | .brand, h1, h2, h3 { 28 | font-family: 'Roboto Condensed', sans-serif; 29 | font-weight: 400; 30 | letter-spacing: 1px; 31 | } 32 | h4, h5, h6 { 33 | letter-spacing: 1px; 34 | } 35 | h1 { 36 | font-size: 28px; 37 | } 38 | 39 | .main .dev-output pre { 40 | overflow: auto; 41 | max-height: 500px; 42 | background-color: #EBF4FD; 43 | padding: 0 1em 1em; 44 | } 45 | .brand { 46 | float: left; 47 | height: 80px; 48 | } 49 | .brand p { 50 | margin: 0; 51 | } 52 | .rm-nav { 53 | letter-spacing: 1px; 54 | } 55 | .logo { 56 | font-size: 1.4em; 57 | line-height: 40px; 58 | margin: 20px 0 0; 59 | width: 50px; 60 | height: 40px; 61 | background-color: #3C97D5; 62 | text-align: center; 63 | font-weight: bold; 64 | letter-spacing: 2px; 65 | display: block; 66 | float: left; 67 | text-decoration: none; 68 | color: #fff; 69 | padding: 0; 70 | } 71 | 72 | .rm-toggle.rm-button { 73 | margin-top: 25px; 74 | } 75 | 76 | .rm-css-animate.rm-menu-expanded { 77 | max-height: none; 78 | display: block; 79 | } 80 | .rm-container.rm-layout-expanded { 81 | float: right; 82 | } 83 | .rm-nav li a, 84 | .rm-top-menu a { 85 | padding: .75rem 1rem; 86 | font-size: .9em; 87 | line-height: 1.5rem; 88 | text-transform: uppercase; 89 | } 90 | .rm-layout-expanded .rm-nav > ul > li > a, 91 | .rm-layout-expanded .rm-top-menu > .rm-menu-item > a { 92 | height: 80px; 93 | line-height: 80px; 94 | } 95 | 96 | .main { 97 | background-image: url("../images/cloud.jpg"); 98 | background-position: center top; 99 | background-repeat: repeat-x; 100 | min-height: 100%; 101 | padding-top: 1px; 102 | } 103 | .tagline { 104 | width: 360px; 105 | font-size: 1.75em; 106 | font-weight: bold; 107 | letter-spacing: 2px; 108 | line-height: 1.2; 109 | text-align: center; 110 | margin: 275px auto; 111 | color: #1A88D3; 112 | } 113 | .tagline strong { 114 | font-size: 1.3em; 115 | } 116 | .dev-output { 117 | background-color: #e1eaf3; /* fall-back */ 118 | background-color: rgba(255,255,255,.85); 119 | color: #000; 120 | padding: 2em; 121 | margin-bottom: 2em; 122 | } 123 | -------------------------------------------------------------------------------- /demo/css/styles.css: -------------------------------------------------------------------------------- 1 | /* Unessential CSS - Just here to make this sample page prettier */ 2 | 3 | html, body { 4 | height: 100%; 5 | } 6 | body { 7 | margin: 0; 8 | font-size: 16px; 9 | font-family: 'Roboto', sans-serif; 10 | line-height: 1.5; 11 | background-color: #3c79b0; 12 | } 13 | .wrapper { 14 | margin: 0 auto; 15 | max-width: 1060px; 16 | padding: 1px 3em; 17 | height: 100%; 18 | } 19 | header { 20 | background-color: #000; 21 | } 22 | header:after { 23 | content: " "; 24 | display: table; 25 | clear: both; 26 | } 27 | .brand, h1, h2, h3 { 28 | font-family: 'Roboto Condensed', sans-serif; 29 | font-weight: 400; 30 | letter-spacing: 1px; 31 | } 32 | h4, h5, h6 { 33 | letter-spacing: 1px; 34 | } 35 | h1 { 36 | font-size: 28px; 37 | } 38 | 39 | .main .dev-output pre { 40 | overflow: auto; 41 | max-height: 500px; 42 | background-color: #EBF4FD; 43 | padding: 0 1em 1em; 44 | } 45 | .brand { 46 | float: left; 47 | height: 80px; 48 | } 49 | .brand p { 50 | margin: 0; 51 | } 52 | .rm-nav { 53 | letter-spacing: 1px; 54 | } 55 | .logo { 56 | font-size: 1.4em; 57 | line-height: 40px; 58 | margin: 20px 0 0; 59 | width: 50px; 60 | height: 40px; 61 | background-color: #3C97D5; 62 | text-align: center; 63 | font-weight: bold; 64 | letter-spacing: 2px; 65 | display: block; 66 | float: left; 67 | text-decoration: none; 68 | color: #fff; 69 | padding: 0; 70 | } 71 | 72 | .rm-toggle.rm-button { 73 | margin-top: 25px; 74 | } 75 | 76 | .rm-css-animate.rm-menu-expanded { 77 | max-height: none; 78 | display: block; 79 | } 80 | .rm-container.rm-layout-expanded { 81 | float: right; 82 | } 83 | .rm-nav li a, 84 | .rm-top-menu a { 85 | padding: .75rem 1rem; 86 | font-size: .9em; 87 | line-height: 1.5rem; 88 | text-transform: uppercase; 89 | } 90 | .rm-layout-expanded .rm-nav > ul > li > a, 91 | .rm-layout-expanded .rm-top-menu > .rm-menu-item > a { 92 | height: 80px; 93 | line-height: 80px; 94 | } 95 | 96 | .main { 97 | background-image: url("../images/cloud.jpg"); 98 | background-position: center top; 99 | background-repeat: repeat-x; 100 | min-height: 100%; 101 | padding-top: 1px; 102 | } 103 | .tagline { 104 | width: 360px; 105 | font-size: 1.75em; 106 | font-weight: bold; 107 | letter-spacing: 2px; 108 | line-height: 1.2; 109 | text-align: center; 110 | margin: 275px auto; 111 | color: #1A88D3; 112 | } 113 | .tagline strong { 114 | font-size: 1.3em; 115 | } 116 | .dev-output { 117 | background-color: #e1eaf3; /* fall-back */ 118 | background-color: rgba(255,255,255,.85); 119 | color: #000; 120 | padding: 2em; 121 | margin-bottom: 2em; 122 | } 123 | -------------------------------------------------------------------------------- /dist/css/styles.css: -------------------------------------------------------------------------------- 1 | /* Unessential CSS - Just here to make this sample page prettier */ 2 | 3 | html, body { 4 | height: 100%; 5 | } 6 | body { 7 | margin: 0; 8 | font-size: 16px; 9 | font-family: 'Roboto', sans-serif; 10 | line-height: 1.5; 11 | background-color: #3c79b0; 12 | } 13 | .wrapper { 14 | margin: 0 auto; 15 | max-width: 1060px; 16 | padding: 1px 3em; 17 | height: 100%; 18 | } 19 | header { 20 | background-color: #000; 21 | } 22 | header:after { 23 | content: " "; 24 | display: table; 25 | clear: both; 26 | } 27 | .brand, h1, h2, h3 { 28 | font-family: 'Roboto Condensed', sans-serif; 29 | font-weight: 400; 30 | letter-spacing: 1px; 31 | } 32 | h4, h5, h6 { 33 | letter-spacing: 1px; 34 | } 35 | h1 { 36 | font-size: 28px; 37 | } 38 | 39 | .main .dev-output pre { 40 | overflow: auto; 41 | max-height: 500px; 42 | background-color: #EBF4FD; 43 | padding: 0 1em 1em; 44 | } 45 | .brand { 46 | float: left; 47 | height: 80px; 48 | } 49 | .brand p { 50 | margin: 0; 51 | } 52 | .rm-nav { 53 | letter-spacing: 1px; 54 | } 55 | .logo { 56 | font-size: 1.4em; 57 | line-height: 40px; 58 | margin: 20px 0 0; 59 | width: 50px; 60 | height: 40px; 61 | background-color: #3C97D5; 62 | text-align: center; 63 | font-weight: bold; 64 | letter-spacing: 2px; 65 | display: block; 66 | float: left; 67 | text-decoration: none; 68 | color: #fff; 69 | padding: 0; 70 | } 71 | 72 | .rm-toggle.rm-button { 73 | margin-top: 25px; 74 | } 75 | 76 | .rm-css-animate.rm-menu-expanded { 77 | max-height: none; 78 | display: block; 79 | } 80 | .rm-container.rm-layout-expanded { 81 | float: right; 82 | } 83 | .rm-nav li a, 84 | .rm-top-menu a { 85 | padding: .75rem 1rem; 86 | font-size: .9em; 87 | line-height: 1.5rem; 88 | text-transform: uppercase; 89 | } 90 | .rm-layout-expanded .rm-nav > ul > li > a, 91 | .rm-layout-expanded .rm-top-menu > .rm-menu-item > a { 92 | height: 80px; 93 | line-height: 80px; 94 | } 95 | 96 | .main { 97 | background-image: url("../images/cloud.jpg"); 98 | background-position: center top; 99 | background-repeat: repeat-x; 100 | min-height: 100%; 101 | padding-top: 1px; 102 | } 103 | .tagline { 104 | width: 360px; 105 | font-size: 1.75em; 106 | font-weight: bold; 107 | letter-spacing: 2px; 108 | line-height: 1.2; 109 | text-align: center; 110 | margin: 275px auto; 111 | color: #1A88D3; 112 | } 113 | .tagline strong { 114 | font-size: 1.3em; 115 | } 116 | .dev-output { 117 | background-color: #e1eaf3; /* fall-back */ 118 | background-color: rgba(255,255,255,.85); 119 | color: #000; 120 | padding: 2em; 121 | margin-bottom: 2em; 122 | } 123 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # About Responsive Menu # 2 | 3 | **jQuery Responsive Menu** is a drop-down menu for responsive websites. It is a **jQuery plugin** that includes a 4 | JavaScript file and CSS file as well as sample HTML. 5 | 6 | * **Description**: Drop-down Menu jQuery plugin for responsive layouts 7 | * **Repository**: https://github.com/jbowyers/responsive-menu 8 | * **Demo**: http://responsive-menu.com 9 | * **Bower**: jquery-responsive-menu 10 | * **Requires**: jQuery 11 | * **Author**: jbowyers 12 | * **Copyright**: 2015 jbowyers 13 | * **License**: GPLv3 14 | * **Version: 0.2.1** 15 | 16 | ## Demo ## 17 | 18 | Visit http://responsive-menu.com to view a responsive demo 19 | 20 | ## Basic Setup ## 21 | 22 | * **Download** - Download and extract the Responsive Menu zip files - https://github.com/jbowyers/responsive-menu 23 | * **Copy files** - Copy the responsive-menu.js and responsive-menu.css files to your project 24 | * **Setup Menu HTML** - Open the responsive-menu.html sample file and copy and past the menu html into the 25 | html files in your project. Or, setup existing menus in your project to work with Responsive Menu (see Configuration). 26 | * **Link to CSS and JavaScript files** - Add link and script references to your HTML files 27 | * **Initialize Responsive Menu** - Activate the plugin using jQuery (see Configuration) 28 | 29 | ### Using Bower Package Manager ### 30 | 31 | The Responsive Menu repo is registered as a bower package as jquery-responsive-menu. 32 | 33 | ## Configuration ## 34 | 35 | ### Suggested HTML ### 36 | ```html 37 | 38 |
39 | Menu 40 |