【コピペ】「タブ型ナビゲーションメニュー」をはてなブログに実装してみる！

昨今よく見るようになった「タブ型ナビゲーションメニュー」を実装する方法を解説します。

タブ型ナビゲーションメニューとは？

このようなメニューのことでGoogleマップやAirbnbや食べログなどで使われていますね！ブログやニュースサイト、ニュースアプリでは当たり前のように使われています。

これほど目につくメニューですので多くのユーザーが使い方を知っていると思いますのでぜひ採用してみてはいかがでしょうか？

コピペOK！タブ型ナビゲーションメニュー

コピペの前にヘッダーのデザインを整えておいてくださいね！

haijpuro.hateblo.jp

コピペ場所は「デザイン→ヘッダー→タイトル下」です。

スマホでの閲覧時のみ表示されますのでお気を付けください！

 <ul class="horizonst-list">
    <li class="itemst">
      <a href="URL">コンテンツ</a>
    </li>
    <li class="itemst">
      <a href="URL">コンテンツ</a>
    </li>
    <li class="itemst">
      <a href="URL">コンテンツ</a>
    </li>
    <li class="itemst">
      <a href="URL">コンテンツ</a>
    </li>
    <li class="itemst">
      <a href="URL">コンテンツ</a>
    </li>
    <li class="itemst">
      <a href="URL">コンテンツ</a>
    </li>
    <li class="itemst">
      <a href="URL">コンテンツ</a>
    </li>
    <li class="itemst">
      <a href="URL">コンテンツ</a>
    </li>
  </ul>


<style>

@media screen and (min-width: 992px){
    .horizonst-list {
        display: none;
    }
}

@media screen and (max-width: 991px){
    .horizonst-list {
        display: block;
    }
    
    h2#blog-description {
        display: none;
    }
}

.itemst a {
    color: #fff;
    text-decoration: none;
}

.horizonst-list {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    margin: 0;
    background: #668bff;
}

.itemst {
    display: inline-block;
    font-size: 70%;
    font-weight: bold;
    color: #FFF;
    padding-left: 5px;
    padding-right: 10px;
    line-height: 35px;
}
    
</style>

横スクロールを実装している部分

.horizonst-list {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

overflow-x: auto;

はみ出た要素の左右の表示方法を指定するメソッド

auto

自動でスクロールバーを表示する。

white-space: nowrap;

ソース中のテキストの改行の表示方法を指定するメソッド

nowrap

自動改行させない。

-webkit-overflow-scrolling: touch;

慣性スクロールの実装

横並びにしている部分

.itemst {
    display: inline-block;
}

display: inline-block;

横並び

さいごに

説明は以上で結構簡単に作ることができましたね！
わざとはみ出させたりすることで「横スクロールできますよ」と教えております。

横スクロールを実装している部分で説明した内容を使用することでAirbnbのようなカード型横スライドメニューを実装することもできます。カード型レイアウトもいずれまとめますのでお楽しみに！

Airbnb（エアビーアンドビー）を最近まで「エアバブ」て読んでました。俺だけちゃうよな？

ハンバーガーメニューはもう古いといわれる時代です。次はどんなメニューが流行るのか？面白いところですね！「タブ型ナビゲーションメニュー」の次に来るメニューを作ってみるのもいいかもしれません。