Mois : juin 2014

[Bootstrap][Dropdown] Menus déroulants multi-niveaux avec Bootstrap 3

Sources : Multilevel dropdown menus with Bootstrap 3.x.

A partir de la version 3.0 de Bootstrap, les menu-déroulants multi-niveaux ne sont plus supportés pour les barres de navigation. Ce bout de code jQuery empêche Bootstrap de switcher les classes « .open » une fois passé le 1er niveau de dropdown.


/**
  * NAME: Bootstrap 3 Triple Nested Sub-Menus
  * This script will active Triple level multi drop-down menus in Bootstrap 3.*
  */
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
    // Avoid following the href location when clicking
    event.preventDefault();
    // Avoid having the menu to close when clicking
    event.stopPropagation();
    // Re-add .open to parent sub-menu item
    $(this).parent().addClass('open');
    $(this).parent().find("ul").parent().find("li.dropdown").addClass('open');
});

Attention à bien respecter le markup Bootstrap :

  • la classe .dropdown sur les éléments parents des liens,
  • la classe .dropdown-toggle et l’attribut data-toggle= »dropdown » sur les liens,
  • les attributs role= »menu » aria-labelledby= »dLabel » sur les balises de listes imbriquées (ul)


<div class="dropdown">
  <a data-toggle="dropdown" href="#">Dropdown trigger</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li class="dropdown">
      <a data-toggle="dropdown" href="#">sous-niveau</a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
          ...
        </ul>
    </li>
  </ul>
</div>

[jQuery][Superfish] Activer/désactiver Superfish au redimensionnement de la fenêtre du navigateur

Superfish intègre une méthode destroy (depuis la version 1.7.3 au moins… à vérifier pour des versions antérieures mais dans le cas contraire, mettre à jour son plug-in) qu’on peut appeler en fonction de la largeur du viewport. La navigation peut ensuite être re-stylée via CSS et les mediaqueries.

Avec enquire.js

Sans enquire.js

Source : http://stackoverflow.com/questions/6748301/disable-superfish-on-resize-event

[CSS] Des tableaux responsives en full CSS

Ressources en ligne :

Deux exemples maison pour un tableau comparatif :

Tableau comparatif dont les éléments à comparer deviennent horizontalement scrollables en vue mobile

Simulation JSfiddle.net (avec code source propre), demo.

table-comparison-one_desktop-mobile

Tableau comparatif dont les éléments à comparer se désolidarisent pour s’empiler en vue mobile

Nouveau: une version plus flexible basée sur Flexbox (sources core). https://jsfiddle.net/frontenddeveloper/ay5v30p5/

…et la gueule de cette version Flexbox sous IE11:


Simulation JSfiddle.net (avec code source propre). Attention : la partie commentée du code CSS ne semble pas adaptée à notre exemple.

table2_desktop-mobile

En utilisant display: inline-block; sur les rangées et white-space: nowrap; sur le corps du tableau :

Source et simulation (Flip Scroll) : http://elvery.net/demo/responsive-tables/#flip-scroll.

Récupérer les hauteurs (en px) de chaque cellule d’en-tête, les stocker dans un tableau et les réattribuer aux cellules correspondantes dans le corps du tableau.

Version SASS de flip-scroll

Version SASS de No More Tables

Source : http://elvery.net/demo/responsive-tables/#no-more-tables.

Attention : ajouter un !important à td { padding-left: 50%; } si vous utilisez Twitter Bootstrap pour styler vos tableaux.

Ajout d’une classe .ignore à placer sur les <td /> qui ne doivent pas faire l’objet d’une transformation. La rangée du tableau transformé n’aura alors pas de libellé (en-tête).

En utilisant display: block; et les data attributes HTML5 :

Source : http://codepen.io/geoffyuen/pen/FCBEg.

Simulation : http://jsfiddle.net/frontenddeveloper/gf7R3/.

Mixin SASS