├── .github ├── CONTRIBUTING.md └── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── .gitignore ├── LICENSE ├── README.md ├── demo ├── css │ └── demo.css ├── img │ ├── 190.jpg │ ├── 260.jpg │ └── 64x64.gif └── pug │ ├── index.pug │ ├── navbar-fixed.pug │ ├── navbar-grid.pug │ └── navbar-more.pug ├── dist ├── yamm.css └── yamm.min.css ├── index.html ├── package-lock.json ├── package.json ├── src ├── yamm.less ├── yamm.scss └── yamm.styl └── test └── basic.js /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Please take a moment to review this document in order to make the contribution process easy and effective for everyone involved. 4 | 5 | 6 | ## Using the issue tracker 7 | 8 | Please respect the following restrictions: 9 | 10 | * Please **do not** use the issue tracker for personal support requests. Stack Overflow and specific Bootstrap forums are better places to get help. 11 | * Please **do not** post more than one capture (unless it is really necessary). If you need more than one capture to describe a situation, a live example may be more suitable. 12 | 13 | 14 | ## Bug reports 15 | 16 | Guidelines for bug reports: 17 | 18 | 0. **[validate your HTML](https://html5.validator.nu/)** to ensure your problem isn't caused by a simple error in your own code. 19 | 20 | 1. **Use the GitHub issue search** — check if the issue has already been reported. 21 | 22 | 2. **Check if the issue has been fixed** — try to reproduce it using the latest `master` or development branch in the repository. 23 | 24 | 3. **Isolate the problem** — ideally create a [reduced test case](https://css-tricks.com/reduced-test-cases/) and a live example. 25 | [This JS Bin](https://jsbin.com/hejuwec/edit?html,output) is a helpful template. 26 | 27 | Example: 28 | 29 | > Short and descriptive example bug report title 30 | > 31 | > A summary of the issue and the browser/OS environment in which it occurs. If 32 | > suitable, include the steps required to reproduce the bug. 33 | > 34 | > `` - a link to the reduced test case 35 | > 36 | > Any other information you want to share that is relevant to the issue. 37 | 38 | 39 | ## Feature requests 40 | 41 | Feature requests are welcome. But take a moment to find out whether your idea 42 | fits with the scope and aims of the project. 43 | Please provide as much detail and context as possible. 44 | 45 | 46 | ## Pull requests 47 | 48 | Pull requests—patches, improvements, new features—are a fantastic 49 | help. They should remain focused in scope and avoid containing unrelated 50 | commits. 51 | 52 | 53 | ## License 54 | 55 | By contributing your code, you agree to license your contribution under the [MIT License](LICENSE). 56 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Report a bug you may have identified. 4 | 5 | --- 6 | 7 | Before opening: 8 | 9 | - [Search for duplicate or closed issues](https://github.com/geedmo/yamm/issues) 10 | - [Validate](https://html5.validator.nu/) and [lint](https://github.com/twbs/bootlint#in-the-browser) any HTML to avoid common problems 11 | - Read the [contributing guidelines](https://github.com/geedmo/yamm/blob/master/.github/CONTRIBUTING.md) 12 | 13 | Bug reports must include: 14 | 15 | - Operating system and version (Windows, macOS, Android, iOS, Win10 Mobile) 16 | - Browser and version (Chrome, Firefox, Safari, IE, MS Edge, Opera 15+, Android Browser) 17 | - [Reduced test case](https://css-tricks.com/reduced-test-cases/) and suggested fix using [CodePen](https://codepen.io/) or [JS Bin](https://jsbin.com/) 18 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for a new feature in Yamm. 4 | 5 | --- 6 | 7 | Before opening: 8 | 9 | - [Search for duplicate or closed issues](https://github.com/geedmo/yamm/issues) 10 | - Read the [contributing guidelines](https://github.com/geedmo/yamm/blob/master/.github/CONTRIBUTING.md) 11 | 12 | Feature requests must include: 13 | 14 | - As much detail as possible for what it should added. 15 | - Relevant links to screenshots or live demos whenever possible. 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .nyc_output 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2019 Geedmo 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Yamm 2 | 3 | ![Version](https://img.shields.io/badge/version-4.0.0-blue.svg?cacheSeconds=2592000) 4 | [![Documentation](https://img.shields.io/badge/documentation-yes-brightgreen.svg)](https://github.com/geedmo/yamm#readme) 5 | [![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/geedmo/yamm/graphs/commit-activity) 6 | [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/geedmo/yamm/blob/master/LICENSE) 7 | 8 | > This is *Yet another megamenu for [Bootstrap 4](http://getbootstrap.com/)*. 9 | 10 | Lightweight and pure CSS megamenu that uses the standard navbar markup and the fluid grid system classes from Bootstrap 4. Work for fixed and responsive layout and has the facility to include (almost) any Bootstrap elements. 11 | 12 | ### [Demo](http://geedmo.github.io/yamm/) 13 | 14 | ## Install 15 | 16 | - Install with [npm](https://www.npmjs.com/): `npm install @geedmo/yamm --save` 17 | - Install with [yarn](https://yarnpkg.com/): `yarn add @geedmo/yamm` 18 | 19 | ## Basic usage 20 | 21 | - CDN `https://cdn.jsdelivr.net/gh/geedmo/yamm@4.0.0/dist/yamm.min.css` 22 | - ES6 import: `import "@geedmo/yamm";` 23 | - SCSS import: `@import "@geedmo/yamm/src/yamm.scss";` 24 | - LESS import: `@import "@geedmo/yamm/src/yamm.less";` 25 | - STYL import: `@import "@geedmo/yamm/src/yamm"` 26 | 27 | ## Documentation 28 | 29 | Being a pretty small repository there's no separate documentation. You can find more usage instructions and examples by checking the [Demo](http://geedmo.github.io/yamm) and the source code. 30 | 31 | ## Bugs and feature requests 32 | 33 | Please first read the [issue guidelines](https://github.com/geedmo/yamm/blob/master/.github/CONTRIBUTING.md) and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/geedmo/yamm/issues/new). 34 | 35 | ## Development 36 | 37 | ``` 38 | npm run build 39 | ``` 40 | 41 | By default the SCSS stylesheet is used to generate the CSS build. See package.json for other scripts. 42 | 43 | ## Test 44 | 45 | ``` 46 | npm run test 47 | ``` 48 | 49 | Test that everything compiles fine (including demo) and all sources generate the same output. 50 | Make sure all tests passes before sending a PR. 51 | 52 | ## Author 53 | 54 | * Twitter: [@geedmo](https://twitter.com/geedmo) 55 | * Github: [@geedmo](https://github.com/geedmo) 56 | 57 | 58 | ## License 59 | 60 | Copyright © 2019 [@geedmo](https://github.com/geedmo). 61 | 62 | This project is [MIT](https://github.com/geedmo/yamm/blob/master/LICENSE) licensed. 63 | 64 | 65 | ## Sponsored content 66 |

