Animated SVG for menu icon

[JiveDig]

Here's my proposal, and why...

Let's use an SVG for the menu icon, and animate it to a close symbol (CSS-only), instead of pure CSS icons.

Why:

1. We could have different icons with less code/work e.g. Default to the 3 lines, but also have 3 horizontal dots.
2. I'd like to easily be able to show the "Menu" text (via config) without having to add/change code. Many customers want this, and we've done it on a few sites where we knew the audience may be a bit older.

This enforces the reasoning: https://websemantics.uk/articles/hamburger-menu-svg/

And the SVG example here is a good start, though we can make it prettier: https://lukyvj.github.io/menu-to-cross-icon/

[seothemes]

I'm not against this but not sure I'm seeing the advantage of using SVGs over psuedo elements/bars here. Seems like it would require more code and they are generally harder to style. For example, it's currently pretty easy to make the current icon 3 dots instead of lines:

:root {
    --menu-toggle-line-width: 4px;
    --menu-toggle-line-height: 4px;
    --menu-toggle-line-border-radius: 4px;
}

It is currently possible to show the Menu text from the config by removing the screen-reader-text class from the span:

'mainMenu' => sprintf(
    '<span class="menu-toggle-icon"></span><span class="screen-reader-text">%s</span>',
    __( 'Menu', 'mai-engine' )
),

However we may also want to add a setting for that in Mai Customizer so will probably need some logic there.

[JiveDig]

Okay, let's stick with CSS-only.

We can launch with #1 in my quick drawings below, but we should plan for it to be really easy to do the other versions.

[seothemes]

Ok, so we have 3 options that can be done by changing the config and without needing any additional CSS:

☰

<span class="menu-toggle-icon"></span><span class="screen-reader-text">%s</span>

☰ Menu

<span class="menu-toggle-icon"></span> &nbsp %s

Menu ☰

%s &nbsp <span class="menu-toggle-icon"></span>

The other ones can be done with a small amount of CSS, but that can probably be handled on a per theme basis.

[JiveDig]

👍