Suggestion Collapsible Footer menu

[Alpha1]

On mobile the footer menu is way too big. What would be optimal is to have a collapsible footer menu. Or rather a collapsed menu that can be expanded by clicking on a footer menu header. Its easier to explain this by showing what I mean. Here is the current footer menu of this site:

The footer menu has 4 sections:

• Products & services
• Useful Links
• Support
• Important Links

Lets call these Footer Headers.
Each Footer Header has a number of links.
What I suggest is to only display the Footer Headers and when the user clicks on one, then expand it with harmonica effect in the same way that this works in the off-canvas menu.

How to Create a Collapsible Footer

Don't neglect the small elements of building a mobile-responsive website. Here's how to craft a collapsible footer to improve your visitors' navigation regardless of what screen they use.

www.solodev.com

 

[Russ]

It's fairly easy to do at the moment (Bolt has this included but works only with the custom HTML footer blocks).

I thought about implementing it into the footer for all the styles but for a variety of reasons I chose not to do it.

If you want to do this, super simple:

Add the following code to extra.less:

@media (max-width: @xf-responsiveMedium)
{
    .p-footer-custom .xb-footer--wrapper
    {
        display: block;
        .xb-footer-block
        {
            width: auto;
            border-bottom: 1px solid xf-diminish(@xf-xbCustomFooterCSS--background-color, 4%);
            margin: 0;
            h3
            {
                padding: @xf-paddingMedium  0;
                margin: 0;
                &:before { display: inline-block; }
            }
            &:last-of-type { border-bottom-width: 0; }
        }
    }
    .footerList
    {
        display: none;
        .m-transitionFadeDown();
        &.is-active { display: block; }
    }
}

And then in Style properties -> Footer, you need to use the custom HTML blocks provided and modify the h3 tag like the following. You can copy the h3 line and replace the title.

<h3 class="collapseTrigger collapseTrigger--block" data-xf-click="toggle" data-target="< :next">
Custom block 2</h3>
<ul class="footerList">
    <li><a href="#">Custom link</a></li>
     <li><a href="#">Custom link</a></li>
     <li><a href="#">Custom link</a></li>
     <li><a href="#">Custom link</a></li>
</ul>

The above approach works only with lists. Ironically enough, on the site you linked they just ditch the links entirely with no collapse feature

 

[Alpha1]

Thanks. How do I add a separator line inbetween?
On wide width, it shows the triangle at the right, while this has no purpose on desktop. How do I hide these on wide width?

While this is easy to add, I think it would be a nice enhancement to have an option for this by default in Nova and FlatAwesome.

 

[Russ]

Sorry for the delay. Updated CSS:

@media (min-width: (@xf-responsiveMedium  + 1))
{
    .p-footer-custom .xb-footer--wrapper .xb-footer-block h3
    {
        cursor: text;
        &:before
        {
            display: none;
        }
    }
}
@media (max-width: @xf-responsiveMedium)
{
    .p-footer-custom .xb-footer--wrapper
    {
        display: block;
        .xb-footer-block
        {
            width: auto;
            border-bottom: 1px solid xf-diminish(@xf-xbCustomFooterCSS--background-color, 4%);
            margin: 0;
            h3
            {
                padding: @xf-paddingMedium  0;
                margin: 0;
                &:before { display: inline-block; }
            }
            &:last-of-type { border-bottom-width: 0; }
        }
    }
    .footerList
    {
        display: none;
        .m-transitionFadeDown();
        &.is-active { display: block; }
    }
}

Forgot the top part where I hid the arrow.

There is a border color set on this line:

border-bottom: 1px solid xf-diminish(@xf-xbCustomFooterCSS--background-color, 4%);

You can adjust that. Changing the 4% to a higher value will brighten the border. It grabs the background color from the custom footer and then increases the color a little.