反応とCSSでレスポンスナビを作成する

執筆Chinwike Maduabuchi ✏️
エンドユーザーのためのスタイリング応答ナビゲーションメニューは、これまで簡単なプロセスではありません.フロントエンドの開発者は、デバイスのブレークポイントやアクセシビリティのような特定のパラメータを考慮しなければならない.それは、JSのCSSがトリッキーになる傾向がある反応のようなフロントエンドフレームワークでより挑戦的になることができます.
このポストでは、CSSと反応フックの応答Navbarを作成する方法を学びます.あなたはソースコードとview the live project here .

Creating the project

Understanding the navigation layout

Styling the navbar component

Responsiveness with media queries

Toggling the navbar view with useState

必要条件

このチュートリアルでは次のようにします.

反応および反応フックの基本的理解

いくつかのCSSの知識

さて、新しい反応アプリケーションを設定しましょう!

プロジェクトの作成

CodeSandboxの新しい反応プロジェクトをブートするには、新しいブラウザタブを開き、react.new . これは、スターターに反応するアプリケーションを作成します.

// App.js
import "./styles.css";
export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

現在、あなたのアプリケーションのためのデフォルトのスタイルシートはstyles.css . このファイルを編集してページレイアウトに独自の感触を与えましょう.

// styles.css
@import url("https://fonts.googleapis.com/css2?family=Karla:wght@200;400&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  max-width: 90%;
  margin-right: auto;
  margin-left: auto;
  padding: 1rem;
}

article h1 {
  margin: 1rem 0;
}

上記の規則はKarlaをドキュメントの主なフォントとして設定し、container ページのパディングとコンテンツの整列のためのクラス.
これで、いくつかのマークアップを書きましょうApp.js コンテンツを表示する

// App.js
import Navbar from "./components/Navbar";
import "./styles.css";

function App() {
  return (
    <div>
      <Navbar />
      <div className="container">
        <article>
          <h1>What is Lorem Ipsum? </h1>
          Lorem Ipsum is simply dummy text of the printing and typesetting industry...
        </article>
      </div>
    </div>
  );
}

export default App;

注意Navbar 2行目のコンポーネントインポート.私はNavbar.js 次のファイルパスのCodesDandboxのサイドバーをファイルしますsrc/components/Navbar.js .
このファイルの内容は、これまでのところ、コンポーネントのデフォルトのエクスポート文ですApp.js :

// Navbar.js 
export default function Navbar() {
  return (
    <nav>Navigation</nav>
    )
}

ナビゲーションレイアウトの理解

私たちの目標は、最初にNAVメニューを表示する応答Navbarを作成することですul 要素-水平レイアウトで.モバイルビューポートに到達すると、メニューバーの下に再配置し、画面の残りの高さと幅にまたがる.
このレイアウトは、FlexboxとCSSの位置決め規則の両方を通して達成されます.
次のコードブロックからマークアップをNavbar.js :

// Navbar.js
export default function Navbar() {
  return (
    <nav className="navigation">
      <a href="/" className="brand-name">
        MacroSoft
      </a>
      <button className="hamburger">
        {/* icon from heroicons.com */}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          className="h-5 w-5"
          viewBox="0 0 20 20"
          fill="white"
        >
          <path
            fillRule="evenodd"
            d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z"
            clipRule="evenodd"
          />
        </svg>
      </button>
      <div
        className="navigation-menu">
        <ul>
          <li>
            <a href="/home">Home</a>
          </li>
          <li>
            <a href="/about">About</a>
          </li>
          <li>
            <a href="/contact">Contact</a>
          </li>
        </ul>
      </div>
    </nav>
  );
}

上のマークアップはbrand-name , hamburger アイコンとnavigation-menu , Navbarの3つの要素です.
では、このコンポーネントのスタイルに進みましょう.

Navbarコンポーネントのスタイリング

次のファイルパスのNavbarコンポーネントのスタイルシートを作成しますsrc/styles/navbar.cssにインポートNavbar.js :

// Navbar.js
import "../styles/navbar.css"
export default function Navbar() {
  return(
    {/* navbar markup */}
  )
}

私たちはnavigation クラス

// navbar.css
.navigation {
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  padding: 0.5rem 0rem;
  background-color: #fff;
  color: black;
  box-shadow: 0 2px 2px 2px rgba(9, 9, 9, 0.23);
}

ここでは、我々はNavbarのものをセットしましたwidth to 100% それがデバイスの完全な幅にまたがるように.この要素をflexコンテナーにし、特定のheight それに対するプロパティ、Flexboxalign-items プロパティを垂直にフレックス項目を中心に.
また、設定position to relative この要素ではposition 子要素の値は、それに対して決定されます.あなたが効果的に瞬間的に表示されます.
スタイルを作りましょうbrand-name and navigation-menu :

