[パーツ]ページナビゲーション アクティブとホバーで丸い背景が出るページナビ

CSS HTML
 
 

アクティブとホバーで丸い背景が出るページナビ

アクティブとホバーで丸い背景が出るレスポンシブ対応のページナビデザインです。

browser:  65 11 20 
ニャン易度 
<nav class="cp_navi">
	<div class="cp_pagination">
		<a class="cp_pagenum prev" href="#">prev</a>
		<span aria-current="page" class="cp_pagenum current">1</span>
		<a class="cp_pagenum" href="#">2</a>
		<a class="cp_pagenum" href="#">3</a>
		<a class="cp_pagenum" href="#">4</a>
		<a class="cp_pagenum" href="#">5</a>
		<a class="cp_pagenum" href="#">6</a>
		<a class="cp_pagenum" href="#">7</a>
		<a class="cp_pagenum" href="#">8</a>
		<a class="cp_pagenum" href="#">9</a>
		<a class="cp_pagenum" href="#">10</a>
		<a class="cp_pagenum next" href="#">next</a>
	</div>
</nav>
nav.cp_navi *, nav.cp_navi *:after, nav.cp_navi *:before {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
nav.cp_navi a {
	text-decoration: none;
}
nav.cp_navi {
	margin: 2em 0;
	text-align: center;
}
.cp_navi .cp_pagination {
	display: inline-block;
	margin-top: 2em;
	padding: 0 0.5em;
}
.cp_navi .cp_pagenum {
	font-size: 1em;
	line-height: 50px;
	display: block;
	float: left;
	transition: 400ms ease;
	letter-spacing: 0.1em;
	color: #37474F;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	margin: auto .5em;
}
.cp_navi .cp_pagenum:hover,
.cp_navi .cp_pagenum.current {
	font-weight: bold;
	color: #ffffff;
	background-color: #EC407A;
	border-radius: 50%;
}
.cp_navi .cp_pagenum.prev:hover,
.cp_navi .cp_pagenum.next:hover {
	color: #EC407A;
	background-color: transparent;
	border-radius: 50%;
}
@media only screen and (max-width: 960px) {
	.cp_navi .cp_pagination {
		margin-top: 50px;
		padding: 0 10px;
	}
	.cp_navi .cp_pagenum {
	font-size: 0.8em;
	line-height: 25px;
	width: 45px;
	height: 25px;
	margin: auto .1em;
	border-radius: 0.3em;
}
	.cp_navi .cp_pagenum.prev,
	.cp_navi .cp_pagenum.next {
		padding: 0 25px 0 0;
	}
	.cp_navi .cp_pagenum:hover,
	.cp_navi .cp_pagenum.current {
		border-radius: 0.3em;
	}
	.cp_navi .cp_pagenum.prev:hover,
	.cp_navi .cp_pagenum.next:hover {
		border-radius: 0.3em;
	}
}
@media only screen and (min-width: 120px) and (max-width: 767px) {
	.cp_navi .cp_pagenum {
	display: none;
	border-radius: 0.3em;
	}
	.cp_navi .cp_pagenum:nth-of-type(2) {
	position: relative;
	padding-right: 20px;
	}
	.cp_navi .cp_pagenum:nth-of-type(2)::after {
	font-size: 1.2em;
	position: absolute;
	top: 0;
	left: 25px;
	content: '...';
	}
	.cp_navi .cp_pagenum:nth-child(-n+3),
	.cp_navi .cp_pagenum:nth-last-child(-n+3) {
		display: block;
	}
	.cp_navi .cp_pagenum:nth-last-child(-n+4) {
		padding: 0 5px;
	}
	.cp_navi .cp_pagenum:nth-last-child(-n+4)::after {
		content: none;
	}
	.cp_navi .cp_pagenum:hover,
	.cp_navi .cp_pagenum.current {
		border-radius: 0.3em;
	}
	.cp_navi .cp_pagenum.prev:hover,
	.cp_navi .cp_pagenum.next:hover {
		border-radius: 0.3em;
	}
}

copypet.jp

CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか?