Material Design
Sidebar
Filtre
Catalogue
Chips
Slider
Elevation
Responsive
Html
Snippet
Sidebar filtre Material Design avec chips de sélection, sliders MD, effets d'élévation et animations Material pour catalogues e-commerce.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="AngularForAll" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="public, max-age=604800" />
<title>Snippets Sidebarfilter Materiel 2026 05011530 | AngularForAll</title>
<!-- Material Design Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/mdb-ui-kit@7.1.0/css/mdb.min.css" rel="stylesheet">
<!-- Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body style="font-family: 'Roboto', sans-serif; background-color: #f5f5f5;">
<div class="container-fluid">
<div class="row">
<!-- Sidebar Filter - Desktop -->
<div class="col-lg-3 d-none d-lg-block">
<div class="card shadow-3 mt-4 sticky-top" style="top: 1rem;">
<div class="card-header bg-primary text-white d-flex justify-content-between align-items-center py-3">
<h5 class="mb-0">
<span class="material-icons align-middle me-2">filter_alt</span>
Filtres
</h5>
<button class="btn btn-outline-light btn-sm btn-floating" id="clearAllMD">
<span class="material-icons">clear_all</span>
</button>
</div>
<div class="card-body p-0">
<!-- Active Filters -->
<div class="p-3 border-bottom" id="activeFiltersMD">
<div class="d-flex flex-wrap gap-2" id="activeFilterChipsMD"></div>
</div>
<!-- Categories -->
<div class="p-3 border-bottom">
<h6 class="fw-bold mb-3 text-uppercase text-muted small">
<span class="material-icons align-middle me-1" style="font-size: 18px;">category</span>
Catégories
</h6>
<div class="list-group list-group-light">
<button class="list-group-item list-group-item-action active d-flex justify-content-between align-items-center" data-category="all">
Tout
<span class="badge badge-primary rounded-pill">120</span>
</button>
<button class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-category="electronics">
Électronique
<span class="badge badge-secondary rounded-pill">34</span>
</button>
<button class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-category="clothing">
Vêtements
<span class="badge badge-secondary rounded-pill">28</span>
</button>
<button class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-category="home">
Maison
<span class="badge badge-secondary rounded-pill">22</span>
</button>
<button class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" data-category="sports">
Sports
<span class="badge badge-secondary rounded-pill">18</span>
</button>
</div>
</div>
<!-- Price Range -->
<div class="p-3 border-bottom">
<h6 class="fw-bold mb-3 text-uppercase text-muted small">
<span class="material-icons align-middle me-1" style="font-size: 18px;">euro</span>
Prix
</h6>
<div class="row g-2 align-items-center mb-3">
<div class="col-5">
<div class="form-outline" data-mdb-input-init>
<input type="number" id="priceMinMD" class="form-control form-control-sm" value="0">
<label class="form-label" for="priceMinMD">Min</label>
</div>
</div>
<div class="col-2 text-center">—</div>
<div class="col-5">
<div class="form-outline" data-mdb-input-init>
<input type="number" id="priceMaxMD" class="form-control form-control-sm" value="1000">
<label class="form-label" for="priceMaxMD">Max</label>
</div>
</div>
</div>
<button class="btn btn-primary btn-sm w-100" onclick="applyPriceMD()">
<span class="material-icons align-middle me-1" style="font-size: 16px;">check</span>
Appliquer
</button>
</div>
<!-- Ratings -->
<div class="p-3 border-bottom">
<h6 class="fw-bold mb-3 text-uppercase text-muted small">
<span class="material-icons align-middle me-1" style="font-size: 18px;">star</span>
Notes
</h6>
<div class="form-check mb-2">
<input class="form-check-input rating-checkbox-md" type="checkbox" value="4" id="rating4MD">
<label class="form-check-label" for="rating4MD">
<span class="text-warning">★★★★</span>☆ & plus
</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input rating-checkbox-md" type="checkbox" value="3" id="rating3MD">
<label class="form-check-label" for="rating3MD">
<span class="text-warning">★★★</span>☆☆ & plus
</label>
</div>
<div class="form-check">
<input class="form-check-input rating-checkbox-md" type="checkbox" value="2" id="rating2MD">
<label class="form-check-label" for="rating2MD">
<span class="text-warning">★★</span>☆☆☆ & plus
</label>
</div>
</div>
<!-- Colors -->
<div class="p-3 border-bottom">
<h6 class="fw-bold mb-3 text-uppercase text-muted small">
<span class="material-icons align-middle me-1" style="font-size: 18px;">palette</span>
Couleurs
</h6>
<div class="d-flex flex-wrap gap-2">
<button class="btn btn-dark btn-floating btn-sm color-md-btn" data-color="noir" title="Noir"></button>
<button class="btn btn-light btn-floating btn-sm color-md-btn border" data-color="blanc" title="Blanc"></button>
<button class="btn btn-danger btn-floating btn-sm color-md-btn" data-color="rouge" title="Rouge"></button>
<button class="btn btn-primary btn-floating btn-sm color-md-btn" data-color="bleu" title="Bleu"></button>
<button class="btn btn-success btn-floating btn-sm color-md-btn" data-color="vert" title="Vert"></button>
<button class="btn btn-warning btn-floating btn-sm color-md-btn" data-color="jaune" title="Jaune"></button>
<button class="btn btn-secondary btn-floating btn-sm color-md-btn" data-color="violet" title="Violet" style="background-color: #7c3aed;"></button>
</div>
</div>
<!-- Sizes -->
<div class="p-3 border-bottom">
<h6 class="fw-bold mb-3 text-uppercase text-muted small">
<span class="material-icons align-middle me-1" style="font-size: 18px;">straighten</span>
Tailles
</h6>
<div class="d-flex flex-wrap gap-2">
<button class="btn btn-outline-secondary btn-sm size-md-btn" data-size="XS">XS</button>
<button class="btn btn-outline-secondary btn-sm size-md-btn" data-size="S">S</button>
<button class="btn btn-primary btn-sm size-md-btn" data-size="M">M</button>
<button class="btn btn-outline-secondary btn-sm size-md-btn" data-size="L">L</button>
<button class="btn btn-outline-secondary btn-sm size-md-btn" data-size="XL">XL</button>
<button class="btn btn-outline-secondary btn-sm size-md-btn" data-size="XXL" disabled>XXL</button>
</div>
</div>
<!-- Brands -->
<div class="p-3">
<h6 class="fw-bold mb-3 text-uppercase text-muted small">
<span class="material-icons align-middle me-1" style="font-size: 18px;">sell</span>
Marques
</h6>
<div class="form-outline mb-3" data-mdb-input-init>
<input type="search" id="brandSearchMD" class="form-control form-control-sm" oninput="searchBrandsMD(this.value)">
<label class="form-label" for="brandSearchMD">Rechercher...</label>
</div>
<div id="brandListMD">
<div class="form-check mb-1">
<input class="form-check-input brand-checkbox-md" type="checkbox" value="apple" id="appleMD">
<label class="form-check-label" for="appleMD">Apple</label>
</div>
<div class="form-check mb-1">
<input class="form-check-input brand-checkbox-md" type="checkbox" value="samsung" id="samsungMD">
<label class="form-check-label" for="samsungMD">Samsung</label>
</div>
<div class="form-check mb-1">
<input class="form-check-input brand-checkbox-md" type="checkbox" value="nike" id="nikeMD">
<label class="form-check-label" for="nikeMD">Nike</label>
</div>
<div class="form-check mb-1">
<input class="form-check-input brand-checkbox-md" type="checkbox" value="adidas" id="adidasMD">
<label class="form-check-label" for="adidasMD">Adidas</label>
</div>
<div class="form-check">
<input class="form-check-input brand-checkbox-md" type="checkbox" value="sony" id="sonyMD">
<label class="form-check-label" for="sonyMD">Sony</label>
</div>
</div>
</div>
</div>
<div class="card-footer bg-white">
<button class="btn btn-primary btn-lg w-100 shadow-0" id="applyAllMD">
<span class="material-icons align-middle me-1">filter_alt</span>
Appliquer les filtres
</button>
</div>
</div>
</div>
<!-- Mobile FAB -->
<div class="d-lg-none position-fixed bottom-0 start-0 end-0 p-3" style="z-index: 1030;">
<button class="btn btn-primary btn-lg w-100 shadow-3" type="button" data-mdb-toggle="modal" data-mdb-target="#filterModalMD">
<span class="material-icons align-middle me-2">filter_alt</span>
Filtres
<span class="badge bg-white text-primary ms-2 rounded-pill" id="mobileFilterCountMD">3</span>
</button>
</div>
<!-- Mobile Filter Modal -->
<div class="modal fade" id="filterModalMD" tabindex="-1">
<div class="modal-dialog modal-fullscreen-md-down modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header bg-primary text-white">
<h5 class="modal-title">
<span class="material-icons align-middle me-2">filter_alt</span>
Filtres
</h5>
<button class="btn btn-outline-light btn-sm btn-floating me-2" id="clearAllMobileMD">
<span class="material-icons">clear_all</span>
</button>
<button type="button" class="btn-close btn-close-white" data-mdb-dismiss="modal" aria-label="Fermer"></button>
</div>
<div class="modal-body p-0">
<!-- Same content structure for mobile -->
<div class="p-3 border-bottom">
<div class="d-flex flex-wrap gap-2" id="activeFilterChipsMobileMD"></div>
</div>
<!-- Categories -->
<div class="p-3 border-bottom">
<h6 class="fw-bold mb-3 text-uppercase text-muted small">Catégories</h6>
<div class="list-group list-group-light">
<button class="list-group-item list-group-item-action active d-flex justify-content-between" data-category="all">Tout <span class="badge badge-primary rounded-pill">120</span></button>
<button class="list-group-item list-group-item-action d-flex justify-content-between" data-category="electronics">Électronique <span class="badge badge-secondary rounded-pill">34</span></button>
<button class="list-group-item list-group-item-action d-flex justify-content-between" data-category="clothing">Vêtements <span class="badge badge-secondary rounded-pill">28</span></button>
<button class="list-group-item list-group-item-action d-flex justify-content-between" data-category="home">Maison <span class="badge badge-secondary rounded-pill">22</span></button>
<button class="list-group-item list-group-item-action d-flex justify-content-between" data-category="sports">Sports <span class="badge badge-secondary rounded-pill">18</span></button>
</div>
</div>
<!-- Price, Ratings, Colors, Sizes, Brands (similar structure) -->
<!-- ... (abbreviated for brevity) ... -->
</div>
<div class="modal-footer">
<button class="btn btn-primary w-100" data-mdb-dismiss="modal">
<span class="material-icons align-middle me-1">check</span>
Appliquer
</button>
</div>
</div>
</div>
</div>
<!-- Main Content -->
<div class="col-lg-9">
<div class="py-4">
<h1 class="mb-2">Produits</h1>
<p class="text-muted mb-4">
<span id="resultsCountMD">120</span> résultats trouvés
</p>
<!-- Loading -->
<div class="d-flex justify-content-center py-5 d-none" id="loadingMD">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Chargement...</span>
</div>
</div>
<!-- Products -->
<div class="card shadow-2">
<div class="card-body text-center py-5 text-muted">
<span class="material-icons d-block mb-3" style="font-size: 64px;">arrow_back</span>
<h5>Utilisez les filtres</h5>
<p>Les filtres sont disponibles dans la barre latérale (desktop) ou via le bouton Filtres (mobile)</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- MDB JS -->
<script src="https://cdn.jsdelivr.net/npm/mdb-ui-kit@7.1.0/js/mdb.umd.min.js"></script>
<script>
const stateMD = {
categories: ['all'],
priceMin: 0,
priceMax: 1000,
ratings: [],
colors: [],
sizes: ['M'],
brands: []
};
// Categories
document.querySelectorAll('.list-group-item').forEach(btn => {
btn.addEventListener('click', function() {
const parent = this.parentElement;
parent.querySelectorAll('.list-group-item').forEach(b => b.classList.remove('active'));
this.classList.add('active');
stateMD.categories = [this.dataset.category];
updateMD();
});
});
// Price
function applyPriceMD() {
stateMD.priceMin = parseFloat(document.getElementById('priceMinMD').value) || 0;
stateMD.priceMax = parseFloat(document.getElementById('priceMaxMD').value) || 1000;
updateMD();
}
// Ratings
document.querySelectorAll('.rating-checkbox-md').forEach(cb => {
cb.addEventListener('change', () => {
stateMD.ratings = Array.from(document.querySelectorAll('.rating-checkbox-md:checked'))
.map(input => parseInt(input.value));
updateMD();
});
});
// Colors
document.querySelectorAll('.color-md-btn').forEach(btn => {
btn.addEventListener('click', function() {
this.classList.toggle('active');
const color = this.dataset.color;
if (this.classList.contains('active')) {
if (!stateMD.colors.includes(color)) stateMD.colors.push(color);
} else {
stateMD.colors = stateMD.colors.filter(c => c !== color);
}
updateMD();
});
});
// Sizes
document.querySelectorAll('.size-md-btn:not([disabled])').forEach(btn => {
btn.addEventListener('click', function() {
const size = this.dataset.size;
if (this.classList.contains('btn-primary')) {
this.classList.replace('btn-primary', 'btn-outline-secondary');
stateMD.sizes = stateMD.sizes.filter(s => s !== size);
} else {
this.classList.replace('btn-outline-secondary', 'btn-primary');
if (!stateMD.sizes.includes(size)) stateMD.sizes.push(size);
}
updateMD();
});
});
// Brands
document.querySelectorAll('.brand-checkbox-md').forEach(cb => {
cb.addEventListener('change', () => {
stateMD.brands = Array.from(document.querySelectorAll('.brand-checkbox-md:checked'))
.map(input => input.value);
updateMD();
});
});
function searchBrandsMD(query) {
document.querySelectorAll('#brandListMD .form-check').forEach(check => {
const text = check.textContent.toLowerCase();
check.style.display = text.includes(query.toLowerCase()) ? 'block' : 'none';
});
}
// Clear all
document.getElementById('clearAllMD').addEventListener('click', () => {
resetAllMD();
});
document.getElementById('clearAllMobileMD')?.addEventListener('click', () => {
resetAllMD();
});
function resetAllMD() {
stateMD.categories = ['all'];
stateMD.priceMin = 0;
stateMD.priceMax = 1000;
stateMD.ratings = [];
stateMD.colors = [];
stateMD.sizes = ['M'];
stateMD.brands = [];
document.querySelectorAll('.list-group-item').forEach(b => b.classList.remove('active'));
document.querySelector('[data-category="all"]').classList.add('active');
document.getElementById('priceMinMD').value = 0;
document.getElementById('priceMaxMD').value = 1000;
document.querySelectorAll('.rating-checkbox-md').forEach(cb => cb.checked = false);
document.querySelectorAll('.color-md-btn').forEach(btn => btn.classList.remove('active'));
document.querySelectorAll('.size-md-btn').forEach(btn => {
if (btn.dataset.size === 'M') btn.classList.replace('btn-outline-secondary', 'btn-primary');
else btn.classList.replace('btn-primary', 'btn-outline-secondary');
});
document.querySelectorAll('.brand-checkbox-md').forEach(cb => cb.checked = false);
updateMD();
}
function updateMD() {
const spinner = document.getElementById('loadingMD');
spinner.classList.remove('d-none');
setTimeout(() => {
spinner.classList.add('d-none');
const count = Math.floor(Math.random() * 50) + 10;
document.getElementById('resultsCountMD').textContent = count;
// Update mobile badge
const mobileCount =
(stateMD.categories[0] !== 'all' ? 1 : 0) +
(stateMD.priceMin > 0 || stateMD.priceMax < 1000 ? 1 : 0) +
stateMD.ratings.length +
stateMD.colors.length +
stateMD.sizes.length +
stateMD.brands.length;
document.getElementById('mobileFilterCountMD').textContent = mobileCount || '0';
}, 400);
}
document.getElementById('applyAllMD').addEventListener('click', updateMD);
</script>
</body>
</html>
Télécharger le fichier source