DEV Community

ktr92
ktr92

Posted on

2

[html css jquery] Mobile menu + button change from burger to close + close on backdrop click

Here is the basis for creating a menu with a hamburger button that changes to close when the menu is open. In addition, there is a background on top of the content. You can close the menu by clicking on the background.

codepen example: https://codepen.io/ktr92/pen/gOBRyKO

HTML:

<div class="jsbackdrop"></div>

<div class="container">
  <header class="header">
    <div class="flex items-center space-between w-full">
      <div class="headercontent">HEADER</div>
      <a href="#" class="menubtn" data-menutoggle="mainmenu">
        <span></span>
        <span></span>
        <span></span>
      </a>
    </div>

    <div class="mainmenu" data-menu="mainmenu">
      <div class="mainmenu__wrapper">
        <div class="mainmenu__items">
          <ul>
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Page 1</a></li>
            <li><a href="#">Page 2</a></li>
            <li><a href="#">Page 3</a></li>
            <li><a href="#">Page 4</a></li>
            <li><a href="#">Page 5</a></li>
          </ul>
        </div>
      </div>
    </div>
  </header>
  <main>
    content body
  </main>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS:

[data-menutoggle] {
  display: block;
  margin-left: 15px;
}

[data-menutoggle] span {
  width: 32px;
  height: 3px;
  margin-bottom: 5px;
  display: block;
  background: #324064;
  transform-origin: 4px 0px;
  transition: transform 0.3s cubic-bezier(0.77, 0.2, 0.05, 1),
    background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;

  &:last-child {
    margin-bottom: 0;
  }
}

[data-menutoggle] span:first-child {
  transform-origin: 0% 0%;
}

[data-menutoggle] span:last-child {
  transform-origin: 0% 100%;
}

[data-menutoggle].active span:first-child {
  opacity: 1;
  transform: translate(0, 18px) rotate(-45deg);
}

[data-menutoggle].active span:last-child {
  transform: translate(0, -21px) rotate(45deg);
}

[data-menutoggle].active span:nth-child(2) {
  opacity: 0;
}
[data-menu] {
  display: none;
}
[data-menu].active {
  display: block;
}

.jsbackdrop {
  background: rgba(52, 60, 75, 0.5);
  display: none;
  position: fixed;
  z-index: 9;
  height: 100%;
  min-height: 100vh;
  left: 0;
  top: 0;
  width: 100%;
}

.jsbackdrop.active {
  display: block;
}
.mainmenu {
  width: 100%;
  position: absolute;
  background: #fff;
  z-index: 99;
  left: 0;
  padding: 10px;
  top: 100%;
}
.mainmenu li {
  list-style: none;
  margin-bottom: 5px;
}

Enter fullscreen mode Exit fullscreen mode

JS[jquery]:

$("[data-menutoggle]").on("click", function (e) {
  e.preventDefault();
  let menu = $(this).data("menutoggle");
  $(`[data-menu=${menu}]`).toggleClass("active");
  $(this).toggleClass("active");
  $(".jsbackdrop").toggleClass("active");
});
$(".jsbackdrop").on("click", function (e) {
  $(this).removeClass("active");
  $("[data-menu]").removeClass("active");
  $("[data-menutoggle]").removeClass("active");
});

Enter fullscreen mode Exit fullscreen mode

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more