search

lemonsaurus / django-simple-bulma

Django application to add the Bulma CSS framework and its extensions
MIT License
137 stars 17 forks source link

bulma-navbar-burger #19

Closed gdude2002 closed 5 years ago

gdude2002 commented 5 years ago

This pull request adds bulma-navbar-burger.js, an addition to README.md to go with it, and a version bump to 1.1.6.

This JavaScript file serves to hook up your navbar-burgers to their respective navbar-menus by ID, via a data-target attribute on the burger element. For example:

<nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
        <a class="navbar-item" href="/">
            Home
        </a>
        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbar_menu">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
        </a>
    </div>
    <div class="navbar-menu" id="navbar_menu">
        <a class="navbar-item" href="/blog">
            Blog
        </a>
    </div>
</nav>

This will result in the following on mobile:

image

When clicked, this will expand the menu downwards:

image

This script is a modified version of an example script provided in the Bulma documentation - I modified it in order to update the Javascript within to a newer standard, making use of arrow functions and const instead of var. Otherwise, it behaves in exactly the same way.

This script has been tested in Firefox 65.0 and Chromium 72.0.3626.96.