67 | 68 | 47Admin - Bootstrap Admin Template 69 |    70 | 71 |

72 | -------------------------------------------------------------------------------- /demo/css/demo.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Yamm! 3 | * Yet another megamenu for Bootstrap 4 | * http://geedmo.github.com/yamm 5 | * 6 | * Demo styles 7 | */ 8 | 9 | /* layout */ 10 | body { 11 | padding-bottom: 40px; 12 | color: #666; 13 | } 14 | pre { 15 | margin: 0; 16 | padding: 10px 20px !important; 17 | } 18 | 19 | footer { 20 | margin-top: 200px; 21 | } 22 | 23 | /* demo presentation */ 24 | .container, 25 | .jumbotron .container { 26 | width: auto; 27 | max-width: 1170px; 28 | } 29 | 30 | .jumbotron { 31 | margin: 55px 0 60px 0; 32 | padding-left: 0; 33 | padding-right: 0; 34 | } 35 | 36 | /* menu styes */ 37 | .list-unstyled, 38 | .list-unstyled ul { 39 | min-width: 120px; 40 | } 41 | 42 | /* Accordion needs a width to avoid auto resize due to 43 | its absolute position within dropdowns. Desktops only. */ 44 | @media (min-width: 992px) { 45 | #accordionExample { 46 | width: 480px; 47 | } 48 | } 49 | 50 | /* Grid demo styles */ 51 | .grid-demo { 52 | padding: 10px 30px; 53 | } 54 | 55 | .grid-demo [class*='col-'] { 56 | margin-top: 5px; 57 | margin-bottom: 5px; 58 | font-size: 1em; 59 | text-align: center; 60 | line-height: 2; 61 | background-color: #e5e1ea; 62 | border: 1px solid #d1d1d1; 63 | } 64 | 65 | pre.prettyprint { 66 | border-color: #d9e0ef !important; 67 | border-radius: 4px; 68 | } -------------------------------------------------------------------------------- /demo/img/190.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geedmo/yamm/ee971b9239339ace3cb29071f52c62430dc98231/demo/img/190.jpg -------------------------------------------------------------------------------- /demo/img/260.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geedmo/yamm/ee971b9239339ace3cb29071f52c62430dc98231/demo/img/260.jpg -------------------------------------------------------------------------------- /demo/img/64x64.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geedmo/yamm/ee971b9239339ace3cb29071f52c62430dc98231/demo/img/64x64.gif -------------------------------------------------------------------------------- /demo/pug/index.pug: -------------------------------------------------------------------------------- 1 | doctype 2 | html(lang='en') 3 | head 4 | meta(charset='utf-8') 5 | meta(name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no') 6 | meta(name='description', content='Yet another megamenu for Bootstrap') 7 | meta(name='author', content='@geedmo') 8 | title Yamm! Megamenu for Bootstrap 9 | 10 | // Bootstrap and demo styles 11 | link(href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css', rel='stylesheet') 12 | link(href='demo/css/demo.css', rel='stylesheet') 13 | 14 | // Yamm styles 15 | link(href='dist/yamm.css', rel='stylesheet') 16 | 17 | body 18 | 19 | include navbar-fixed.pug 20 | 21 | .jumbotron 22 | 23 | .container 24 | 25 | h1.display-1 Hello, Yamm 4! 26 | p This is #[i Yet another megamenu] for Bootstrap from Twitter. 27 | p Lightweight and pure CSS megamenu that uses the standard navbar markup and the fluid grid system classes from Bootstrap 4. Work for fixed and responsive layout and has the facility to include (almost) any Bootstrap elements. 28 | p This project is currently hosted on Github and is the sequel to #[a.text-muted(href="https://geedmo.github.com/yamm", title="Yamm for Bootstrap", target="_blank") Yamm] 29 | br 30 | a.mr-4.btn.btn-secondary.btn-lg(href='https://github.com/geedmo/yamm') View on Github 31 | | 32 | a.btn.btn-primary.btn-lg(href='https://github.com/geedmo/yamm/archive/master.zip') Download 33 | 34 | .container 35 | .row 36 | .col-md-4 37 | p.lead Markup 38 | ol 39 | li 40 | p Reuse navbar markup and add class #[code .yamm] at the top. 41 | li 42 | p Then add your markup into the #[code .dropdown-menu] 43 | li 44 | p Optionally use #[code .yamm-content] to wrap content with padding. 45 | li 46 | p #[code .dropdown-item] is ommited to avoid default background and text color styling 47 | 48 | .col-md-8 49 | pre.prettyprint 50 | | <nav class="yamm navbar navbar-expand-lg navbar-light bg-light"> 51 | | ... 52 | | <ul class="navbar-nav"> 53 | | <li class="nav-item dropdown"> 54 | | <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Dropdown</a> 55 | | <div class="dropdown-menu"> 56 | | <div class="yamm-content"> 57 | | ... 58 | | </div> 59 | | </div> 60 | | </li> 61 | | </ul> 62 | | ... 63 | | </nav> 64 | 65 | .jumbotron 66 | .container 67 | p.lead Grid Example 68 | include navbar-grid.pug 69 | .container 70 | .row 71 | .col-md-4 72 | p.lead Fullwidth 73 | p By default every mega-dropdown will take the content size and is possible to add #[code .yamm-fw] to #[code .dropdown] to expand it fullwidth 74 | 75 | p: strong Yamm works better with fullwidth menus. 76 | 77 | .col-md-8 78 | pre.prettyprint 79 | | <nav class="yamm navbar navbar-expand-lg navbar-light bg-light"> 80 | | ... 81 | | <ul class="navbar-nav"> 82 | | <li class="nav-item dropdown yamm-fw"> 83 | | ... 84 | | </li> 85 | | </ul> 86 | | ... 87 | | </nav> 88 | 89 | .jumbotron 90 | .container 91 | p.lead More components 92 | include navbar-more.pug 93 | 94 | .container 95 | .row 96 | .col-md-4 97 | p.lead JavaScript 98 | p This code will prevent unexpected menu close when using some components (like accordion, forms, etc) 99 | 100 | .col-md-8 101 | pre.prettyprint 102 | | $(document).on('click', '.yamm .dropdown-menu', function(e) { 103 | | e.stopPropagation() 104 | | }) 105 | 106 | footer 107 | .d-flex.border-top.py-4 108 | .mr-auto 109 | p 110 | | MIT © Geedmo 2019 111 | .ml-auto 112 | .d-flex 113 | div 114 | iframe.github-btn(src='https://ghbtns.com/github-btn.html?user=geedmo&repo=yamm&type=watch&count=true', allowtransparency='true', frameborder='0', scrolling='0', width='60px', height='20px') 115 | div 116 | iframe.github-btn(src='https://ghbtns.com/github-btn.html?user=geedmo&repo=yamm&type=fork&count=true', allowtransparency='true', frameborder='0', scrolling='0', width='60px', height='20px') 117 | div 118 | a.twitter-share-button(href='https://twitter.com/share', data-lang='en') Tweet 119 | 120 | 121 | // /container 122 | 123 | // Bootstrap core JavaScript 124 | script(src='https://code.jquery.com/jquery-3.3.1.slim.min.js') 125 | script(src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js') 126 | script(src='https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js' async) 127 | 128 | script. 129 | $(function() { 130 | window.prettyPrint && prettyPrint() 131 | $(document).on('click', '.yamm .dropdown-menu', function(e) { 132 | e.stopPropagation() 133 | }) 134 | }) 135 | // tweet and share :) 136 | script 137 | | !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); 138 | -------------------------------------------------------------------------------- /demo/pug/navbar-fixed.pug: -------------------------------------------------------------------------------- 1 | // Demo navbar 2 | nav.yamm.navbar.navbar-expand-lg.navbar-light.bg-light.fixed-top 3 | .container.w-100 4 | a.navbar-brand(href='#') Yamm Megamenu 5 | button.navbar-toggler(type='button' data-toggle='collapse' data-target='#navbar-collapse-1' aria-controls='navbar-collapse-1' aria-expanded='false' aria-label='Toggle navigation') 6 | span.navbar-toggler-icon 7 | #navbar-collapse-1.navbar-collapse.collapse 8 | ul.navbar-nav.mr-auto 9 | // Classic list 10 | li.nav-item.dropdown 11 | a.nav-link.dropdown-toggle(href='#', data-toggle='dropdown') 12 | | List 13 | .dropdown-menu.p-0 14 | // Content container to add padding 15 | .yamm-content 16 | .row 17 | ul.col-sm-3.list-unstyled 18 | li 19 | p: strong Section Title 20 | li List Item 21 | li List Item 22 | li List Item 23 | li List Item 24 | li List Item 25 | li List Item 26 | ul.col-sm-3.list-unstyled 27 | li 28 | p: strong Links Title 29 | li: a(href='#') Link Item 30 | li: a(href='#') Link Item 31 | li: a(href='#') Link Item 32 | li: a(href='#') Link Item 33 | li: a(href='#') Link Item 34 | li: a(href='#') Link Item 35 | ul.col-sm-3.list-unstyled 36 | li 37 | p: strong Section Title 38 | li List Item 39 | li List Item 40 | li List Item 41 | li List Item 42 | li List Item 43 | li List Item 44 | ul.col-sm-3.list-unstyled 45 | li 46 | p: strong Section Title 47 | li List Item 48 | li List Item 49 | li 50 | ul 51 | li: a(href='#') Link Item 52 | li: a(href='#') Link Item 53 | li: a(href='#') Link Item 54 | // Accordion demo 55 | li.nav-item.dropdown 56 | a.nav-link.dropdown-toggle(href='#', data-toggle='dropdown') 57 | | Accordion 58 | .dropdown-menu.p-0 59 | .yamm-content 60 | #accordionExample.accordion 61 | .card 62 | .card-header 63 | h2.mb-0 64 | button.btn.btn-link(type="button" data-toggle='collapse', data-target='#collapseOne') 65 | | Collapsible Group Item #1 66 | #collapseOne.collapse.show(data-parent='#accordionExample') 67 | .card-body: .card-text 68 | | Ut consectetur ullamcorper purus a rutrum. 69 | br 70 | | Etiam dui nisi, hendrerit feugiat scelerisque et, cursus eu magna. 71 | .card 72 | .card-header 73 | h2.mb-0 74 | button.btn.btn-link.collapsed(type="button" data-toggle='collapse', data-target='#collapseTwo') 75 | | Collapsible Group Item #2 76 | #collapseTwo.collapse(data-parent='#accordionExample') 77 | .card-body: .card-text 78 | | Ut consectetur ullamcorper purus a rutrum. 79 | br 80 | | Etiam dui nisi, hendrerit feugiat scelerisque et, cursus eu magna. 81 | .card 82 | .card-header 83 | h2.mb-0 84 | button.btn.btn-link.collapsed(type="button" data-toggle='collapse', data-target='#collapseThree') 85 | | Collapsible Group Item #3 86 | #collapseThree.collapse(data-parent='#accordionExample') 87 | .card-body: .card-text 88 | | Ut consectetur ullamcorper purus a rutrum. 89 | br 90 | | Etiam dui nisi, hendrerit feugiat scelerisque et, cursus eu magna. 91 | // Classic dropdown 92 | li.nav-item.dropdown 93 | a.nav-link.dropdown-toggle(href='#', data-toggle='dropdown') 94 | | Classic 95 | .dropdown-menu(role='menu') 96 | a.dropdown-item(tabindex='-1', href='#') Action 97 | a.dropdown-item(tabindex='-1', href='#') Another action 98 | a.dropdown-item(tabindex='-1', href='#') Something else here 99 | .dropdown-divider 100 | a.dropdown-item(tabindex='-1', href='#') Separated link 101 | // Pictures 102 | li.nav-item.dropdown.yamm-fw 103 | a.nav-link.dropdown-toggle(href='#', data-toggle='dropdown') 104 | | Pictures 105 | .dropdown-menu.p-0 106 | .yamm-content 107 | .row 108 | .col-xs-6.col-sm-2 109 | a(href='#') 110 | img.img-thumbnail.img-fluid(alt='150x190', src='demo/img/190.jpg') 111 | .col-xs-6.col-sm-2 112 | a(href='#') 113 | img.img-thumbnail.img-fluid(alt='150x190', src='demo/img/190.jpg') 114 | .col-xs-6.col-sm-2 115 | a(href='#') 116 | img.img-thumbnail.img-fluid(alt='150x190', src='demo/img/190.jpg') 117 | .col-xs-6.col-sm-2 118 | a(href='#') 119 | img.img-thumbnail.img-fluid(alt='150x190', src='demo/img/190.jpg') 120 | .col-xs-6.col-sm-2 121 | a(href='#') 122 | img.img-thumbnail.img-fluid(alt='150x190', src='demo/img/190.jpg') 123 | .col-xs-6.col-sm-2 124 | a(href='#') 125 | img.img-thumbnail.img-fluid(alt='150x190', src='demo/img/190.jpg') 126 | -------------------------------------------------------------------------------- /demo/pug/navbar-grid.pug: -------------------------------------------------------------------------------- 1 | // Grid demo navbar 2 | nav.yamm.navbar.navbar-expand-lg.navbar-light.bg-light 3 | a.navbar-brand(href='#') Yamm Megamenu 4 | button.navbar-toggler(type='button' data-toggle='collapse' data-target='#navbar-collapse-grid' aria-controls='navbar-collapse-grid' aria-expanded='false' aria-label='Toggle navigation') 5 | span.navbar-toggler-icon 6 | #navbar-collapse-grid.navbar-collapse.collapse 7 | ul.navbar-nav.mr-auto 8 | // Grid 12 Menu 9 | li.nav-item.dropdown.yamm-fw 10 | a.nav-link.dropdown-toggle(href='#', data-toggle='dropdown') 11 | | Grid 12 | .dropdown-menu.p-0 13 | .grid-demo 14 | .row 15 | .col-sm-12 .col-sm-12 16 | .row 17 | .col-sm-6 .col-sm-6 18 | .col-sm-6 .col-sm-6 19 | .row 20 | .col-sm-4 .col-sm-4 21 | .col-sm-4 .col-sm-4 22 | .col-sm-4 .col-sm-4 23 | .row 24 | .col-sm-3 .col-sm-3 25 | .col-sm-3 .col-sm-3 26 | .col-sm-3 .col-sm-3 27 | .col-sm-3 .col-sm-3 28 | .row 29 | .col-sm-2 .col-sm-2 30 | .col-sm-2 .col-sm-2 31 | .col-sm-2 .col-sm-2 32 | .col-sm-2 .col-sm-2 33 | .col-sm-2 .col-sm-2 34 | .col-sm-2 .col-sm-2 35 | .row 36 | .col-sm-1 .col-sm-1 37 | .col-sm-1 .col-sm-1 38 | .col-sm-1 .col-sm-1 39 | .col-sm-1 .col-sm-1 40 | .col-sm-1 .col-sm-1 41 | .col-sm-1 .col-sm-1 42 | .col-sm-1 .col-sm-1 43 | .col-sm-1 .col-sm-1 44 | .col-sm-1 .col-sm-1 45 | .col-sm-1 .col-sm-1 46 | .col-sm-1 .col-sm-1 47 | .col-sm-1 .col-sm-1 48 | // 49 | With Offsets 50 | li.nav-item.dropdown.yamm-fw 51 | a.nav-link.dropdown-toggle(href='#', data-toggle='dropdown') 52 | | Offset 53 | .dropdown-menu.p-0 54 | .grid-demo 55 | .row 56 | .col-sm-4 4 57 | .col-sm-4.col-sm-offset-4 4 offset 4 58 | .row 59 | .col-sm-3.col-sm-offset-3 3 offset 3 60 | .col-sm-3.col-sm-offset-3 3 offset 3 61 | .row 62 | .col-sm-6.col-sm-offset-3 6 offset 6 63 | // 64 | Aside Menu 65 | li.nav-item.dropdown.yamm-fw 66 | a.nav-link.dropdown-toggle(href='#', data-toggle='dropdown') 67 | | Aside 68 | .dropdown-menu.p-0 69 | .grid-demo 70 | .row 71 | .col-sm-3 72 | .d-flex.py-4.justify-content-center.align-items-center 73 | h3 3 74 | .col-sm-9 75 | .d-flex.py-4.justify-content-center.align-items-center 76 | h3 9 77 | // 78 | Nesting Menu 79 | li.nav-item.dropdown.yamm-fw 80 | a.nav-link.dropdown-toggle(href='#', data-toggle='dropdown') 81 | | Nesting 82 | .dropdown-menu.p-0 83 | .grid-demo 84 | .row 85 | .col-sm-12 12 86 | .row 87 | .col-sm-12 12 88 | .row 89 | .col-sm-4 4 90 | .col-sm-4 4 91 | .col-sm-4 4 92 | // 93 | Dropup 94 | li.nav-item.dropup.yamm-fw 95 | a.nav-link.dropdown-toggle(href='#', data-toggle='dropdown') 96 | | Dropup 97 | .dropdown-menu.p-0 98 | .grid-demo 99 | .row 100 | .col-sm-12 12 101 | .row 102 | .col-sm-12 12 103 | .row 104 | .col-sm-4 4 105 | .col-sm-4 4 106 | .col-sm-4 4 107 | -------------------------------------------------------------------------------- /demo/pug/navbar-more.pug: -------------------------------------------------------------------------------- 1 | // Extra components navbar 2 | nav.yamm.navbar.navbar-expand-lg.navbar-light.bg-light 3 | a.navbar-brand(href='#') Yamm Megamenu 4 | button.navbar-toggler(type='button' data-toggle='collapse' data-target='#navbar-collapse-2' aria-controls='navbar-collapse-2' aria-expanded='false' aria-label='Toggle navigation') 5 | span.navbar-toggler-icon 6 | #navbar-collapse-2.navbar-collapse.collapse 7 | ul.navbar-nav 8 | // Media Example 9 | li.nav-item.dropdown 10 | a.nav-link.dropdown-toggle(href='#', data-toggle='dropdown') 11 | | Media 12 | .dropdown-menu.p-0 13 | .yamm-content 14 | ul.list-unstyled 15 | li.media 16 | img.mr-3(src='demo/img/64x64.gif', alt='64x64') 17 | .media-body 18 | h5.mt-0.mb-1 Media heading 19 | | Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante. 20 | li.media.mt-4 21 | img.mr-3(src='demo/img/64x64.gif', alt='64x64') 22 | .media-body 23 | h5.mt-0.mb-1 Media heading 24 | | Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque. 25 | // Tables 26 | li.nav-item.dropdown 27 | a.nav-link.dropdown-toggle(href='#', data-toggle='dropdown') 28 | | Tables 29 | .dropdown-menu.p-0 30 | .yamm-content 31 | table.table.table-hover.table-bordered.mb-0 32 | thead 33 | tr 34 | th # 35 | th First Name 36 | th Last Name 37 | th Username 38 | th First Name 39 | th Last Name 40 | th Username 41 | tbody 42 | tr 43 | td 1 44 | td Mark 45 | td Otto 46 | td @mdo 47 | td Mark 48 | td Otto 49 | td @mdo 50 | tr 51 | td 2 52 | td Jacob 53 | td Thornton 54 | td @fat 55 | td Jacob 56 | td Thornton 57 | td @fat 58 | tr 59 | td 3 60 | td(colspan='2') Larry the Bird 61 | td @twitter 62 | td(colspan='2') Larry the Bird 63 | td @twitter 64 | // Thumbnails demo 65 | li.dropdown 66 | a.nav-link.dropdown-toggle(href='#', data-toggle='dropdown') 67 | | Thumbnails 68 | .dropdown-menu.p-0 69 | .yamm-content 70 | .row 71 | .col-sm-4 72 | .card 73 | img(alt='260x130', src='demo/img/260.jpg') 74 | .card-body 75 | h5.card-title Thumb Label 76 | p.card-text 77 | | Mazagran doppio half and half aftertaste organic, rich doppio 78 | p.card-text 79 | a.btn.btn-primary(href='#') Action 80 | | 81 | a.btn.btn-default(href='#') Action 82 | .col-sm-4 83 | .card 84 | img(alt='260x130', src='demo/img/260.jpg') 85 | .card-body 86 | h5.card-title Thumb Label 87 | p.card-text 88 | | Mazagran doppio half and half aftertaste organic, rich doppio 89 | p.card-text 90 | a.btn.btn-primary(href='#') Action 91 | | 92 | a.btn.btn-default(href='#') Action 93 | .col-sm-4 94 | .card 95 | img(alt='260x130', src='demo/img/260.jpg') 96 | .card-body 97 | h5.card-title Thumb Label 98 | p.card-text 99 | | Mazagran doppio half and half aftertaste organic, rich doppio 100 | p.card-text 101 | a.btn.btn-primary(href='#') Action 102 | | 103 | a.btn.btn-default(href='#') Action 104 | 105 | ul.navbar-nav.ml-auto 106 | // Forms 107 | .nav-item.dropdown 108 | a.nav-link.dropdown-toggle(href='#', data-toggle='dropdown') 109 | | Forms 110 | .dropdown-menu.dropdown-menu-right.p-0 111 | .yamm-content 112 | form(action='send.php') 113 | .form-group 114 | input.form-control#inputName(type='text', placeholder='Name') 115 | .form-group 116 | input.form-control#inputEmail(type='password', placeholder='Email') 117 | .form-group 118 | textarea.form-control(placeholder="Write your message..") 119 | .form-group 120 | button.btn.btn-success(type='submit') Send 121 | -------------------------------------------------------------------------------- /dist/yamm.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Yamm! - Yet another megamenu for Bootstrap 3 | * http://geedmo.github.com/yamm 4 | * 5 | * @geedmo - Licensed under the MIT license 6 | */ 7 | .yamm .collapse, 8 | .yamm .dropup, 9 | .yamm .dropdown { 10 | position: static; 11 | } 12 | 13 | .yamm .container { 14 | position: relative; 15 | } 16 | 17 | .yamm .dropdown-menu { 18 | left: auto; 19 | } 20 | 21 | .yamm .yamm-content { 22 | padding: 1rem; 23 | } 24 | 25 | .yamm .dropdown.yamm-fw .dropdown-menu, 26 | .yamm .dropup.yamm-fw .dropdown-menu { 27 | left: 0; 28 | right: 0; 29 | } 30 | -------------------------------------------------------------------------------- /dist/yamm.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Yamm! - Yet another megamenu for Bootstrap 3 | * http://geedmo.github.com/yamm 4 | * 5 | * @geedmo - Licensed under the MIT license 6 | */.yamm .collapse,.yamm .dropup,.yamm .dropdown{position:static}.yamm .container{position:relative}.yamm .dropdown-menu{left:auto}.yamm .yamm-content{padding:1rem}.yamm .dropdown.yamm-fw .dropdown-menu,.yamm .dropup.yamm-fw .dropdown-menu{left:0;right:0} 7 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Yamm! Megamenu for Bootstrap 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 149 |
150 |
151 |

