Spectre: Hamburger menu like on the docs website

[Odonno]

The Hamburger Menu on the docs website is pretty interesting.

• supports responsive design
• full height on the sidebar on large screen
• hamburger menu button (+ overlay sidebar) on small screen

Really interested to see it in this library.

[Janca]

Its already supported with the experimental CSS. Its a mix of a few different components, and clever pseudo-selectors like ':target'. This example below may help get you started.

<div class="off-canvas off-canvas-sidebar-show">
    <div id="left-navigation" class="off-canvas-sidebar">
        <div class="navigation-menu">
            <a href="/" class="logo">
                <img src="/assets/brand.png" class="brand">
            </a>
            <div class="nav-menus">
                <details class="accordion">
                    <summary class="accordion-header c-hand">
                        <span class="nav-item header">Main Nav Item 1</span>
                    </summary>
                    <div class="accordion-body">
                        <ul class="menu menu-nav">
                            <li class="menu-item">
                                <a href="#" class="nav-item">Main Nav Item 1 Sub Item 1</a>
                            </li>
                            <li class="menu-item">
                                <a href="#" class="nav-item">Main Nav Item 1 Sub Item 2</a>
                            </li>
                            <li class="menu-item">
                                <a href="#" class="nav-item">Main Nav Item 1 Sub Item 2</a>
                            </li>
                        </ul>
                    </div>
                </details>
                <details class="accordion">
                    <summary class="accordion-header c-hand">
                        <span class="nav-item header">Main Nav Item 2</span>
                    </summary>
                    <div class="accordion-body">
                        <ul class="menu menu-nav">
                            <li class="menu-item">
                                <a href="#" class="nav-item">Main Nav Item 2 Sub Item 1</a>
                            </li>
                            <li class="menu-item">
                                <a href="#" class="nav-item">Main Nav Item 2 Sub Item 2</a>
                            </li>
                            <li class="menu-item">
                                <a href="#" class="nav-item">Main Nav Item 2 Sub Item 2</a>
                            </li>
                        </ul>
                    </div>
                </details>
                <!-- ETC -->
            </div>
        </div>
    </div>

    <a class="off-canvas-overlay" href="#close"></a>

    <div class="off-canvas-content">
            <!-- THIS IS WHERE YOUR MAIN CONTENT WOULD GO -->
    </div>
</div>

And there is a little bit of custom CSS that the doc's page applies that I think the LESS below will mimic fairly accurately.

.nav-menus {
    margin-top: 12px;
    padding: 0 .75rem;

    .nav-item {
      &.header {
        text-transform: uppercase;
        font-weight: 600;
      }

      font-size:0.7rem;
    }
  }

The hamburger menu works by making an A tag and making its href the id of the side bar. In this example its identified by #left-navigation.

<a href='#left-navigation' class='off-canvas-toggle btn btn-action btn-primary btn-sm'><i class='icon icon-menu'></i></a>

[Odonno]

@Janca I am glad to know that. Should we add this component to the documentation website? I can start a PR for that.

[Janca]

I am not sure that it belongs as a component on the documentation as it is more of a collection of components rather than a single one. It would make a good example if there were an example section. Perhaps make a PR for an example page including the off-canvas navigation bar as well as a few other components that could work well together.

Also in its current form it would not be a one-to-one match to how the documentation looks without including some more styling.

[edceliz]

An example page is really a good idea. There should be a page for Spectre usage such as templates and widgets.

On that note, a new issue was opened related to this

Issue https://github.com/picturepan2/spectre/issues/416

[Odonno]

@Janca Examples are a really good idea. But the point here is to be able to copy/paste code and be able to create an HamburgerMenu in your app in a few seconds. Something that can be found on the Experimentals page for example.

If you think it is a different category, we can create another page/category.

[tunjioye]

I agree with Janca about having a page for templates
I just came across SPECTRE CSS and I love to use it soo much I am thinking of making templates with it.

Concerning the OFF CANVAS Experimental Feature, I had to use a little additional CSS & jQuery to make it look exactly like that in the DOCUMENTATION.

[tunjioye]

I agree with Janca about having a page for templates
I just came across SPECTRE CSS and I love to use it soo much I am thinking of making templates with it.

Concerning the OFF CANVAS Experimental Feature, I had to use a little additional CSS & jQuery to make it look exactly like that in the DOCUMENTATION.

[Janca]

@Teejay1589 I was able to replicate the documentation's navigation menu with only the additional classes that I included in my example post. Do you remember where you had to use jQuery to achieve your styling?

On topic though, I believe that while copy-and-paste snippets would be extremely useful, the way that the off-canvas classes are designed you almost need to style your entire page around using it. It isn't just a copy-pasta kinda thing. An example page using the off-canvas sidebar while providing code blocks for how its used on the page would be better. Otherwise you would be no better off than just linking to the current documentation on off-canvas.

[tunjioye]

Yeah
I think I understand your point better now.

And its a good one.
WE NEED AN EXAMPLE PAGE FOR OFF CANVAS

PLEASE LET THE EXAMPLE BE IN THE VERY NEXT UPDATE

[Odonno]

So, I suppose we can organize in that way:

• let the current demonstration/components sections as is
• add a Templates section (with some code to get started with a HamburgerMenu design, etc..)
• add a Examples section (with complete examples of living websites)

Am I right?

[Janca]

I agree with keeping the current code examples as well as the experimental examples the same. I would then create a new category, perhaps 'Advanced Examples', and include in-depth code examples of using multiple Spectre components together to form larger components. I have no other opinions on what should be included in this category.

Also, as I have said before, creating an example of this off-canvas navigation menu will not be a one-to-one visual comparison as there are other styles applied to the navigation on the documentation pages. Maybe it would be better to only include this 'Advanced Examples' section when the appropriate style classes have been made, or one could maybe include it in their PR for the new documentation pages.