Fixed footer menu

固定フッターメニュー

by Kissy

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css">
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Fixed footer menu</title>
  </head>
  
  <body>
    <header></header>
  
    <body>
      <p>
        固定フッターメニュー
      </p>
      <blockquote>
        あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
　またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。
      </blockquote>
      <span>引用：ポラーノの広場　宮沢賢治</span>
    </body>
  
    <footer class="footer">
      <nav class="global-nav">
        <ul class="nav-list">
          <li class="nav-item">
            <a href="#">
              <i class="fas fa-home"></i>
              <span>Home</span>
            </a>
          </li>
          <li class="nav-item">
            <a href="#">
              <i class="fas fa-star"></i>
              <span>Star</span>
            </a>
          </li>
          <li class="nav-item">
            <a href="#">
              <i class="fas fa-history"></i>
              <span>History</span>
            </a>
          </li>
          <li class="nav-item">
            <a href="#">
              <i class="fas fa-cart-arrow-down"></i>
              <span>Buy</span>
            </a>
          </li>

        </ul>
      </nav>
    </footer>
  </body>
</html>

CSS

.footer {
  margin-bottom: 48px;
}
.global-nav {
  position: fixed;
  left: 0;
  bottom: 0;
  background: white;
}
.nav-list {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  padding: 0;
  list-style: none;
  text-align: center;
}
.nav-item {
  display: table-cell;
  border: solid 1px gray;
  padding: 4px 0px;
}
.nav-item a {
  text-decoration: none;
}
.nav-item i {
  display: block;
  font-size: 24px;
}
.nav-item a span {
  display: block;
  font-size: 10px;
}