[css]幅をぶち抜いたら横スクロールするヘッダーメニュー

今までの応用というか集大成というか。

組む
解説的なもの
1. リスクとデメリット
2. 利用シーン
おまけ

組む

こうしたとして

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <section>
            <div class="ttl"><h1><a href="">タイトル</a></h1></div>
            <div class="hnav">
                <nav class="scrollbar">
                    <ul>
                        <li><a href="#">aaaaaaaaaaaaaa</a></li>
                        <li><a href="#">aaaaaaaaaaaaaa</a></li>
                        <li><a href="#">aaaaaaaaaaaaaa</a></li>
                        <li><a href="#">aaaaaaaaaaaaaa</a></li>
                        <li><a href="#">aaaaaaaaaaaaaa</a></li>
                        <li><a href="#">aaaaaaaaaaaaaa</a></li>
                    </ul>
                </nav>
            </div>
        </section>
    </header>
</body>
</html>

こんなかんじ。

header section{
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
header section .ttl h1 a{
    width: 200px;
    height: 40px;
    display: block;
    background: #eee;
}
header section .hnav{
    flex: 1;
}
header section .hnav nav{
    width: 100%;
    position: relative;
    white-space: nowrap;
    overflow-x: auto;
    height: 44px;
}
header section .hnav nav ul{
    width: 100%;
    list-style: none;
    position: absolute;
    left: 0;
    top: 0;
    height: 40px;
}
header section .hnav nav ul li{
    display: inline-block;
}
header section .hnav nav ul li a{
    height: 40px;
    display: block;
}
.scrollbar::-webkit-scrollbar{
    width: 4px;
    height: 4px;
}
.scrollbar::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,0.05);
    border-radius: 2px;
}
.scrollbar:hover::-webkit-scrollbar-thumb{
    background: rgba(0,0,0,0.2);
}

デモ。

Document

解説的なもの

ヘッダーの中身がブラウザ幅をぶち抜いた時、言い換えるとメニューを格納できるスペースが無くなった時、ブラウザに収まる領域で横スクロール化する。

完璧にレスポンシブにしたい場合、これでいい感じになれたりする。

リスクとデメリット

スクロール領域はスクロールバーがセットになるんで、その分高さが増える。それを加味したデザインをしなきゃいけない。スマホだと無視できるんだけど。

で、はみ出してるだけならスクロールすれば済むんだけど、綺麗にはみ出してるとはみ出してることが分からなくなる。そうなったらナビゲーションとして失敗なので、使い所は考えないといけない。

利用シーン

GoogleとかYoutubeとかAmazonがたまに使ってる。で、便利っちゃ便利だけどなくても困らない程度の要素で使われてる。一般的なサイトだとそんなシチュエーションはなかなかないんで、手札としてもっておけば活用できるかもしれないけど、それっていつだよ？って感じの話でもある。難しい。

おまけ

リンク群をまるっとスクロール化してるんで、しかもスクロールバーがデフォだと太くてかっこ悪いんで細くしがちで、マウス操作だとめちゃくちゃ使い勝手が悪い。

jsとかでマウスクリックでドラッグするようにできるから、こういうときは仕込んだほうがいいと思う。