Hello, Yamm 4!

152 |

This is Yet another megamenu for Bootstrap from Twitter.

153 |

Lightweight and pure CSS megamenu that uses the standard navbar markup and the fluid grid system classes from Bootstrap 4. Work for fixed and responsive layout and has the facility to include (almost) any Bootstrap elements.

154 |

This project is currently hosted on Github and is the sequel to Yamm


View on GithubDownload 155 |
156 |
157 |
158 |
159 |
160 |

Markup

161 |
    162 |
  1. 163 |

    Reuse navbar markup and add class .yamm at the top.

    164 |
    2. 165 |
  2. 166 |

    Then add your markup into the .dropdown-menu

    167 |
    3. 168 |
  3. 169 |

    Optionally use .yamm-content to wrap content with padding.

    170 |
    4. 171 |
  4. 172 |

    .dropdown-item is ommited to avoid default background and text color styling

    173 |
    5. 174 |
175 |
176 |
177 | 
<nav class="yamm navbar navbar-expand-lg navbar-light bg-light">
178 | ...
179 |      <ul class="navbar-nav">
180 |        <li class="nav-item dropdown">
181 |          <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Dropdown</a>
182 |          <div class="dropdown-menu">
183 |            <div class="yamm-content">
184 |              ...
185 |            </div>
186 |          </div>
187 |        </li>
188 |      </ul>
189 | ...
190 | </nav>
191 |
192 |
193 |
194 |
195 |
196 |

