So erstellen Sie ein Gleitmenü mit ReactJS und LESS CSS

Ich möchte darüber sprechen, wie man ein Schiebemenü-Steuerelement mit erstellt ReagierenJS und WENIGER CSS. Die Grundidee ist, dass ein Menü basierend auf einer externen Seitenaktion entweder von der linken oder der rechten Seite des Bildschirms eingeblendet werden soll. Wenn Sie die Art von Person sind, die das Gesamtbild sehen möchte, anstatt sich ein Schritt-für-Schritt-Tutorial für Sie auszulegen, habe ich eine Demoseite zusammengestellt, die Sie sehen können hier. Das Menü selbst wird eine React JS-Klasse sein, die nur ein Argument akzeptiert: Ausrichtung, die bestimmt, ob das Menü von der linken oder rechten Seite des Bildschirms eingeblendet wird.

Ich werde den Artikel in zwei Abschnitte aufteilen. Zuerst werde ich die React-Klassen durchgehen, die wir verwenden werden, um das Menü und die Menüelemente zu rendern, und dann werden wir das LESS-CSS besprechen, das ich verwende, um die ausgefallenen Ein- und Ausgleitanimationen bereitzustellen .

Reagieren

Es gibt drei Klassen, die zum Rendern der Menüs verwendet werden: App, Menu und MenuItem.

App

var App = React.createClass({
  showLeft: function() {
    this.refs.left.show();
  },

  showRight: function() {
    this.refs.right.show();
  },

  render: function() {
    return <div>
      <button onClick={this.showLeft}>Show Left Menu!</button>
      <button onClick={this.showRight}>Show Right Menu!</button>

      <Menu ref="left" alignment="left">
        <MenuItem hash="first-page">First Page</MenuItem>
        <MenuItem hash="second-page">Second Page</MenuItem>
        <MenuItem hash="third-page">Third Page</MenuItem>
      </Menu>

      <Menu ref="right" alignment="right">
        <MenuItem hash="first-page">First Page</MenuItem>
        <MenuItem hash="second-page">Second Page</MenuItem>
        <MenuItem hash="third-page">Third Page</MenuItem>
      </Menu>
    </div>;
  }
});

Hier fügen wir zwei hinzu Menus zur App: eine zum Einschieben von links und eine zum Einschieben von rechts. Dieses Verhalten wird mit angegeben Ausrichtung Stütze auf die Menu Klassenerklärung. Wir setzen auch die Refs von jedem Menu damit die Button-Event-Handler die jeweiligen aufrufen können Show Methoden, um sie hineingleiten zu lassen.

Im Inneren des Menuswir haben Instanzen der MenuItem Klasse, die nur Menüeinträge sind, auf die der Benutzer klicken kann, um eine Aktion auszuführen. In diesem Fall navigiert die Aktion zu einem bestimmten Hash, der (wenig überraschend) mithilfe von angegeben wird Hasch prop auf der Klassendeklaration.

var Menu = React.createClass({
  getInitialState: function() {
    return {
      visible: false	
    };
  },

  show: function() {
    this.setState({ visible: true });
    document.addEventListener("click", this.hide.bind(this));
  },

  hide: function() {
    document.removeEventListener("click", this.hide.bind(this));
    this.setState({ visible: false });
  },

  render: function() {
    return <div className="menu">
      <div className={(this.state.visible ? "visible " : "") + this.props.alignment}>{this.props.children}</div>
    </div>;
  }
});

Das Menu Die Klasse ist für zwei Dinge verantwortlich: das Rendern des eigentlichen Menüs und das Umschalten der Sichtbarkeit des Menüs basierend auf Aufrufen der Show und ausblenden Methoden. Das getInitialState -Methode gibt an, dass das Menü standardmäßig ausgeblendet ist. Das Show -Methode setzt die Sichtbarkeit auf true, während sie gleichzeitig einen Event-Handler einbindet, um das Menü auszublenden, wenn der Benutzer irgendwo auf das Dokument klickt. Das ausblenden -Methode blendet das Menü aus und entfernt den oben erwähnten Document-Click-Handler.

