Hamburger menu right instead of left side

Question

I found a cool script here https://www.jqueryscript.net/demo/Expanding-Fullscreen-Hamburger-Menu-With-jQuery-CSS3/. It shows has a hamburger icon on the left and opens the menu with a circle, only half overlayed.

Now I want to use this effect but have the icon/menu on the right side. I have this code:

$(function() {
  $(".menu-link").click(function(e) {
    e.preventDefault();
  $(".menu-overlay").toggleClass("open");
  $(".menu").toggleClass("open");
  });
});

body {
  background: blue;
}

.menu {
  position: absolute;
  right: 20px;
  top: 20px;
  height: 46px;
  width: 46px;
}

.menu-link {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1002;
}

.menu-icon {
  position: absolute;
  width: 20px;
  height: 14px;
  margin: auto;
  left: 0;
  top: 0;
  right: 0;
  bottom: 1px;
}

.menu-circle {
  background-color: #fff;
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
  transform: scale(1);
  z-index: 1000;
  transition: all 0.2s ease-in-out;
}

.menu-overlay {
  visibility: hidden;
  background-color: rgba(255, 146, 44, .9);
  color: #333;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  transition: opacity 0.2s ease-in-out;
  z-index: 1001;
}

.menu-overlay a {
  color: #fff;
  font-weight: 400;
  font-size: 2em;
  display: inline-block;
}

.menu-line {
  background-color: #333;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  position: absolute;
  left: 0;
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.menu-line-1 {
  top: 0;
}

.menu-line-2 {
  top: 0;
  bottom: 0;
  margin: auto;
}

.menu-line-3 {
  bottom: 0;
}

.menu:hover .menu-circle {
  transform: scale(1.4);
}

.menu-overlay.open {
  opacity: 1;
  visibility: visible;
}

.menu.open .menu-circle {
  transform: scale(60);
}

.menu.open .menu-line-2 {
  opacity: 0;
}

.menu.open .menu-line-1 {
  transform: translateY(7px) translateY(-50%) rotate(-45deg);
}

.menu.open .menu-line-3 {
  transform: translateY(-7px) translateY(50%) rotate(45deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
  <span class="menu-circle"></span>
  <a href="#" class="menu-link">
    <span class="menu-icon">
            <span class="menu-line menu-line-1"></span>
    <span class="menu-line menu-line-2"></span>
    <span class="menu-line menu-line-3"></span>
    </span>
  </a>
</div>
<div class="menu-overlay">
  <ul>
    <li><a href="#">Platzhalter</a></li>
    <li><a href="#">Platzhalter</a></li>
    <li><a href="#">Platzhalter</a></li>
  </ul>
</div>

(Also on JSFiddle.)

It works more or less, but the whole overlay is making the viewport bigger now (you can scroll to the right and see the full circled background). Is there a way to solve this? Or is this not possible with this "script"?

see above, but just an css issue..? – sigug Jul 18 '20 at 15:14 — sigug, Jul 18 '20 at 15:14

score 1 · Answer 1 · answered Jul 18 '20 at 15:27

If you inspect the jQuery page, in your console you can see that they have overflow: hidden on the body tag. Adding that to your code solves the problem:

In practice, this may be a bit too simplistic. You probably don't want a blanket overflow: hidden on your body because then you couldn't scroll the page. Also, if your menu links didn't fit in the page, you wouldn't be able to scroll to get to them (say, on mobile).

The former problem you can solve by toggling the overflow at the same time you click the button to open the nav. An example of that is below. The latter problem may not be an issue for you, but if it is, you can solve it by wrapping the menu in an element that is as large as the page and scrolls, but still having body be overflow: hidden so the background won't scroll and your menu background won't blow out the page width.

$(function() {
  $(".menu-link").click(function(e) {
    e.preventDefault();
  $("body").toggleClass("overflow-hidden");
  $(".menu-overlay").toggleClass("open");
  $(".menu").toggleClass("open");
  });
});

body {
  background: blue;
}

.overflow-hidden {
  overflow: hidden;
}

.menu {
  position: absolute;
  right: 20px;
  top: 20px;
  height: 46px;
  width: 46px;
}

.menu-link {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1002;
}

.menu-icon {
  position: absolute;
  width: 20px;
  height: 14px;
  margin: auto;
  left: 0;
  top: 0;
  right: 0;
  bottom: 1px;
}

.menu-circle {
  background-color: #fff;
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
  transform: scale(1);
  z-index: 1000;
  transition: all 0.2s ease-in-out;
}

.menu-overlay {
  visibility: hidden;
  background-color: rgba(255, 146, 44, .9);
  color: #333;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  transition: opacity 0.2s ease-in-out;
  z-index: 1001;
}

.menu-overlay a {
  color: #fff;
  font-weight: 400;
  font-size: 2em;
  display: inline-block;
}

.menu-line {
  background-color: #333;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  position: absolute;
  left: 0;
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.menu-line-1 {
  top: 0;
}

.menu-line-2 {
  top: 0;
  bottom: 0;
  margin: auto;
}

.menu-line-3 {
  bottom: 0;
}

.menu:hover .menu-circle {
  transform: scale(1.4);
}

.menu-overlay.open {
  opacity: 1;
  visibility: visible;
}

.menu.open .menu-circle {
  transform: scale(60);
}

.menu.open .menu-line-2 {
  opacity: 0;
}

.menu.open .menu-line-1 {
  transform: translateY(7px) translateY(-50%) rotate(-45deg);
}

.menu.open .menu-line-3 {
  transform: translateY(-7px) translateY(50%) rotate(45deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
  <span class="menu-circle"></span>
  <a href="#" class="menu-link">
    <span class="menu-icon">
      <span class="menu-line menu-line-1"></span>
    <span class="menu-line menu-line-2"></span>
    <span class="menu-line menu-line-3"></span>
    </span>
  </a>
</div>
<div class="menu-overlay">
  <ul>
    <li><a href="#">Platzhalter</a></li>
    <li><a href="#">Platzhalter</a></li>
    <li><a href="#">Platzhalter</a></li>
  </ul>
</div>

Thank you! There is no way though to not have the "horizontal scrollbar" move while the animation is played when you close the menu, right? (browser issue) — sigug, Jul 18 '20 at 15:44
@sigug Ah, yeah, on my Mac (scrollbars only visible when necessary), I can't even see anything happening, but I'm familiar with that problem. You can try https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll#49278385 and other answers on that question. (Top answer is about hiding vertical scroll bars but could potentially be adapted for a horizontal scroll bar.) — cjl750, Jul 18 '20 at 16:05
That aside it will be a problem on mobile too in any case I think (you quickly see a strange full page, then clips back). But thanks. — sigug, Jul 18 '20 at 16:18

Hamburger menu right instead of left side

1 Answers1