TOPICS
トピックス
長文タイトルの場合にパンくずリストを右寄せさせる為のjs
webサイトにパンくずリストを設置した際、タイトルが長い場合に右側が切れてしまう場合があります。
特に横幅が狭いスマホ表示の際にありがちですね。
そんなとき、パンくずリストのタイトル部分をしっかり表示してくれていると見え方も美しく見えます。
これを実現する為に、javascriptを使って、タイトルの文字数が長いときは強制的に右寄せにして、
左側にスクロールさせる表示にする為のコードを紹介します。
HTML
まずは、基本的なパンくずリストを表示する為のHTMLから。
ulを包括するdivには、breadcrumbというIDを付与しています。
<div id="breadcrumb">
<ul>
<li><a href="/">TOP</a></li>
<li><a href="/TOPICS/">TOPICS一覧</a></li>
<li>長文タイトルの場合にパンくずを右寄せさせる為のjs/li>
</ul>
</div>CSS
見た目を整える為のCSSです。必要に応じて適宜変更してください。
#breadcrumb ulの
overflow-x: auto;
white-space: nowrap;
word-break: break-all;
の箇所が肝心です。
html{
font-size: 62.5%;
margin: 0;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#breadcrumb {
padding: 5px 15px;
}
#breadcrumb ul{
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
overflow-x: auto;
white-space: nowrap;
word-break: break-all;
padding-bottom: 5px;
}
#breadcrumb ul li {
font-size: 1.2rem;
position: relative;
padding-right: 2.4rem;
}
#breadcrumb ul li:last-child {
padding-right: 0;
}
#breadcrumb ul li::after{
content: "＞";
position: absolute;
font-size: 1.2rem;
right: 0.6rem;
top: 50%;
transform: translateY(-50%);
}
#breadcrumb ul li:last-child::after{
content: none;
}
#breadcrumb {
padding: 5px 15px;
}
#breadcrumb ul{
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
overflow-x: auto;
white-space: nowrap;
word-break: break-all;
padding-bottom: 5px;
}
#breadcrumb ul li {
font-size: 1.2rem;
position: relative;
padding-right: 2.4rem;
}
#breadcrumb ul li:last-child {
padding-right: 0;
}
#breadcrumb ul li::after{
content: "＞";
position: absolute;
font-size: 1.2rem;
right: 0.6rem;
top: 50%;
transform: translateY(-50%);
}
#breadcrumb ul li:last-child::after{
content: none;
}
/******************************************** min-width:960px **************************************************/
@media screen and (min-width:960px){
#breadcrumb {
padding: 10px 30px;
}
#breadcrumb ul li {
font-size: 1.4rem;
padding-right: 2.8rem;
}
#breadcrumb ul li::after{
font-size: 1.4rem;
right: 0.7rem;
}
}javascript
肝心なjavascriptになります。
下記jqueryをheadに記述。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>下記javascriptをfooterの</body>の直前や共通jsファイルに記述。
<script>
$(document).ready(function() {
var list = $('#breadcrumb ul').innerWidth();
var breadcrumb = $('#breadcrumb').innerWidth();
var scrollLeft = list - breadcrumb;
$('#breadcrumb ul').scrollLeft(list - scrollLeft);
});
</script>