7 Approches Non Tramées de l'Icône de Menu “Hamburger”

Que vous aimiez ou non son appellation ridicule, l'icône de menu "Hamburger" est encore là pour un bon moment.

Dans ce tutoriel, nous allons examiner plusieurs façons de créer et styliser cette icône sans recourir aux images tramées. J'ai retenu 7 options, alors commençons sans plus attendre...

Pourquoi des images non tramées?

Il est tellement simple et rapide d'utiliser une image, pourquoi se compliquer la vie avec une approche différente ? Voici quelques raisons à cela, elles nous serviront à comparer l'intérêt de chacune des solutions potentielles :

• Charger moins de ressources réduit le nombre de requêtes HTTP
• Les icônes non tramées se redimensionnent à l'infini selon la densité de l'affichage
• Nous pouvons ajouter interactivité et style avec CSS
• C'est un beau défi !

#1. Utiliser SVG

Nous allons voir dans un instant comment créer l'icône de menu avec CSS, mais ma liste serait incomplète si je ne mentionnais pas les images SVG parmi les options envisageables.

Si l'écriture de code n'est pas votre fort, mais que vous avez besoin des avantages offerts par les images redimensionnables, notamment pour s'adapter aux affichages en haute-définition, les images vectorielles au format SVG sont un excellent choix.

Les SVG peuvent être utilisés de diverses manières :

SVG <img>

Un SVG peut être ajouté à l'attribut src d'une balise img comme vous le feriez avec n'importe quel autre format d'image.

1

<img src="path/to/menu-icon.svg" alt="menu icon" width="70" height="50">

SVG background-image

La même image SVG pourrait être utilisée comme background-image en CSS.

1

.menu-icon {

2

    width:70px;

3

    height:50px;

4

    background-image:url('path/to/menu-icon.svg');

5

}

Inline SVG

Le SVG peut également être intégré à votre code HTML au moyen d'XML. Si vous exportez un SVG à partir d'une application comme Adobe Illustrator et que vous l'ouvrez dans un éditeur de texte, vous pourrez voir à quoi ressemble le code sous-jacent.

Astuce: Si vous copiez un objet dans Illustrator et que vous le collez directement dans votre éditeur de texte, vous obtiendrez le code SVG de la même façon.

Même s'il peut paraître étrange à première vue de copier-coller ce XML dans votre page, en réalité cette approche vous permet de d'appliquer un style CSS aux éléments constitutifs du SVG.

1

svg line {

2

    stroke: white;

3

}

Super malin, non ?

Et pour une approche encore plus impressionnante, il est même possible d'animer votre SVG. Vous pouvez voir un superbe exemple d'animation d'icône de menu dans ce tutoriel fantastique de Kyle Henwood sur Réaliser un bouton Burger avec SVG.

Cette utilisation de SVG réduit le nombre de requêtes et permet une manipulation avec CSS lorsque votre SVG est intégré au code. Si vous utilisez SVG comme une balise img ou une background-image en CSS, le seul critère qui sera satisfait dans ma liste sera la possibilité de redimensionner l'image.

Nous pouvons faire mieux.

#2. Utiliser une Fonte Icône

La deuxième approche est d'utiliser une fonte icône.

Une fonte icône est une police de caractères comme une autre, que vous ajoutez via @font-face à ceci près qu'au lieu de contenir des lettres de l'alphabet, elle contient une série de symboles. On les ajoute souvent dans une page par l'intermédiaire de la propriété content d'un pseudo-élément :before ou :after afin de conserver un balisage propre et débarrassé des éléments de présentation.

Un de mes services préférés d'icônes fontes est Icomoon qui propose une bibliothèque de fontes icônes gratuites que vous pouvez sélectionner pour créer des icônes personnalisées.

Si vous voulez créer une police totalement personnalisée avec vos propres icônes, une fonctionnalité vous permet d'uploader vos images SVG grâce au bouton “Import Icons”. L'application génère la police et tout le code nécessaire pour utiliser votre police-maison, soit en téléchargeant les fichiers et CSS, soit en utilisant une balise link pour intégrer une version dans la partie head de votre page. J'ai souvent utilisé ce service dans mes projets professionnels et c'est un vrai plaisir !