Das machen -Methode spuckt zwei divs aus, von denen das innere eine Inline-Bedingung zum Setzen von enthält sichtbar CSS-Klasse basierend auf der zugehörigen Zustandsvariablen. Es legt auch eine Klasse basierend auf der fest Ausrichtung prop, die entweder “links” oder “rechts” sein wird.

Der innere Inhalt der Menu werden aus der gerendert Kinder prop, ein spezielles Prop, das den inneren Inhalt des gerenderten HTML-Tags im übergeordneten Tag darstellt. In unserem Fall wird dies ein Haufen sein MenuItem Instanzen.

var MenuItem = React.createClass({
  navigate: function(hash) {
    window.location.hash = hash;
  },

  render: function() {
    return <div className="menu-item" onClick={this.navigate.bind(this, this.props.hash)}>{this.props.children}</div>;
  }
});

Das MenuItem Die Klasse ist für zwei Dinge verantwortlich: das Rendern des Elements selbst und das Verarbeiten einer Klickaktion. Die erste wird in der durchgeführt machen -Methode, die nur ein einfaches div erstellt, das die enthält Menüpunkt CSS-Klasse und einen On-Click-Handler, der die navigieren -Methode mit dem beim Bau angegebenen Hash.

Der Text des Menüpunktes wird über die angegeben Kinder prop und wird als solche beim Hinzufügen gesetzt MenuItem zur Seite. In diesem Fall verwende ich die völlig uninspirierte “Erste Seite” usw. Nomenklatur.

CSS

.menu {
  display:block;

  @menu-width:250px;

  >div {
    position:absolute;
    z-index:2;
    top:0;
    width:@menu-width; 
    height:100%; 
    .border-box; 
    .transition(-webkit-transform ease 250ms); 
    .transition(transform ease 250ms);

    &.left {
      background:#273D7A;
      left:@menu-width*-1;
    }

    &.visible.left {
      .transform(translate3d(@menu-width, 0, 0));
    }

    &.right {
      background:#6B1919;
      right:@menu-width*-1;
    }

    &.visible.right {
      .transform(translate3d(@menu-width*-1, 0, 0));
    }

    >.menu-item {
      float:left;
      width:100%;
      margin:0;
      padding:10px 15px;
      border-bottom:solid 1px #555;
      cursor:pointer;
      .border-box;
      color:#B0B0B0;

      &:hover {
        color:#F0F0F0;
      }
    }
  }
}

Notiz: Es gibt verschiedene LESS-CSS-Mixins, die ich im obigen Code verwende, um lästige Anbieterpräfixe zu abstrahieren. Ich habe sie weggelassen, da sie ziemlich ausführlich sind, aber wenn Sie daran interessiert sind, wie diese Mixins aussehen, werfen Sie einen Blick auf die Quelle der Demoseite.

Der Großteil des CSS wird verwendet, um die linken und rechten Menüs außerhalb des Bildschirms zu positionieren und sie dann so zu animieren, wie sie angezeigt werden. Ich benutze menu-width um die maximale Größe des Menüs festzulegen, was bei der Positionierung hilft, sodass die Menüs gerade nicht sichtbar sind, wenn sie ausgeblendet sind.

Auf der menu Klassendefinition, die ich gesetzt habe transition property (oder mixin, hier) zweimal, um Herstellerpräfixe zuzulassen. Leider konnte ich das nicht komplett in ein Mixin abstrahieren.

Wenn das Menü die hat visible Klasse daran angeschlossen, a transform wird dem div hinzugefügt, wodurch es je nach Ausrichtung nach links oder rechts verschoben wird.

Fazit

Das ist es! Ich hoffe, das hat Sie beim Lesen etwas gelehrt. Wenn Sie diese Menüs in Aktion sehen möchten, können Sie sich das ansehen Demoseite, wodurch der Seite sowohl ein linkes als auch ein rechtes Menü hinzugefügt wird. Danke fürs Lesen!

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *