DEV Community

loading...
Cover image for React - how to make left-side animated menu

React - how to make left-side animated menu

Dirask-React
We share coding tips and tricks in React ❀️ πŸ’» πŸ™‚. We help to solve React problems at http://dirask.com
Originally published at dirask.com ・Updated on ・2 min read

Hey there! πŸ‘‹ 😊

In this post, I want to show you a left-side animated menu that I created recently.

Before we start, I would highly recommend you to check out runnable example for the solution on our website:
React - how to make left-side animated menu

Final effect:
image

Below I present you how to create this simple customized left-side menu that displays list of different kind of food πŸ’πŸ₯¦πŸŸ on click event.

In the solution, I've used a modern approach that involves the use of functional components and React hooks. In this case useState hook stores the state of my side menu if it's visible or not.

There is also some styling in the example, which I recommend you carefully analyze and change as you want. You can also modify the runnable example here and create your own left-side animated menu with no need to use any additional tools. 😊

Practical example:

import React from 'react';

const buttonStyle = {
  padding: '10px 20px',
  border: '2px solid #3085d6',
  borderRadius: '5px',
  background: '#3085d6',
  boxShadow: '5px 5px 5px grey',
  textShadow: '1px 1px 1px black',
  fontWeight: '900',
  color: 'white'
};

const commonStyle = {
  position: 'fixed',
  top: 0,
  bottom: 0,
  padding: '5px',
  border: '1px solid #0657FF',
  borderRadius: '0 30px 30px 0',
  background: '#C9E5FF',
  width: '280px',
  transition: '0.5s',
  overflow: 'hidden'
};

const visibleStyle = {
  ...commonStyle,
  left: '0'
};

const hiddenStyle = {
  ...commonStyle,
  left: '-300px'
};

const liStyle = {
  margin: '10px',
  padding: '5px',
  border: '2px solid #3085d6',
  borderRadius: '5px',
  background: '#5fa8ed',
  boxShadow: '5px 5px 5px grey',
  textShadow: '1px 1px 1px black',
  fontWeight: '900',
  color: 'white',
  listStyle: 'circle inside'
};

const App = () => {
  const [visible, setVisible] = React.useState(false);
  return (
    <div style={{ height: "200px" }}>
      <button style={buttonStyle} onClick={() => setVisible(true)}>
        Show
      </button>
      <div style={visible ? visibleStyle : hiddenStyle}>
        <button style={buttonStyle} onClick={() => setVisible(false)}>
          Hide
        </button>
        <div>
          <ul>
            <li style={liStyle}>Fruits πŸπŸŒπŸ’</li>
            <li style={liStyle}>Vegetables πŸ₯•πŸ₯¦πŸ…</li>
            <li style={liStyle}>Fast Food πŸ•πŸŸπŸ”</li>
          </ul>
        </div>
      </div>
    </div>
  );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

You can run this example here

Leave a comment to let me know what you think! πŸ˜ŠπŸ’¬


Write to us! βœ‰

If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you're looking for a mentoring write to us on dirask.com -> Questions

Discussion (7)

Collapse
livchits profile image
luks

Nice and simple 😁
But there's something I don't understand: why the transition is working if the element is beeing render again when the state change? Maybe I'm missing something about how transitions work πŸ™„

Collapse
diraskreact profile image
Dirask-React Author

From the App function, only the 'recipe' for rendering a new component is returned.
The react mechanism detects the differences and updates only the things in the DOM tree that are finally changed between the render cycles.
In our case, it is only left style property value (from -300 to 0). It means that nothing else changes on the page in the DOM.

Collapse
diraskreact profile image
Dirask-React Author

The transition style property is always assigned to the DOM element (menu).

Collapse
diraskreact profile image
Dirask-React Author

To understand it better, go to developer tools, find the menu inspector, click to show/hide the menu and see what changes.

Collapse
livchits profile image
luks

Thanks for the excellent explanation :)

Collapse
aalphaindia profile image
Pawan Pawar

Amazing!

Collapse
orime112 profile image
Orime

Amazing! Thank you!