// navbar.css
.brand-name {
  text-decoration: none;
  color: black;
  font-size: 1.3rem;
  margin-left: 1rem;
}
.navigation-menu {
  margin-left: auto;
}

上のコードブロックの主なルールはmargin-left: auto 適用される規則navigation-menu . これは、利用可能なスペースを左側に持ち上げることで、メニューを右に押します.
今私たちのスタイルの子要素をすることができますnavigation-menu :

// navbar.css
.navigation-menu ul {
  display: flex;
  padding: 0;
}
.navigation-menu li {
  // removes default disc bullet for li tags and applies margin to left & right side
  list-style-type: none;
  margin: 0 1rem;
}
.navigation-menu li a {
  // increases the surface area of the anchor tag to span more than just the anchor text
  text-decoration: none;
  display: block;
  width: 100%;
}

display: flex でul 要素は、それを屈曲容器に変えます.子li 要素は、それから配置されるrow , これはflex-direction プロパティ.他のルールは、ナビゲーションのリンクを良くするために役立つ.

スタイルでメニューアイコンを続けましょうhamburger クラス

// navbar.css
.hamburger {
  // removes default border on button element
  border: 0;
  height: 40px;
  width: 40px;
  padding: 0.5rem;
  border-radius: 50%;
  background-color: #283b8b;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
// positions the icon to the right and center aligns it vertically
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
  display: none;
}
.hamburger:hover {
  background-color: #2642af;
}

ここでは、私たちは、Navbarの右側にメニューアイコンを配置するためにCSSポジショニングを使用しました.
親を思い出すnav 要素の位置relative . したがって、position へのアイコンのプロパティabsolute , 親要素の枠線に沿って垂直にアイコンを中心に配置できますtop and transform プロパティ.続きを読むCSS positioning あなたが好奇心旺盛なら、これはどのように動作します.
私たちは、メニューのアイコンは、モバイルビューポートに達するまで隠されたままにしたいのでdisplay プロパティnone そして、スタイルをCSSのメディアクエリでモバイルレイアウトに進みます.

メディア質問に対する応答性

メディアクエリは、あなたのコンテンツのレイアウトが異なる条件に応答する方法を指定できるCSS機能です.
クエリは@media 規則に従って、ターゲットメディア型とスタイルを適用するブレークポイントが続きます.

@media screen and (max-width: 768px) {
  // rules go here
}

こちらです.max-width: 768px デバイスの幅が768px またはより低い.
ハンバーガーアイコンを表示しましょう

// navbar.css
@media screen and (max-width: 768px) {
  .hamburger {
    display: block;
  }
}

そして隠すul エレメントインnavigation-menu :

// navbar.css
@media screen and (max-width: 768px) {
  .navigation-menu ul {
    display: none;
  }
}

あなたのモバイルレイアウトはこれまでのところです.

一般的に、Navbarには2つの可能なビューがあります.これらの2つのNavbarビューを別々のクラスで制御することで、アプリケーションに実装できます.
メニューの拡張版のスタイルを開始します.次に、これらの2つのビューをフックで切り替える方法を示します.

// navbar.css
@media screen and (max-width: 768px) {
  .navigation-menu ul {
    // navigation menu is positioned to start 60px from the top of the document (which is directly below the navbar)
    position: absolute;
    top: 60px;
    left: 0;
    // stacks the li tags vertically 
    flex-direction: column;
   // makes menu span full height and width
    width: 100%;
    height: calc(100vh - 77px);
    background-color: white;
    border-top: 1px solid black;
  }
  .navigation-menu li {
    // centers link text and strips off margin
    text-align: center;
    margin: 0;
  }
  .navigation-menu li a {
    color: black;
    // increases the surface area of the anchor tag to span the full width of the menu
    width: 100%;
    padding: 1.5rem 0;
  }
  .navigation-menu li:hover {
    background-color: #eee;
  }
}

上で、我々はNavbar60px ドキュメントの上部から- Navbarのすぐ下に.この要素の高さを決定するために、私はCSScalc 機能と理由を説明します.
理想的には、メニューはビューポート高さ単位を使用して、ドキュメントの完全な高さにまたがるようにしますvh . しかし、Viewportユニットがページのすべての要素を考慮に入れるので60px Navbarはページの全体の高さに貢献します.そして、ナビゲーションメニューにスクリーンの底からその余分のviewport単位をとって、それによって垂直スクロールバーを生産します.
The calc 関数は、CSSプロパティ値を指定するときに計算を実行できるようにします.したがって、減算60px から100vh ナビゲーションメニューの正確な高さを生成します.
前のスタイルは以下のレイアウトになるはずです(黄色の領域はドキュメントの終わりです).

