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.