バーガーメニューでNAVメニューを構築する方法

6785 ワード
webdev tutorial react css テキストリンク

ようこそ！


我々が去ったところ－GitHub
今日やっていること
ナビゲーションメニューを作成する

  • どこですか。


    私は私たちが最後に左から少し仕事をした、私は体の中でコンポーネントのスタイリングを統合した.CSSファイル.サイトの内容を完成しました.すべての状態管理、連絡先フォーム、およびメニューが完了します.
    だからメニューを開始しましょう.デザインから、メニューのワイヤーフレームデザインを見ることができます

    コンポーネントツリーからは、本体コンポーネントの内部に属していないことを確認できますので、外部で実装し、アプリケーションコンポーネントに直接インポートします.
    function App() {
  return (
    <>
      <Menu />
      <Body />
    </>
  );
}
    今、メニューの実際のデザインを見て、キーの側面をメモします.

    私たちが見ることができるように、暗い背景、丸い角、および1 pxの境界線があります.このCSSでそれを実装します.
    .menu {
  position: absolute;
  background: rgba(0, 6, 37, .2);
  min-width: 64px;
  width: 20%;
  max-width: 16rem;
  height: 30rem;
  border-radius: 0 0 25px 0;
  border-right: 1px solid #004762;
  border-bottom: 1px solid #004762;
}
    ここでは、ナビゲーションとSocialsという2つのコンポーネントを作成し、メニューコンポーネントに直接インポートできます.
    ナビゲーションの実装では、<nav>の要素の周りに、<h3>要素を作成しました.CSSではメニューの左上に閉じるボタンがあるので、:first-childセレクターを実装します.
    nav {
  margin-left: 1rem;
}

nav>h3:first-child {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

nav > h3 {
  margin-top: 0.25em;
  margin-bottom: 1rem;
}
    ここでは、

    パズルの次の部分は、バーガーメニューコンポーネントの一部である閉じるボタンを作成しています.私たちはhamburger-reactと呼ばれる簡単に外部ライブラリを使用します.
    最初にインポートし、メニューコンポーネントに追加します.
    import { Divide as Hamburger } from 'hamburger-react'

import Navigation from './Navigation'
import Socials from './Socials'

function Menu() {
  return (
    <div className="menu">
      <Hamburger
        size={20}
        color='#004762'
        rounded
      />
      <Navigation />
      <Socials />
    </div>
  )
}
    これはすべてが残っているすべての社会社会を追加し、我々は一緒にすべての現在静的なコンポーネントを一緒にアプリケーション内の状態を使用して起動することができますすべてを行うことです.

    ギタブ


    我々がどこにいるかについて見るために、各々のポストの終わりに最終的なコミットにこのlinkに続くことができます!
    • UIとコーダのカプセル化-Fragment(4)
    androidソース解析(二十四)-->onSaveInstanceState実行タイミング