第1部:反応、反応ルータとCSSでこのクールなドロップダウンメニューを構築

どのようにあなたのサイトのタイトな領域にスローするドロップダウンメニューについては?または多分あなたのミニマルなレイアウトでシンプルなナビゲーションツールとして使用する?画面が小さくなったら小さくなります.

the code on GitHub

チュートリアル

目次
予備ジャンク
メニューコンポーネント
メニューの
レスポンスルータ
※結論

予備ジャンク
それを得るために、私はcreate-react-app , インストールReact Router , 不要なデフォルトコードを削除し、以下のようなファイル構造を設定します.


メニューコンポーネントMenu.js ドロップダウンのすべてのJavaScriptとJSXが含まれます.
基本的に4つの部分があります.

エーuseState フックがメニューを開くならば指示するブールを持つフック.これを呼ぶopenMenu .

関数という関数setClassNames() どのクラスをメニュー項目にクラスを追加します.クラスのCSSはメニューをアニメーション化します.

関数という関数pushToRoute() 対応するメニュー項目に関連するコンポーネントをレンダリングするために、Responseを使用します.

The Menu コンポーネントの構造をレンダリングし、すべての機能を一緒にするためのJSXを返します.

import React, {useState} from 'react';

// router
import { withRouter } from 'react-router-dom';

// styling
import './Menu.css';

const Menu = props => {
    // conditionally render dropdown affect based on this boolean
    const [openMenu, setOpenMenu] = useState(false)

    // parameter num corresponds to .open-# classes
    // is assigned when Menu clicked triggering animated dropdown
    const setClassNames = num => {
        const classArr = ["m-item"];
        if (openMenu) classArr.push(`open-${num}`)
        return classArr.join(' ')
    }

    // takes route string as parameter
    const pushToRoute = route => {
        props.history.push(route)
        setOpenMenu(false)
    }

    return (
        <div className="Menu">
            <div className={"m-item m-logo"}
                onClick={() => setOpenMenu(!openMenu)}>
                Menu
            </div>
            <div className={setClassNames(1)}
                onClick={() => pushToRoute("/dashboard")}>
                Dashboard
            </div>
            <div className={setClassNames(2)}
                onClick={() => pushToRoute("/settings")}>
                Settings
            </div>
            <div className={setClassNames(3)}
                onClick={() => pushToRoute("/")}>
                Sign out
            </div>
        </div>
  );
}

export default withRouter(Menu);

メニューのCSS

CSSは、メニューを開くすべての作業です.つの重要な部分があります.
1.Menu クラスは最も外側のコンテナです.この層のニーズposition: relative; .
個々のメニュー項目はposition: absolute; , したがって、それらは最も近いコンポーネントに基づいてレンダリングされますposition . 位置の基準は、Menu コンポーネント.
2 ..m-item クラスは各メニュー項目に適用されます.彼らは絶対的に最初の位置にあるtop: 0; . これは、上のすべての項目を上に表示されます.Menu div.
私の使用em ユニットwidth そして他のすべてのプロパティは、私はアイテムが完全にお互いの上にフィットし、まだ応答することを保証することができますem 単位は、要素のフォントサイズに比例します.
美学のためにbackground-color , box-shadow , padding , border-radius , font-size , and color .
The flexbox プロパティのテキストを垂直方向と水平方向に.cursor 画面上のマウスポインターのスタイルを変更し、ユーザーメニュー項目がクリック可能に表示されます.
最後にtransition は、setClassNames() 機能とCSS:hover .

.Menu{
    position: relative;
    margin: 2em 3em;
}

.m-item{
    position: absolute;
    top: 0;

    width: 5.5em;
    background-color: #301A4B;
    box-shadow: 1px 2px 2px #301A4B;

    padding: 0.2em;

    border-radius: 1em;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 1.5em;
    color: #EDFFEC;
    cursor: pointer;

    transition: 1s;
}

3.m-item:hover ホバーのメニュー項目に小さなボーダーを追加します.境界の追加された1 pxは、わずかに生命を少し与えてアイテムをアニメーション化する.

.m-item:hover{
    border: 1px solid black;
}

4.m-logo 最初のメニュー項目の特別なクラスです.The z-index: 1; 他のすべてのdivがそれの下に隠れることができるように、このdivをトップに持ってきてください.z-index デフォルト値が0の場合、1つの項目だけが宣言されている場合、1はそれを他のすべての先頭に持ってくるのに十分です.

.m-logo{
    z-index: 1;
}

5クラスというクラス.open-1 , .open-2 , and .open-3 ドロップダウンのアニメーションを引き起こします.これらのクラスはsetClassNames() 一番上のメニュー項目がクリックされるとき.
クリックすると、それぞれのアイテムが新しいプロパティに移行しますopen-# クラス.つまり、新しく指定されたtop と新しいbackground-color .

.open-1{
    top: 1.8em;
    background-color: #9b5de5;
}
.open-2{
    top: 3.6em;
    background-color: #f15bb5;
}
.open-3{
    top: 5.4em;
    background-color: #00BBF9;
}

反応ルータ
メニューコンポーネントのすべての審美的な側面は、この時点で設定されます.何が残っているので、アイテムをクリックすると、正しいコンポーネントにあなたをナビゲート反応ルータを設定することです.
私はこれを3ステップで配線した.
1App.js ファイルはプロジェクト全体の主な実行ファイルです.
アプリのリターンをラップするBrowserRouter それで、すぐに、ルートが含まれるすべてのコンポーネントに利用できます.
私はセットアップSwitch つのルートが描かれるとき、他のものは無効にされるように.内部では、プロジェクトに必要な特定のルートを定義しますnull デモのために)
The Menu コンポーネントはSwitch だからいつでも表示されますApp レンダリングです.これは、アプリケーションの任意の画面で利用可能な効率的なナビゲーションツールになります.

import React from 'react';

// router
import { BrowserRouter, Route, Switch } from 'react-router-dom';

// styling
import './App.css';

// components
import Menu from './Menu/Menu';

const App = () => {
  return (
    <BrowserRouter>
      <div className="App">
        {/* dropdown menu */}
        <Menu/>
        {/* routes */}
        <Switch>
          <Route exact path="/settings" component={null} />
          <Route exact path="/dashboard" component={null} />
          <Route exact path="/" component={null} />
        </Switch>
      </div>
    </BrowserRouter>
  );
}

export default App;

メニューコンポーネントの2withRouter また、エクスポート文でメニューをラップします.

// router
import { withRouter } from 'react-router-dom';

export default withRouter(Menu);

withRouter 与えるMenu 我々を操作できるようにする小道具react-router-dom . これらにアクセスするにはMenu パラメータprops .

const Menu = props => {

3最後に、私は関数を書いたpushToRoute() これはルートのパラメータ文字列を受け取り、そのルートに我々のアプリをプッシュします.そして、呼び出しによってメニューを閉じるsetOpenMen(false) .

    // takes route string as parameter
    const pushToRoute = route => {
        props.history.push(route)
        setOpenMenu(false)
    }

メニュー項目コールpushToRoute() Onclick.
例えば、

   <div className={setClassNames(1)}
        onClick={() => pushToRoute("/dashboard")}>
        Dashboard
   </div>

結論
私はこのメニューの作成を楽しんだ.これは、効率的かつ簡単にシナリオの数を助けることができるツールのコードです.私はあなたが有用な概念を見つける願っています.
私はフィードバックが大好きです.何か提案?私は、あなた自身にあなたの知識を加えて満足です.下に私を殴ったり、メールしてください.[email protected] あなたが理由を得たならば.
ベスト!ジェイソンメルトン.