React - wie erstellt man ein animiertes Menü auf der linken Seite

Hallo! 👋😊

In diesem Beitrag möchte ich ein animiertes Menü zeigen, das aus der linken Seite austritt und das ich vom kurzem erstellt habe. 

Das Endergebnis:

Hier wird beschrieben, wie ein einfaches Menü erstellt werden kann, das auf Tastendruck eine Liste verschiedener Lebensmittel 🍒🥦🍟 anzeigt.

In der Lösung habe ich den neuen Ansatz der Verwendung von Funktionskomponenten und Hooks benutzt. In diesem Fall speichert useState-Hook den Stand meines Seitenmenüs, ob es sichtbar ist oder nicht.

Es gibt auch ein wenig Stilanpassung in dem Beispiel, die ich empfehle, sorgfältig zu überprüfen und zu ändern, wie man will. Du kannst auch das unten stehende lauffähige Beispiel ändern und dein eigenes animiertes Menü erstellen. 😊

Lauffähiges Beispiel:

// ONLINE-RUNNER:browser;

// Hinweis: Bei der Arbeit mit dem JSX-Compiler soll man die Importzeilen entkommentieren.
// 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)}>
          Anzeigen
        </button>
      <div style={visible ? visibleStyle : hiddenStyle}>
        <button style={buttonStyle} onClick={() => setVisible(false)}>
          Ausblenden
        </button>
        <div>
          <ul>
            <li style={liStyle}>Früchte 🍏🍌🍒</li>
            <li style={liStyle}>Gemüse 🥕🥦🍅</li>
            <li style={liStyle}>Fast Food 🍕🍟🍔</li>
          </ul>
        </div>
      </div>
    </div>
  );
};

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

Hinweis:

Um eine Lösung mit reiner Logik, ohne unnötiges Stilisieren zu sehen, lesen Sie diesen Artikel . 

Siehe auch

• React - wie erstellt man ein animiertes Menü auf der linken Seite