Hamburger Menu Functionality

Beginners
1

Hi guys, total newbie here coming from Adobe Muse. I’ve created a Tailwind enhanced basic HTML site (no bootstrap or Wordpress), and I need to add functionality to a hamburger menu button located as a traditional navigation bar button for the mobile media queries. For the life of me, I’ve tried interactions, a separate javascript file, etc., to no avail. I wish something so basic was a tutorial on the support site. Please help :slight_smile: Thank you!

2

Hi @alandestoy,
Welcome! There are a couple of different ways that you can do this in Tailwind. The Tailwind docs actually have the markup for a basic nav menu - https://tailwindcss.com/components/navigation
Basically, you have a block with your hamburger in it that gets a class like ‘md:hidden’ and an id of ‘hamburgerbtn’, and another block containing all your menu items, with classes of ‘hidden’ and ‘md:block’ and an id of ‘menublock’.
Finally, a little bit of JavaScript to show/hide your menu block at that medium breakpoint.

<script>
            let hamburger = document.getElementById('hamburgerbtn');
        
            let mobileMenu = document.getElementById('menublock');
        
            hamburger.addEventListener('click', function(){
                mobileMenu.classList.toggle('hidden');
            });
        </script>

Hope this helps!
Bob

3

you could do this with just an input toggle and CSS… i think it’s rather fetching.

CSS:

/* ====== BURGER TOGGLE ====== */

#tmm {
    position: absolute;
    left: -9999px;
}

.burger {
    background: #ccc;
    display: inline-block;
    padding: 24px 14px;
}

.burger:hover,
.burger:focus {
    cursor: pointer;
}

.burger-patty {
    width: 18px;
    height: 3px;
    position: relative;
    display: block;
    background: #333;
}

.burger-patty:before,
.burger-patty:after {
    background: #333;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    transition: all 800ms ease-in;
}

.burger-patty:before {
    top: 5px;
}

.burger-patty:after {
    top: -5px;
}

/* ====== CHECK BEHAVIOR ====== */

#tmm:checked ~ .main-menu {
    display: block;
}

#tmm:checked ~ .burger .burger-patty {
    background: transparent;
}

#tmm:checked ~ .burger .burger-patty:before {
    top: 0;
    transform: rotate(-315deg);
}

#tmm:checked ~ .burger .burger-patty:after {
    top: 0;
    transform: rotate(315deg);
}

HTML:

  <input id="tmm" type="checkbox">
  <label aria-haspopup="true" for="tmm" class="burger">
    <span class="burger-patty" aria-label="submenu"></span>
  </label>
4

Hi @RobM,
Thank you so much for helping with this! This worked out just fine! It’s a bit “out of process” because it required to get into the code file itself, but a great way to get new experience. Thanks again! I’m sure this will help others like me along the way as well.

Cheers,
Augusto

5

Hi @droidgoo,

This also worked out pretty well! Thank you for sharing, really appreciate the help!

Cheers,
A

1 Like