Replacing the hamburger icon with a simple button

HTML & CSS
1

Hello,
I posted on this forum in the past about a hamburger icon, but I can’t find the thread anymore. User PaulOB was kind enough to help me with a CodePen example. Here’s his example:

Over the past few days, I came across an article about not using a hamburger icon, and to be honest, I really liked the idea. For me, it would feel more logical to see the word "Menu’ spelled out, accompanied by a down-pointing or up-pointing arrow.

The website that uses this is https://www.gov.uk

Here’s my CodePen that implements this idea. I’d be grateful if you could take a look and share any feedback, especially if you think this approach has any downsides.:

Thank you.

2

This is purely my own opinion, but having the menu hidden when it’s not necessary is…frustrating.

If you’re going to use the word menu instead of the hamburger icon, cool. I kind of like that idea. It’s clean and obvious (teaching my wife how to even find the menu when the icon first came out was annoying…)

But to always hide the menu and force an extra click every time would work on my nerves, especially if it’s a simple one level menu of choices… I could maybe see it if the menu was massive, but even that government site could have a two tier menu and show “Services and Information” and “Government activity” and have the dropdowns on a click or hover.

But that’s just me. I’m about making things easier for the people visiting, even if it’s not as pretty.

1 Like
3

Thank you for your opinion. I totally agree with what you’re saying. I remember reading in the past that the hamburger menu can slightly hinder usability, whether it’s an icon or a button, but it works well when there are many links. For something small, like my blog, which will likely have no more than six links, I’m considering changing the vertical menu to a horizontal one in the near future and applying a flex-wrap for the items.

4

In the code below, I have some repetition, in the span::before and open span::before. It will be more clear if you check my CodePen linked above. Since I already have those styles defined for span::before, I’m wondering if it’s necessary to duplicate them in the .open span::before as well?

<button class="toggle"><span>Menu</span></button>

.toggle span::before { /* arrow pointing downwards */
   display: inline-block;
   content: "";
   width: 8px;
   height: 8px;
   margin: 0 10px 0 2px;
   vertical-align: middle;
   border-right: 2px solid #ffffff;
   border-bottom: 2px solid #ffffff;
   transform: translateY(-35%) rotate(45deg) scale(1);
}

.open .toggle span::before { /* arrow pointing upwards */
   display: inline-block;
   content: "";
   width: 8px;
   height: 8px;
   margin: 0 10px 0 2px;
   vertical-align: middle;
   border-right: 2px solid var(--header-bg-color);
   border-bottom: 2px solid var(--header-bg-color);
   transform: translateY(1px) rotate(225deg) scale(1);
}

only these ones change:

5

You don’t need to change the things that don’t change on hover. Just change what needs changing.

e.g.

toggle::before {
  /* arrow pointing downwards */
  display: inline-block;
  content: "";
  width: 8px;
  height: 8px;
  margin: 0 10px 0 2px;
  vertical-align: middle;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: translateY(-35%) rotate(45deg) scale(1);
  transition: 0.3s ease;
}

.open .toggle:before {
  /* arrow pointing upwards */
  border-right: 2px solid var(--header-bg-color);
  border-bottom: 2px solid var(--header-bg-color);
  transform: translateY(1px) rotate(225deg) scale(1);
}

I removed the span as you don’t need it in that example unless you have some special need for it? I also gave it a transition so you can see the arrow change which is good for letting people know that something happened rather than just switching immediately on and off.

2 Likes
6

Thank you so much. I kept this class to remove the button elements like the border and background, and to enlarge the clickable area a bit. I think it’s okay. The button will be on a colored backround.

.toggle {
  border: 10px solid transparent;
  box-sizing: content-box;
  padding: 0;
  cursor: pointer;
  outline: none;
  background: transparent;
  overflow: hidden;
  outline: 0;
  font-size: 1.1em;
  font-weight: 700;
}
7

Yes that’s ok but you have to remember with things like buttons and inputs that they come with pre defined styles so you need to be very explicit.

I would add appearance:none just in case (and the older prefix to stop older browsers adding too much) and also explicitly set the color as it will be blue on ios otherwise.



.toggle {
  -webkit-appearance: none;
  appearance: none;
  color:#000;
etc...
}

If you look in devtools you can usually see the styles the UA has applied and most you can ignore but things like the borders, padding and colors etc may need to be explicitly set.

8

I updated my codepen. Does this look good to you?

9

Looking good :slight_smile:

Maybe a transition on the background color would be nice :slight_smile: . On .toggle add transition:.5s ease; to get a smoother fade of the white