Slider menu

水平方向にスライドするメニュー

by Kissy

HTML

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="utf-8">
    <title></title>
  </head>

  <body>
    <header>
      <nav class="global-nav">
        <div class="horizon-flow">
          <ul class="nav-list">
            <li class="nav-item"><a href="#">メニュー1</a></li>
            <li class="nav-item"><a href="#">メニュー2</a></li>
            <li class="nav-item"><a href="#">メニュー3</a></li>
            <li class="nav-item"><a href="#">メニュー4</a></li>
            <li class="nav-item"><a href="#">メニュー5</a></li>
            <li class="nav-item"><a href="#">メニュー6</a></li>
            <li class="nav-item"><a href="#">メニュー7</a></li>
          </ul>
        </div>
      </nav>
    </header>
    
    <main>
    </main>

    <footer>
    </footer>
  </body>

</html>

CSS

.global-nav {
  display: block;
  height: 24px;
  overflow-y: hidden;
  background: #CDDC39;
}
.global-nav .horizon-flow {
  -webkit-overflow-scrolling: touch;
  overflow-x: scroll;
}
.nav-list {
  display: table;
  list-style: none;
  margin: 0 auto;
  padding: 0 0 24px 0;
}
.nav-list .nav-item {
  display: table-cell;
}
.nav-list .nav-item a {
  display: block;
  padding: 0 16px;
  color: #fff;
  white-space: nowrap;
  transition: .3s;
  text-decoration: none;
}
.nav-list .nav-item a:hover {
  color: #85cd7d;
  background: #fff;
}