Блок фильтров товаров

Вот несколько примеров блоков фильтров

№1 Список фильтров в левом/правом меню сайта (отдельными блоками)

Посмотреть код html

<div class="el_asideBlock_xxxxxx">
	<div class="wrapperInner filterBlock">
		<p class="blockTitle">Название параметра</p>
		<div class="content filterList">
			<ul>
				<li><a class="item checked" href="#?pageNumber=1&orderType=1"><span><i class="fa fa-check-square" aria-hidden="true"></i> Значение параметра 1</span></a></li>
				<li><a class="item disable" href="javascript: void(0);"><span><i class="fa fa-ban"></i> Значение параметра 2</span></a></li>
				<li><a class="item" href="#?pageNumber=1&orderType=1"><span><i class="fa fa-square-o" aria-hidden="true"></i> Значение параметра 3 </span> <span class="offerAmount">(6)</span></a></li>
			</ul>
		</div>
	</div>
	<div class="wrapperInner filterBlock">
		<p class="blockTitle">Название параметра 2</p>
		<div class="content filterList">
			<ul>
				<li><a class="item checked" href="#?pageNumber=1&orderType=1"><span><i class="fa fa-check-square" aria-hidden="true"></i> Значение параметра 2.1</span></a></li>
				<li><a class="item disable" href="javascript: void(0);"><span><i class="fa fa-ban"></i> Значение параметра 2.2</span></a></li>
				<li><a class="item" href="#?pageNumber=1&orderType=1"><span><i class="fa fa-square-o" aria-hidden="true"></i> Значение параметра 2.3 </span> <span class="offerAmount">(15)</span></a></li>
			</ul>
		</div>
	</div>
	<div class="wrapperInner filterBlock">
		<p class="blockTitle">Название параметра 3</p>
		<div class="content filterList">
			<ul>
				<li><a class="item checked" href="#?pageNumber=1&orderType=1"><span><i class="fa fa-check-square" aria-hidden="true"></i> Значение параметра 3.1</span></a></li>
				<li><a class="item disable" href="javascript: void(0);"><span><i class="fa fa-ban"></i> Значение параметра 3.2</span></a></li>
				<li><a class="item" href="#?pageNumber=1&orderType=1"><span><i class="fa fa-square-o" aria-hidden="true"></i> Значение параметра 3.3 </span> <span class="offerAmount">(8)</span></a></li>
			</ul>
		</div>
	</div>
</div>

Посмотреть код css

.el_asideBlock_xxxxxx .filterBlock .filterList ul
{
}
.el_asideBlock_xxxxxx .filterBlock .filterList ul li
{
	border: none;
}
.el_asideBlock_xxxxxx .filterBlock .filterList ul li a
{
	display: block;
	position: relative;
	padding: 10px 15px 10px 10px;
	font-size: 1.4rem;
	color: #446A7E;
}
.el_asideBlock_xxxxxx .filterBlock .filterList ul li a.checked,
.el_asideBlock_xxxxxx .filterBlock .filterList ul li a:hover
{
	color: #2091C9;
}
.el_asideBlock_xxxxxx .filterBlock .filterList ul li a.disable
{
	opacity: 0.6;
	cursor: not-allowed;
}

№2 Список фильтров в левом/правом меню сайта (в одном блоке)

Посмотреть код html

<div class="el_asideBlock_xxxxxx">
	<div class="wrapperInner">
		<p class="blockTitle">Фильтры</p>
		<div class="filterBlock">
			<p class="filterBlockTitle">Название параметра</p>
			<div class="content filterList">
				<ul>
					<li><a class="item checked" href="#?pageNumber=1&orderType=1"><span><i class="fa fa-check-square" aria-hidden="true"></i> Значение параметра 1</span></a></li>
					<li><a class="item disable" href="javascript: void(0);"><span><i class="fa fa-ban"></i> Значение параметра 2</span></a></li>
					<li><a class="item" href="#?pageNumber=1&orderType=1"><span><i class="fa fa-square-o" aria-hidden="true"></i> Значение параметра 3 </span> <span class="offerAmount">(6)</span></a></li>
				</ul>
			</div>
		</div>
		<div class="filterBlock">
			<p class="filterBlockTitle">Название параметра 2</p>
			<div class="content filterList">
				<ul>
					<li><a class="item checked" href="#?pageNumber=1&orderType=1"><span><i class="fa fa-check-square" aria-hidden="true"></i> Значение параметра 2.1</span></a></li>
					<li><a class="item disable" href="javascript: void(0);"><span><i class="fa fa-ban"></i> Значение параметра 2.2</span></a></li>
					<li><a class="item" href="#?pageNumber=1&orderType=1"><span><i class="fa fa-square-o" aria-hidden="true"></i> Значение параметра 2.3 </span> <span class="offerAmount">(15)</span></a></li>
				</ul>
			</div>
		</div>
		<div class="filterBlock">
			<p class="filterBlockTitle">Название параметра 3</p>
			<div class="content filterList">
				<ul>
					<li><a class="item checked" href="#?pageNumber=1&orderType=1"><span><i class="fa fa-check-square" aria-hidden="true"></i> Значение параметра 3.1</span></a></li>
					<li><a class="item disable" href="javascript: void(0);"><span><i class="fa fa-ban"></i> Значение параметра 3.2</span></a></li>
					<li><a class="item" href="#?pageNumber=1&orderType=1"><span><i class="fa fa-square-o" aria-hidden="true"></i> Значение параметра 3.3 </span> <span class="offerAmount">(8)</span></a></li>
				</ul>
			</div>
		</div>
	</div>
</div>

Посмотреть код css

.el_asideBlock_xxxxxx .filterBlock .filterBlockTitle
{
	margin-top: 15px;
	padding: 10px 10px;
	font-size: 1.8rem;
	font-weight: bold;
}
.el_asideBlock_xxxxxx .filterBlock .filterList ul
{
}
.el_asideBlock_xxxxxx .filterBlock .filterList ul li
{
	border: none;
}
.el_asideBlock_xxxxxx .filterBlock .filterList ul li a
{
	display: block;
	position: relative;
	padding: 10px 15px 10px 10px;
	font-size: 1.4rem;
	color: #446A7E;
}
.el_asideBlock_xxxxxx .filterBlock .filterList ul li a.checked,
.el_asideBlock_xxxxxx .filterBlock .filterList ul li a:hover
{
	color: #2091C9;
}
.el_asideBlock_xxxxxx .filterBlock .filterList ul li a.disable
{
	opacity: 0.6;
	cursor: not-allowed;
}