LoginSignup
3

More than 1 year has passed since last update.

ヘッダーメニューに下線を足して表示しているページをわかりやすくする

Posted at

背景と実施したこと

Webページを作る際にヘッダーメニュー(グローバルナビ)を作成する機会は多いと思います。
どれかのメニューをクリックした際には、ページ遷移が起きると思いますが、このときユーザがメニュー上のどこに遷移したのかをわかりやすくしたいと思いました。

言葉でいうと少し分かりづらいですが、動きで示すと以下の雰囲気です。
Afterの方ではメニューに下線を引いていて自分がどのページにアクセスしているかをぱっと見でわかるようにしてみました。

【Before】
(「単語登録」「単語一括登録」はURLが変わっていること以外は画面に変化がなく、わかりにくい)
before.gif

【After】
(メニューに下線を追加したことで動きが出て、自分がどこにアクセスしたのかがわかる)
after.gif

■前提
使用している技術のver情報は以下の通りです。
next: 12.1.0
react: 17.0.2
TailwindCSS: 3.0.23

概要

  • グローバルナビをクリックしたときに、自分がサイト上にどこのページを開いているのかわかりやすくしたよ。
  • 現在のパスを
  • 三項演算子を使ってCSSを条件分岐させているよ

実装方法

そんなに難しいことはしていません。
考え方は、「現在のパスとメニューに埋め込んでている遷移先のURLを比較して、一致した場合に下線を表示させる」です
関係ある部分のみを抜粋すると以下です。

pageHeader.tsx
import Link from 'next/link';
import Router, { useRouter } from 'next/router';
import React, { useState } from 'react';
import { MenuList, ExtraMenuList } from './type';

const PageHeader: React.FC = () => {

  const router = useRouter();
  const currentPath = router.asPath;

  const menuList: MenuList[] = [
    {
      text: '単語一覧',
      link: '/',
    },
    {
      text: '単語登録',
      link: '/regist',
    },
    {
      text: '単語一括登録',
      link: '/bulkRegist',
    },
  ];



  return (
    <div className='flex w-full items-center justify-between bg-primary-500'>
      <div>
        <h1 className='px-2 text-lg font-bold text-black md:text-2xl'>英語覚える君</h1>
      </div>
      <div>
        <ul className='hidden items-center gap-8 px-4 sm:flex'>
          {menuList.map((item) => (
            <React.Fragment key={item.text}>
              <li
                className={` py-4 ${item.link === currentPath ? 'border-b-2 border-gray-800' : ''}`}
              >
{/** 遷移先のURLとcurrentPathを比較する。classNameの中で条件分岐させるためテンプレートリテラルを活用する(バッククォート)で括る*/}

                <Link href={item.link}>
                  <a className=' py-4 px-4 font-bold text-black  hover:opacity-50'> {item.text}</a>
                </Link>
              </li>
            </React.Fragment>
          ))}         
        </ul>
      </div>
    </div>
  );
};

export default PageHeader;

補足

ちょっとの工夫でユーザビリティがよくなるのでこの方法は覚えておきたいですね。
一方でちょっとこの実装方法が一番いいのか、というのはありそうです。
「こうしたほうがいいよ!」という意見があればぜひコメントください。

ちなみに、サイトの中でどの位置にいるかを示すためには「パンくずリスト」も効果的のようですね。
この実装方法も今度調べてみようと思います。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3