Languages
[Edit]
DE

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

3 points
Created by:
Nikki
10460

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:

React - Beispiel für ein animiertes Seitenmenü
React - Beispiel für ein animiertes Seitenmenü

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

ReactJS - Blog berichten (DE)

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join