Les fontes icônes sont redimensionnables (mais leur nature de caractères les rend sujettes à l'anti-crénelage) et peuvent être manipulées comme du texte dans CSS, cependant leur chargement nécessite des requêtes supplémentaires, pour les fichiers fontes et pour la feuille de style. C'est une bonne approche si vous avez des icônes complexes comme celles qui sont illustrées ci-dessus, mais notre icône de menu est si simple que nous pourrions sans doute la réaliser avec des fonctionnalités de CSS.

#3. Frameworks CSS

Les frameworks CSS comme ZURB Foundation ou Twitter Bootstrap sont très populaires, peut-être nous permettraient-elles de créer notre icône ?

Le JavaScript de Bootstrap réduit automatiquement les menus déroulants en les remplaçant par un bouton lorsque la fenêtre du navigateur est inférieure à 768px de large.

Si nous utilisons l'inspecteur web pour savoir comment est réalisée l'icône, voici ce que nous voyons :

Un élément button avec quatre éléments span à l'intérieur; trois d'entre eux sont utilisés pour réaliser les lignes horizontales de l'icône de menu tandis que le premier élément sert aux lecteurs d'écran uniquement, le texte "Toggle navigation" étant positionné hors écran.

Le CSS ajouté à chaque icon-bar définit une couleur de background pour chacune des barres ainsi que ses dimensions et des coins arrondis très subtils.

1

.navbar-default .navbar-toggle .icon-bar {

2

    background-color: #888;

3

}

4

.navbar-toggle .icon-bar {

5

    display: block;

6

    width: 22px;

7

    height: 2px;

8

    border-radius: 1px;

9

}

S'il est important pour vous d'avoir des coins arrondis sur chaque ligne horizontale, cette approche est l'une des quelques options CSS qui vous permettront d'obtenir cet effet.

Une autre avantage à faire de chaque ligne un élément distinct est la possibilité d'animer chacun entre l'état ouvert et l'état fermé. Vous trouverez un bel exemple de cet effet sur le tout nouveau Star Wars redesign (réduisez la taille de la fenêtre pour que la barre de navigation se réduise à un hamburger spatial).

J'ai été un peu surpris de découvrir qu'un framework aussi populaire utilisait cinq éléments distincts pour réaliser cet élément d'interface utilisateur relativement simple mais je suis sûr qu'ils ont une bonne raison de le faire. J'ai vu cette même approche utilisée ailleurs (sans Bootstrap), c'est donc certainement plus courant que ce que j'imaginais. Jetez un coup d'oeil à la source du site de Media Temple et vous constaterez qu'ils prennent la métaphore du hamburger au pied de la lettre, il ne manque que la classe ketchup !

1

<a href="#siteNav" class="hamburger js-menuLink" id="LuckyAnchor_518835807_2">

2

    <span class="hamburger-bun hamburger-bun--top"></span>

3

    <span class="hamburger-patty"></span>

4

    <span class="hamburger-bun hamburger-bun--btm"></span>

5

</a>

Si vous préférez conserver un balisage aussi propre que possible, nous avons encore quelques méthodes à voir. Elles n'utilisent qu'un seul élément...

#4. Bordures CSS

L'icône de menu typique est très simple en termes de design : juste trois lignes horizontales.

La première et la dernière ligne peuvent être obtenues avec border-top et border-bottom d'une balise d'ancrage définie avec display:inline-block. La ligne du milieu peut être ajoutée avec une bordure sur un pseudo-élément :before.

1

<a href="#" class="menu-icon border-icon">menu icon</a>

1

body {

2

    background:#196e76; /* Tuts+ Green */

3

}

4

.menu-icon {

5

    position:relative;

6

    display:inline-block;

7

    width:70px;

8

    text-indent:-999px;

9

}

10

11

.border-icon {

12

    height:30px;

13

    border-top:10px solid #fff;

14

    border-bottom:10px solid #fff;

15

}

16

17

.border-icon:before {

18

    content:"";

19

    position:absolute; 

20

    top:10px;

21

    left:0;

22

    width:100%;

23

    border-top:10px solid #fff;

24

}

Cette approche assure la meilleure compatibilité navigateurs. Les pseudo-éléments sont compatibles avec IE8 et au-dessus, et les bordures et le positionnement sont compatibles partout !

Cette méthode satisfait toutes nos exigences pour la réalisation d'icônes non tramées, il nous reste cependant encore quelques approches à voir avant de désigner un vainqueur.

#5. CSS Box Shadow

Si vous avez la chance de ne pas avoir à vous soucier de la compatibilité avec IE8, il reste encore quelques options intéressantes qui utilisent des fonctionnalités plus récentes de CSS. Si par exemple vous n'avez besoin de l'icône de menu que pour les terminaux mobiles, vous pourrez utiliser ces approches sans avoir à vous inquiéter de leur compatibilité avec les navigateurs fonctionnant au charbon...

L'une d'elles consiste à utiliser des déclarations box-shadow multiples sans flou afin de créer une série de lignes solides.

Pour vous assurer que l'icône a la bonne surface cliquable, la série d'ombres doit être ajoutée via un pseudo-élément, puis positionnée de façon à apparaître comme une couche placée sous l'élément a.

1

.shadow-icon {

2

    height:40px;

3

}

4

5

.shadow-icon:after {

6

    content:"";

7

    position:absolute;

8

    top:-50px;

9

    left:0;

10

    width:100%;

11

    height:100%;

12

    box-shadow: 0 10px 0 #fff,

13

                0 20px 0 #196e76,

14

                0 30px 0 #fff,

15

                0 40px 0 #196e76,

16

                0 50px 0 #fff;

17

}

Le seul inconvénient de cette approche est que l'icône devra être placée sur un background solide (p.ex. #196e76 pour le vert Tuts+) afin de pouvoir obtenir l'effet d'ombres rayées. J'ai utilisé #196e76 pour le vert Tuts+ dans cet exemple, mais il vous faudra utiliser ce qui correspondra à votre couleur de background.

Cette approche satisfait elle aussi à la liste des exigences, mais l'étape supplémentaire de positionnement du pseudo-élément pour amener la partie visible de l'icône sous la surface cliquable est une sorte de hack. Elle fonctionne bien, mais ce n'est pas la plus élégante des solutions.

#6. Dégradés CSS

La dernière approche CSS est la plus efficace. Avec un élément unique et sans avoir recours aux pseudo-éléments, nous pouvons réaliser un ensemble de lignes horizontales grâce à un dégradé linéaire comportant quelques stops couleur.

Dans le code qui suit je n'ai pas ajouté de préfixes, afin de ne pas nuire à la lisibilité. Pour générer les dégradés et obtenir les différents préfixes vendeurs, vous pouvez utiliser Colorzilla's CSS Gradient Generator.

1

.gradient-icon {

2

    height:50px;

3

    background:linear-gradient(to bottom, #fff 0%, #fff 20%, transparent 20%, transparent 40%, #fff 40%, #fff 60%, transparent 60%, transparent 80%, #fff 80%, #fff 100%);

4

}

Voici l'approche la plus simple et la plus flexible que nous ayons rencontré jusqu'à présent. Les autres sont un peu fragiles car si vous voulez modifier leur dimension ou leur positionnement, vous aurez besoin de modifier d'autres valeurs.

Le problème de la couleur de background derrière l'icône est également résolu en utilisant des stops couleur transparent entre les lignes blanches.

Cette approche en dégradé utilise des stops couleur déclarés en pourcentage, pour redimensionner l'icône il suffit donc de changer les propriétés width et height de l'élément.

Des trois approches CSS, celle-ci est ma favorite. Si je devais utiliser CSS pour créer mon icône, c'est l'option que je choisirais - et c'est d'ailleurs ce que j'ai fait dans mon site personnel. Mais avant de conclure, je voudrais encore vous montrer quelque chose...

#7. Utiliser le clavier ?

Je me suis amusé avec toutes ces options mais certaines sont plus adaptées que d'autres. La compatibilité navigateur et la flexibilité sont souvent des facteurs importants, donc si vous voulez utiliser l'une des solutions proposées, n'oubliez pas de prendre ces facteurs en compte.

Cependant, je suis tombé récemment sur une approche bien plus simple et bien plus facile, alors que je donnais un cours sur le web responsif.

Dans l'ensemble des caractères UTF-8, il en existe un qui est presque identique à une icône de menu "hamburger". Je l'ai trouvé par hasard en cherchant quelque chose de complètement différent dans la section des formes graphiques de Copy Paste Character.

Ce caractère spécial : ☰ est appelé le Trigramme du Ciel. Son caractère U+2630 en unicode est étonnament proche de notre icône de menu familière. Il s'agit de l'un des huit Trigammes, un groupe de symboles porteurs de significations profondes dans le système symbolique chinois du Yi Jing (livre des mutations). Pour plus d'information, vous pouvez consulter ces textes sur les huit Trigrammes ici (en français) ou ici (en anglais) .

Pour l'utiliser dans votre projet, allez sur Copy Paste Character et cliquez sur le symbole, ce qui le copiera sur votre presse-papier. Collez-le ensuite dans votre éditeur de texte, là où vous voulez voir apparaître votre "icône". Si vous préférez, vous pouvez aussi le copier-coller depuis cet article.

Assurez-vous que votre document utilise bien l'ensemble de caractères UTF-8 comme spécifié dans l'attribut meta dans la partie head de votre page :

1

<meta charset="utf-8">

Puisqu'il s'agit de contenu textuel, vous pouvez lui appliquer un style CSS pour l'agrandir, lui donner de l'espace, changer sa couleur, et tout ce que vous voudrez  !

Récap

Et voilà, nous avons vu de multiples façons de créer et ajouter une icône de menu hamburger dans un projet. Nous avons vu SVG, les fontes icônes et trois approches différentes utilisant CSS, mais en fin de compte nous avons trouvé la plus simple des solutions : un caractère unicode.

Le "Trigramme du Ciel" répond à toutes nos exigences, il ne demande aucune requête HTTP, il est indéfiniment redimensionnable, on peut le manipuler avec CSS et il est tellement simple qu'il libère notre créativité pour de nouveaux défis ! Il est toujours bon de trouver des solutions simples avant de s'attaquer aux problèmes les plus coriaces de CSS...

Si vous avez pensé à d'autres approches, je serais ravi de lire vos commentaires !