Grid Example

197 | 198 | 331 |
332 |
333 |
334 |
335 |
336 |

Fullwidth

337 |

By default every mega-dropdown will take the content size and is possible to add .yamm-fw to .dropdown to expand it fullwidth

338 |

Yamm works better with fullwidth menus.

339 |
340 |
341 | 
<nav class="yamm navbar navbar-expand-lg navbar-light bg-light">
342 | ...
343 |      <ul class="navbar-nav">
344 |        <li class="nav-item dropdown yamm-fw">
345 |          ...
346 |        </li>
347 |      </ul>
348 | ...
349 | </nav>
350 |
351 |
352 |
353 |
354 |
355 |

More components

356 | 357 | 489 |
490 |
491 |
492 |
493 |
494 |

JavaScript

495 |

This code will prevent unexpected menu close when using some components (like accordion, forms, etc)

496 |
497 |
498 | 
$(document).on('click', '.yamm .dropdown-menu', function(e) {
499 |   e.stopPropagation()
500 | })
501 |
502 |
503 |
504 |
505 |
506 |

MIT © Geedmo 2019

507 |
508 |
509 |
510 |
511 | 512 |
513 |
514 | 515 |
516 | 517 |
518 |
519 |
520 |
521 |
522 | 523 | 524 | 525 | 526 | 527 | 535 | 536 | 537 | 538 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@geedmo/yamm", 3 | "version": "4.0.1", 4 | "description": "Yet another megamenu for Bootstrap", 5 | "homepage": "http://geedmo.github.io/yamm/", 6 | "author": "@geedmo", 7 | "main": "dist/yamm.css", 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/geedmo/yamm" 11 | }, 12 | "scripts": { 13 | "build-sass-compressed": "node-sass src/yamm.scss dist/yamm.min.css --output-style compressed", 14 | "build-sass-expanded": "node-sass src/yamm.scss dist/yamm.css --output-style expanded", 15 | "build-sass": "npm run build-sass-expanded && npm run build-sass-compressed", 16 | "build-pug": "pug demo/pug/index.pug -o . -P", 17 | "build": "npm run build-sass && npm run build-pug", 18 | "test": "tap test/basic.js" 19 | }, 20 | "devDependencies": { 21 | "less": "3.10.3", 22 | "node-sass": "4.13.0", 23 | "pug": "2.0.4", 24 | "pug-cli": "1.0.0-alpha6", 25 | "stylus": "0.54.7", 26 | "tap": "14.10.1" 27 | }, 28 | "nyc": { 29 | "temp-dir": "./node_modules/.nyc_output" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/yamm.less: -------------------------------------------------------------------------------- 1 | /*! 2 | * Yamm! - Yet another megamenu for Bootstrap 3 | * http://geedmo.github.com/yamm 4 | * 5 | * @geedmo - Licensed under the MIT license 6 | */ 7 | 8 | //----------------------------- 9 | // Yamm LESS 10 | //----------------------------- 11 | 12 | @yamm-content-padding: 1rem; 13 | 14 | .yamm { 15 | // reset positions 16 | .collapse, 17 | .dropup, 18 | .dropdown { 19 | position: static; 20 | } 21 | 22 | // propagate menu position under container for fullwidth navbars 23 | .container { 24 | position: relative; 25 | } 26 | 27 | // by default aligns menu to left 28 | .dropdown-menu { 29 | left: auto; 30 | } 31 | 32 | // Content with padding (presentational) 33 | .yamm-content { 34 | padding: @yamm-content-padding; 35 | } 36 | 37 | // Fullwidth menu 38 | .dropdown, 39 | .dropup { 40 | &.yamm-fw .dropdown-menu { 41 | left: 0; 42 | right: 0; 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/yamm.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Yamm! - Yet another megamenu for Bootstrap 3 | * http://geedmo.github.com/yamm 4 | * 5 | * @geedmo - Licensed under the MIT license 6 | */ 7 | 8 | //----------------------------- 9 | // Yamm SASS 10 | //----------------------------- 11 | 12 | $yamm-content-padding: 1rem !default; 13 | 14 | .yamm { 15 | // reset positions 16 | .collapse, 17 | .dropup, 18 | .dropdown { 19 | position: static; 20 | } 21 | 22 | // propagate menu position under container for fullwidth navbars 23 | .container { 24 | position: relative; 25 | } 26 | 27 | // by default aligns menu to left 28 | .dropdown-menu { 29 | left: auto; 30 | } 31 | 32 | // Content with padding (presentational) 33 | .yamm-content { 34 | padding: $yamm-content-padding; 35 | } 36 | 37 | // Fullwidth menu 38 | .dropdown, 39 | .dropup { 40 | &.yamm-fw .dropdown-menu { 41 | left: 0; 42 | right: 0; 43 | } 44 | } 45 | } -------------------------------------------------------------------------------- /src/yamm.styl: -------------------------------------------------------------------------------- 1 | /*! 2 | * Yamm! - Yet another megamenu for Bootstrap 3 | * http://geedmo.github.com/yamm 4 | * 5 | * @geedmo - Licensed under the MIT license 6 | */ 7 | 8 | //----------------------------- 9 | // Yamm Stylus 10 | //----------------------------- 11 | 12 | yamm-content-padding ?= 1rem 13 | 14 | .yamm 15 | // reset positions 16 | .collapse, 17 | .dropup, 18 | .dropdown 19 | position static 20 | 21 | // propagate menu position under container for fullwidth navbars 22 | .container 23 | position relative 24 | 25 | // by default aligns menu to left 26 | .dropdown-menu 27 | left auto 28 | 29 | // Content with padding (presentational) 30 | .yamm-content 31 | padding yamm-content-padding 32 | 33 | // Fullwidth menu 34 | .dropdown, 35 | .dropup 36 | &.yamm-fw .dropdown-menu 37 | left 0 38 | right 0 39 | -------------------------------------------------------------------------------- /test/basic.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const tap = require('tap'); 3 | 4 | const sass = require('node-sass'); 5 | const stylus = require('stylus'); 6 | const less = require('less'); 7 | const pug = require('pug'); 8 | 9 | const SASS_STYLESHEET = './src/yamm.scss'; 10 | const LESS_STYLESHEET = './src/yamm.less'; 11 | const STYL_STYLESHEET = './src/yamm.styl'; 12 | const PUG_TEMPLATE = './demo/pug/index.pug'; 13 | 14 | let sass_result, styl_result, less_result; 15 | 16 | // SASS 17 | const compileSaas = () => { 18 | const sass_content = fs.readFileSync(SASS_STYLESHEET, 'utf8'); 19 | const output = sass.renderSync({ 20 | data: sass_content 21 | }); 22 | sass_result = output.css.toString(); 23 | }; 24 | 25 | // Stylus 26 | const compileStylus = () => { 27 | const styl_content = fs.readFileSync(STYL_STYLESHEET, 'utf8'); 28 | styl_result = stylus.render(styl_content); 29 | }; 30 | 31 | // Less 32 | const compileLess = cb => () => { 33 | const less_content = fs.readFileSync(LESS_STYLESHEET, 'utf8'); 34 | less.render(less_content).then(output => { 35 | less_result = output.css; 36 | cb(); 37 | }); 38 | }; 39 | 40 | // Pug 41 | const compilePug = () => pug.renderFile(PUG_TEMPLATE); 42 | 43 | // Minify conetnt 44 | const min = str => 45 | str 46 | .replace(/(?:\r\n|\r|\n|\s)/g, '') /* spaces and new lines */ 47 | .replace(/\*(.|\n)*?\*/g, ''); /* comment blocks (stylus removes !)*/ 48 | 49 | /** 50 | * Suites 51 | * - Test everything compiles fine 52 | * - Test everything compiles the same output 53 | */ 54 | 55 | tap.test('Compiles without throw error', tap => { 56 | tap.test('SASS sources', tap => { 57 | tap.doesNotThrow(compileSaas); 58 | tap.end(); 59 | }); 60 | tap.test('STYLUS sources', tap => { 61 | tap.doesNotThrow(compileStylus); 62 | tap.end(); 63 | }); 64 | tap.test('LESS sources', tap => { 65 | tap.doesNotThrow(compileLess(() => tap.end())); 66 | }); 67 | tap.test('PUG demo', tap => { 68 | tap.doesNotThrow(compilePug); 69 | tap.end(); 70 | }); 71 | tap.end(); 72 | }).catch(tap.threw); 73 | 74 | tap.test('Compiles the same output', tap => { 75 | tap.test('STYLUS vs SASS', tap => { 76 | tap.equal(min(sass_result), min(styl_result)); 77 | tap.end(); 78 | }); 79 | tap.test('LESS vs SASS', tap => { 80 | tap.equal(min(sass_result), min(less_result)); 81 | tap.end(); 82 | }); 83 | tap.end(); 84 | }).catch(tap.threw); 85 | --------------------------------------------------------------------------------