Toggle it!

This is the sample file for the step-by-step tutorial to create mobile-first menu with sprite for links with roll-over. The headings use the same file for the preceding number graphic.

part 1: sprites

step 1: the sprite visual

In this first step, we create the file for the sprite graphics. This includes a total of 9 graphics, 3 per step, which are placed on a grid of 9 squares for perfect alignment. The file is then saved as SVG with a PNG fallback.

step 2: the menu setup

The next step is the markup of the menu itself, adding the styling for the mobile menu only. This includes setting the type, colour and background change on hover with a transition.

step 3: adding the sprite

The last step is to add a media query to adapt the menu display to a horizontal presentation and implement the sprites. Each steps visual is placed by setting the appropriate vertical and horizontal coordinates which then change for the different link states to reveal the different graphic.

part 2: menu toggle for mobile

step 1: adding the toggle

For the toggle, we add a checkbox with label to the HTML.

step 2: styling the toggle

We hide the input itself and use CSS to set up the function to show and hide the menu. To keep the toggle accessible, we add a visual highlight to the toggle as well.

step 3: adding the toggle icon

With the toggle functional, the last step is to add the 3 lines as icon, changing their appearance to a cross when the toggle is open.