パンくずリストの修正は下層全ページに影響するので修正が入っても微動だにしない構成にする。
一度あとから仕様変更が入り構造上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階層にするのみです。
- ※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クラスを付加することによりその設定を解除しております。
- ※ソースの流用、改変は自由ですが自己責任とさせていただきます。