KEPRATE(ケプレイト)|大阪府枚方市・交野市・寝屋川市を中心に活動しているフリーランスWeb制作事務所 WordPress・レスポンシブ対応ならおまかせ!

超便利! レスポンシブでスクロールバー対応のパンくずリスト

2018/02/09
Category :
  1. CSS
Tags :
  1. レスポンシブ

パンくずリストの修正は下層全ページに影響するので修正が入っても微動だにしない構成にする。
一度あとから仕様変更が入り構造上cssのみの修正では対応不可で変な汗が出てTシャツがぐっしょりした経験あり。
下記は今回のパンくずリストの仕様。

  • もちろんレスポンシブ対応
  • JavaScriptは一切使わない。
  • テキストが長い場合はスクロールバー表示
  • .no-scrollクラスを付加するだけでテキストが折り返す仕様(スクロールバー非表示)に変更可能
<nav class="breadcrumb">
    <ul>
        <li><a href="/">TOP</a></li>
        <li><a href="#">ページ名01</a></li>
        <li><a href="#">ページ名02</a></li>
        <li><a href="#">ページ名03</a></li>
        <li><span>現在のページ名</span></li>
    </ul>
</nav>

HTMLは超絶悶絶シンプル。
ポイントはnav > ul > li と3階層にするのみです。

  1. 3階層になっていたらdivの入れ子でもOK牧場。
/* breadcrumb */

.breadcrumb {
    padding: 15px 0 5px 0;
    margin: 0 10px 10px 10px;
    -webkit-overflow-scrolling: touch; /* スマホでスクロールを滑らかにする */
    overflow-x: auto; /* [必須] テキストが多い時はX軸にスクロールバーが出現するように */
}

/* 【スクロールバー】 うっとりするぐらいおしゃれにサイトの雰囲気合わせて変更 */

.breadcrumb::-webkit-scrollbar {
    height: 5px;
}

.breadcrumb::-webkit-scrollbar-track {
    border-radius: 5px;
    background: #eee;
}

.breadcrumb::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #999;
}

.breadcrumb ul {
    display: table; /* [必須]  */
}

.breadcrumb ul li {
    font-size: 12px;
    font-size: 1.2rem;
    display: table-cell; /* [必須]  */
    white-space: nowrap; /* [必須] テキストを改行させないように */
    vertical-align: middle;
    padding-right: 26px;
    position: relative;
}

.breadcrumb ul li:last-child {
    padding-right: 0;
}

.breadcrumb ul li:last-child:after {
    display: none;
}

/* 【矢印】 ため息がでるぐらいかっこよくサイトの雰囲気に合わせて変更 */

.breadcrumb ul li:after {
    position: absolute;
    display: block;
    content: '';
    content: ">";
    top: 3px;
    right: 8px;
}

/* 【リンクアンダーライン】 適当にサイトの雰囲気に合わせて変更 */

.breadcrumb ul li a:before {
    position: absolute;
    display: block;
    content: '';
    width: 100%;
    height: 1px;
    background-color: #111;
    bottom: -7px;
}

.breadcrumb ol li a,
.breadcrumb ol li span {
    position: relative;
    display: block;
    top: -4px;
}

.breadcrumb ul li span {
    background-color: #eee;
    border-radius: 4px;
    padding: 6px 8px;
}

/* スクロール設定解除 */

.breadcrumb.no-scroll ul {
    display: block;
}

.breadcrumb.no-scroll ul li {
    display: inline-block;
    margin-bottom: 12px;
    white-space: normal;
}

.breadcrumb.no-scroll ul li:after {
    top: -4px;
}

/* PC用リンクアニメーション サイトの雰囲気に合わせ劇シブに変更 */

@media print,screen and (min-width: 1024px) { /* 1024pxは適宜変更 */
    .breadcrumb ul li a:before {
        transform: scaleX(1);
        transition: transform 0.3s ease;
    }
    .breadcrumb ul li a:hover:before {
        transform: scaleX(0);
    }
}

CSSは色々やってます。

必須項目は4点

HTML構造上3階層にしたnav > ul > li にそれぞれ

nav(第一階層)は overflow-x: auto;の設定
幅がはみ出した分はnavのoverflow-x: auto;でスクロールさせる。

ul(第二階層)は display: table;の設定
一行◯列(リストの数により変動)のテーブルにする。

li(第三階層)は display: table-cell;white-space: nowrap;の設定
li内のテキストを折り返さないようにwhite-space: nowrap;とする。

.no-scrollクラスを付加することによりその設定を解除しております。

  1. ソースの流用、改変は自由ですが自己責任とさせていただきます。
トラックバック URL
https://keprate.com/web/css/breadcrumb/trackback/
奇跡的に興味を持たれた方は
是非お問い合わせください。
  • 電話番号の掛け間違いにお気をつけください。
  • 女性は業務に一切関係ございません。
PAGE TOP