├── README.md └── megamenu.scss /README.md: -------------------------------------------------------------------------------- 1 | # update 2 | Works with the current latest version 0.9.1 3 | 4 | # bulma-megamenu 5 | Bulma extension to make Mega Menu. 6 | 7 | Click here for Codepen Demo 8 | 9 | 10 | ![mega-menu.jpg](https://bulma.io/images/extensions/bulma-megamenu.png) 11 | 12 | Usage 13 | --- 14 | ```html 15 | 59 | ``` 60 | 61 | Integration 62 | --- 63 | - Clone the [bulma repo](https://github.com/jgthms/bulma) 64 | - Under the `sass` folder, create a new folder called `extensions` 65 | - In this new folder, create a new file `megamenu.scss` 66 | - Copy the code from the `bulma-megamenu repo`'s [megamenu.scss](https://raw.githubusercontent.com/hunzaboy/bulma-megamenu/master/megamenu.scss) file into your new file 67 | - In the same folder create a new file `_all.sass` (this is not required, but will help when you add more extensions) 68 | - In this file add this code: 69 | ``` 70 | @charset "utf-8" 71 | 72 | @import "megamenu.scss" 73 | ``` 74 | At the end of the `bulma.sass` file, add this line: `@import "sass/extensions/_all"` 75 | 76 | Now, you can just build the bulma project with `npm run build`, and the output will be available in the `css folder`. 77 | 78 | 79 |

80 | -------------------------------------------------------------------------------- /megamenu.scss: -------------------------------------------------------------------------------- 1 | .navbar-item.is-mega { 2 | position: static; 3 | 4 | .is-mega-menu-title { 5 | margin-bottom: 0; 6 | padding: .375rem 1rem; 7 | } 8 | } 9 | --------------------------------------------------------------------------------