Introduction

This script puts a menu bottom Every website needs a menu button. You know… the much debated hamburger that toggles the menu on mobile. It is best practise to add the word ‘Menu’ to the hamburger and to add a little animation that transforms the hamburger into the close button. An example of this script can be seen on mobile in the header of this website.

How it works

This script toggles the class ‘menuopen’ on the body, which will make it easy to make your menu responsive. I deliberately left out any other header styling or assumptions about your layout. Flexbox is your friend when you are creating a menu bar. Suggested additional styling includes:

#togglemenu {display: none; cursor: pointer;}
@media (max-width: 1000px) {
    #togglemenu {display: block;}
    #menu ul {display: none;}
    .menuopen #menu ul {display: block;}
}

The code can be found here.

[expand]

<a id="togglemenu" onclick="document.body.classList.toggle('menuopen');">Menu<span><span></span><span></span><span></span></span></a>

<style>
@keyframes span1 {
    0%   { top: 0%; transform-origin: 50% 50%;}
    50%  { top: 50%; transform: rotate(0deg) translateY(-50%);}
    100% { top: 50%; transform: rotate(45deg) translateY(-50%);}
}
@keyframes span2 {
    0%   {opacity: 1;}
    45%  {opacity: 1;}
    65%  {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes span3 {
    0%   { bottom: 0%; transform-origin: 50% 50%;}
    45%  { bottom: 50%; transform: rotate(0deg) translateY(50%);}
    100% { bottom: 50%; transform: rotate(-45deg) translateY(50%);}
}

#togglemenu {display: none;}
@media only screen and (max-width: 55rem) {
    #menu {display: none;}
    .menuopen #menu {display: block;}
    #togglemenu {display: block; cursor: pointer;}
    
}
#togglemenu > span {display: inline-block; margin-left: 0.4rem; width: 1.1rem; height: 0.75rem; position: relative; vertical-align: middle; position: relative; bottom: 1px;}
#togglemenu > span > span {display: block; position: absolute; width: 100%; height: 2px; background: #999;}
#togglemenu > span > span:nth-child(1) {top: 0; transform-origin: 50% 0%;}
#togglemenu > span > span:nth-child(2) {top: 50%; margin-top: -1px;}
#togglemenu > span > span:nth-child(3) {bottom: 0; transform-origin: 50% 100%;}

.menuopen #togglemenu > span > span:nth-child(1) {
    animation: span1 0.25s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.menuopen #togglemenu > span > span:nth-child(2) {
    animation: span2 0.25s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;  
}
.menuopen #togglemenu > span > span:nth-child(3) {
    animation: span3 0.25s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards; 
}
</style>

[/expand]

Installation

Step 1. Download the file text-expand.html
Step 2. Save the file in the ‘_includes’ directory of your project
Step 3. Add the following code to the place where you want the menu button to appear

{% include text-expand.html %}