How to animate translateX() on click

HTML & CSS
1

Hello, I am having an issue with translateX property.

I want the nav menu to be hidden on the right, and when the user clicks on the menu icon, the nav translateX from right to left with ease transition, of course th nav menu will be hidden before the click. it somehow doesn’t work, here is the code:

CSS:

/**************************************
Desktop menu + menu icon
**************************************/
#menu .nav-item {
  transform: translateX(85vh);
  display: none;
}

.clicked {
  display: block;
  transform: translateX(-85vh);
}

HTML:

<header class="header">
    <!-- Navigation and logo -->
    <nav class="navbar navbar-expand-lg">
        <!-- navbar brand -->
        <a class="navbar-brand" href="/">
            <img src="./imgs/rev_logo.png" />
        </a>
        <!-- toggle button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span>
            <svg class="polygon-icon" viewBox="0 0 29.76 25.77">
              <polygon id="polygon" points="21.74 1 8.02 1 1.16 12.88 8.02 24.77 21.74 24.77 28.6 12.88 21.74 1"/>
            </svg>
          </span>
        </button>
        <!-- Menu -->
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto" id="menu">
                <li class="nav-item">
                    <a class="nav-link" href="#">Explore</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Talks</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="speaker.php">Become a Speaker</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="host.php">Become a Host</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">News</a>
                </li>
              <li>
                <img class="desktop-menu-icon" src="./imgs/menu.svg" width="50" />
              </li>
            </ul>
        </div>
    </nav>
</header>

JQuery:

$(document).ready(function() {
        $(".desktop-menu-icon").click(function(){
          $(".nav-item").addClass("clicked");
        });
      });
2

There are a number of things that don’t add up in your code or seem pointless. :slight_smile:

  1. You are moving the menu items using translateX(85vh). That means the menu will be moved horizontally by 85% of the viewport height! That is amagic number that will never make sense especially if the browser is opened at a small height.

  2. You then add the clicked class to the nav-item and try to move it back by -85vh which will push it out the left side of the browser window. To negate the first rule you would simple translateX to zero.

However because you created the first rule using #menu .nav-item{} then just using a class called clicked is never going to over-ride it due to specificity rules where ids always win out. You would need to create rules of the same weight.

e.g.

#menu .nav-item {
  transform: translateX(100vw);
  display: none;
}

#menu .nav-item.clicked {
  display: block;
  transform: translateX(0);
}

or:

.nav-item {
  transform: translateX(100vw);
  display: none;
}

.nav-item.clicked {
  display: block;
  transform: translateX(0);
}

Also you never close the menu again so rather than just adding the class wouldn’t toggling the class be more appropriate?

  1. It seems silly to move each nav-item and shouldn’t you just be moving the menu container instead?

  2. It looks like you are using bootstrap and that already has a built in menu toggler so why are you adding a script of your own. You can just use the classes that bootstrap is adding to show and hide the menu. You can control the positioning as you wish with CSS etc.

  3. If you move the menu off the right side of the screen you will need to hide the overflow or else you will get a long horizontal scrollbar on the viewport.

If you can clarify why you are using two toggle menus for the same item and explain exactly what is expected to happen and at which media break points things are going to happen I may be able to give more specific help :slight_smile:

Also it would help if you put a working example on codepen or similar so we can see what you are seeing as the images are missing and could affect how the layout appears. You can add all the bootstrap files easily in codepen through the settings menu and takes minutes to set up.

I am out for the rest of the day now anyway but I’m sure if you can clarify a bit more and put up a demo that someone else will jump in and help :slight_smile:

3 Likes
3

Cool, I like your explanation, I’ve done something like your example but I ditched it because I want transition with the transform, I tried to add transition it didn’t work.

4

If you expect additional help, please honor Paul’s request for a working example of your code:

If you have not done so already, please read our posting guidelines where is mentioned several ways you can help us help you.

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.