CSSだけで三角矢印のパンくずメニューが作成できる。
ulとliタグによる単純なリスト構造。4段までしかCSSに記述してないので段数を増やすにはCSS側も変更が必要。
<ul class="navi_triangle">
<li><a href="#">トップ</a></li>
<li><a href="#">本郷地区</a></li>
<li><a href="#">医学部</a></li>
<li><a href="#">健康科学科</a></li>
</ul>
.navi_triangle{
overflow:hidden;
list-style:none;
padding-left:0px; /* 全体の表示位置調整 */
}
.navi_triangle li{
float:left; /* リストを横並び */
}
.navi_triangle li a{
float:left;
position:relative;
display:block;
background:#eee;
height:30px; /* 高さ(数値aと仮称) */
line-height:30px; /* 中央揃え(数値aと同じ) */
padding-left:30px; /* 文字左の余白調整(2段目以降) */
padding-right:15px; /* 文字右の余白調整 */
vertical-align:middle;
text-decoration:none;
}
.navi_triangle li a:after{
content:" ";
position:absolute;
display:block;
z-index:1;
top:50%;
left:100%;
width:0;
height:0;
margin-top:-15px; /* -(数値a÷2) */
border-top:15px solid transparent; /* 数値a÷2 または (topとbottomの合計=数値a) */
border-bottom:15px solid transparent; /* 数値a÷2 または (topとbottomの合計=数値a) */
border-left:20px solid #eee; /* 数字を大きくすると三角が長くなり鋭角に(余白調整必要) */
}
.navi_triangle li:first-child a{
padding-left:25px; /* 文字左の余白調整(1段目のみ) */
}
/* 各項目のカラーや装飾の設定 */
/* 通常時 */
.navi_triangle li:nth-child(1) a {background: #0f0;color:#000;}
.navi_triangle li:nth-child(1) a:after {border-left-color:#0f0;}
.navi_triangle li:nth-child(2) a {background: #0e0;color:#000;}
.navi_triangle li:nth-child(2) a:after {border-left-color:#0e0;}
.navi_triangle li:nth-child(3) a {background: #0d0;color:#000;}
.navi_triangle li:nth-child(3) a:after {border-left-color:#0d0;}
.navi_triangle li:nth-child(4) a {background: #0c0;color:#000;}
.navi_triangle li:nth-child(4) a:after {border-left-color:#0c0;}
/* マウスホバー時のカラーや装飾の設定 */
.navi_triangle li:nth-child(1) a:hover {background: #0b0;color:#fff;}
.navi_triangle li:nth-child(1) a:hover:after{border-left-color:#0b0;}
.navi_triangle li:nth-child(2) a:hover {background: #0a0;color:#fff;}
.navi_triangle li:nth-child(2) a:hover:after{border-left-color:#0a0;}
.navi_triangle li:nth-child(3) a:hover {background: #090;color:#fff;}
.navi_triangle li:nth-child(3) a:hover:after{border-left-color:#090;}
.navi_triangle li:nth-child(4) a:hover {background: #080;color:#fff;}
.navi_triangle li:nth-child(4) a:hover:after{border-left-color:#080;}
/* 高さを変更する */
/* 高さa に関係する部分を書き換える */
.navi_triangle li a{
height:60px; /* 数値aとする */
line-height:60px; /* =数値a */
}
.navi_triangle li a:after{
margin-top:-30px; /* =-数値a÷2 */
border-top:30px solid transparent; /* =数値a÷2 */
border-bottom:30px solid transparent; /* =数値a÷2 */
}
/* 三角の角度を変える(三角を長さを変える) */
/* 三角の先端と余白を書き換える */
.navi_triangle li a {
padding-left: 55px; /* 文字を中央に表示するため左右の余白を調整*/
padding-right: 0px;
}
.navi_triangle li a:after{
border-left:50px solid #eee; /* 大きくすると角度が鋭角に */
}
/* 三角の中心を変える */
/* 下記の2つの合計が 数値a と同じになるように配分する。 */
.navi_triangle li a:after{
border-top:10px solid transparent;
border-bottom:20px solid transparent;
}
/* 菱形に変形 */
/* 上記の変形版で片方を0に、もう片方を数値aにする */
.navi_triangle li a:after{
border-top:30px solid transparent;
border-bottom:0px solid transparent;
}
/* 文字色や背景色を変更 */
/* 下記の4つを各段個別に変更する */
.navi_triangle li:nth-child(1) a {background: #f00;color:#fff;}
.navi_triangle li:nth-child(1) a:after {border-left-color:#f00;}
.navi_triangle li:nth-child(1) a:hover {background: #b00;color:#fff;}
.navi_triangle li:nth-child(1) a:hover:after{border-left-color:#b00;}
<!-- HTML側に追加 -->
<li><a href="#">新規</a></li>
/* 新しい段を追加*/
/* CSS側に 下記の4つの( )に新しい番号を入れて追加する */
.navi_triangle li:nth-child(5) a {background: #0b0;color:#000;}
.navi_triangle li:nth-child(5) a:after {border-left-color:#0b0;}
.navi_triangle li:nth-child(5) a:hover {background: #070;color:#fff;}
.navi_triangle li:nth-child(5) a:hover:after{border-left-color:#070;}