Languages
[Edit]
DE

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

3 points
Created by:
Nikki
9920

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