A Better Alternative to the Hamburger Menu

Hamburger menu and soda

I’ve read about problems with the three-bar icon you are used to seeing on mobile websites and applications. The icon is referred to as a “hamburger” because you can think of the top and bottom bars as buns and the middle bar as the cheese, pickles, meat, etc. Therefore, it is called a “hamburger menu,” and critics point out issues that lead to reduced traffic.

I was inspired to write this by an article by James Archer of Crowd Favorite bashing this design trend. He gives examples of sites that have switched to tab bars for their mobile layouts because tab bars have been promoting higher engagement and making navigation a lot easier.

It’s quite interesting that users have difficulty locating important information, don’t know what the icon is or what it does, and complain about clicking a button just to see navigation links. I used to use a hamburger menu on my portfolio site in the past, and then I felt guilty after learning about the aforementioned criticisms.

We as designers have been used to creating hamburger menus for a long time. The common solution many websites use is a tab menu, so in this post, I’ll show you how to create a simple navigation bar that uses tabs in mobile. To add some more meaning to them, we’ll use SVG icons that I created myself using Adobe Illustrator. Here’s what both versions will look like in the end:

Mobile menu with tabs

Tablet/desktop

The HTML

First, we’ll set up the navigation bar structure with two child list items for Products. The SVG for each item will be embedded so that we can easily change the fill of their polygons and paths on hover with CSS. Since the SVG code is a bit lengthy, I have minimized it in the code below. To see each SVG code in its entirety, you can find it in my CodePen demo above.

<nav>
    <ul>
        <li>
            <a href="#">
                <!-- SVG code for Home icon -->
                <svg class="icon" ...>
                    . . .
                </svg>
                Home
            </a>
        </li>
        <li>
            <a href="#">
                <!-- SVG code for Products icon -->
                <svg class="icon" ...>
                    . . .
                </svg>
                Products
                <span class="caret"></span>
            </a>
            <ul>
                <li>
                    <a href="#">Category 1</a>
                </li>
                <li>
                    <a href="#">Category 2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">
                <!-- SVG code for About icon -->
                <svg class="icon" ...>
                    . . .
                </svg>
                About
            </a>
        </li>
        <li>
            <a href="#">
                <!-- SVG code for Contact icon -->
                <svg class="icon" ...>
                    . . .
                </svg>
                Contact
            </a>
        </li>
    </ul>
</nav>

The CSS

Here are the global styles for the nav. We’ll make the background dark gray, the link text white, and the link text on hover blue. The drop menus will be slightly darker and even a darker gray color for the item hover states. We’ll center everything except for the drop menu items.

body {
    font-family: Roboto, sans-serif;
    margin: 0;
}
nav {
    background: #333;
    margin-left: -25px;
    text-align: center;
}
nav ul {
    margin: 0;
    padding: 0;
}
nav ul li {
    display: inline-block;
    font-size: 12px;
    line-height: 30px;
    margin-left: 25px;
}
nav ul li a {
    color: #fff;
    padding: 20px 0;
    text-decoration: none;
}
nav ul li:hover a {
    color: #0af;
}
nav ul li ul {
    display: none;
}
nav ul li:hover ul {
    background: #222;
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
}
nav ul li:hover ul li {
    display: block;
    font-size: 14px;
    margin: 0;
    padding: 0;
    line-height: 45px;
    text-align: left;
}
nav ul li:hover ul li a {
    color: #fff;
    display: block;
    padding: 0 25px;
}
nav ul li:hover ul li:hover {
    background: #111;
}
nav ul li:hover ul li:hover a {
    color: #0af;
}

Icons

Then to change the colors of the SVG icons on hover, we target the fill property. You might think it should be background-color, but it’s different in SVG because SVG has its own set of properties for CSS. For more info, see the section on the W3C SVG 1.1 recommendation that covers styling.

.icon {
  display: block;
  margin: 10px auto auto auto;
}
nav ul li:hover .icon * {
  fill: #0af;
}

Dropdown Arrow

For the caret that will go next to the Products menu item, we’ll use a border trick for creating triangles (more about this on CSS Tricks). Here, we’ll create a triangle pointing down by using the same width for the top, right, and left sides and then making only the top border white.

.caret {
  border-top: 5px solid #fff;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: middle;
}
nav ul li:hover .caret {
  border-top-color: #0af;
}

Styles for Larger Viewports

Finally, here’s the last group of styles that will change how everything looks in tablet and desktop. We’ll reduce the size of the icons and place them to the left of each link, slightly increase font sizes, and restyle drop menus so that they’re directly positioned under their parent list items.

@media screen and (min-width: 600px) {
  nav {
    text-align: left;
  }
  nav ul {
    margin-left: 25px;
  }
  nav ul li {
    display: inline-block;
    font-size: 18px;
    line-height: 60px;
    margin-left: 25px;
  }
  nav ul li:hover ul {
    left: auto;
    margin-left: -13px;
    min-width: 180px;
    width: auto;
  }
  nav ul li:hover ul li {
    font-size: 16px;
  }
  .icon {
    display: inline-block;
    margin: -4px auto auto auto;
    vertical-align: middle;
    width: 20px;
    height: 20px;
  }
}

Conclusion

Having a tab menu, your mobile website won’t suffer from any more declining traffic due to one measly, troublesome three-bar icon. Not everyone will know what that icon means unlike a play or pause button. If you have so many items in your navigation bar, then you can try to prioritize by deciding which three or four items are the most important and tuck the rest away. That way, there will be no need to use a hamburger. I hope my method of creating navigation bars like this one has given you an excellent idea for resisting the hamburger menu.

View result


Posted in: CSS, HTML