Responsive Navigation Menu

Here I would like to create a responsive menu. The menu is vertically stacked on small screens, and is a horizontal navigation bar on larger screens.

When I tried to combine the two menus in the same file to achieve responsiveness, I found things got tangled. It is better to write a horizontal navigation menu and a vertically stacked menu separately. Then combine the two menus latter.

I recall when I was learning design patterns. Two principles I learned. The first one is “divide and conquer”. Divide the responsive menu into two menus. One is horizontal and the other is vertical. That is implement (i.e., “to conquer” 😜) one menu at a time and then combine them together.

The two menus are implemented already. The CSS code can be divided into two different category by its function. One is for visual appearance (such as text formatting, coloring). The other is for positioning. The CSS code of the vertically stacked menu is adjusted for visual consistency. The CSS code is listed below.

* {
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
    background-color: #ccc;
}
/* common ul style */
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #444;
}
/* positioning for vertical menu */
nav a {
    text-align: center;
    display: block;
}
/* common text style */
nav a {
    font-family: sans-serif;
    font-size: 1.2rem;
    /* vertically center */
    height: 3rem;
    /* vertically center */
    line-height: 3rem;
    /* remove underline */
    text-decoration: none;
    color: #fff;
}
nav a.active {
    background-color: #eee;
    color: #444;
    cursor: default;
}

“Mobile first” is taken into account here. Therefore the vertically stacked menu is presented first in the code. You can see the difference between the above code and the original code in this article. The :hover state is removed, since it is useless in mobile devices.

The second rule I learned from design pattern is “DRY” (don’t repeat your self). This rule also applies for creating a responsive menu.

To do “DRY”, in my experience, there is a simple method.

Put the common code in one place, and then put the specific code in one other place.

Before to use this principle, you must have two piece of code, of course. 😅 We have two menus already. Now we can apply this principle.

You can compare the above code with that of the horizontal navigation bar.

The visual appearance is (and must be) consistent in small screens and large screens. The code for visual appearance should appear only once (DRY). In other words, the code for visual appearance is common for the vertically stacked menu and the horizontal navigation bar. Only the CSS code for positioning differs. The code of the horizontal navigation bar for positioning is put in a media query section.

@media (min-width: 768px) {
    /* center the menu */
    nav {
        width: 80%;
        margin: 0 auto;
    }
    nav ul {
        /* step 4 */
        text-align: center;
        /* step 5 */
        overflow: auto;
   }
   nav li {
       /* step 1 */
       float: left;
       /* step 3 */
       width: 20%;
   }
   nav a {
       /* step 2 */
       display: block;
   }
   nav a:hover {
        background-color: #005f5f;
   }
}

A responsive menu is done. See full code here.