しかし、ナビゲーションメニューの表示を制御する別のクラスが欲しいのでdisplay to none :

// navbar.css
@media screen and (max-width: 768px) {
  .navigation-menu ul {
    /* previous styles */
    dipslay: none;
  }
}

で、expanded 添付クラスnavigation-menu , それでdisplay プロパティblock :

// navbar.css
@media screen and (max-width: 768px) {
  .navigation-menu.expanded ul {
    display: block;
  }
}

この段階では、手動でマークアップを編集することでNavbarの2つの状態を観察することができますNavbar.js 含めるexpanded クラス.
ユーザーがdevtoolsのエキスパートでない限り、この時点で開発を停止したくないでしょう.メニューのアイコンを使用して、異なるNavbarビューの間を切り替えるにはuseState フック.

USENTでナババービューを切り替える

ナビゲーションメニューの現在の状態を監視するには、Navbar コンポーネント.
クリエイトアisNavExpanded 状態と初期値を与えるfalse このように:

// Navbar.js
import { useState } from "react;
import "../styles/navbar.css";
export default function Navbar(){
  const [isNavExpanded, setIsNavExpanded] = useState(false)

  return (
    <nav className="navigation">
      <a href="/" className="brand-name">
        MacroSoft
      </a>
      <button className="hamburger" >
        {/* hamburger svg code... */}
      </button>
      {/* nav menu code... */}
    </nav>
  )
}

さあ、使いましょうonClick イベントハンドラbutton 要素をトグルするisNavExpanded 状態

// Navbar.js
import { useState } from "react;
import "../styles/navbar.css";
export default function Navbar(){
  const [isNavExpanded, setIsNavExpanded] = useState(false)

  return (
    <nav className="navigation">
      <a href="/" className="brand-name">
        MacroSoft
      </a>
      <button
        className="hamburger"
        onClick={() => {
          setIsNavExpanded(!isNavExpanded);
        }}
      >
        {/* hamburger svg code... */}
      </button>
      {/* nav menu code... */}
    </nav>
  )
}

ここでは、私たちはonClick イベントハンドラ.この関数は、updater関数setIsNavExpanded を返しますisNavExpanded 状態.
これはisNavExpanded を切り替えるtrue and false アイコンがクリックされるたびに.
これで、JavaScriptの三項演算子を使用して、オフに基づいてナビゲーションメニューの適切なクラス名を条件つきで選択できますisNavExpanded 's値

// Navbar.js
import { useState } from "react"
import "../styles/navbar.css"

export default function Navbar() {
  const [isNavExpanded, setIsNavExpanded] = useState(false)

  return (
    <nav className="navigation">
      <a href="/" className="brand-name">
        MacroSoft
      </a>
      <button
        className="hamburger"
        onClick={() => {
          setIsNavExpanded(!isNavExpanded)
        }}
      >
        {/* hamburger svg code... */}
      </button>
      <div
        className={
          isNavExpanded ? "navigation-menu expanded" : "navigation-menu"
        }
      >
        <ul>
          <li>
            <a href="/home">Home</a>
          </li>
          <li>
            <a href="/about">About</a>
          </li>
          <li>
            <a href="/contact">Contact</a>
          </li>
        </ul>
      </div>
    </nav>
  );
}

そして、それはラップです!今、あなたは完全に機能的、敏感なNavbarを持つ必要があります.

結論

ナビゲーションメニューは、Webアプリケーションの全体的な経験に重要な役割を果たす.それは通常あなたのユーザーがあなたのアプリを把握しようとすると接触している最初のコンポーネントです.したがって、ユーザーエクスペリエンス、さらにSEOのパフォーマンスを向上させるので、それは組織として、できるだけアクセスできるようにするためによく役立つでしょう.

フル可視性の生産反応アプリ

ユーザーが再生するのが難しい問題を経験するとき、特に反応する反応アプリケーションは難しくありえます.あなたがRedux状態をモニターして、追跡することに興味があるならば、自動的にJavaScript誤りを浮上させて、遅いネットワーク要求と成分負荷時間を追跡してください.try LogRocket .

LogRocket ウェブやモバイルアプリケーションのDVRのように、文字通りあなたの反応アプリで起こるすべてを記録します.問題が発生した理由を推測する代わりに、問題が発生したときにアプリケーションがどのような状態になったかを集計およびレポートできます.また、クライアントのCPU負荷、クライアントのメモリ使用量などのメトリクスを報告し、あなたのアプリケーションのパフォーマンスを監視します.
LogRoot Reduxのミドルウェアのパッケージは、ユーザーセッションに可視性の余分な層を追加します.LogLogelはあなたのredux店からすべてのアクションと状態を記録します.
近代化する方法あなたの反応アプリをデバッグするstart monitoring for free .