okuden-labo
7/7/2017 - 9:56 AM

flexboxを使ったブロック型ナビゲーションメニュー

flexboxを使ったブロック型ナビゲーションメニュー

readme.md
content_copyfile_download
  • Rendered
  • Source

flexboxを使ったブロック型ナビゲーションメニュー

  • メニューのフォントに游明朝を使うとieで縦がずれる
  • 画像を使ってもOK
nav-menu.html
content_copyfile_download
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .wrapper {
    border-top: 3px solid #093A75;
    border-bottom: solid #ccc 1px;
    margin-top: 50px;
    background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
    background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
  }
  
  .globalMenu {
    width: 90%;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: -ms-space-around;
    justify-content: -webkit-space-around;
    justify-content: space-around;
    margin: 0 auto;
    padding: 0;
    align-items: center;
  }
  
  li {
    list-style: none;
    flex: 1 0 auto;
    -ms-flex-grow: 1;
    -webkit-flex-grow: 1;
    text-align: center;
    border-left: solid #ccc 1px;
    display: block;
  }
  
  li:last-child {
    border-right: solid #ccc 1px;
  }
  
  li a {
    display: block;
    width: 100%;
    text-decoration: none;
    padding: 0.85rem 0;
    font-weight: 500;
  }
  
  li a:hover {
    color: #fff;
    background-image: linear-gradient(to bottom, #BBCCE1, #4A77AD);
  }
  </style>
</head>

<body>
  <div class="wrapper">
    <ul class="globalMenu">
      <li><a href="">ホーム</a></li>
      <li><a href="">会社概要</a></li>
      <li><a href="">採用情報</a></li>
      <li><a href="">事業内容</a></li>
      <li><a href="">お問い合わせ</a></li>
    </ul>
  </div>
</body>

</html>