Menu Reveal By Page Rotate Animation

The website menu design methods are diverse. Some menus are always visible and all options are displayed directly; others are hidden and need to be clicked to expand. The way the hidden menus are expanded is different: some slide out and cover content, some push the content away, and some use full screen display.

Each method has its advantages and disadvantages, and the best choice depends on the specific application scenario. I personally prefer the slide-out menu, and certainly not all situations apply. But if a space-saving and easy-to-access menu is needed, the slide-out menu is hard to surpass.

However, slide-out menus often conflict with page content. It will at least block the content, and at worst it will remove the content completely from the UI.

I tried a different approach that combines the durability and usability of a fixed location menu, as well as the space-saving hidden slide-out menu without removing the user from the current content.

Here is my implementation method.

Switch switch

We are building a menu with two states (on and close) and switching between the two. This is where the checkbox trick comes into play. It's perfect because the checkbox has two common interactive states—checked and unchecked (and uncertain states)—that can be used to trigger those states.

The check box is hidden under the menu icon and is positioned using CSS so it cannot be seen even if the user interacts with it. Selecting the check box (or, ahem , menu icon) will display the menu. Uncheck hides it. It's that simple. We don't even need JavaScript to do the job!

Of course, checkbox tricks aren't the only way, and if you want to switch classes using JavaScript to open and close menus, that's totally OK.

Importantly, the checkbox should be ahead of the main content in the source code, because we will eventually write the :checked selector that requires the sibling selector. If this causes layout issues, use Grid or Flexbox for layouts, as they have nothing to do with source code order, like how I can take advantage of its advantages for CSS counting.

Use appearance CSS property to remove the default style of the checkbox (added by the browser), and then add a pseudo-element with a menu icon so that the user cannot see the checkbox blocks.

First, the basic tags:

<input type="checkbox" id="menu-toggle">
<div id="page">
  <!-- Page content-->
</div>
<div id="menu">
  <!-- Menu content-->
</div>

And basic CSS for checkbox tricks and menu icons:

 /* Hide the checkbox and reset the style*/
input[type="checkbox"] {
  appearance: initial; /* Delete box*/
  border: 0; margin: 0; outline: none; /* Remove default margins, borders and outlines*/
  width: 30px; height: 30px; /* Set menu icon size*/
  z-index: 1; /* Make sure it is on top*/
}

/* Menu icon*/
input::after {
  content: "\2255";
  display: block;
  font: 25pt/30px "georgia";
  text-indent: 10px;
  width: 100%; height: 100%;
}

/* Page content container*/
#page {
  background: url("earbuds.jpg") #ebebeb center/cover;
  width: 100%; height: 100%;
}

I also added the style of #page content, which will be a full-size background image.

Transition effect

Two things happen when you click on a menu control. First, the menu icon is changed to the "×" mark, indicating that you can click it to close the menu. Therefore, when the input is in the :checked state, we select the ::after pseudo-element entered in the checkbox:

 input:checked::after {
  content: "\00d7"; /* Change to "×" tag*/
  color: #ebebeb;
}

Second, the main content (our "headphones" image) is converted to display the menu below. It moves right, rotates and shrinks, and its left corner becomes an angle. This is to make the content look like it is being pushed back, like an open door.

 input:checked ~ #page {
  clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 92%);
  transform: translateX(40%) rotateY(10deg) scale(0.8);
  transform-origin: right center;
  transition: all .3s linear;
}

I use clip-path to change the angle of the image.

Since we are applying transitions to the transformation, #page requires an initial clip-path value so that there is something to make the transition. We will also add a transition on #page as it will allow it to close smoothly as it opens.

 #page {
  background: url("earbuds.jpeg") #ebebeb center/cover;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: all .3s linear;
  width: 100%; height: 100%;
}

We basically completed the core design and code. When the check box is unchecked (by clicking the "×" mark), the conversion on the headset image will be automatically undoed and it will be taken back to the center position.

A little JavaScript

Even if we already have what we want, there is one more thing to improve the user experience: close the menu when clicking (or clicking) #page element. This way, the user can return the content without looking up or even using the "×" tag.

Since this is just another way to hide the menu, we can use JavaScript. What if JavaScript is disabled for some reason? It doesn't matter. It's just an enhancement that won't prevent the menu from working without it.

 document.querySelector("#page").addEventListener('click', (e, checkbox = document.querySelector('input')) => {
  if (checkbox.checked) { checkbox.checked = false; e.stopPropagation(); }
});

The purpose of these three lines of code is to add a click event handler to #page element. If the checkbox is in the :checked state, uncheck the checkbox to close the menu.

We've been looking at the demos made for vertical/vertical designs, but it works just as well at large screen sizes depending on what we're using.

This is just one way or try to a typical slide-out menu. Animation opens up a lot of possibilities, and you may also have dozens of other ideas. In fact, I would love to hear (or better yet, see) them, so please share!

The above is the detailed content of Menu Reveal By Page Rotate Animation. For more information, please follow other related articles on the PHP Chinese website!