React-burger-menuとReactでサイドバーコンポーネントを構築する方法
序章
サイドバーメニューは、Webページの側面に表示されるナビゲーションの形式です。 これらのメニューは、ページのコンテンツに干渉することなく、Webサイトのさまざまな部分へのアクセスを提供します。
ボタンは、サイドバーメニューの開閉を切り替えるためによく使用されます。 これらのボタンには、メニューを表す3本の横線のアイコンが付いている傾向があります。 このアイコンの形から、一般に「ハンバーガー」メニューアイコンと呼ばれます。 外側の2本の線が「パン」を形成し、中央の線が「パティ」を形成します。
react-burger-menu は、Reactアプリケーションのサイドバーを作成できるライブラリです。 また、メニューのルックアンドフィールをカスタマイズするための多数のエフェクトとスタイルが付属しています。
このチュートリアルでは、react-burger-menu
を使用して、サラダ、ピザ、デザートを提供する概念的なレストランWebサイトのサイドバーを作成します。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- Node.jsのローカル開発環境。 Node.jsをインストールしてローカル開発環境を作成する方法に従ってください。
このチュートリアルは、ノードv14.7.0、npm
v6.14.7、react
v16.13.1、およびreact-burger-menu
v2.7.1で検証されました。
ステップ1—プロジェクトの設定
create-react-appを使用してReactAppを生成し、依存関係をインストールすることから始めます。
npx create-react-app react-burger-menu-example
新しいプロジェクトディレクトリに移動します。
cd react-burger-menu-example
次に、index.css
を開きます。
nano src/index.css
次のスタイルを追加します。
src / index.css
* { box-sizing: border-box; } #page-wrap { padding-bottom: 10px; padding-top: 10px; }
このコードは、 box-sizingプロパティをborder-box
に設定して、CSSボックスモデルの計算に関する問題に対処します。 このコードは、折りたたまれたマージンを防ぐためにいくつかの垂直パディングも確立します。
変更をindex.css
に保存してから、App.js
を開きます。
nano src/App.js
logo.svg
を削除し、App
コンポーネントのコンテンツをサンプルレストランからのメッセージに置き換えます。
src / App.js
import React from 'react'; import './App.css'; function App() { return ( <div className="App" id="outer-container"> <div id="page-wrap"> <h1>Cool Restaurant</h1> <h2>Check out our offerings in the sidebar!</h2> </div> </div> ); } export default App;
outer-container
とpage-wrap
は重要なid
であり、後でreact-burger-menu
によって参照されます。
変更を保存した後、Reactアプリケーションを実行できます。
npm start
プロジェクトのエラーや問題を修正してから、Webブラウザでlocalhost:3000
を開きます。
Cool Restaurant メッセージが正しく表示されたら、サイドバーの作成を開始できます。
ステップ2—サイドバーコンポーネントを追加する
サイドバーにはreact-burger-menu
とReactコンポーネントが必要です。
まず、react-burger-menu
をインストールします。
npm install [email protected]
次に、新しいSidebar
コンポーネント用の新しいSidebar.js
ファイルを作成します。
nano src/Sidebar.js
次のコードを追加します。
src / Sidebar.js
import React from 'react'; import { slide as Menu } from 'react-burger-menu'; export default props => { return ( <Menu> <a className="menu-item" href="/"> Home </a> <a className="menu-item" href="/salads"> Salads </a> <a className="menu-item" href="/pizzas"> Pizzas </a> <a className="menu-item" href="/desserts"> Desserts </a> </Menu> ); };
このコードは、Home
、Salads
、Pizzas
、およびDesserts
へのメニューリンクを持つSidebar
を生成します。
このチュートリアルでは、これらのアイテムに個別のルートを作成する方法については説明しません。 代わりに、Sidebar
自体の機能に焦点を当てます。
react-burger-menu
ではいくつかのスタイルを指定する必要があるため、Sidebar.css
ファイルを作成します。
nano src/Sidebar.css
react-burger-menu
ドキュメントで提供されているデフォルトのスタイルを追加します。
src / Sidebar.css
/* Position and sizing of burger button */ .bm-burger-button { position: fixed; width: 36px; height: 30px; left: 36px; top: 36px; } /* Color/shape of burger icon bars */ .bm-burger-bars { background: #373a47; } /* Color/shape of burger icon bars on hover*/ .bm-burger-bars-hover { background: #a90000; } /* Position and sizing of clickable cross button */ .bm-cross-button { height: 24px; width: 24px; } /* Color/shape of close button cross */ .bm-cross { background: #bdc3c7; } /* Sidebar wrapper styles Note: Beware of modifying this element as it can break the animations - you should not need to touch it in most cases */ .bm-menu-wrap { position: fixed; height: 100%; } /* General sidebar styles */ .bm-menu { background: #373a47; padding: 2.5em 1.5em 0; font-size: 1.15em; } /* Morph shape necessary with bubble or elastic */ .bm-morph-shape { fill: #373a47; } /* Wrapper for item list */ .bm-item-list { color: #b8b7ad; padding: 0.8em; } /* Individual item */ .bm-item { display: inline-block; } /* Styling of overlay */ .bm-overlay { background: rgba(0, 0, 0, 0.3); }
チュートリアルでは、リンクの色とホバーの色を適用する必要があります。 Sidebar.css
を変更して、次のカスタムスタイルを追加します。
src / Sidebar.css
/* Individual item */ .bm-item { display: inline-block; color: #d1d1d1; margin-bottom: 10px; text-align: left; text-decoration: none; transition: color 0.2s; } .bm-item:hover { color: #ffffff; }
次に、./Sidebar.css
をSidebar.js
ファイルに追加します。
src / Sidebar.js
import React from 'react'; import { slide as Menu } from 'react-burger-menu'; import './Sidebar.css'; // ...
最後に、アプリケーションでSidebar
を使用するには、App.js
に再度アクセスする必要があります。
nano src/App.js
Sidebar
コンポーネントをインポートし、App
コンポーネントに追加します。
src / App.js
import React from 'react'; import Sidebar from './Sidebar'; import './App.css'; function App() { return ( <div className="App" id="outer-container"> <Sidebar pageWrapId={'page-wrap'} outerContainerId={'outer-container'} /> <div id="page-wrap"> <h1>Cool Restaurant</h1> <h2>Check out our offerings in the sidebar!</h2> </div> </div> ); } export default App;
この時点で、アプリケーションを再度実行できます。
npm start
プロジェクトのエラーや問題を修正します。 そして、Webブラウザでlocalhost:3000
にアクセスします。
ここで、「ハンバーガー」メニューアイコンをクリックすると、サイドバーメニューが表示され、Home
、Salads
、Pizzas
、およびDesserts
へのリンクが示されます。
次に、react-burger-menu
で利用できる高度なカスタマイズのいくつかを調べることができます。
ステップ3—高度なアニメーションを追加する
現在、サイドバーはslide
アニメーションを使用しています。 react-burger-menu
には10のアニメーションの可能性があります。
別のアニメーションを試すには、Sidebar.js
を開きます。
nano src/Sidebar.js
そして、slide
を別のアニメーションに置き換えます。
src / Sidebar.js
// ... import { bubble as Menu } from 'react-burger-menu'; // ...
このコードにより、メニューがバブル効果で表示されます。
src / Sidebar.js
// ... import { elastic as Menu } from 'react-burger-menu'; // ...
このコードにより、メニューが弾力性のある効果で表示されます。
アニメーションの完全なリストは、react-burger-menudocsにあります。
ドキュメントには、アプリケーションに合わせてサイドバーメニューを取得するための高度なカスタマイズも含まれています。
結論
このチュートリアルでは、react-burger-menu
を使用してサイドバーメニューを作成しました。 サイドバーメニューは、Webサイトをナビゲートするための一般的なソリューションの1つです。
サイドバーメニューの代替ライブラリが存在し、アプリケーションにより適したライブラリが見つかる場合があります。
Reactの詳細については、 React.js シリーズのコーディング方法をご覧になるか、Reactトピックページで演習やプログラミングプロジェクトを確認してください。