Bulma extension to make Mega Menus
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md Fix README Aug 17, 2017
megamenu.scss Update megamenu.scss Aug 17, 2017

README.md

bulma-megamenu

Bulma extension to make Mega Menus

Click here for Codepen Demo

mega-menu.jpg

Usage

<nav class="navbar ">
....

 <div class="navbar-item has-dropdown is-hoverable is-mega">
        <div class="navbar-link">
          Blog
        </div>
        <div id="blogDropdown" class="navbar-dropdown">
          <div class="container is-fluid">
            <div class="columns">
              <div class="column">
                <h1 class="title is-6 is-mega-menu-title">Sub Menu Title</h1>
                <a class="navbar-item" href="/2017/08/03/list-of-tags/">
                  <div class="navbar-content">
                    <p>
                      <small class="has-text-info">03 Aug 2017</small>
                    </p>
                    <p>New feature: list of tags</p>
                  </div>
                </a>
                <a class="navbar-item" href="/2017/08/03/list-of-tags/">
                  <div class="navbar-content">
                    <p>
                      <small class="has-text-info">03 Aug 2017</small>
                    </p>
                    <p>New feature: list of tags</p>
                  </div>
                </a>
                <a class="navbar-item" href="/2017/08/03/list-of-tags/">
                  <div class="navbar-content">
                    <p>
                      <small class="has-text-info">03 Aug 2017</small>
                    </p>
                    <p>New feature: list of tags</p>
                  </div>
                </a>
              </div>        
              <div class="column">...</div>
              <div class="column">...</div>
              <div class="column">...</div>
            </div>
          </div>
...
</nav>

Integration

  • Clone the bulma repo
  • Under the sass folder, create a new folder called extensions
  • In this new folder, create a new file megamenu.scss
  • Copy the code form the bulma-megamenu repo's megamenu.scss file into your new file
  • In the same folder create a new file _all.sass (this is not required, but will help when you add more extensions)
  • In this file add this code:
@charset "utf-8"

@import "megamenu.scss"

At the end of the bulma.sass file, add this line: @import "sass/extensions/_all"

Now, you can just build the bulma project with npm run build, and the output will be available in the css folder.