Étiquette : menu

[Magento 2] Ajouter un lien de déconnexion dans le menu du dashboard compte client

08/06/2020 /

Ajouter le fichier Magento_Customer/layout/customer_account.xml dans le dossier de votre thème et y placer le code suivant:

[javaScript] Mettre en cache un sous-niveau de navigation pour éviter un crash du navigateur sous iOS (iPhone)

02/08/2018 /

Inspiration pour ce code:

Je pars d’un menu dont la structure HTML est la suivante (une liste imbriquée simple) : https://jsfiddle.net/xpvt214o/513005/.

Sous iPhone, le menu a visiblement trop d’entrées. En tout cas lorsqu’on l’affiche, le navigateur Safari crashe et recharge la page. J’ai remarqué au cours de mes tests qu’en supprimant le dernier sous-niveau d’arborescence (.level2 dans mon exemple), le navigateur ne crashait plus. J’ai donc mis en place un système de cache du dernier sous-niveau d’arborescence de mon menu.

Ce système consiste à mettre en cache dans un tableau javaScript array et à l’aide des méthodes .push() et .detach() (jQuery) tous les derniers sous-niveaux d’arborescence. Ils ne sont, de cette manière, plus présents dans le DOM lorsqu’on ouvre le menu qui se trouve ainsi beaucoup plus léger à manipuler.

A l’activation d’un sous-menu mis en cache, on le fait ré-apparaître dans le DOM en le sortant du tableau. On fait le lien entre la rubrique activée et la sous-rubrique correspondante via un système d’IDs:

On invoque la fonction searchStringInArray pour rechercher dans l’intégralité des entrées du tableau cachedMenuEntries l’information [*].context.id qui va matcher avec l’ID de la rubrique que nous venons d’activer:

Axes d’amélioration

  • Utiliser un tableau clé/valeur (key/value)

D’autres pistes si vous avez des crashes iOS

[jQuery][CSS][Internet Explorer] Bug de détection de la pseudo-classe :hover ou de l’événement mouseover sur une bordure CSS

06/09/2017 /

Problème:

Sous IE (Internet Explorer), j’ai un menu déroulant dropdown dont la partie déroulée (les sous-niveaux) se masque involontairement lorsqu’elle est survolée au passage de la souris.

Autrement dit, IE (même les versions les plus récentes) n’est pas capable de détecter une bordure CSS comme un élément « physique ». Dans le cas de mon menu, le sous-niveau est encadré par une bordure grise de 10px d’épaisseur. Lorsqu’on navigue à la souris et qu’on fait le chemin de l’entrée « Particuliers » vers le sous-menu correspondant (cf. capture ci-dessous), le curseur traverse la bordure ce qui a pour effet une perte de focus et une disparition prématurée de la partie déroulée. (La bordure incriminée est en noir dans ma capture – lorsque le curseur de la souris passe dessus, le sous-menu disparaît).

Solution:

Ne pas utiliser la propriété CSS border pour un habillage se trouvant sur le passage de la souris. 🙂
J’ai d’abord tenté (sans succès) de remplacer la border-top par une ombre interne avec la propriété CSS box-shadow et la valeur inset.

La solution qui fonctionne consiste à utiliser un dégradé CSS (gradient). On commence par générer son dégradé via un outil en ligne comme Ultimate CSS Gradient Generator par Colorzilla.

Le code CSS généré est le suivant:

Suivant les navigateurs qu’on souhaite supporter, on peut réduire le code à cette ligne (à condition d’utiliser un outil d’auto-prefixage CSS qui rajoute les -moz, -webkit, -o, -ms en fonction du scope de navigateurs et OS prédéfinis) :

Il reste ensuite à modifier cette ligne en fonction de notre besoin. Dans mon cas, remplacer par les bonnes couleurs et remplacer l’unité % par du px pour coller aux 10px de ma bordure:

[jQuery] Un mega-menu en dropdown en quelques lignes de code

09/05/2017 /

Astuce rarement (jamais?) aperçue dans les différents plugins que j’ai pu utiliser jusqu’à présent: au hover sur un élément du niveau principal, on supprime la classe .hidden sur le sous-menu correspondant. Pour détecter que le curseur de la souris sors du sous-menu, on place une div à 100% en largeur et en hauteur sous le menu via z-index. Ensuite, on ne se pose pas de question: à partir du moment où le curseur de la souris survole cette div, on masque tous les sous-menus.

[Ergonomie] Galerie de menus de navigation de sites e-commerce

13/01/2017 /

Target

Lowe’s

Nordstrom

Nordstrom’s Mobile E-Commerce UX : Navigation & Product Browsing · 4 Guidelines · Score: 97.2. “State of the Art” Performance.

Curry’s UK

Saint Maclou

[jQuery] Centrer horizontalement la partie déroulée d’un menu sur un libellé dont la largeur peut varier

25/05/2016 /

horizontally_centered_dropdown

TODO : gérer les limites droite/gauche de la page.

Markup HTML :

Code jQuery :

[RBS Change 3.x] Dans un template de menu, ajouter une classe avec valeur incrémentée sur un élément contenu dans une boucle.

16/12/2015 /

Admettons qu’on souhaite ajouter, dans une boucle, une classe de type color-x (où x correspond à une valeur qui doit s’incrémenter) sur un élément <li> qui se répète en fonction du nombre d’entrées disponibles dans notre menu. Exemple du résultat attendu :

Commencer par repérer la boucle dans laquelle se trouve l’élément qui se répète sur lequel nous souhaitons agir. Dans un menu Change, les boucles sont mises en place à l’aide de la condition tal:repeat. Exemple :

Dans note exemple, il est important de repérer ce qu’on souhaite répéter. Ici, il s’agit de la première information déclarée en arguments dans le tal:repeat à savoir entry.

Ensuite, repérer l’élément sur lequel on souhaite ajouter notre classe de type color-x et ajouter la valeur à incrémenter comme suit :

Note : on retrouve notre information entry au sein de la chaîne de caractère : ${repeat/entry/index}.