Markup HTML de départ:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<ul> <li> <ul class="cd-secondary-dropdown"> <li class="col-0"></li> <li class="col-0"></li> <li class="col-1"></li> <li class="col-1"></li> <li class="col-1"></li> <li class="col-2"></li> <li class="col-3"></li> <li class="col-3"></li> <li class="col-3"></li> </ul> </li> [...] </ul> |
En partant de là, impossible d’obtenir un colonage correct en utilisant uniquement CSS (ou alors soit avec Grid Layout mais on doit, entre autres, supporter IE-11 soit avec du positionnement absolu calculé au poil de cul près et c’est un contenu dynamique…).
Il faut donc modifier le markup en rajoutant des niveaux d’imbrication dans nos listes. Problème: c’est un menu Responsive et c’est ce markup qui est utilisé pour afficher l’aspect Smartphone. On ne peut pas le modifier « en dur ».
Markup HTML d’arrivée souhaité:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<ul> <li> <ul class="cd-secondary-dropdown"> <li class="custom-cols custom-cols-4"> <ul class="custom-col"> <li class="col-0"></li> <li class="col-0"></li> </ul> <ul class="custom-col"> <li class="col-1"></li> <li class="col-1"></li> <li class="col-1"></li> </ul> <ul class="custom-col"> <li class="col-2"></li> </ul> <ul class="custom-col"> <li class="col-3"></li> <li class="col-3"></li> <li class="col-3"></li> </ul> </li> </ul> </li> [...] </ul> |
jQuery:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
// Pour chaque Univers... $('.cd-secondary-dropdown').each(function(){ var $this = $(this); var $col = $this.find('li[class*="col-"]'); // Nombre total de colonnes par Univers (siège auto, poussettes et ballade, etc ...) var columnsAmount = parseInt(($col.last().attr('class').replace(/\D/g,'')), 10); // Stocker les classes de chaque <li class="col-*"> dans un tableau var classesNames = []; $col.each(function(){ var attrClass = $(this).attr('class'); classesNames.push(attrClass); }); // Parmi les classes stockées, supprimer les doublons var uniqueClassesNames = []; $.each(classesNames, function(i, el){ if($.inArray(el, uniqueClassesNames) === -1) uniqueClassesNames.push(el); }); // Rassembler tous les <li> ayant des classes strictement similaires dans des <ul> $.each(uniqueClassesNames, function(index, value) { $this.find('li[class="' + value + '"]').wrapAll('<ul class="custom-col" />'); }); // Rassembler tous les nouveaux <ul> dans un <li> unique ayant une classe qui nous renseigne sur le nombre de colonnes à afficher $this.find('.custom-col').wrapAll('<li class="custom-cols custom-cols-'+ (columnsAmount +1) +'" />'); }); |
Notes: axes d’amélioration de ce code:
Pas besoin du. On a besoin de la valeur en tant que nombre entier pour effectuer le calcul de la dernière ligne de ce codeparseIntdansvar columnsAmount.wrapAll('<li class="custom-cols custom-cols-'+ (columnsAmount +1) +'" />').- Probablement un moyen de supprimer les doublons immédiatement en renseignant le 1er tableau (pas besoin de 2 tableaux)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// Pour chaque Univers... $('.cd-secondary-dropdown').each(function(){ var $this = $(this); var $col = $this.find('li[class*="col-"]'); // Nombre total de colonnes par Univers (siège auto, poussettes et ballade, etc ...) var columnsAmount = parseInt(($col.last().attr('class').replace(/\D/g,'')), 10); // Stocker les classes de chaque <li class="col-*"> dans un tableau (en supprimant immédiatement les doublons) var classesNames = []; $col.each(function(){ var attrClass = $(this).attr('class'); if($.inArray(attrClass, classesNames) === -1) classesNames.push(attrClass); }); // Rassembler tous les <li> ayant des classes strictement similaires dans des <ul> $.each(classesNames, function(index, value) { $this.find('li[class="' + value + '"]').wrapAll('<ul class="custom-col" />'); }); // Rassembler tous les nouveaux <ul> dans un <li> unique ayant une classe qui nous renseigne sur le nombre de colonnes à afficher $this.find('.custom-col').wrapAll('<li class="custom-cols custom-cols-'+ (columnsAmount +1) +'" />'); }); |
LESS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
.cd-secondary-dropdown { padding: 20px 20px 0 0; .custom-cols { .custom-col { float: left; padding-left: 20px; } &-1 { .custom-col { width: 100%; } } &-2 { .custom-col { width: 50%; } } &-3 { .custom-col { width: 33.33333%; } } &-4 { .custom-col { width: 25%; } } &-5 { .custom-col { width: 20%; } } &-6 { .custom-col { width: 16.66666%; } } } } |