React - jak zrobić lewostronne animowane menu

Cześć! 👋😊

W tym poście chciałbym pokazać wam animowane menu wysuwające się z lewej strony, które niedawno stworzyłem.

Efekt końcowy:

Poniżej przedstawiam, jak stworzyć to proste menu, które wyświetla listę różnych rodzajów żywności 🍒🥦🍟 po naciśnięciu przycisku.

W rozwiązaniu zastosowałem nowoczesne podejście polegające na wykorzystaniu komponentów funkcyjnych oraz hooków. W tym przypadku hook  useState przechowuje stan mojego menu bocznego, czy jest widoczne, czy nie.

W przykładzie jest też trochę stylowania, które polecam dokładnie przeanalizować i zmienić według własnego uznania. Możesz zmodyfikować uruchamialny przykład poniżej i utworzyć własne animowane menu. 😊

Uruchamialny przykład:

// ONLINE-RUNNER:browser;

// Uwaga: Odkomentuj wiersze importu podczas pracy z kompilatorem JSX.
// import React from 'react';
// import ReactDOM from 'react-dom';

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)}>
          Pokaż
        </button>
      <div style={visible ? visibleStyle : hiddenStyle}>
        <button style={buttonStyle} onClick={() => setVisible(false)}>
          Ukryj
        </button>
        <div>
          <ul>
            <li style={liStyle}>Owoce 🍏🍌🍒</li>
            <li style={liStyle}>Warzywa 🥕🥦🍅</li>
            <li style={liStyle}>Fast Food 🍕🍟🍔</li>
          </ul>
        </div>
      </div>
    </div>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

Uwaga:

Aby zobaczyć rozwiązanie z czystą logiką, bez zbędnej stylizacji przeczytaj ten artykuł . 

Zobacz również

• React - jak zrobić lewostronne animowane menu