CSSのみでのパンくずリストデザイン_技術三昧ブログ

ホーム » ブログ » CSSのみでのパンくずリストデザイン

@2017/04/10

好きなCSSのみでのパンくずリストデザインです。
お気に入りへ。
DEMO
ＤＥＭＯ


<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>パンくずリスト</title>
<style>
.CrumbList { 
	list-style: none; 
	overflow: hidden; 
	border: 1px solid silver;
	box-sizing: border-box;
	padding-left: 0;
	font-size: 0.9rem;
}
.CrumbList li { 
	float: left; 
}
.CrumbList li a {
	color: #333;
	text-decoration: none; 
	padding: 0.4rem 0 0.4rem 3.5rem;
	background: transparent;
	position: relative; 
	display: block;
	float: left;
}
.CrumbList li a:after { 
	content: " "; 
	display: block; 
	width: 0; 
	height: 0;
	border-top: 3.2rem solid transparent;
	border-bottom: 3.2rem solid transparent;
	border-left: 2rem solid white;
	position: absolute;
	top: 50%;
	margin-top: -3.2rem; 
	left: 100%;
	z-index: 2; 
}	
.CrumbList li a:before { 
	content: " "; 
	display: block; 
	width: 0; 
	height: 0;
	border-top: 3.2rem solid transparent; 
	border-bottom: 3.2rem solid transparent;
	border-left: 2rem solid lightgray;
	position: absolute;
	top: 50%;
	margin-top: -3.2rem; 
	margin-left: 2px;
	left: 100%;
	z-index: 1; 
}	
.CrumbList li:first-child a {
	padding-left: 0.5rem;
}
.CrumbList li:last-child a {
	background: transparent !important;
	color: black;
	pointer-events: none;
	cursor: default;
}

.CrumbList li:last-child a:before {
	background: transparent ;
	border-left: 2rem solid transparent;
}

.CrumbList li:last-child a:after { 
	border: 0; 
	background-color: transparent;
}
.CrumbList li a:hover { background: blue; color: white; }
.CrumbList li a:hover:after { border-left-color: blue!important; }

</style>
</head>
<body>
 	<div id="page-wrap">
		<ul class="CrumbList">
			<li><a href="https://www.benri.jp/">ホーム</a></li>
			<li><a href="https://www.benri.jp/calendar/">便利カレンダー</a></li>
			<li><a href="https://www.benri.jp/calendar/year">2017年</a></li>
			<li><a href="https://www.benri.jp/calendar/month">4月</a></li>
			<li><a href="#">月度カレンダー</a></li>
		</ul>
	</div>
</body>
</html>

以上、パンくずリストのメモでした。

♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。

2人

★ 当記事を閲覧の方は下記の【関連記事】も閲覧していました。

閲覧履歴(直近10件)

◎zanmai.netサイト記事の転載・複製（コピー）は、zanmai.netへのリンクであることを明記してください！
◎本記事URL: https://www.zanmai.net/blog/data/268.html

閉じる

技術三昧様

コメント@2017年04月12日

次のサイトに適用したいと考えている。

コメントする

CSSのみでのパンくずリストデザイン_ブログ_zanmai.net

※会員の方は認証コードを要らないから、新規登録をオススメ！