gh640/horizontal-menu-style.html

## horizontal-menu-style.html
<html>
<head>
<title>水平方向に並ぶメニュー（メインメニューなど）のためのスタイルまとめ</title>
<style>
  /**
   * レイアウト用のスタイル（メニューとは無関係）
   */
  body {
    position: relative;
    font-family: sans-serif;
  }
  .page {
    position: absolute;
    box-sizing: border-box;
    margin: auto;
    padding: 30px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 50%;

    background-color: #eee;
  }
  /**
   * メニューのための共通スタイル
   */
  /* ul メニューラッパ */
  .menu {
    background-color: #ddd;
    list-style: none;
    padding: 0;
  }
  /* li メニューアイテム */
  .menu-item {
    background-color: #999;
  }
  /* a メニューリンク */
  .menu-link {
    background-color: #333;
    color: #fff;
    text-decoration: none;
  }
  /* メニューがアクティブなときのスタイル */
  .menu-item-active .menu-link {
    position: relative;
    background-color: #068;
  }
  .menu-item-active .menu-link:after {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;

    content: " ";
    background-color: #39a;
  }
  /**
   * 1. float を使ったメニュー
   */
  .menu-float {
    overflow: hidden;
  }
  .menu-float .menu-item {
    display: block;
    float: left;
    width: 25%;
    min-width: 100px;

    text-align: center;
  }
  .menu-float .menu-link {
    line-height: 24px;
    display: block;
    padding: 8px 10px;
    word-wrap: break-word;
  }
  /**
   * 2. inline-block を使ったメニュー
   */
  .menu-inline {
    text-align: center;
  }
  .menu-inline .menu-item {
    display: inline-block;
    vertical-align: middle;
  }
  .menu-inline .menu-link {
    display: block;
    margin: 0 10px;
    max-width: 200px;
    padding: 8px 10px;
    word-wrap: break-word;
  }
  /**
   * 3. table を使ったメニュー
   */
  .menu-table {
    display: table;
    table-layout: fixed;
    width: 100%;
  }
  .menu-table .menu-item {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  .menu-table .menu-link {
    display: block;
    padding: 8px 10px;
    word-wrap: break-word;
  }
</style>
</head>
<body>
<div class="page">
  <h1>メニューの実装方法</h1>
  <h2>float</h2>
  <ul class="menu menu-float">
    <li class="menu-item"><a href="" class="menu-link">ホーム</a></li>
    <li class="menu-item menu-item-active"><a href="" class="menu-link">アバウト</a></li>
    <li class="menu-item"><a href="" class="menu-link">serviceserviceserviceserviceservice</a></li>
    <li class="menu-item"><a href="" class="menu-link">コンタクト</a></li>
  </ul>
  <ul>
    <li>◯ 要素と要素の間に隙間が空かないので指定した幅（ 100% など）にぴったり合わせられる。</li>
    <li>◯ min-width を決めて幅がしきい値よりも狭い場合に末尾の要素を 2 行目に送ることができる。</li>
    <li>× 改行が発生するとその要素だけ高さが大きくなり、また縦方向の中央寄せもできないので、セル内での改行が発生しないよう調整が必要。</li>
  </ul>
  <h2>inline-block</h2>
  <ul class="menu menu-inline">
    <li class="menu-item"><a href="" class="menu-link">ホーム</a></li>
    <li class="menu-item menu-item-active"><a href="" class="menu-link">アバウト</a></li>
    <li class="menu-item"><a href="" class="menu-link">serviceserviceserviceserviceservice</a></li>
    <li class="menu-item"><a href="" class="menu-link">コンタクト</a></li>
  </ul>
  <ul>
    <li>◯ レスポンシブでの中央寄せがやりやすい。</li>
    <li>◯ 幅が足りない場合は、行内での縦方向の中央揃えを維持しながらスムーズに改行してくれる。</li>
    <li>× 要素間にスペースが空くので厳密に幅を指定できない（対策はあるが、どのモダンブラウザでも問題なく解決できる方法がなさそう）。</li>
  </ul>
  <h2>table</h2>
  <ul class="menu menu-table">
    <li class="menu-item"><a href="" class="menu-link">ホーム</a></li>
    <li class="menu-item menu-item-active"><a href="" class="menu-link">アバウト</a></li>
    <li class="menu-item"><a href="" class="menu-link">serviceserviceserviceserviceservice</a></li>
    <li class="menu-item"><a href="" class="menu-link">コンタクト</a></li>
  </ul>
  <ul>
    <li>◯ 幅 100% ぴったりにしながら（ inline アプローチの課題を解決しながら）、かつ、セル内での改行が発生しても縦中央揃えを崩さない（ float アプローチの課題を解決する）メニューが作れる。</li>
    <li>× float や inline のように改行が発生しないので、幅が狭くてセル内改行が想定以上に発生しないよう調整が必要。</li>
    <li>× table 特有の問題が起こる。例えば CSS の仕様だとテーブルのセルに `position: relative` が使えない（効くブラウザが多いけれど）。</li>
  </ul>
  <h2>flexbox</h2>
  <p>割愛。あと数年すれば主流になるかも。</p>
</div>
</body>
</html>